WooCommerce Onboarding: Fix CSS class names in signup route, and fix …

…cart display header [Feature Flag] (#36432)
Automattic · Oct 7, 2019 · 86a3892 · 86a3892
1 parent fb92812
commit 86a3892
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 42 deletions.
diff --git a/client/blocks/login/index.jsx b/client/blocks/login/index.jsx
@@ -239,8 +239,8 @@ class Login extends Component {
 						{ 'cart' === wccomFrom ? (
 							<WooCommerceConnectCartHeader />
 						) : (
-							<div className="login__woocommerce-logo">
-								<div className={ classNames( 'connect-header' ) }>
+							<div className="login__woocommerce-wrapper">
+								<div className={ classNames( 'login__woocommerce-logo' ) }>
 									<svg width={ 200 } viewBox={ '0 0 1270 170' }>
 										<AsyncLoad
 											require="components/jetpack-header/woocommerce"

diff --git a/client/blocks/login/style.scss b/client/blocks/login/style.scss
@@ -47,14 +47,14 @@
 		}
 	}
 
-	.login__woocommerce-logo {
+	.login__woocommerce-wrapper {
 		svg > g {
 			transform: translateX( 50% );
 		}
 	}
 
 	.jetpack-header,
-	.connect-header {
+	.login__woocommerce-logo {
 		margin: 0;
 		text-align: center;
 		margin-right: auto;
@@ -95,6 +95,11 @@
 		box-shadow: none;
 	}
 
+	.login__social-tos a {
+		color: var( --studio-gray-60 );
+		text-decoration: underline;
+	}
+
 	.jetpack-header__partner-logo-plus svg {
 		stroke: var( --color-neutral-80 );
 	}

diff --git a/client/extensions/woocommerce/components/woocommerce-connect-cart-header/index.js b/client/extensions/woocommerce/components/woocommerce-connect-cart-header/index.js
@@ -69,7 +69,7 @@ const WooCommercConnectCartHeader = ( { translate } ) => {
 						</div>
 						<div className="woocommerce-connect-cart-header__stepper-step-text">
 							<span className="woocommerce-connect-cart-header__stepper-step-label">
-								{ ( translate( 'Installation' ), { context: 'Navigation item' } ) }
+								{ translate( 'Installation', { context: 'Navigation item' } ) }
 							</span>
 						</div>
 					</div>

diff --git a/client/extensions/woocommerce/components/woocommerce-connect-cart-header/style.scss b/client/extensions/woocommerce/components/woocommerce-connect-cart-header/style.scss
@@ -1,6 +1,6 @@
 .woocommerce-connect-cart-header {
 	height: 56px;
-	border-bottom: 1px solid var( --color-gray-50 );
+	border-bottom: 1px solid var( --studio-gray-5 );
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -19,7 +19,7 @@
 		width: 100%;
 		bottom: 0;
 		top: initial;
-		border-top: 1px solid var( --color-gray-50 );
+		border-top: 1px solid var( --studio-gray-5 );
 		border-bottom: none;
 	}
 }
@@ -66,14 +66,14 @@
 	height: 24px;
 	min-width: 24px;
 	margin-right: 12px;
-	background: var( --color-gray-50 );
-	color: var( --color-gray-600 );
+	background: var( --studio-gray-5 );
+	color: var( --studio-gray-60 );
 	border-radius: 50%;
 }
 
 .woocommerce-connect-cart-header__stepper-step.is-active .woocommerce-connect-cart-header__stepper-step-icon,
 .woocommerce-connect-cart-header__stepper-step.is-complete .woocommerce-connect-cart-header__stepper-step-icon {
-	background: var( --color-hot-purple-600 );
+	background: var( --studio-woocommerce-purple-60 );
 	color: var( --color-text-inverted );
 }
 
@@ -90,7 +90,7 @@
 }
 
 .woocommerce-connect-cart-header__stepper-step .woocommerce-connect-cart-header__stepper-step-label {
-	color: var( --color-gray-900 );
+	color: var( --studio-gray-90 );
 	line-height: 24px;
 	font-size: 16px;
 
@@ -101,15 +101,15 @@
 }
 
 .woocommerce-connect-cart-header__stepper-step .woocommerce-connect-cart-header__stepper-step-label {
-	color: var( --color-gray-800 );
+	color: var( --studio-gray-80 );
 }
 .woocommerce-connect-cart-header__stepper-step.is-complete .woocommerce-connect-cart-header__stepper-step-label {
-	color: var( --color-gray-900 );
+	color: var( --studio-gray-90 );
 }
 
 .woocommerce-connect-cart-header__stepper-step-divider {
 	align-self: flex-start;
 	flex-grow: 1;
-	border-bottom: 1px solid var( --color-gray-50 );
+	border-bottom: 1px solid var( --studio-gray-5 );
 	margin-top: 20px;
 }
diff --git a/client/jetpack-connect/style.scss b/client/jetpack-connect/style.scss
@@ -924,6 +924,7 @@ $colophon-height: 50px; // wpcomColophon element at the bottom
 		}
 
 		.formatted-header__subtitle {
+			color: var( --color-primary-10 );
 			margin-top: 1em;
 			font-size: 16px;
 			line-height: 24px;
@@ -986,6 +987,10 @@ $colophon-height: 50px; // wpcomColophon element at the bottom
 			color: var( --color-neutral-60 );
 		}
 
+		.signup-form__terms-of-service-link a {
+			text-decoration: underline;
+		}
+
 		.logged-out-form__link-item {
 			text-align: center;
 			text-decoration: underline;
@@ -1000,10 +1005,21 @@ $colophon-height: 50px; // wpcomColophon element at the bottom
 				font-size: 12px;
 			}
 
+			.signup-form__social-buttons-tos {
+				color: var( --studio-gray-60 );
+				margin-bottom: 16px;
+				a {
+					text-decoration: underline;
+					color: var( --studio-gray-60 );
+				}
+			}
+
 			.social-buttons__button {
 				border: 1px solid var( --studio-pink-50 );
 				color: var( --studio-pink-50 );
 				box-shadow: none;
+				max-width: 310px;
+				height: 48px;
 			}
 		}
 

diff --git a/client/login/wp-login/style.scss b/client/login/wp-login/style.scss
@@ -292,6 +292,14 @@ $image-height: 47px;
 		}
 	}
 
+	.login__social-tos a {
+		color: var( --studio-gray-60 );
+	}
+
+	.wp-login__site-return-link::after {
+		background: none;
+	}
+
 	.woocommerce-muriel-text-control,
 	.muriel-input-text {
 		border-color: var( --color-neutral-20 );

diff --git a/client/signup/steps/user/index.jsx b/client/signup/steps/user/index.jsx
@@ -255,8 +255,8 @@ export class UserStep extends Component {
 					{ 'cart' === wccomFrom ? (
 						<WooCommerceConnectCartHeader />
 					) : (
-						<div className={ classNames( 'login__woocommerce-logo' ) }>
-							<div className={ classNames( 'connect-header' ) }>
+						<div className={ classNames( 'signup-form__woocommerce-wrapper' ) }>
+							<div className={ classNames( 'signup-form__woocommerce-logo' ) }>
 								<svg width={ 200 } viewBox={ '0 0 1270 170' }>
 									<AsyncLoad
 										require="components/jetpack-header/woocommerce"
@@ -267,7 +267,7 @@ export class UserStep extends Component {
 							</div>
 						</div>
 					) }
-					<div className={ classNames( 'login__form-header' ) }>
+					<div className={ classNames( 'signup-form__woocommerce-heading' ) }>
 						{ translate( 'Create a WordPress.com account' ) }
 					</div>
 				</Fragment>

diff --git a/client/signup/style.scss b/client/signup/style.scss
@@ -185,18 +185,6 @@ body.is-section-signup .layout.gravatar .formatted-header {
 		}
 	}
 
-	.login__form-footer {
-		text-align: center;
-		.button {
-			max-width: 310px;
-			height: 48px;
-
-			&.is-primary {
-				border: 0;
-			}
-		}
-	}
-
 	.layout__content {
 		padding-top: 48px;
 	}
@@ -205,11 +193,7 @@ body.is-section-signup .layout.gravatar .formatted-header {
 		display: none;
 	}
 
-	.wp-login__footer-links {
-		display: none;
-	}
-
-	.login__woocommerce-logo {
+	.signup-form__woocommerce-wrapper {
 		text-align: center;
 		border-bottom: 1px solid var( --color-neutral-50 );
 		position: absolute;
@@ -223,7 +207,7 @@ body.is-section-signup .layout.gravatar .formatted-header {
 		}
 	}
 
-	.connect-header {
+	.signup-form__woocommerce-logo {
 		margin: 0;
 		text-align: center;
 		margin-right: auto;
@@ -239,7 +223,7 @@ body.is-section-signup .layout.gravatar .formatted-header {
 		}
 	}
 
-	.login__form-header {
+	.signup-form__woocommerce-heading {
 		margin-top: 32px;
 	}
 
@@ -249,7 +233,7 @@ body.is-section-signup .layout.gravatar .formatted-header {
 		margin-left: auto;
 
 		.formatted-header__subtitle {
-			color: var( --color-primary-100 );
+			color: var( --color-primary-10 );
 			margin-top: 1em;
 			font-size: 16px;
 			line-height: 24px;
@@ -264,22 +248,27 @@ body.is-section-signup .layout.gravatar .formatted-header {
 	.logged-out-form__link-item {
 		text-align: center;
 		text-decoration: underline;
-		color: var( --color-gray-600 );
+		color: var( --studio-gray-60 );
 		font-size: 14px;
 	}
 
-	.signup-form__terms-of-service-link,
-	.signup-form__terms-of-service-link a {
+	.signup-form__terms-of-service-link {
 		text-align: left;
-		color: var( --color-gray-600 );
+		color: var( --studio-gray-60 );
+	}
+
+	.signup-form__terms-of-service-link a,
+	.signup-form__social-buttons-tos a {
+		color: var( --studio-gray-60 );
+		text-decoration: underline;
 	}
 
 	.signup-form__social {
 		padding-bottom: 0;
 		margin-top: 16px;
 		p {
 			font-size: 12px;
-			color: var( --color-gray-600 );
+			color: var( --studio-gray-60 );
 		}
 
 		.social-buttons__button {