Move up warning message on backup code screen. (#303)

WordPress · Aug 23, 2024 · 2b0e399 · 2b0e399
1 parent 3a30a1c
commit 2b0e399
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/settings/src/components/backup-codes.js b/settings/src/components/backup-codes.js
@@ -123,6 +123,13 @@ function Setup( { setRegenerating } ) {
 				</p>
 
 				<p>Please print the codes and keep them in a safe place.</p>
+
+				<Notice status="warning" isDismissible={ false }>
+					<Icon icon={ warning } className="wporg-2fa__print-codes-warning" />
+					Without access to the one-time password app or a backup code, you will lose
+					access to your account. Once you navigate away from this page, you will not be
+					be able to view these codes again.
+				</Notice>
 			</div>
 
 			{ error ? (
@@ -140,13 +147,6 @@ function Setup( { setRegenerating } ) {
 						<DownloadButton codes={ backupCodes } />
 					</ButtonGroup>
 
-					<Notice status="warning" isDismissible={ false }>
-						<Icon icon={ warning } className="wporg-2fa__print-codes-warning" />
-						Without access to the one-time password app or a backup code, you will lose
-						access to your account. Once you navigate away from this page, you will not
-						be able to view these codes again.
-					</Notice>
-
 					<CheckboxControl
 						label="I have printed or saved these codes"
 						checked={ hasPrinted }

diff --git a/settings/src/components/backup-codes.scss b/settings/src/components/backup-codes.scss
@@ -5,6 +5,7 @@
 
 	.wporg-2fa__backup-codes-list {
 		background-color: $gray-300;
+		margin-top: 24px;
 		padding: 15px 20px;
 
 		ol {