From 654ba8cd16b64e91f5592f5f7a975d6bca8f6276 Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Wed, 28 Feb 2024 12:38:43 +0800 Subject: [PATCH] Update Woo "Continue as Existing user" screen (#87931) * Update continue as user screen * Fix OR isn't vertically centered --- client/blocks/login/continue-as-user.jsx | 21 +- client/blocks/login/index.jsx | 25 +- client/layout/masterbar/woo.scss | 316 +++++++++++++---------- 3 files changed, 204 insertions(+), 158 deletions(-) diff --git a/client/blocks/login/continue-as-user.jsx b/client/blocks/login/continue-as-user.jsx index 19b9767fa95aff..2f106cfce2e9fb 100644 --- a/client/blocks/login/continue-as-user.jsx +++ b/client/blocks/login/continue-as-user.jsx @@ -111,19 +111,20 @@ function ContinueAsUser( { className="continue-as-user__change-user-link" onClick={ onChangeAccount } > - { translate( 'Log in with a different WordPress.com account' ) } + { translate( 'Sign in as a different user' ) } - + ); } diff --git a/client/blocks/login/index.jsx b/client/blocks/login/index.jsx index a41a11ceedea4b..228b97ab049203 100644 --- a/client/blocks/login/index.jsx +++ b/client/blocks/login/index.jsx @@ -421,6 +421,13 @@ class Login extends Component { ) }

); + } else if ( this.showContinueAsUser() ) { + headerText =

{ translate( 'Get started in minutes' ) }

; + postHeader = ( +

+ { translate( 'First, select the account you’d like to use.' ) } +

+ ); } else { headerText =

{ translate( "Let's get started" ) }

; const poweredByWpCom = @@ -430,9 +437,11 @@ class Login extends Component {
) : null; - const accountSelectionOrLoginToContinue = this.showContinueAsUser() - ? translate( "First, select the account you'd like to use." ) - : translate( + + postHeader = ( +

+ { poweredByWpCom } + { translate( "Please, log in to continue. Don't have an account? {{signupLink}}Sign up{{/signupLink}}", { components: { @@ -440,11 +449,7 @@ class Login extends Component { br:
, }, } - ); - postHeader = ( -

- { poweredByWpCom } - { accountSelectionOrLoginToContinue } + ) }

); } @@ -782,7 +787,7 @@ class Login extends Component { if ( this.showContinueAsUser() ) { if ( isWoo ) { return ( - +
- +
); } diff --git a/client/layout/masterbar/woo.scss b/client/layout/masterbar/woo.scss index 58142b56cbb8f3..56f4ece6da554b 100644 --- a/client/layout/masterbar/woo.scss +++ b/client/layout/masterbar/woo.scss @@ -18,12 +18,13 @@ $woo-form-divider-border: 1px solid #e6e6e6; $gray-60: #50575e; $gray-50: #646970; + $woo-inter-font: "Inter", -apple-system, system-ui, sans-serif; background: #fff; min-height: 100%; * { - font-family: proxima-nova, sans-serif; + font-family: $woo-inter-font; } &.layout.is-section-login { @@ -93,17 +94,22 @@ .button.is-primary, .login .button.is-primary, .magic-login.is-white-login .magic-login__form-action .button.is-primary:not([disabled]) { - background-color: $woo-purple-60; + background-color: $woo-purple-50; border: none; color: #fff; width: 100%; + font-family: $woo-inter-font; + font-size: 1rem; + font-style: normal; + font-weight: 500; + line-height: 28px; &.is-busy { background-image: none; } &:hover { - background-color: $woo-purple-40; + background-color: $woo-purple-70; color: #fff; } @@ -249,7 +255,7 @@ &.is-section-signup .layout__content, .layout__content { - padding-top: 85px; + padding-top: 72px; @media screen and ( max-width: 660px ) { padding-top: 50px; @@ -282,7 +288,7 @@ .login__form-header { margin-top: 0; - margin-bottom: 8px; + margin-bottom: 12px; @media screen and ( max-width: 660px ) { margin-bottom: 16px; @@ -308,9 +314,14 @@ h1, h3 { - font-weight: 600; - font-size: 2.75rem; - line-height: 52px; + color: var(--studio-gray-100); + font-feature-settings: "ss01" on, "salt" on; + font-family: proxima-nova, sans-serif; + text-align: center; + font-size: 2.25rem; + font-weight: 700; + line-height: 39.6px; + letter-spacing: -0.72px; @media screen and ( max-width: 660px ) { text-align: left; @@ -321,10 +332,12 @@ .login__header-subtitle, .formatted-header__subtitle { color: $gray-60; - font-size: $font-body; + font-size: $font-body-large; padding-bottom: 0; margin: 0; - line-height: 24px; + font-weight: 400; + line-height: 27px; + letter-spacing: -0.025px; -webkit-font-smoothing: subpixel-antialiased; a { @@ -361,12 +374,12 @@ padding-bottom: 0; padding-left: 0; padding-right: 0; - width: 196px; svg { border: 1px solid var(--studio-gray-10); border-radius: 24px; /* stylelint-disable-line scales/radii */ padding: 12px; + margin: 0; } } @@ -413,7 +426,7 @@ .step-wrapper, .jetpack-connect__main-logo { box-sizing: border-box; - padding: 60px 0 0; + padding: 48px 0 0; width: 100%; @media screen and ( max-width: 660px ) { @@ -484,51 +497,161 @@ text-align: center; } + .auth-form__social { + max-width: 100%; + padding: 40px 0 14px; + border-top: 0; + display: flex; + flex-direction: column; + align-items: center; + + @media screen and ( max-width: 660px ) { + align-items: flex-start; + } + + p { + color: var(--studio-gray-60); + font-size: $woo-font-size-small; + } + + a { + font-size: $woo-font-size-small; + } + + button { + padding: 0; + } + + .auth-form__social-buttons-tos { + margin-top: 24px; + font-size: $woo-font-size-small; + line-height: 18px; + color: $gray-50; + text-align: left; + + a { + color: $gray-50; + line-height: 18px; + font-size: inherit; + } + } + } + + .login__body--continue-as-user { + width: 100%; + margin: 48px auto 0; + max-width: 327px; + display: flex; + flex-direction: column; + + .auth-form__social { + max-width: 100%; + padding: 40px 0 14px; + border-top: 0; + display: flex; + flex-direction: column; + align-items: center; + + .auth-form__social-buttons { + width: 100%; + + .auth-form__social-buttons-container { + gap: 16px; + } + + button.social-buttons__button.button { + display: flex; + height: 48px; + padding: 8px 16px; + align-items: center; + gap: 60px; + align-self: stretch; + border-radius: 8px; // stylelint-disable-line scales/radii + border: 2px solid var(--studio-gray-10); + width: 100%; + margin: 0; + } + + .social-buttons__service-name { + font-size: 1rem; + font-style: normal; + font-weight: 500; + line-height: 24px; + color: var(--studio-gray-100); + margin: 0; + } + + .social-icons { + border: 0; + padding: 0; + } + + .login__social-tos { + margin: 0 auto 2.5em; + max-width: 100%; + order: -1; + + a { + font-size: inherit; + line-height: inherit; + } + } + } + } + + .auth-form__social-buttons-tos { + display: none; + } + } + .continue-as-user { - max-width: 472px; - margin: 54px auto 0; + margin: 0; height: unset; min-height: 238px; + .continue-as-user__user-info { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 8px; + align-self: stretch; + border-radius: 8px; // stylelint-disable-line scales/radii + border: 2px solid #dcdcde; + height: 221px; + box-sizing: border-box; + } + ~ .auth-form__separator { - margin: -10px auto; - max-width: 472px; + margin: 32px auto; } ~ .card.auth-form__social.is-login { - max-width: 472px; + margin: 0; + padding: 0; } .continue-as-user__gravatar-link { pointer-events: auto; - display: grid; - grid-template-columns: 56px 1fr; - grid-template-areas: - "gravatar username" - "gravatar email"; - flex-direction: row; - justify-items: flex-start; + display: flex; + flex-direction: column; align-items: center; - padding: 16px 24px; background: #fff; - border: 1px solid #c3c4c7; - border-radius: 4px; text-decoration: none; - margin: 0 0 16px; + margin: 0 0 8px; .gravatar.continue-as-user__gravatar { - width: 40px; - height: 40px; - grid-area: gravatar; + width: 80px; + height: 80px; + box-sizing: border-box; } .continue-as-user__username { font-size: 1rem; + font-style: normal; font-weight: 600; line-height: 24px; - color: var(--color-gray-100); - grid-area: username; - margin-top: 0; + margin-top: 8px; &:hover { color: var(--color-gray-100); @@ -536,36 +659,40 @@ } .continue-as-user__email { - font-size: 1rem; - line-height: 24px; + font-size: 0.875rem; + line-height: 21px; font-weight: 400; - color: $gray-60; - grid-area: email; - margin-bottom: 0; + color: $gray-50; text-overflow: ellipsis; width: 100%; overflow: hidden; white-space: nowrap; - text-align: left; - } - - } - - .continue-as-user__user-info { - .button { + text-align: center; margin: 0; } + } .continue-as-user__not-you { - margin-bottom: 32px; + margin-bottom: 0; position: initial; } .continue-as-user__change-user-link { - color: $gray-60; - font-weight: 400; - text-decoration: underline; + text-decoration: none; + color: $woo-purple-50; + font-size: 0.875rem; + font-style: normal; + font-weight: 500; + line-height: 21px; + + &:hover { + color: $woo-purple-70; + } + } + + .continue-as-user__continue-button { + margin-top: 24px; } } @@ -667,16 +794,8 @@ } } - .signup-form, - .login { - .auth-form__separator-text { - background: #fff; - padding: 0 27px !important; - } - } - .auth-form__separator .auth-form__separator-text { - padding: 0 27px; + padding: 0 27px !important; background: #fff; } @@ -688,19 +807,6 @@ padding: 24px; } - .auth-form__social-buttons-tos { - margin-top: 24px; - font-size: $woo-font-size-small; - line-height: 18px; - color: $gray-50; - text-align: left; - - a { - color: $gray-50; - font-size: inherit; - } - } - .login .login__form-forgot-password { text-align: start; color: $gray-50; @@ -743,7 +849,6 @@ .formatted-header__title { font-size: $font-title-medium; - font-family: $sans; margin: 0 0 8px; padding: 0; @@ -784,54 +889,6 @@ color: var(--color-primary); } - .auth-form__social { - max-width: 100%; - padding: 40px 0 14px; - border-top: 0; - display: flex; - flex-direction: column; - align-items: center; - - @media screen and ( max-width: 660px ) { - align-items: flex-start; - } - - p { - color: var(--studio-gray-60); - font-size: $woo-font-size-small; - } - - a { - font-size: $woo-font-size-small; - } - - button { - padding: 0; - } - - .auth-form__social-buttons-tos { - text-align: left; - color: $gray-50; - - a { - line-height: 18px; - } - } - } - - .auth-form__social-buttons button { - text-align: start; - box-shadow: none; - border: 0; - - svg { - border: 1px solid var(--studio-gray-10); - border-radius: 24px; /* stylelint-disable-line scales/radii */ - padding: 12px; - margin-top: 0; - } - } - &.is-woocommerce-core-profiler-flow { background: #fff; @@ -1019,19 +1076,6 @@ font-weight: 600; } - .auth-form__social-buttons-tos { - text-align: center; - line-height: 16px; - - @media screen and ( max-width: 660px ) { - text-align: start; - } - - a { - line-height: 16px; - } - } - .jetpack-connect__logged-in-content { @media screen and ( max-width: 660px ) { padding-left: $woo-form-whitespace-660; @@ -1049,10 +1093,6 @@ padding-top: 24px; } - button.social-buttons__button.button { - width: 100%; - } - // Log in link on signup page .login__header-subtitle a, .formatted-header__subtitle a {