Commit 10b74a90 authored by Punam Dahiya's avatar Punam Dahiya
Browse files

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

Differential Revision: https://phabricator.services.mozilla.com/D77332
parent 935fac58
......@@ -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"], {
......
......@@ -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);
......
......@@ -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);
......
......@@ -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 />
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment