Align magic login confirmation layout

client/login/magic-login/emailed-login-link-successfully-jetpack-connect.tsx

@@ -3,6 +3,7 @@ import { useTranslate } from 'i18n-calypso';
 import { FC, useEffect } from 'react';
 import RedirectWhenLoggedIn from 'calypso/components/redirect-when-logged-in';
 import { preventWidows } from 'calypso/lib/formatting/prevent-widows';
+import OneLoginFooter from 'calypso/login/wp-login/components/one-login-footer';
 import { useDispatch } from 'calypso/state';
 import {
 	recordPageViewWithClientId as recordPageView,
@@ -60,25 +61,25 @@ const EmailedLoginLinkSuccessfullyJetpackConnect: FC< Props > = ( {
 				/>
 			) }
 			<p>{ preventWidows( translate( "Only one step left—we'll connect your site next." ) ) }</p>
-			<div className="magic-login__successfully-jetpack-actions">
-				<p>
+			<OneLoginFooter>
+				<p className="one-login__footer-text">
 					{ translate(
 						"Didn't get the email? Check your spam folder, or {{button}}resend the email{{/button}}. Wrong email or account? {{link}}Use a different account{{/link}}.",
 						{
 							components: {
 								button: (
 									<Button
-										className="magic-login__resend-button"
 										variant="link"
 										onClick={ onResendEmail }
+										className="one-login__footer-link"
 									/>
 								),
-								link: <a className="magic-login__log-in-link" href="/log-in/jetpack" />,
+								link: <a className="one-login__footer-link" href="/log-in/jetpack" />,
 							},
 						}
 					) }
 				</p>
-			</div>
+			</OneLoginFooter>
 		</div>
 	);
 };

client/login/magic-login/emailed-login-link-successfully.jsx

@@ -8,6 +8,7 @@ import { Component } from 'react';
 import { connect } from 'react-redux';
 import RedirectWhenLoggedIn from 'calypso/components/redirect-when-logged-in';
 import { login } from 'calypso/lib/paths';
+import OneLoginFooter from 'calypso/login/wp-login/components/one-login-footer';
 import {
 	recordPageViewWithClientId as recordPageView,
 	enhanceWithSiteType,
@@ -60,7 +61,7 @@ class EmailedLoginLinkSuccessfully extends Component {
 		const { translate, emailAddress } = this.props;
 
 		return (
-			<div className="magic-login__form">
+			<>
 				<RedirectWhenLoggedIn
 					redirectTo="/help"
 					replaceCurrentLocation
@@ -72,19 +73,26 @@ class EmailedLoginLinkSuccessfully extends Component {
 						<MagicLoginEmailWrapper emailAddress={ emailAddress } />
 					</div>
 				</Card>
-				<div className="magic-login__footer">
-					<p>
+				<OneLoginFooter>
+					<p className="one-login__footer-text">
 						{ translate(
 							"Didn't get the email? You might want to double check if the email address is associated with your account,{{a}}or reset your password.{{/a}}",
 							{
 								components: {
-									a: <a href="/" onClick={ this.onLostPasswordClick } rel="noopener noreferrer" />,
+									a: (
+										<a
+											className="one-login__footer-link"
+											href="/"
+											onClick={ this.onLostPasswordClick }
+											rel="noopener noreferrer"
+										/>
+									),
 								},
 							}
 						) }
 					</p>
-				</div>
-			</div>
+				</OneLoginFooter>
+			</>
 		);
 	}
 }

client/login/magic-login/style.scss

@@ -66,6 +66,10 @@
 
 		.magic-login__successfully-jetpack {
 			padding: 0 24px 0 24px;
+			// Matches .form-fieldset default margin overwritten in Jetpack view
+			margin-bottom: rem( 20px );
+			// Matches .card.logged-out-form padding-bottom overridden by Jetpack styles
+			padding-bottom: rem( 16px );
 		}
 
 		&__loading-spinner--jetpack {
@@ -89,32 +93,6 @@
 		border-color: var( --studio-jetpack-green-60 );
 	}
 }
-.magic-login__successfully-jetpack-actions {
-	color: var( --studio-jetpack-grey-50, #646970 );
-	font-size: 14px;
-	font-weight: 400;
-	line-height: 20px;
-	word-wrap: break-word;
-
-	text-align: center;
-
-	margin-top: 45px;
-	margin-bottom: 45px;
-
-	.magic-login__resend-button {
-		font-size: 100%;
-		color: var( --studio-jetpack-green-60, #007117 );
-
-		&:hover {
-			color: var( --studio-jetpack-green-60, #007117 );
-		}
-	}
-
-	.magic-login__log-in-link {
-		color: var( --studio-jetpack-green-60, #007117 );
-	}
-}
-
 .layout.is-wpcom-magic-login {
 	.magic-login__form-header-icon {
 		text-align: center;
@@ -131,12 +109,6 @@
 		}
 	}
 
-	.logged-out-form {
-		.form-label {
-			font-weight: 400;
-		}
-	}
-
 	.magic-login__form-action {
 		margin-top: 16px;
 	}
@@ -292,12 +264,6 @@
 		}
 	}
 
-	.logged-out-form {
-		.form-label {
-			color: var( --studio-gray-60 );
-		}
-	}
-
 	.card {
 		background: transparent;
 		box-shadow: none;

client/login/magic-login/verify-login-code.jsx

@@ -7,6 +7,7 @@ import { connect } from 'react-redux';
 import FormTextInput from 'calypso/components/forms/form-text-input';
 import LoggedOutForm from 'calypso/components/logged-out-form';
 import { navigate } from 'calypso/lib/navigate';
+import OneLoginFooter from 'calypso/login/wp-login/components/one-login-footer';
 import { useDispatch } from 'calypso/state';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import { rebootAfterLogin } from 'calypso/state/login/actions';
@@ -199,76 +200,80 @@ const VerifyLoginCode = ( {
 	const submitEnabled = getVerificationCode().length === CODE_LENGTH && ! isDisabled && ! showError;
 
 	return (
-		<div className="magic-login__successfully-jetpack">
-			<LoggedOutForm
-				className={ clsx( 'magic-login__verify-code-form', {
-					'magic-login__verify-code-form--error': showError,
-				} ) }
-				onSubmit={ onSubmit }
-			>
-				<div className="magic-login__verify-code-field-container">
-					{ Array.from( { length: CODE_LENGTH } ).map( ( _, index ) => (
-						<FormTextInput
-							key={ index }
-							ref={ inputRefs.current[ index ] }
-							autoCapitalize="off"
-							className="magic-login__verify-code-character-field"
-							disabled={ isDisabled }
-							maxLength={ 1 }
-							value={ codeCharacters[ index ] }
-							onChange={ ( event ) => onCodeCharacterChange( index, event.target.value ) }
-							onKeyDown={ ( event ) => onKeyDown( index, event ) }
-							onPaste={ ( event ) => onPaste( index, event ) }
-							aria-label={ translate( 'Verification code character %(position)s of %(total)s', {
-								args: {
-									position: index + 1,
-									total: CODE_LENGTH,
-								},
-							} ) }
-						/>
-					) ) }
-				</div>
-
-				{ showError && (
-					<div className="magic-login__verify-code-error-message">
-						{ translate( "Oops, that's the wrong code. Please verify or resend the email." ) }
-					</div>
-				) }
-
-				<div className="magic-login__form-action">
-					<Button
-						variant="primary"
-						disabled={ ! submitEnabled && ! isDisabled }
-						isBusy={ isDisabled }
-						type="submit"
-						__next40pxDefaultSize
+		<>
+			<div className="magic-login__successfully-jetpack">
+				<div className="magic-login__form">
+					<LoggedOutForm
+						className={ clsx( 'magic-login__verify-code-form', {
+							'magic-login__verify-code-form--error': showError,
+						} ) }
+						onSubmit={ onSubmit }
 					>
-						{ isDisabled ? translate( 'Verifying code…' ) : translate( 'Verify code' ) }
-					</Button>
+						<div className="magic-login__verify-code-field-container">
+							{ Array.from( { length: CODE_LENGTH } ).map( ( _, index ) => (
+								<FormTextInput
+									key={ index }
+									ref={ inputRefs.current[ index ] }
+									autoCapitalize="off"
+									className="magic-login__verify-code-character-field"
+									disabled={ isDisabled }
+									maxLength={ 1 }
+									value={ codeCharacters[ index ] }
+									onChange={ ( event ) => onCodeCharacterChange( index, event.target.value ) }
+									onKeyDown={ ( event ) => onKeyDown( index, event ) }
+									onPaste={ ( event ) => onPaste( index, event ) }
+									aria-label={ translate( 'Verification code character %(position)s of %(total)s', {
+										args: {
+											position: index + 1,
+											total: CODE_LENGTH,
+										},
+									} ) }
+								/>
+							) ) }
+						</div>
+
+						{ showError && (
+							<div className="magic-login__verify-code-error-message">
+								{ translate( "Oops, that's the wrong code. Please verify or resend the email." ) }
+							</div>
+						) }
+
+						<div className="magic-login__form-action">
+							<Button
+								variant="primary"
+								disabled={ ! submitEnabled && ! isDisabled }
+								isBusy={ isDisabled }
+								type="submit"
+								__next40pxDefaultSize
+							>
+								{ isDisabled ? translate( 'Verifying code…' ) : translate( 'Verify code' ) }
+							</Button>
+						</div>
+					</LoggedOutForm>
 				</div>
-			</LoggedOutForm>
+			</div>
 
-			<div className="magic-login__successfully-jetpack-actions">
-				<p>
+			<OneLoginFooter>
+				<p className="one-login__footer-text">
 					{ translate(
 						"Didn't get the code? Check your spam folder, or {{button}}resend the email{{/button}}. Wrong email or account? {{link}}Use a different account{{/link}}.",
 						{
 							components: {
 								button: (
 									<Button
-										className="magic-login__resend-button"
+										className="one-login__footer-link"
 										variant="link"
 										onClick={ handleResendEmail }
 										disabled={ isRedirecting }
 									/>
 								),
-								link: <a className="magic-login__log-in-link" href="/log-in/jetpack" />,
+								link: <a className="one-login__footer-link" href="/log-in/jetpack" />,
 							},
 						}
 					) }
 				</p>
-			</div>
-		</div>
+			</OneLoginFooter>
+		</>
 	);
 };
 

client/login/wp-login/components/one-login-footer.scss

@@ -1,22 +1,40 @@
 .one-login__footer {
-    display: flex;
-    align-self: center;
-    gap: 1em;
-    flex-direction: column;
-
-    .one-login__footer-links-wrapper {
-        display: flex;
-        align-self: center;
-        gap: 1em;
-    }
+	display: flex;
+	align-self: center;
+	flex-direction: column;
+	gap: 1em;
+	text-align: center;
+	font-size: $font-body-small;
+	color: var( --studio-gray-50, #646970 );
 
     .one-login__footer-link {
-        color: var(--studio-gray-90, #1d2327);
-        font-weight: 500;
-        font-size: $font-body-small;
-        display: inline-flex;
-        align-items: center;
-        align-self: center;
-        gap: 0.1em;
+        text-decoration: underline;
+        padding: 0;
+        height: auto;
     }
+
+	.one-login__footer-links-wrapper {
+		display: flex;
+		align-self: center;
+		gap: 1em;
+
+        .one-login__footer-link {
+            color: var( --studio-gray-90, #1d2327 );
+            font-weight: 500;
+            display: inline-flex;
+            align-items: center;
+            align-self: center;
+            gap: 0.1em;
+        }
+	}
+
+	.one-login__footer-text {
+		color: inherit;
+
+        .one-login__footer-link {
+            color: inherit;
+            font-weight: inherit;
+            font-size: inherit;
+        }
+	}
 }

client/login/wp-login/components/one-login-footer.tsx

@@ -13,6 +13,7 @@ interface OneLoginFooterProps {
 	 * when `isLoginView` is false, this is the "back to login" link
 	 */
 	loginLink?: JSX.Element;
+	children?: React.ReactNode;
 	/**
 	 * when `isLoginView` is false, this is the "support" link
 	 */
@@ -32,6 +33,7 @@ const OneLoginFooter = ( {
 	loginLink,
 	isLoginView,
 	supportLink,
+	children,
 }: OneLoginFooterProps ) => {
 	const oauth2Client = useSelector( getCurrentOAuth2Client );
 
@@ -58,10 +60,14 @@ const OneLoginFooter = ( {
 
 	return (
 		<div className="one-login__footer">
-			<div className="one-login__footer-links-wrapper">
-				{ loginLink }
-				{ supportLink }
-			</div>
+			{ children ? (
+				children
+			) : (
+				<div className="one-login__footer-links-wrapper">
+					{ loginLink }
+					{ supportLink }
+				</div>
+			) }
 		</div>
 	);
 };