Address woo passwordless UI feedback (#89233)

* Update headerText in Login component for wccom passwordless login * Align the social buttons text to the center.
Automattic · Apr 9, 2024 · 373d1d6 · 373d1d6
1 parent ed7e979
commit 373d1d6
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 8 deletions.
diff --git a/client/blocks/authentication/social/style.scss b/client/blocks/authentication/social/style.scss
@@ -64,6 +64,7 @@
 	}
 }
 
+.is-woo-passwordless .auth-form__social,
 .auth-form__social.is-social-first {
 	.auth-form__social-buttons-container {
 		gap: 16px;

diff --git a/client/blocks/login/index.jsx b/client/blocks/login/index.jsx
@@ -449,7 +449,13 @@ class Login extends Component {
 						</p>
 					);
 				} else if ( this.showContinueAsUser() && this.props.isWooPasswordless ) {
-					headerText = <h3>{ translate( 'Get started in minutes' ) }</h3>;
+					headerText = (
+						<h3>
+							{ wccomFrom === 'nux'
+								? translate( 'Get started in minutes' )
+								: translate( 'Log in to your account' ) }
+						</h3>
+					);
 					postHeader = (
 						<p className="login__header-subtitle">
 							{ translate( 'First, select the account you’d like to use.' ) }

diff --git a/client/layout/masterbar/woo.scss b/client/layout/masterbar/woo.scss
@@ -1399,21 +1399,16 @@ $breakpoint-mobile: 660px;
 					height: 48px;
 					padding: 8px 16px;
 					align-items: center;
-					gap: 60px;
 					align-self: stretch;
 					border-radius: 8px; // stylelint-disable-line scales/radii
-					border: 2px solid var(--studio-gray-10);
+					border: 2px solid var(--studio-gray-10) !important;
 					width: 100%;
 					margin: 0;
 					text-decoration: none;
 
 					&:hover {
 						background: var(--studio-gray-0, #f6f7f7);
 					}
-
-					svg {
-						margin: 0;
-					}
 				}
 
 				.social-buttons__service-name {
@@ -1422,7 +1417,6 @@ $breakpoint-mobile: 660px;
 					font-weight: 500;
 					line-height: 24px;
 					color: var(--studio-gray-100);
-					margin: 0;
 				}
 
 				.social-icons {