Move backup code actions directly below codes (#295)

Fixes #294
WordPress · Aug 14, 2024 · 4a154cc · 4a154cc
1 parent fe04b98
commit 4a154cc
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 11 deletions.
diff --git 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
@@ -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 {