Update Woo branding for reset password pages

client/blocks/login/index.jsx

@@ -455,7 +455,7 @@ class Login extends Component {
 				} else if ( this.props.twoFactorEnabled ) {
 					headerText = <h3>{ translate( 'Authenticate your login' ) }</h3>;
 				} else if ( currentQuery.lostpassword_flow ) {
-					headerText = null;
+					headerText = <h3>{ translate( 'Log in to your account' ) }</h3>;
 					postHeader = (
 						<p className="login__header-subtitle">
 							{ translate(

client/blocks/login/lost-password-form.jsx

@@ -129,7 +129,7 @@ const LostPasswordForm = ( {
 			onSubmit={ onSubmit }
 		>
 			<div className="login__form-userdata">
-				<FormLabel htmlFor="email">{ translate( 'Your email address' ) }</FormLabel>
+				<FormLabel htmlFor="email">{ translate( 'Your email' ) }</FormLabel>
 				<FormTextInput
 					autoCapitalize="off"
 					autoCorrect="off"

client/blocks/login/test/lost-password-form.jsx

@@ -14,7 +14,7 @@ describe( 'LostPasswordForm', () => {
 	test( 'displays a lost password form without errors', () => {
 		render( <LostPasswordForm redirectToAfterLoginUrl="" oauth2ClientId="" locale="" /> );
 
-		const email = screen.getByLabelText( /Your email address/i );
+		const email = screen.getByLabelText( /Your email/i );
 		expect( email ).toBeInTheDocument();
 
 		const btn = screen.getByRole( 'button', { name: /Reset my password/i } );
@@ -27,10 +27,7 @@ describe( 'LostPasswordForm', () => {
 	test( 'displays an error message when email is invalid', async () => {
 		render( <LostPasswordForm redirectToAfterLoginUrl="" oauth2ClientId="" locale="" /> );
 
-		await userEvent.type(
-			screen.getByRole( 'textbox', { name: 'Your email address' } ),
-			'invalid email'
-		);
+		await userEvent.type( screen.getByRole( 'textbox', { name: 'Your email' } ), 'invalid email' );
 		// The error message is displayed after the user blurs the input.
 		userEvent.tab();
 
@@ -46,7 +43,7 @@ describe( 'LostPasswordForm', () => {
 		render( <LostPasswordForm redirectToAfterLoginUrl="" oauth2ClientId="" locale="" /> );
 
 		await userEvent.type(
-			screen.getByRole( 'textbox', { name: 'Your email address' } ),
+			screen.getByRole( 'textbox', { name: 'Your email' } ),
 			'[email protected]'
 		);
 		// The error message is displayed after the user blurs the input.
@@ -59,15 +56,12 @@ describe( 'LostPasswordForm', () => {
 	test( 'reset error message when email is valid', async () => {
 		render( <LostPasswordForm redirectToAfterLoginUrl="" oauth2ClientId="" locale="" /> );
 
-		await userEvent.type(
-			screen.getByRole( 'textbox', { name: 'Your email address' } ),
-			'invalid email'
-		);
+		await userEvent.type( screen.getByRole( 'textbox', { name: 'Your email' } ), 'invalid email' );
 		// The error message is displayed after the user blurs the input.
 		userEvent.tab();
 
 		await userEvent.type(
-			screen.getByRole( 'textbox', { name: 'Your email address' } ),
+			screen.getByRole( 'textbox', { name: 'Your email' } ),
 			'[email protected]'
 		);
 		// The error message is displayed after the user blurs the input.
@@ -81,14 +75,11 @@ describe( 'LostPasswordForm', () => {
 	test( 'reset error message when email is empty', async () => {
 		render( <LostPasswordForm redirectToAfterLoginUrl="" oauth2ClientId="" locale="" /> );
 
-		await userEvent.type(
-			screen.getByRole( 'textbox', { name: 'Your email address' } ),
-			'invalid email'
-		);
+		await userEvent.type( screen.getByRole( 'textbox', { name: 'Your email' } ), 'invalid email' );
 		// The error message is displayed after the user blurs the input.
 		userEvent.tab();
 
-		await userEvent.clear( screen.getByRole( 'textbox', { name: 'Your email address' } ) );
+		await userEvent.clear( screen.getByRole( 'textbox', { name: 'Your email' } ) );
 		// The error message is displayed after the user blurs the input.
 		userEvent.tab();
 

client/layout/index.jsx

@@ -31,6 +31,7 @@ import { useExperiment } from 'calypso/lib/explat';
 import { getGoogleMailServiceFamily } from 'calypso/lib/gsuite';
 import isJetpackCloud from 'calypso/lib/jetpack/is-jetpack-cloud';
 import { isWcMobileApp, isWpMobileApp } from 'calypso/lib/mobile-app';
+import { isWooOAuth2Client } from 'calypso/lib/oauth2-clients';
 import { onboardingUrl } from 'calypso/lib/paths';
 import isReaderTagEmbedPage from 'calypso/lib/reader/is-reader-tag-embed-page';
 import { getMessagePathForJITM } from 'calypso/lib/route';
@@ -312,6 +313,7 @@ class Layout extends Component {
 			'is-global-sidebar-collapsed': this.props.isGlobalSidebarCollapsed,
 			'is-unified-site-sidebar-visible': this.props.isUnifiedSiteSidebarVisible,
 			'is-blaze-pro': this.props.isBlazePro,
+			'is-woo-com-oauth': isWooOAuth2Client( this.props.oauth2Client ),
 			'feature-flag-woocommerce-core-profiler-passwordless-auth': config.isEnabled(
 				'woocommerce/core-profiler-passwordless-auth'
 			),

client/layout/logged-out.jsx

@@ -149,6 +149,7 @@ const LayoutLoggedOut = ( {
 		'is-woo-passwordless': isWooPasswordless,
 		'is-blaze-pro': isBlazePro,
 		'two-factor-auth-enabled': twoFactorEnabled,
+		'is-woo-com-oauth': isWooOAuth2Client( oauth2Client ),
 		'feature-flag-woocommerce-core-profiler-passwordless-auth': config.isEnabled(
 			'woocommerce/core-profiler-passwordless-auth'
 		),

client/layout/masterbar/woo.scss

@@ -1501,7 +1501,7 @@ $breakpoint-mobile: 660px;
 			align-items: center;
 			width: 100%;
 			flex-direction: column;
-			margin: 40px auto 0;
+			margin: 12px auto 0;
 
 			@media (max-width: $break-mobile) {
 				max-width: $max-width;
@@ -1822,14 +1822,20 @@ $breakpoint-mobile: 660px;
 		}
 
 		.login__lostpassword-form {
+			margin-bottom: 44px;
+
 			.login__form-action {
-				margin: 8px 0 32px;
+				margin: 24px 0 0;
 				width: 100%;
 			}
 
 			.login__form-userdata {
 				width: 100%;
 			}
+
+			input[type="email"].form-text-input {
+				margin-bottom: 0;
+			}
 		}
 
 		.login__lost-password-footer {
@@ -2002,6 +2008,10 @@ $breakpoint-mobile: 660px;
 
 		.login__lost-password-link {
 			color: var(--wp-admin-theme-color);
+
+			&:hover {
+				color: var(--wp-admin-theme-color);
+			}
 		}
 
 		.login__form-forgot-password {
@@ -2021,6 +2031,11 @@ $breakpoint-mobile: 660px;
 			&:hover:not(:disabled) {
 				background-color: var(--color-primary);
 			}
+
+			&:disabled {
+				background-color: var(--studio-gray-0);
+				color: var(--studio-gray-20);
+			}
 		}
 
 		.signup-form {
@@ -2057,6 +2072,13 @@ $breakpoint-mobile: 660px;
 				font-weight: inherit;
 				font-size: inherit;
 				color: var(--wp-admin-theme-color);
+				line-height: inherit;
+				text-decoration: none;
+				text-underline-offset: 0;
+
+				&:hover {
+					color: var(--wp-admin-theme-color);
+				}
 			}
 
 			@media (max-width: $break-mobile) {
@@ -2075,7 +2097,8 @@ $breakpoint-mobile: 660px;
 			border: 1px solid var(--Gutenberg-Gray-500, #bbb);
 			background: var(--Gutenberg-White, #fff);
 			&:hover,
-			&:focus {
+			&:focus,
+			&:focus:hover {
 				border: 2px solid var(--Gutenberg-Gray-500, #bbb);
 			}
 		}
@@ -2209,23 +2232,13 @@ $breakpoint-mobile: 660px;
 	}
 }
 
-.woo.feature-flag-woocommerce-rebrand-2-0,
-.woo.feature-flag-woocommerce-rebrand-2-0.is-woo-passwordless {
+.woo.is-woo-com-oauth.feature-flag-woocommerce-rebrand-2-0 {
 	--woo-purple-0: #F2EDFF;
 	--woo-purple-40: #873EFF;
 	--woo-purple-50: #720EEC;
 	--woo-purple-60: #6108CE;
 	--woo-purple-70: #5007AA;
 
-	&.is-woo-passwordless {
-		.security-key-form__help-text,
-		.formatted-header__subtitle {
-			a {
-				@include link-woo;
-			}
-		}
-	}
-
 	.masterbar__woo {
 		.masterbar__woo-nav {
 			.masterbar__login-back-link {
@@ -2275,7 +2288,17 @@ $breakpoint-mobile: 660px;
 		text-underline-offset: 2px;
 	}
 
+	.login__lost-password-no-account a {
+		@include link-woo;
+	}
+
 	.login__lost-password-link {
 		@include link-woo;
 	}
+	.security-key-form__help-text,
+	.formatted-header__subtitle {
+		a {
+			@include link-woo;
+		}
+	}
 }