From afb443df1ba4bbec025facd8b922fd7cc4e7a04e Mon Sep 17 00:00:00 2001
From: Ilyas Foo <foo.ilyas@gmail.com>
Date: Wed, 4 Dec 2024 12:36:43 +0800
Subject: [PATCH] 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
---
 client/assets/images/icons/Woo_logo_color.svg |   6 +
 client/blocks/signup-form/index.jsx           |   2 +-
 client/layout/index.jsx                       |   1 +
 client/layout/logged-out.jsx                  |   1 +
 client/layout/masterbar/woo.jsx               |  32 +++-
 client/layout/masterbar/woo.scss              | 139 +++++++++++++++---
 config/development.json                       |   3 +-
 config/horizon.json                           |   1 +
 config/production.json                        |   3 +-
 config/stage.json                             |   3 +-
 10 files changed, 157 insertions(+), 34 deletions(-)
 create mode 100644 client/assets/images/icons/Woo_logo_color.svg

diff --git a/client/assets/images/icons/Woo_logo_color.svg b/client/assets/images/icons/Woo_logo_color.svg
new file mode 100644
index 00000000000000..428eec450d935c
--- /dev/null
+++ b/client/assets/images/icons/Woo_logo_color.svg
@@ -0,0 +1,6 @@
+<svg id="woocommerce-logo" width="60" height="24" viewBox="0 0 60 24" fill="none"
+	xmlns="http://www.w3.org/2000/svg">
+	<path d="M7.54838 19.653C9.27555 19.653 10.6616 18.8 11.7064 16.8383L14.0306 12.4884V16.1773C14.0306 18.3523 15.4379 19.653 17.6129 19.653C19.3187 19.653 20.5768 18.9067 21.7922 16.8383L27.1443 7.79732C28.3171 5.81427 27.4855 4.32166 24.9054 4.32166C23.5194 4.32166 22.6238 4.76944 21.8135 6.28338L18.1246 13.2134V7.05101C18.1246 5.21723 17.2504 4.32166 15.6298 4.32166C14.3505 4.32166 13.3269 4.87606 12.538 6.41132L9.06232 13.2134V7.11498C9.06232 5.15326 8.25204 4.32166 6.29032 4.32166H2.28157C0.767632 4.32166 0 5.02532 0 6.32603C0 7.62674 0.810278 8.37305 2.28157 8.37305H3.92345V16.156C3.92345 18.3523 5.39475 19.653 7.54838 19.653Z" fill="#873EFF"/>
+	<path d="M34.9709 4.32166C30.5997 4.32166 27.252 7.58409 27.252 11.998C27.252 16.4119 30.621 19.653 34.9709 19.653C39.3208 19.653 42.6472 16.3905 42.6686 11.998C42.6686 7.58409 39.3208 4.32166 34.9709 4.32166ZM34.9709 14.9406C33.329 14.9406 32.1989 13.7038 32.1989 11.998C32.1989 10.2921 33.329 9.03406 34.9709 9.03406C36.6128 9.03406 37.7429 10.2921 37.7429 11.998C37.7429 13.7038 36.6341 14.9406 34.9709 14.9406Z" fill="#873EFF"/>
+	<path d="M51.4525 4.32166C47.1026 4.32166 43.7549 7.58409 43.7549 11.998C43.7549 16.4119 47.1026 19.653 51.4525 19.653C55.8024 19.653 59.1502 16.3905 59.1502 11.998C59.1502 7.60541 55.8024 4.32166 51.4525 4.32166ZM51.4525 14.9406C49.7893 14.9406 48.7018 13.7038 48.7018 11.998C48.7018 10.2921 49.8106 9.03406 51.4525 9.03406C53.0944 9.03406 54.2245 10.2921 54.2245 11.998C54.2245 13.7038 53.0944 14.9406 51.4525 14.9406Z" fill="#873EFF"/>
+</svg>
diff --git a/client/blocks/signup-form/index.jsx b/client/blocks/signup-form/index.jsx
index 053b952f81c8e0..622e91258db11f 100644
--- 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
index ac458b1eba632d..2ac273e4d48030 100644
--- 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
index 1f7f42ebc354c1..33e14583e2fb8c 100644
--- 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
index bac1ebe3f09479..0b2cd29cb7e6fa 100644
--- 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
index ef06472ae06414..e4ef5f7c5c752d 100644
--- 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,7 +1327,7 @@ $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;
@@ -1335,7 +1335,7 @@ $breakpoint-mobile: 660px;
 				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;
+	}
 }
\ No newline at end of file
diff --git a/config/development.json b/config/development.json
index 85e66a652136f3..f8fe802b78a926 100644
--- 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
index 15a74dec7d242e..8d2b9972a1116e 100644
--- 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
index 5e1cd2b3a85294..d83eb535794865 100644
--- 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
index 01a601365d4b18..55adf41c09739a 100644
--- 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",