From 2b0e399a4cd92758652268e090d96d5649e8bdd6 Mon Sep 17 00:00:00 2001
From: Steven Dufresne <dufresnesteven@gmail.com>
Date: Fri, 23 Aug 2024 13:57:37 +0900
Subject: [PATCH] Move up warning message on backup code screen. (#303)

---
 settings/src/components/backup-codes.js   | 14 +++++++-------
 settings/src/components/backup-codes.scss |  1 +
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/settings/src/components/backup-codes.js b/settings/src/components/backup-codes.js
index 59398b35..a28e608a 100644
--- 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
index eafb311e..f07fcbe4 100644
--- 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 {