Bug 1641268 - Multistage about:welcome UI updates r=emcminn

Differential Revision: https://phabricator.services.mozilla.com/D77332

browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js

@@ -429,10 +429,11 @@ class WelcomeScreen extends react__WEBPACK_IMPORTED_MODULE_0___default.a.PureCom
     const {
       content
     } = this.props;
+    const hasSecondaryTopCTA = content.secondary_button && content.secondary_button.position === "top";
     return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("main", {
       className: `screen ${this.props.id}`
-    }, content.secondary_button && content.secondary_button.position === "top" ? this.renderSecondaryCTA("top") : null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
-      className: "brand-logo"
+    }, hasSecondaryTopCTA ? this.renderSecondaryCTA("top") : null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+      className: `brand-logo ${hasSecondaryTopCTA ? "cta-top" : ""}`
     }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
       className: "welcome-text"
     }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__["Localized"], {

browser/components/newtab/aboutwelcome/content/aboutwelcome.css

@@ -83,6 +83,7 @@ body {
   --grey-subtitle: #4A4A4F;
   --grey-subtitle-1: #80808F;
   --newtab-background-color: #EDEDF0;
+  --newtab-background-color-1: #F9F9FA;
   --newtab-text-primary-color: #0C0C0D;
   --newtab-text-conditional-color: #4A4A4F;
   --newtab-button-primary-color: #0060DF;
@@ -259,7 +260,7 @@ body {
   overflow-x: auto;
   width: 100vw;
   height: 100vh;
-  background-color: var(--newtab-card-background-color); }
+  background-color: var(--newtab-background-color-1); }
   .multistageContainer .screen {
     display: flex;
     flex-flow: column nowrap;
@@ -267,7 +268,9 @@ body {
   .multistageContainer .brand-logo {
     background: url("chrome://branding/content/about-logo.png") top center/112px no-repeat;
     padding: 112px 0 20px;
-    margin-top: 25px; }
+    margin-top: 60px; }
+    .multistageContainer .brand-logo.cta-top {
+      margin-top: 25px; }
   .multistageContainer .welcome-text {
     display: flex;
     flex-direction: column;
@@ -301,7 +304,7 @@ body {
     display: grid;
     grid-gap: 24px;
     grid-template-columns: repeat(5, auto);
-    margin: auto; }
+    margin: 0 auto; }
     @media (max-width: 610px) {
       .multistageContainer .tiles-section {
         grid-template-columns: repeat(3, auto); } }
@@ -319,7 +322,7 @@ body {
       font-size: 16px;
       margin-inline-start: 12px;
       margin: 26px 0 0;
-      padding: 12px 50px;
+      padding: 12px 20px;
       white-space: nowrap;
       background-color: var(--newtab-button-primary-color);
       color: var(--welcome-button-text-color);

browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss

@@ -19,6 +19,7 @@ body {
   --grey-subtitle: #4A4A4F;
   --grey-subtitle-1: #80808F;
   --newtab-background-color: #EDEDF0;
+  --newtab-background-color-1: #F9F9FA;
   --newtab-text-primary-color: #0C0C0D;
   --newtab-text-conditional-color: #4A4A4F;
   --newtab-button-primary-color: #0060DF;
@@ -242,7 +243,7 @@ body {
   overflow-x: auto;
   width: 100vw;
   height: 100vh;
-  background-color: var(--newtab-card-background-color);
+  background-color: var(--newtab-background-color-1);
 
   .screen {
     display: flex;
@@ -254,7 +255,11 @@ body {
     background: url('chrome://branding/content/about-logo.png') top
     center / $logo-size no-repeat;
     padding: $logo-size 0 20px;
-    margin-top: 25px;
+    margin-top: 60px;
+
+    &.cta-top {
+      margin-top: 25px;
+    }
   }
 
   .welcome-text {
@@ -299,7 +304,7 @@ body {
     display: grid;
     grid-gap: 24px;
     grid-template-columns: repeat(5, auto);
-    margin: auto;
+    margin: 0 auto;
 
     @media (max-width: $break-point-medium) {
       grid-template-columns: repeat(3, auto);
@@ -323,7 +328,7 @@ body {
       font-size: 16px;
       margin-inline-start: 12px;
       margin: 26px 0 0;
-      padding: 12px 50px;
+      padding: 12px 20px;
       white-space: nowrap;
       background-color: var(--newtab-button-primary-color);
       color: var(--welcome-button-text-color);

browser/components/newtab/content-src/aboutwelcome/components/MultiStageAboutWelcome.jsx

@@ -161,12 +161,12 @@ export class WelcomeScreen extends React.PureComponent {
 
   render() {
     const { content } = this.props;
+    const hasSecondaryTopCTA =
+      content.secondary_button && content.secondary_button.position === "top";
     return (
       <main className={`screen ${this.props.id}`}>
-        {content.secondary_button && content.secondary_button.position === "top"
-          ? this.renderSecondaryCTA("top")
-          : null}
-        <div className="brand-logo" />
+        {hasSecondaryTopCTA ? this.renderSecondaryCTA("top") : null}
+        <div className={`brand-logo ${hasSecondaryTopCTA ? "cta-top" : ""}`} />
         <div className="welcome-text">
           <Localized text={content.title}>
             <h1 />