From 620b04b0f3626d3a9aa4baf3d35ed47ff949af49 Mon Sep 17 00:00:00 2001
From: Steven Dufresne <dufresnesteven@gmail.com>
Date: Thu, 29 Aug 2024 10:14:58 +0900
Subject: [PATCH 1/2] Updates heading text to Sentence case. (#308)

---
 settings/src/components/account-status.js     |  8 +--
 settings/src/components/screen-navigation.js  |  9 +--
 .../src/components/screen-navigation.scss     |  1 -
 settings/src/components/settings.js           | 68 ++++++++++++-------
 4 files changed, 47 insertions(+), 39 deletions(-)

diff --git a/settings/src/components/account-status.js b/settings/src/components/account-status.js
index 39b68dc7..ed2d3a19 100644
--- a/settings/src/components/account-status.js
+++ b/settings/src/components/account-status.js
@@ -48,7 +48,7 @@ export default function AccountStatus() {
 			<SettingStatusCard
 				screen="email"
 				status={ emailStatus }
-				headerText="Account Email"
+				headerText="Account email"
 				bodyText={
 					pendingEmail
 						? `Your account email is pending a change to ${ pendingEmail }.`
@@ -59,7 +59,7 @@ export default function AccountStatus() {
 			<SettingStatusCard
 				screen="webauthn"
 				status={ hasPrimaryProvider && ! webAuthnEnabled ? 'info' : webAuthnEnabled }
-				headerText="Two-Factor Security Key"
+				headerText="Two-factor security key"
 				bodyText={
 					webAuthnEnabled
 						? 'You have two-factor authentication enabled using security keys.'
@@ -71,7 +71,7 @@ export default function AccountStatus() {
 			<SettingStatusCard
 				screen="totp"
 				status={ hasPrimaryProvider && ! totpEnabled ? 'info' : totpEnabled }
-				headerText="Two-Factor App"
+				headerText="Two-factor app"
 				bodyText={
 					totpEnabled
 						? 'You have two-factor authentication enabled using an app.'
@@ -85,7 +85,7 @@ export default function AccountStatus() {
 				status={
 					! hasPrimaryProvider && ! backupCodesEnabled ? 'pending' : backupCodesEnabled
 				}
-				headerText="Two-Factor Backup Codes"
+				headerText="Two-factor backup codes"
 				bodyText={ backupBodyText }
 				disabled={ ! hasPrimaryProvider }
 			/>
diff --git a/settings/src/components/screen-navigation.js b/settings/src/components/screen-navigation.js
index cd9a7eca..82fd1193 100644
--- a/settings/src/components/screen-navigation.js
+++ b/settings/src/components/screen-navigation.js
@@ -32,14 +32,7 @@ const ScreenNavigation = ( { screen, children, title = '', canNavigate = true }
 				/>
 			) }
 
-			<h3>
-				{ title.length
-					? title
-					: screen
-							.replace( '-', ' ' )
-							.replace( 'totp', 'Two-Factor Authentication' )
-							.replace( 'webauthn', 'Two-Factor Security Key' ) }
-			</h3>
+			<h3>{ title }</h3>
 		</CardHeader>
 		<CardBody className={ 'wporg-2fa__' + screen }>{ children }</CardBody>
 	</Card>
diff --git a/settings/src/components/screen-navigation.scss b/settings/src/components/screen-navigation.scss
index a6a67ad9..9cbc4a1a 100644
--- a/settings/src/components/screen-navigation.scss
+++ b/settings/src/components/screen-navigation.scss
@@ -21,7 +21,6 @@
 	h3 {
 		font-weight: 600;
 		margin: unset;
-		text-transform: capitalize;
 	}
 
 }
\ No newline at end of file
diff --git a/settings/src/components/settings.js b/settings/src/components/settings.js
index 0f763a47..69249244 100644
--- a/settings/src/components/settings.js
+++ b/settings/src/components/settings.js
@@ -24,37 +24,53 @@ export default function Settings() {
 
 	// The index is the URL slug and the value is the React component.
 	const components = {
-		home: <AccountStatus />,
-		email: <EmailAddress />,
-		password: <Password />,
-		totp: (
-			<TOTP
-				onSuccess={ () => {
-					if ( ! backupCodesEnabled ) {
-						navigateToScreen( 'backup-codes' );
-					} else {
-						navigateToScreen( 'home' );
-					}
-				} }
-			/>
-		),
-		webauthn: (
-			<WebAuthn
-				onKeyAdd={ () => {
-					if ( ! backupCodesEnabled ) {
-						navigateToScreen( 'backup-codes' );
-					}
-				} }
-			/>
-		),
-		'backup-codes': <BackupCodes onSuccess={ () => navigateToScreen( 'home' ) } />,
+		email: {
+			title: 'Account email',
+			component: <EmailAddress />,
+		},
+		password: {
+			title: 'Password',
+			component: <Password />,
+		},
+		totp: {
+			title: 'Two-factor authentication',
+			component: (
+				<TOTP
+					onSuccess={ () => {
+						if ( ! backupCodesEnabled ) {
+							navigateToScreen( 'backup-codes' );
+						} else {
+							navigateToScreen( 'home' );
+						}
+					} }
+				/>
+			),
+		},
+		'backup-codes': {
+			title: 'Backup codes',
+			component: <BackupCodes onSuccess={ () => navigateToScreen( 'home' ) } />,
+		},
+		webauthn: {
+			title: 'Two-factor security key',
+			component: (
+				<WebAuthn
+					onKeyAdd={ () => {
+						if ( ! backupCodesEnabled ) {
+							navigateToScreen( 'backup-codes' );
+						}
+					} }
+				/>
+			),
+		},
 	};
 
 	const currentScreenComponent =
 		'home' === screen ? (
-			components[ screen ]
+			<AccountStatus />
 		) : (
-			<ScreenNavigation screen={ screen }>{ components[ screen ] }</ScreenNavigation>
+			<ScreenNavigation screen={ screen } title={ components[ screen ].title }>
+				{ components[ screen ].component }
+			</ScreenNavigation>
 		);
 
 	return currentScreenComponent;

From 91f6fce4c27328485b857fc8969b1ab1b48b792c Mon Sep 17 00:00:00 2001
From: StevenDufresne <dufresnesteven@gmail.com>
Date: Thu, 29 Aug 2024 10:20:55 +0900
Subject: [PATCH 2/2] Lowercase the last reference to two factor that is
 capital case.

---
 settings/src/components/totp.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/settings/src/components/totp.js b/settings/src/components/totp.js
index cee144ab..5cc87801 100644
--- a/settings/src/components/totp.js
+++ b/settings/src/components/totp.js
@@ -116,7 +116,7 @@ function Setup( { setSuccess } ) {
 	return (
 		<div className="wporg-2fa__totp_setup-container">
 			<p className="wporg-2fa__screen-intro">
-				Two-Factor Authentication adds an extra layer of security to your account. Use a
+				Two-factor authentication adds an extra layer of security to your account. Use a
 				phone app like{ ' ' }
 				<a
 					href="https://support.google.com/accounts/answer/1066447"