Style modal and iframe contents from login page

WordPress · May 9, 2023 · 5bcde05 · 5bcde05
1 parent 235f6e9
commit 5bcde05
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 12 deletions.
diff --git a/settings/settings.php b/settings/settings.php
@@ -79,10 +79,47 @@ function login_footer_revalidate_customizations() {
 
 	?>
 	<style>
-		body.login-action-revalidate_2fa #login h1,
-		body.login-action-revalidate_2fa #backtoblog {
+		.login-action-revalidate_2fa {
+			background: white;
+			padding: 0 32px;
+		}
+
+		.login-action-revalidate_2fa #login {
+			padding: unset;
+			width: auto;
+		}
+
+		.login-action-revalidate_2fa #login h1,
+		.login-action-revalidate_2fa #backtoblog,
+		.login-action-revalidate_2fa .two-factor-prompt + br {
 			display: none;
 		}
+
+		.login-action-revalidate_2fa #login_error {
+			box-shadow: none;
+			background-color: #f4a2a2;
+		}
+
+		.login-action-revalidate_2fa #loginform {
+			border: none;
+			padding: 0;
+			box-shadow: none;
+			margin-top: 0;
+			overflow: visible;
+		}
+
+		.login-action-revalidate_2fa #loginform .button-primary {
+			width: 100%;
+			float: unset;
+		}
+
+		.login-action-revalidate_2fa #login p {
+			font-size: 14px;
+		}
+
+		.login-action-revalidate_2fa .backup-methods-wrap {
+			padding: 0;
+		}
 	</style>
 	<script>
 		(function() {

diff --git a/settings/src/components/revalidate-modal.js b/settings/src/components/revalidate-modal.js
@@ -12,7 +12,7 @@ export default function RevalidateModal() {
 
 	const goBack = ( event ) => clickScreenLink( event, 'account-status' );
 
-		return (
+	return (
 		<Modal
 			title="Two-Factor Authentication"
 			onRequestClose={ goBack }
@@ -46,20 +46,17 @@ function RevalidateIframe() {
 		}
 
 		window.addEventListener( 'message', maybeRefreshUser );
+
 		return () => {
 			window.removeEventListener( 'message', maybeRefreshUser );
 		};
 	}, [] );
 
 	return (
-		<>
-			<iframe
-				title="Two Factor Revalidation"
-				ref={ useMergeRefs( [ ref, useFocusableIframe() ] ) }
-				src={ userRecord.record[ '2fa_revalidation' ].revalidate_url }
-				width="400px"
-				height="400px"
-			/>
-		</>
+		<iframe
+			title="Two Factor Revalidation"
+			ref={ useMergeRefs( [ ref, useFocusableIframe() ] ) }
+			src={ userRecord.record[ '2fa_revalidation' ].revalidate_url }
+		/>
 	);
 }
diff --git a/settings/src/components/revalidate-modal.scss b/settings/src/components/revalidate-modal.scss
@@ -0,0 +1,34 @@
+.wporg-2fa__revalidate-modal {
+	$header-height: 100px;
+
+	&.components-modal__frame {
+		border-radius: 8px;
+	}
+
+	.components-modal__header {
+		height: $header-height;
+
+		h1 {
+			margin: unset;
+		}
+	}
+
+	.components-modal__content {
+		margin-top: $header-height;
+		padding: 0;
+	}
+
+	p {
+		margin: 0 32px 1rem;
+		// Match style of login page text in iframe
+		font-size: 14px;
+		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+	}
+
+	iframe {
+		border: none;
+		width: 100%;
+		// Allow for error messages above form
+		height: 330px;
+	}
+}
diff --git a/settings/src/style.scss b/settings/src/style.scss
@@ -94,3 +94,4 @@
 @import "components/global-notice";
 @import "components/screen-link";
 @import "components/auto-tabbing-input";
+@import "components/revalidate-modal";