Bug 1412504 - about:devtools ui fixes; draft
authorJulian Descottes <jdescottes@mozilla.com>
Sat, 11 Nov 2017 10:28:22 +0100
changeset 696761 fbba035bc75318c7fe651c2d6a4cb782d16f7297
parent 696686 933f9cd9b3b9030399a11c19cb4e5117b29e2772
child 739920 62bef351da4a69709d8d9913cac8a1cedac68a04
push id88783
push userjdescottes@mozilla.com
push dateSat, 11 Nov 2017 09:29:57 +0000
bugs1412504
milestone58.0a1
Bug 1412504 - about:devtools ui fixes; MozReview-Commit-ID: BjCimCRFYWr
devtools/shim/aboutdevtools/aboutdevtools.css
devtools/shim/aboutdevtools/aboutdevtools.xhtml
devtools/shim/aboutdevtools/subscribe.css
--- a/devtools/shim/aboutdevtools/aboutdevtools.css
+++ b/devtools/shim/aboutdevtools/aboutdevtools.css
@@ -1,25 +1,26 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 :root {
   /* Photon color variables used on the aboutdevtools page */
+  --blue-50: #0a84ff;
+  --blue-50-alpha15: rgba(10, 132, 255, 0.15);
   --blue-60: #0060df;
   --blue-70: #003eaa;
   --blue-80: #002275;
   --grey-30: #d7d7db;
   --grey-90: #0c0c0d;
   --grey-90-alpha-10: rgba(12, 12, 13, 0.1);
   --grey-90-alpha-20: rgba(12, 12, 13, 0.2);
   --grey-90-alpha-30: rgba(12, 12, 13, 0.3);
   --grey-90-alpha-40: rgba(12, 12, 13, 0.4);
   --grey-90-alpha-50: rgba(12, 12, 13, 0.5);
-  --teal-60: #00c8d7;
   --red-50: #ff0039;
   --white: #ffffff;
 
   /* Shared variables */
   --line-height: 1.5em;
 }
 
 html, body {
@@ -31,17 +32,24 @@ p {
   line-height: var(--line-height);
 }
 
 .box {
   width: 100%;
   max-width: 850px;
   display: flex;
   flex-shrink: 0;
-  padding: 34px 0 50px 0;
+}
+
+#install-page .box {
+  padding: 17% 0 50px 0;
+}
+
+#welcome-page .box {
+  padding: 50px 0;
 }
 
 .wrapper {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -88,16 +96,17 @@ p {
 }
 
 .feature-desc {
   margin: 1em 20px;
 }
 
 .feature-link {
   display: block;
+  margin-top: 10px;
 }
 
 .external,
 .external:hover,
 .external:visited,
 .external:hover:active {
   color: var(--blue-60);
 }
@@ -124,16 +133,17 @@ p {
   font-weight: 300;
   font-size: 32px;
   margin-top: 16px;
   line-height: 44px;
 }
 
 .buttons-container {
   display: flex;
+  margin-top: 5px;
 }
 
 .buttons-container button:not(:last-child) {
   margin-right: 10px;
 }
 
 button {
   margin: 20px 0 0 0;
@@ -190,16 +200,17 @@ button::-moz-focus-inner {
 
 footer {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   min-height: 300px;
   flex-grow: 1;
+  padding-bottom: 15px;
   color: var(--white);
   background: linear-gradient(0, var(--blue-60), var(--blue-80));
 }
 
 .dev-edition-logo {
   flex-shrink: 0;
   width: 165px;
   margin: 20px 50px 0 0;
--- a/devtools/shim/aboutdevtools/aboutdevtools.xhtml
+++ b/devtools/shim/aboutdevtools/aboutdevtools.xhtml
@@ -70,17 +70,17 @@
 
             <section id="newsletter-privacy" class="newsletter-form-section">
               <input type="checkbox" id="privacy" name="privacy" required="true" />
               <label for="privacy">&aboutDevtools.newsletter.privacy.label;</label>
             </section>
             <button type="submit" id="newsletter-submit" class="primary-button">&aboutDevtools.newsletter.subscribeButton;</button>
           </form>
           <div id="newsletter-thanks">
-            <h2>&aboutDevtools.newsletter.thanks.title;</h2>
+            <h2 class="newsletter-title">&aboutDevtools.newsletter.thanks.title;</h2>
             <p>&aboutDevtools.newsletter.thanks.message;</p>
           </div>
         </div>
       </div>
     </div>
 
     <div class="features">
       <ul class="features-list">
--- a/devtools/shim/aboutdevtools/subscribe.css
+++ b/devtools/shim/aboutdevtools/subscribe.css
@@ -2,16 +2,23 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /**
  * This file contains the styles for the newsletter subscription form on about:devtools.
  * It is largely inspired from https://mozilla.github.io/basket-example/
  */
 
+.newsletter-title {
+  font-size: 17px;
+  font-weight: 500;
+  margin-top: 26px;
+  margin-bottom: -4px;
+}
+
 #newsletter-errors {
   /* Hidden by default */
   display: none;
 
   margin-bottom: 20px;
   padding: 10px;
   border-radius: 2px;
 
@@ -47,54 +54,57 @@
   width: 320px;
 }
 
 #newsletter-privacy {
   display: flex;
 
   /* The privacy section is hidden by default and only displayed on focus */
   height: 0;
-  margin-bottom: -20px;
   overflow: hidden;
+
+  padding: 3px 0 0 3px;
+  margin: -3px 0 -20px -3px;
 }
 
 #newsletter-privacy.animate {
   transition: all 0.25s cubic-bezier(.15,.75,.35,.9);
 }
 
 #newsletter-privacy label {
   line-height: var(--line-height);
 }
 
 #privacy {
   width: 20px;
   height: 20px;
-  margin: 2px;
+  margin-top: 2px;
   margin-inline-end: 10px;
   flex-shrink: 0;
 }
 
 #email {
   width: 100%;
   box-sizing: border-box;
-  padding: 12px 15px;
+  padding: 8px;
 }
 
 #newsletter-form input {
   border-color: var(--grey-90-alpha-30);
 }
 
 #newsletter-form input:hover {
   border-color: var(--grey-90-alpha-50);
 }
 
 #newsletter-form input:focus {
-  border-color: var(--teal-60);
-  box-shadow: 0 0 2px 0 var(--teal-60);
+  border-color: var(--blue-50);
+  box-shadow: 0 0 0px 3px var(--blue-50-alpha15);
 }
 
 #newsletter-form::placeholder {
   color: var(--grey-90-alpha-40);
 }
 
 #newsletter-submit {
   display: block;
+  padding: 8px 20px;
 }