From 4a154cc6a7e37a5acc28d467cff327cd80712e88 Mon Sep 17 00:00:00 2001
From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com>
Date: Wed, 14 Aug 2024 14:02:28 +1200
Subject: [PATCH] Move backup code actions directly below codes (#295)

Fixes #294
---
 settings/src/components/backup-codes.js   | 12 ++++++------
 settings/src/components/backup-codes.scss |  9 ++++-----
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/settings/src/components/backup-codes.js b/settings/src/components/backup-codes.js
index fc361d6f..b9be260b 100644
--- a/settings/src/components/backup-codes.js
+++ b/settings/src/components/backup-codes.js
@@ -134,6 +134,12 @@ function Setup( { setRegenerating } ) {
 				<>
 					<CodeList codes={ backupCodes } />
 
+					<ButtonGroup>
+						<CopyToClipboardButton codes={ backupCodes } />
+						<PrintButton />
+						<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
@@ -159,12 +165,6 @@ function Setup( { setRegenerating } ) {
 				>
 					All Finished
 				</Button>
-
-				<ButtonGroup>
-					<CopyToClipboardButton codes={ backupCodes } />
-					<PrintButton />
-					<DownloadButton codes={ backupCodes } />
-				</ButtonGroup>
 			</Flex>
 		</>
 	);
diff --git a/settings/src/components/backup-codes.scss b/settings/src/components/backup-codes.scss
index 691e1c6b..4d2e47a3 100644
--- a/settings/src/components/backup-codes.scss
+++ b/settings/src/components/backup-codes.scss
@@ -1,7 +1,10 @@
 .wporg-2fa__backup-codes {
+	> * {
+		margin-bottom: 1em;
+	}
+
 	.wporg-2fa__backup-codes-list {
 		background-color: $gray-300;
-		margin: 1em 0;
 		padding: 15px 20px;
 
 		ol {
@@ -18,10 +21,6 @@
 			color: $gray-700;
 		}
 	}
-
-	.components-notice {
-		margin: 0 0 1em;
-	}
 }
 
 #bbpress-forums .wporg-2fa__backup-codes {