Use core button component for continue as user screens (#103097)

* Use core button component for continue as user

* Use core components for all buttons in screen

* Theme akismet

* Theme Blaze Pro

* Theme Woo

* Update oauth continue as user screen to better match white login layout

* Theme Jetpack

* Theme A4A

* Revert underlining button

* Fix and theme Crowdsignal

* Fix Blaze Pro back navigation layout

* Fix Woo mobile back navigation layout

Author: adamwoodnz

client/assets/stylesheets/_wp-components-overrides.scss

@@ -35,6 +35,11 @@
 	--wp-components-color-accent-darker-20: var(--color-accent-60);
 }
 
+.components-button.is-link:not(.is-destructive) {
+	// Text color, focus ring color
+	--wp-components-color-accent: var(--color-accent);
+}
+
 /* @wordpress/components ButtonGroup overrides */
 .components-button-group {
 	.components-button {

client/blocks/login/continue-as-user.jsx

@@ -1,4 +1,4 @@
-import { Button } from '@automattic/components';
+import { Button } from '@wordpress/components';
 import { useTranslate } from 'i18n-calypso';
 import { useEffect, useState } from 'react';
 import Gravatar from 'calypso/components/gravatar';
@@ -54,8 +54,8 @@ export default function ContinueAsUser( {
 		components: {
 			br: <br />,
 			link: (
-				<button
-					type="button"
+				<Button
+					variant="link"
 					id="loginAsAnotherUser"
 					className="continue-as-user__change-user-link"
 					onClick={ onChangeAccount }
@@ -85,21 +85,22 @@ export default function ContinueAsUser( {
 				<div className="continue-as-user__user-info">
 					{ gravatarLink }
 					<div className="continue-as-user__not-you">
-						<button
-							type="button"
+						<Button
+							variant="tertiary"
 							id="loginAsAnotherUser"
 							className="continue-as-user__change-user-link"
 							onClick={ onChangeAccount }
 						>
 							{ translate( 'Sign in as a different user' ) }
-						</button>
+						</Button>
 					</div>
 				</div>
 				<Button
-					primary
+					variant="primary"
 					className="continue-as-user__continue-button"
-					busy={ validatingPath }
+					isBusy={ validatingPath }
 					href={ validatedPath || '/' }
+					__next40pxDefaultSize
 				>
 					{ translate( 'Continue' ) }
 				</Button>
@@ -113,21 +114,22 @@ export default function ContinueAsUser( {
 				<div className="continue-as-user__user-info">
 					{ gravatarLink }
 					<div className="continue-as-user__not-you">
-						<button
-							type="button"
+						<Button
+							variant="tertiary"
 							id="loginAsAnotherUser"
 							className="continue-as-user__change-user-link"
 							onClick={ onChangeAccount }
 						>
 							{ translate( 'Sign in as a different user' ) }
-						</button>
+						</Button>
 					</div>
 				</div>
 				<Button
-					primary
+					variant="primary"
 					className="continue-as-user__continue-button"
-					busy={ validatingPath }
+					isBusy={ validatingPath }
 					href={ validatedPath || '/' }
+					__next40pxDefaultSize
 				>
 					{ `${ translate( 'Continue as', {
 						context: 'Continue as an existing WordPress.com user',
@@ -142,7 +144,13 @@ export default function ContinueAsUser( {
 		<div className="continue-as-user">
 			<div className="continue-as-user__user-info">
 				{ gravatarLink }
-				<Button primary busy={ validatingPath } href={ validatedPath || '/' }>
+				<Button
+					variant="primary"
+					isBusy={ validatingPath }
+					href={ validatedPath || '/' }
+					__next40pxDefaultSize
+					className="continue-as-user__continue-button"
+				>
 					{ translate( 'Continue' ) }
 				</Button>
 			</div>

client/blocks/login/continue-as-user.scss

@@ -2,7 +2,8 @@
 @import "@wordpress/base-styles/breakpoints";
 
 .continue-as-user {
-	display: block;
+	display: flex;
+	flex-direction: column;
 	animation: 1s appear 0s ease-in;
 	color: var(--color-text-subtle);
 	font-size: $font-body-small;
@@ -23,28 +24,16 @@
 		margin: 0 auto;
 		display: flex;
 		flex-direction: column;
-
-		& > a.button {
-			margin: 0 20px;
-			border-radius: 4px;
-		}
 	}
 
 	.continue-as-user__gravatar {
 		display: inline;
 		border: 1px solid #a7aaad;
 	}
 
-	.continue-as-user__change-user-link {
-		color: var(--color-link);
-		cursor: pointer;
-		margin: auto;
-
-		&:hover,
-		&:focus,
-		&:active {
-			color: var(--color-link-dark);
-		}
+	.continue-as-user__continue-button {
+		min-width: 100%;
+		margin-block: 13px;
 	}
 
 	.continue-as-user__not-you {

client/blocks/login/login-form.scss

@@ -54,31 +54,23 @@ form {
 			}
 		}
 	}
+
+	&.is-akismet {
+		.login,
+		.magic-login {
+			.components-button {
+				--color-accent: var(--color-akismet);
+				--color-accent-60: var(--color-akismet);
+			}
+		}
+	}
 }
 
 .is-jetpack .login__form-account-tip {
 	margin-block-start: -8px;
 	font-size: 0.75rem;
 }
 
-.layout.is-white-login .login.is-akismet .login__form,
-.layout.is-white-login .login.is-akismet .continue-as-user,
-.layout.is-white-login.is-akismet .magic-login__form-action {
-	.button.is-primary {
-		background-color: var(--color-akismet);
-
-		&:hover,
-		&:focus {
-			background-color: var(--color-akismet);
-		}
-	}
-
-	.components-button.is-primary {
-		--color-accent: var(--color-akismet);
-		--color-accent-60: var(--color-akismet);
-	}
-}
-
 .login__form-jetpack {
 	.card.login__form {
 		box-shadow: none;

client/blocks/signup-form/crowdsignal.scss

@@ -44,10 +44,8 @@ body.is-section-signup .layout .signup.is-crowdsignal .step-wrapper {
 	}
 }
 
-.signup-form__crowdsignal {
+.signup.is-crowdsignal {
 	.components-button {
-		width: 100%;
-
 		&.is-primary:not(.signup-form__crowdsignal-wpcom) {
 			--color-accent: var(--color-primary);
 			--color-accent-60: var(--color-primary-dark);
@@ -143,6 +141,10 @@ body.is-section-signup .layout .signup.is-crowdsignal .step-wrapper {
 	margin: 0 auto;
 	max-width: 320px;
 	width: 100%;
+
+	.components-button {
+		width: 100%;
+	}
 }
 
 .signup-form__crowdsignal-card-subheader {

client/blocks/signup-form/index.jsx

@@ -1088,6 +1088,18 @@ class SignupForm extends Component {
 			return null;
 		}
 
+		if ( this.props.currentUser && ! this.props.disableContinueAsUser ) {
+			return (
+				<ContinueAsUser
+					currentUser={ this.props.currentUser }
+					onChangeAccount={ this.handleOnChangeAccount }
+					redirectPath={ this.props.redirectToAfterLoginUrl }
+					isWoo={ this.props.isWoo }
+					isBlazePro={ this.props.isBlazePro }
+				/>
+			);
+		}
+
 		if ( isCrowdsignalOAuth2Client( this.props.oauth2Client ) ) {
 			const socialProps = pick( this.props, [
 				'isSocialSignupEnabled',
@@ -1109,18 +1121,6 @@ class SignupForm extends Component {
 			);
 		}
 
-		if ( this.props.currentUser && ! this.props.disableContinueAsUser ) {
-			return (
-				<ContinueAsUser
-					currentUser={ this.props.currentUser }
-					onChangeAccount={ this.handleOnChangeAccount }
-					redirectPath={ this.props.redirectToAfterLoginUrl }
-					isWoo={ this.props.isWoo }
-					isBlazePro={ this.props.isBlazePro }
-				/>
-			);
-		}
-
 		if ( this.props.isJetpackWooDnaFlow ) {
 			return (
 				<div className={ clsx( 'signup-form__woocommerce', this.props.className ) }>

client/layout/index.jsx

@@ -25,7 +25,12 @@ import { isInStepContainerV2FlowContext } from 'calypso/layout/utils';
 import isA8CForAgencies from 'calypso/lib/a8c-for-agencies/is-a8c-for-agencies';
 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 {
+	isWooOAuth2Client,
+	isJetpackCloudOAuth2Client,
+	isA4AOAuth2Client,
+	isCrowdsignalOAuth2Client,
+} from 'calypso/lib/oauth2-clients';
 import isReaderTagEmbedPage from 'calypso/lib/reader/is-reader-tag-embed-page';
 import { getMessagePathForJITM } from 'calypso/lib/route';
 import UserVerificationChecker from 'calypso/lib/user/verification-checker';
@@ -193,6 +198,8 @@ class Layout extends Component {
 		const sectionClass = clsx( 'layout', `focus-${ this.props.currentLayoutFocus }`, {
 			[ 'is-group-' + this.props.sectionGroup ]: this.props.sectionGroup,
 			[ 'is-section-' + this.props.sectionName ]: this.props.sectionName,
+			'a8c-for-agencies': isA4AOAuth2Client( this.props.oauth2Client ),
+			crowdsignal: isCrowdsignalOAuth2Client( this.props.oauth2Client ),
 			'is-support-session': this.props.isSupportSession,
 			'has-no-sidebar': this.props.sidebarIsHidden,
 			'has-no-masterbar': this.props.masterbarIsHidden,
@@ -209,6 +216,7 @@ class Layout extends Component {
 			'is-unified-site-sidebar-visible': this.props.isUnifiedSiteSidebarVisible,
 			'is-blaze-pro': this.props.isBlazePro,
 			'is-woo-com-oauth': isWooOAuth2Client( this.props.oauth2Client ),
+			'jetpack-cloud': isJetpackCloudOAuth2Client( this.props.oauth2Client ),
 			'feature-flag-woocommerce-core-profiler-passwordless-auth': true,
 		} );
 

client/layout/masterbar/blaze-pro.scss

@@ -100,6 +100,7 @@ body.is-section-signup {
 
 		@media (max-width: $break-mobile) {
 			display: flex;
+			padding-inline: 24px;
 		}
 
 		.masterbar__login-back-link {
@@ -126,6 +127,7 @@ body.is-section-signup {
 			margin: 0;
 			list-style-type: none;
 			width: 100%;
+			gap: 12px;
 
 			.masterbar__login-back-link {
 				// margin-top: -10px;
@@ -224,7 +226,7 @@ body.is-section-signup {
 			align-items: center;
 			align-self: stretch;
 			border: 1px solid #ccc;
-			height: 221px;
+			width: 100%;
 			box-sizing: border-box;
 			padding: 32px 24px 16px 24px;
 			position: relative;
@@ -282,23 +284,14 @@ body.is-section-signup {
 		}
 
 		.continue-as-user__change-user-link {
-			font-family: $inter;
 			font-size: 0.875rem;
-			font-style: normal;
 			font-weight: 500;
-			line-height: 20px;
-			text-decoration: none;
 		}
 
 		.continue-as-user__continue-button {
-			background: var(--color-orange);
-			border-color: var(--color-orange);
-			font-family: $inter;
 			font-size: rem(13px);
 			font-weight: 600;
-			line-height: 14px;
 			margin-top: 24px;
-			padding: 12px 16px;
 			width: 326px;
 		}
 	}

client/layout/masterbar/oauth-client.scss

@@ -600,6 +600,9 @@
 }
 
 .jetpack-cloud {
+	--color-link: var(--studio-jetpack-green-40);
+	--color-link-dark: var(--studio-jetpack-green-60);
+
 	input:focus:hover[type],
 	input:focus[type] {
 		box-shadow: 0 0 0 2px var(--color-primary-10);
@@ -663,8 +666,6 @@
 		--color-accent-60: var(--studio-jetpack-green-30);
 	}
 
-	a,
-	a:visited,
 	.login__form-change-username,
 	.wp-login__links button {
 		color: var(--studio-jetpack-green-40);
@@ -677,6 +678,9 @@
 }
 
 .a8c-for-agencies {
+	--color-link: var(--color-primary-40);
+	--color-link-dark: var(--color-primary-60);
+
 	input:focus:hover[type],
 	input:focus[type] {
 		box-shadow: 0 0 0 2px var(--color-primary-10);
@@ -740,8 +744,6 @@
 		--color-accent-60: var(--color-primary-60);
 	}
 
-	a,
-	a:visited,
 	.login__form-change-username,
 	.wp-login__links button {
 		color: var(--color-primary-40);