Update Woo "Continue as Existing user" screen (#87931)

* Update continue as user screen * Fix OR isn't vertically centered
Automattic · Feb 28, 2024 · 654ba8c · 654ba8c
1 parent c12e897
commit 654ba8c
Show file tree

Hide file tree

Showing 3 changed files with 204 additions and 158 deletions.
diff --git 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' ) }
 						</button>
 					</div>
-					<Button
-						busy={ isLoading }
-						primary
-						href={ validatedRedirectUrlFromQuery || validatedRedirectPath || '/' }
-					>
-						{ `${ translate( 'Continue as', {
-							context: 'Continue as an existing WordPress.com user',
-						} ) } ${ userName }` }
-					</Button>
 				</div>
+				<Button
+					primary
+					busy={ isLoading }
+					className="continue-as-user__continue-button"
+					href={ validatedRedirectUrlFromQuery || validatedRedirectPath || '/' }
+				>
+					{ `${ translate( 'Continue as', {
+						context: 'Continue as an existing WordPress.com user',
+					} ) } ${ userName }` }
+				</Button>
 			</div>
 		);
 	}

diff --git a/client/blocks/login/index.jsx b/client/blocks/login/index.jsx
@@ -421,6 +421,13 @@ class Login extends Component {
 							) }
 						</p>
 					);
+				} else if ( this.showContinueAsUser() ) {
+					headerText = <h3>{ translate( 'Get started in minutes' ) }</h3>;
+					postHeader = (
+						<p className="login__header-subtitle">
+							{ translate( 'First, select the account you’d like to use.' ) }
+						</p>
+					);
 				} else {
 					headerText = <h3>{ translate( "Let's get started" ) }</h3>;
 					const poweredByWpCom =
@@ -430,21 +437,19 @@ class Login extends Component {
 								<br />
 							</>
 						) : null;
-					const accountSelectionOrLoginToContinue = this.showContinueAsUser()
-						? translate( "First, select the account you'd like to use." )
-						: translate(
+
+					postHeader = (
+						<p className="login__header-subtitle">
+							{ poweredByWpCom }
+							{ translate(
 								"Please, log in to continue. Don't have an account? {{signupLink}}Sign up{{/signupLink}}",
 								{
 									components: {
 										signupLink: <a href={ this.getSignupUrl() } />,
 										br: <br />,
 									},
 								}
-						  );
-					postHeader = (
-						<p className="login__header-subtitle">
-							{ poweredByWpCom }
-							{ accountSelectionOrLoginToContinue }
+							) }
 						</p>
 					);
 				}
@@ -782,7 +787,7 @@ class Login extends Component {
 		if ( this.showContinueAsUser() ) {
 			if ( isWoo ) {
 				return (
-					<Fragment>
+					<div className="login__body login__body--continue-as-user">
 						<ContinueAsUser
 							onChangeAccount={ this.handleContinueAsAnotherUser }
 							isWooOAuth2Client={ isWoo }
@@ -802,7 +807,7 @@ class Login extends Component {
 							showSocialLoginFormOnly={ true }
 							sendMagicLoginLink={ this.sendMagicLoginLink }
 						/>
-					</Fragment>
+					</div>
 				);
 			}