Make saving state look the same as password and totp.

WordPress · Jul 8, 2024 · 5c5acbb · 5c5acbb
1 parent 3e56892
commit 5c5acbb
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/settings/src/components/email-address.js b/settings/src/components/email-address.js
@@ -108,17 +108,11 @@ export default function EmailAddress() {
 				<Button
 					onClick={ handleSave }
 					disabled={ ! hasEdits || isSaving }
-					isPrimary={ hasEdits }
-					isSecondary={ ! hasEdits }
+					isPrimary={ hasEdits && ! justChangedEmail }
+					isSecondary={ ! hasEdits || justChangedEmail }
+					isBusy={ isSaving && ! justChangedEmail }
 				>
-					{ isSaving ? (
-						<>
-							<Spinner />
-							Updating
-						</>
-					) : (
-						'Update Email Address'
-					) }
+					{ isSaving && ! justChangedEmail ? 'Updating' : 'Update Email Address' }
 				</Button>
 			</p>
 		</>

diff --git a/settings/src/components/email-address.scss b/settings/src/components/email-address.scss
@@ -1,7 +1,13 @@
 .wporg-2fa__email {
+	.components-notice.actions-on-right {
+		margin-bottom: 16px;
+	}
+
 	/* Align the actions in a <Notice /> to the right */
 	.components-notice.actions-on-right > div {
 		display: flex;
+		margin-right: 0;
+
 		&> p {
 			flex-grow: 1;
 			margin: initial; /* wporg-support adds top padding to <p> causing button alignment issues. */