diff --git a/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js b/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js index 1e729681f805..83129a4655c9 100644 --- a/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js +++ b/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"], { diff --git a/browser/components/newtab/aboutwelcome/content/aboutwelcome.css b/browser/components/newtab/aboutwelcome/content/aboutwelcome.css index 4574d2523d28..7fb29304828a 100644 --- a/browser/components/newtab/aboutwelcome/content/aboutwelcome.css +++ b/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); diff --git a/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss b/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss index d4ffddacb5ef..3a717db1f475 100644 --- a/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss +++ b/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); diff --git a/browser/components/newtab/content-src/aboutwelcome/components/MultiStageAboutWelcome.jsx b/browser/components/newtab/content-src/aboutwelcome/components/MultiStageAboutWelcome.jsx index 8889b2a38ac0..dd78c0406b4a 100644 --- a/browser/components/newtab/content-src/aboutwelcome/components/MultiStageAboutWelcome.jsx +++ b/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 (
- {content.secondary_button && content.secondary_button.position === "top" - ? this.renderSecondaryCTA("top") - : null} -
+ {hasSecondaryTopCTA ? this.renderSecondaryCTA("top") : null} +