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,40 +91,47 @@
 
   <h2>
     <script>
-      document.write(`Welcome to Electron (v${process.versions.electron})`)
+      document.write(`Welcome to Electron ${process.versions.electron}`)
     </script>
   </h2>
 
-  <p>
-  To run your app with Electron, execute the following command under your
-  Console (or Terminal):
-  </p>
+  <div class="container">
 
-  <script>document.write('<pre>' + command + '</pre>')</script>
+    <p>
+    To run your app with Electron, execute the following command in your
+    Console (or Terminal):
+    </p>
 
-  <p>
-  The <code>path-to-your-app</code> should be the path to your own Electron
-  app, 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>`
-    );
-  </script>
-  guide in Electron's
-  <script>
-    document.write(
-      `<a href='https://github.com/atom/electron/tree/v${process.versions.electron}/docs#readme'>docs</a>`
-    );
-  </script>
-  on how to write one.
-  </p>
+    <script>document.write('<pre>' + command + '</pre>')</script>
 
-  <p>
-  Or you can just drag your app here to run it:
-  </p>
+    <p>
+    The <code>path-to-your-app</code> should be the path to your own Electron
+    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>`
+      );
+    </script>
+    guide in Electron's
+    <script>
+      document.write(
+        `<a href='https://github.com/atom/electron/tree/v${process.versions.electron}/docs#readme'>docs</a>`
+      );
+    </script>
+    to learn how to write one.
+    </p>
+
+    <p>
+    Or you can just drag your app here to run it:
+    </p>
+
+    <div id="holder">
+      Drag your app here to run it
+    </div>
 
-  <div id="holder">
-    Drag your app here to run it
   </div>
 
   <script>