Add Woo rebrand signup page (#96963)

* Add feature flag * Update to use css variable colors, add changes for sign up * Rename * Move json * Minor rename
Automattic · Dec 4, 2024 · afb443d · afb443d
1 parent 6b57678
commit afb443d
Show file tree

Hide file tree

Showing 10 changed files with 157 additions and 34 deletions.
diff --git a/client/assets/images/icons/Woo_logo_color.svg b/client/assets/images/icons/Woo_logo_color.svg
diff --git a/client/blocks/signup-form/index.jsx b/client/blocks/signup-form/index.jsx
@@ -1335,7 +1335,7 @@ class SignupForm extends Component {
 				case this.props.isWoo:
 					formProps = {
 						inputPlaceholder: null,
-						submitButtonLabel: this.props.translate( 'Continue with email' ),
+						submitButtonLabel: this.props.translate( 'Continue' ),
 						submitButtonLoadingLabel: <Spinner />,
 					};
 			}

diff --git a/client/layout/index.jsx b/client/layout/index.jsx
@@ -315,6 +315,7 @@ class Layout extends Component {
 			'feature-flag-woocommerce-core-profiler-passwordless-auth': config.isEnabled(
 				'woocommerce/core-profiler-passwordless-auth'
 			),
+			'feature-flag-woocommerce-rebrand-2-0': config.isEnabled( 'woocommerce/rebrand-2-0' ),
 		} );
 
 		const optionalBodyProps = () => {

diff --git a/client/layout/logged-out.jsx b/client/layout/logged-out.jsx
@@ -152,6 +152,7 @@ const LayoutLoggedOut = ( {
 		'feature-flag-woocommerce-core-profiler-passwordless-auth': config.isEnabled(
 			'woocommerce/core-profiler-passwordless-auth'
 		),
+		'feature-flag-woocommerce-rebrand-2-0': config.isEnabled( 'woocommerce/rebrand-2-0' ),
 	};
 
 	let masterbar = null;

diff --git a/client/layout/masterbar/woo.jsx b/client/layout/masterbar/woo.jsx
@@ -1,8 +1,10 @@
+import config from '@automattic/calypso-config';
 import { Gridicon } from '@automattic/components';
 import { Button } from '@wordpress/components';
 import { createInterpolateElement, Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { localize } from 'i18n-calypso';
+import WooLogoRebrand2 from 'calypso/assets/images/icons/Woo_logo_color.svg';
 import WooLogo from 'calypso/assets/images/icons/woocommerce-logo.svg';
 import SVGIcon from 'calypso/components/svg-icon';
 import './typekit';
@@ -35,6 +37,27 @@ const WooOauthMasterbar = () => {
 		}
 	}
 
+	const isWooRebrand20 = config.isEnabled( 'woocommerce/rebrand-2-0' );
+	const logo = isWooRebrand20 ? (
+		<SVGIcon
+			name="woocommerce-logo"
+			icon={ WooLogoRebrand2 }
+			classes="masterbar__woo-client-logo"
+			width="60"
+			height="24"
+			viewBox="0 0 60 24"
+		/>
+	) : (
+		<SVGIcon
+			name="woocommerce-logo"
+			icon={ WooLogo }
+			classes="masterbar__woo-client-logo"
+			width="38"
+			height="23"
+			viewBox="0 0 38 23"
+		/>
+	);
+
 	const backNav = (
 		<li className="masterbar__woo-nav-item">
 			<Button className="masterbar__login-back-link" onClick={ onClick }>
@@ -52,14 +75,7 @@ const WooOauthMasterbar = () => {
 					<ul className="masterbar__woo-nav">
 						<li className="masterbar__woo-nav-item">
 							<a href="https://woocommerce.com" className="masterbar__woo-link">
-								<SVGIcon
-									name="woocommerce-logo"
-									icon={ WooLogo }
-									classes="masterbar__woo-client-logo"
-									width="38"
-									height="23"
-									viewBox="0 0 38 23"
-								/>
+								{ logo }
 							</a>
 						</li>
 						{ backNav }

diff --git a/client/layout/masterbar/woo.scss b/client/layout/masterbar/woo.scss
@@ -7,10 +7,10 @@
 $breakpoint-mobile: 660px;
 
 .woo {
-	$woo-purple-40: #966ccf;
-	$woo-purple-50: #7f54b3;
-	$woo-purple-60: #674399;
-	$woo-purple-70: #533582;
+	--woo-purple-40: #966ccf;
+	--woo-purple-50: #7f54b3;
+	--woo-purple-60: #674399;
+	--woo-purple-70: #533582;
 	$woo-label-color: #50575e;
 	$woo-gray-100: #101517;
 	$woo-gray-40: #787c82;
@@ -60,7 +60,7 @@ $breakpoint-mobile: 660px;
 		&:focus,
 		&:hover,
 		&:focus:hover {
-			border-color: $woo-purple-50;
+			border-color: var(--woo-purple-50);
 			outline: none;
 			box-shadow: 0 0 0 2px #e5cfe8;
 		}
@@ -91,7 +91,7 @@ $breakpoint-mobile: 660px;
 
 	.button:not(.social-buttons__button) {
 		border-radius: 8px; /* stylelint-disable-line scales/radii */
-		border: 2px solid $woo-purple-60;
+		border: 2px solid var(--woo-purple-60);
 		text-decoration: none;
 		width: auto;
 		padding: 10px 24px;
@@ -101,7 +101,7 @@ $breakpoint-mobile: 660px;
 	.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: var(--woo-purple-60);
 		border: none;
 		color: #fff;
 		width: 100%;
@@ -111,7 +111,7 @@ $breakpoint-mobile: 660px;
 		}
 
 		&:hover {
-			background-color: $woo-purple-40;
+			background-color: var(--woo-purple-40);
 			color: #fff;
 		}
 
@@ -162,7 +162,7 @@ $breakpoint-mobile: 660px;
 
 			a,
 			a:visited, {
-				color: $woo-purple-60;
+				color: var(--woo-purple-60);
 				font-size: rem(14px);
 				font-style: normal;
 				font-weight: 500;
@@ -172,7 +172,7 @@ $breakpoint-mobile: 660px;
 			}
 
 			a:hover {
-				color: $woo-purple-40;
+				color: var(--woo-purple-40);
 			}
 		}
 	}
@@ -336,13 +336,13 @@ $breakpoint-mobile: 660px;
 		-webkit-font-smoothing: subpixel-antialiased;
 
 		a {
-			color: $woo-purple-70;
+			color: var(--woo-purple-70);
 			font-weight: 400;
 			font-size: 1rem;
 			text-decoration: none;
 
 			&:hover {
-				color: $woo-purple-40;
+				color: var(--woo-purple-40);
 			}
 		}
 
@@ -633,7 +633,7 @@ $breakpoint-mobile: 660px;
 		}
 
 		a {
-			color: $woo-purple-70;
+			color: var(--woo-purple-70);
 			font-size: $font-body;
 			text-decoration: none;
 		}
@@ -1220,7 +1220,7 @@ $breakpoint-mobile: 660px;
 			&:focus,
 			&:hover,
 			&:focus:hover {
-				border: 2px solid $woo-purple-50;
+				border: 2px solid var(--woo-purple-50);
 				box-shadow: none;
 			}
 
@@ -1244,7 +1244,7 @@ $breakpoint-mobile: 660px;
 		.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-50;
+			background-color: var(--woo-purple-50);
 			font-family: $woo-inter-font;
 			font-size: 1rem;
 			font-style: normal;
@@ -1256,7 +1256,7 @@ $breakpoint-mobile: 660px;
 			}
 
 			&:hover {
-				background-color: $woo-purple-70;
+				background-color: var(--woo-purple-70);
 				color: #fff;
 			}
 
@@ -1327,15 +1327,15 @@ $breakpoint-mobile: 660px;
 			text-align: center;
 
 			a {
-				color: $woo-purple-50;
+				color: var(--woo-purple-50);
 				font-size: rem(18px);
 				font-style: normal;
 				font-weight: 500;
 				line-height: 27px;
 				letter-spacing: -0.025px;
 
 				&:hover {
-					color: $woo-purple-40;
+					color: var(--woo-purple-40);
 				}
 			}
 
@@ -1430,7 +1430,7 @@ $breakpoint-mobile: 660px;
 			}
 
 			.login__lost-password-link {
-				color: $woo-purple-50;
+				color: var(--woo-purple-50);
 				text-align: center;
 				font-weight: 500;
 				line-height: 20px;
@@ -1608,14 +1608,14 @@ $breakpoint-mobile: 660px;
 
 			.continue-as-user__change-user-link {
 				text-decoration: none;
-				color: $woo-purple-50;
+				color: var(--woo-purple-50);
 				font-size: 0.875rem;
 				font-style: normal;
 				font-weight: 500;
 				line-height: 21px;
 
 				&:hover {
-					color: $woo-purple-70;
+					color: var(--woo-purple-70);
 				}
 			}
 
@@ -1719,7 +1719,7 @@ $breakpoint-mobile: 660px;
 
 				a {
 					text-decoration: none;
-					color: $woo-purple-50;
+					color: var(--woo-purple-50);
 					font-size: rem(14px);
 					font-style: normal;
 					font-weight: 500;
@@ -2119,4 +2119,99 @@ $breakpoint-mobile: 660px;
 			}
 		}
 	}
+}
+
+.woo.feature-flag-woocommerce-rebrand-2-0,
+.woo.feature-flag-woocommerce-rebrand-2-0.is-woo-passwordless {
+	--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 {
+				color: var(--woo-purple-40);
+				text-decoration: underline;
+				text-underline-offset: 4px;
+
+				&:hover {
+					color: var(--woo-purple-60);
+				}
+			}
+		}
+	}
+
+	.masterbar__woo {
+		.masterbar__woo-nav {
+			.masterbar__login-back-link {
+				margin-left: 15px;
+			}
+		}
+	}
+
+	input[type="text"].form-text-input,
+	input[type="email"].form-text-input,
+	input[type="password"].form-text-input,
+	input[type="tel"].form-text-input,
+	textarea.form-text-input {
+		border: 1px solid var(--studio-gray-30);
+		&:focus,
+		&:hover,
+		&:focus:hover {
+			border: 1px solid var(--woo-purple-40);
+		}
+	}
+
+	.button.is-primary,
+	.login .button.is-primary,
+	.magic-login.is-white-login .magic-login__form-action .button.is-primary:not([disabled]) {
+		background-color: var(--woo-purple-40);
+
+		&:hover {
+			background-color: var(--woo-purple-60);
+		}
+	}
+
+	.notice__text a,
+	.notice__text a:visited {
+		color: var(--woo-purple-40);
+		text-decoration: underline;
+		text-underline-offset: 4px;
+
+		&:hover {
+			color: var(--woo-purple-60);
+		}
+	}
+
+	.login__header-subtitle a {
+		color: var(--woo-purple-40);
+		text-decoration: underline;
+		text-underline-offset: 4px;
+
+		&:hover {
+			color: var(--woo-purple-60);
+		}
+	}
+
+	.continue-as-user__change-user-link {
+		color: var(--woo-purple-50);
+
+		&:hover {
+			color: var(--woo-purple-70);
+		}
+	}
+
+	.magic-login__footer a {
+		color: var(--woo-purple-50);
+
+		&:hover {
+			color: var(--woo-purple-40);
+		}
+	}
+
+	.auth-form__social-buttons-tos a {
+		text-underline-offset: 2px;
+	}
 }
diff --git a/config/development.json b/config/development.json
@@ -248,6 +248,7 @@
 		"wordpress-action-search": false,
 		"wpcom-user-bootstrap": false,
 		"yolo/command-palette": true,
-		"woocommerce/core-profiler-passwordless-auth": true
+		"woocommerce/core-profiler-passwordless-auth": true,
+		"woocommerce/rebrand-2-0": false
 	}
 }
diff --git a/config/horizon.json b/config/horizon.json
@@ -171,6 +171,7 @@
 		"wpcom-user-bootstrap": true,
 		"yolo/command-palette": true,
 		"woocommerce/core-profiler-passwordless-auth": true,
+		"woocommerce/rebrand-2-0": false,
 		"login/magic-login": true
 	},
 	"siftscience_key": "a4f69f6759",

diff --git a/config/production.json b/config/production.json
@@ -217,7 +217,8 @@
 		"wordpress-action-search": false,
 		"wpcom-user-bootstrap": true,
 		"yolo/command-palette": true,
-		"woocommerce/core-profiler-passwordless-auth": true
+		"woocommerce/core-profiler-passwordless-auth": true,
+		"woocommerce/rebrand-2-0": false
 	},
 	"siftscience_key": "a4f69f6759",
 	"oauth_client_id": "39911",

diff --git a/config/stage.json b/config/stage.json
@@ -214,7 +214,8 @@
 		"wordpress-action-search": false,
 		"wpcom-user-bootstrap": true,
 		"yolo/command-palette": true,
-		"woocommerce/core-profiler-passwordless-auth": true
+		"woocommerce/core-profiler-passwordless-auth": true,
+		"woocommerce/rebrand-2-0": false
 	},
 	"siftscience_key": "e00e878351",
 	"oauth_client_id": "39911",