Bug 1412504 - Style updates for about:devtools;r=nchevobbe

MozReview-Commit-ID: BjCimCRFYWr

--HG--
extra : rebase_source : ce071050361e703501e912609f90d894d4deed1d

devtools/shim/aboutdevtools/aboutdevtools.css

@@ -4,6 +4,8 @@
 
 :root {
   /* Photon color variables used on the aboutdevtools page */
+  --blue-50: #0a84ff;
+  --blue-50-alpha20: rgba(10, 132, 255, 0.2);
   --blue-60: #0060df;
   --blue-70: #003eaa;
   --blue-80: #002275;
@@ -14,7 +16,6 @@
   --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;
 
@@ -36,7 +37,14 @@ p {
   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 {
@@ -93,6 +101,7 @@ p {
 
 .feature-link {
   display: block;
+  margin-top: 10px;
 }
 
 .external,
@@ -129,6 +138,7 @@ p {
 
 .buttons-container {
   display: flex;
+  margin-top: 5px;
 }
 
 .buttons-container button:not(:last-child) {
@@ -195,6 +205,7 @@ footer {
   width: 100%;
   min-height: 300px;
   flex-grow: 1;
+  padding-bottom: 15px;
   color: var(--white);
   background: linear-gradient(0, var(--blue-60), var(--blue-80));
 }

devtools/shim/aboutdevtools/aboutdevtools.xhtml

@@ -75,7 +75,7 @@
             <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>

devtools/shim/aboutdevtools/subscribe.css

@@ -7,6 +7,13 @@
  * 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;
@@ -52,8 +59,10 @@
 
   /* 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 {
@@ -67,7 +76,7 @@
 #privacy {
   width: 20px;
   height: 20px;
-  margin: 2px;
+  margin-top: 2px;
   margin-inline-end: 10px;
   flex-shrink: 0;
 }
@@ -75,7 +84,7 @@
 #email {
   width: 100%;
   box-sizing: border-box;
-  padding: 12px 15px;
+  padding: 8px;
 }
 
 #newsletter-form input {
@@ -87,8 +96,8 @@
 }
 
 #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-alpha20);
 }
 
 #newsletter-form::placeholder {
@@ -97,4 +106,5 @@
 
 #newsletter-submit {
   display: block;
+  padding: 8px 20px;
 }