Merge pull request #4524 from atom/update-default-app-styles

Match default app styles to website styles

atom/browser/default_app/index.html

@@ -3,31 +3,39 @@
   <title>Electron</title>
   <style>
     body {
-      color: #555;
-      font-family: 'Open Sans',Helvetica,Arial,sans-serif;
-      padding: 30px;
+      color: #45828E;
+      background-color: #A5ECFA;
+      font-family: 'Helvetica Neue', 'Open Sans', Helvetica, Arial, sans-serif;
+      padding: 0;
+      margin: 0;
+    }
+
+    .container {
+      padding: 15px 30px;
     }
 
     h2 {
-      color: #2b6cc2;
-      font-family: "Crimson Text",Georgia,serif;
+      background-color: #76C7D7;
+      color: #FAF7F3;
       font-weight: 400;
-      line-height: 1.1;
-      letter-spacing: -0.015em;
+      padding: 15px 30px;
+      margin: 0;
     }
 
     a {
-      color: #2b6cc2;
+      color: #39AEC6;
       text-decoration: none;
     }
+
     a:hover {
       text-decoration: underline;
     }
 
     pre, code {
       font-family: "Menlo","Lucida Console",monospace;
-      border: 1px solid #ddd;
-      background-color: #f8f8f8;
+      border: 1px solid #076274;
+      background-color: #076274;
+      color: #C5F3FC;
       border-radius: 3px;
     }
 
@@ -39,19 +47,24 @@
       padding: 6px 10px;
     }
 
+    code {
+      padding: 1px 4px 1px 4px;
+      font-size: 13px;
+    }
+
     #holder {
-      border: 4px dashed #ccc;
+      border: 2px dashed #448691;
       margin: 0 auto;
       height: 300px;
-      color: #ccc;
+      color: #45828E;
       font-size: 40px;
       line-height: 300px;
       text-align: center;
       -webkit-user-select: none;
     }
+
     #holder.hover {
-      border: 4px dashed #999;
-      color: #eee;
+      background-color: #7BDCEF;
     }
   </style>
 </head>
@@ -78,12 +91,14 @@
 
   <h2>
     <script>
-      document.write(`Welcome to Electron (v${process.versions.electron})`)
+      document.write(`Welcome to Electron ${process.versions.electron}`)
     </script>
   </h2>
 
+  <div class="container">
+
     <p>
-  To run your app with Electron, execute the following command under your
+    To run your app with Electron, execute the following command in your
     Console (or Terminal):
     </p>
 
@@ -91,7 +106,10 @@
 
     <p>
     The <code>path-to-your-app</code> should be the path to your own Electron
-  app, you can read the
+    app.
+    </p>
+
+    <p>You can read the
     <script>
       document.write(
         `<a href='https://github.com/atom/electron/blob/v${process.versions.electron}/docs/tutorial/quick-start.md'>quick start</a>`
@@ -103,7 +121,7 @@
         `<a href='https://github.com/atom/electron/tree/v${process.versions.electron}/docs#readme'>docs</a>`
       );
     </script>
-  on how to write one.
+    to learn how to write one.
     </p>
 
     <p>
@@ -114,6 +132,8 @@
       Drag your app here to run it
     </div>
 
+  </div>
+
   <script>
     var holder = document.getElementById('holder');
     holder.ondragover = function () {