diff --git a/settings/src/components/account-status.js b/settings/src/components/account-status.js
index 174648ba..604c9fb3 100644
--- a/settings/src/components/account-status.js
+++ b/settings/src/components/account-status.js
@@ -53,7 +53,7 @@ export default function AccountStatus() {
diff --git a/settings/src/components/screen-navigation.js b/settings/src/components/screen-navigation.js
index 7ad9184c..82fd1193 100644
--- a/settings/src/components/screen-navigation.js
+++ b/settings/src/components/screen-navigation.js
@@ -32,15 +32,7 @@ const ScreenNavigation = ( { screen, children, title = '', canNavigate = true }
/>
) }
-
- { title.length
- ? title
- : screen
- .replace( '-', ' ' )
- .replace( 'totp', 'Two-Factor Authentication' )
- .replace( 'webauthn', 'Two-Factor Security Key' )
- .replace( 'svn', 'SVN' ) }
-
+ { title }
{ children }
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 a06019fc..87cce8c6 100644
--- a/settings/src/components/settings.js
+++ b/settings/src/components/settings.js
@@ -25,38 +25,57 @@ export default function Settings() {
// The index is the URL slug and the value is the React component.
const components = {
- home: ,
- email: ,
- password: ,
- totp: (
- {
- if ( ! backupCodesEnabled ) {
- navigateToScreen( 'backup-codes' );
- } else {
- navigateToScreen( 'home' );
- }
- } }
- />
- ),
- webauthn: (
- {
- if ( ! backupCodesEnabled ) {
- navigateToScreen( 'backup-codes' );
- }
- } }
- />
- ),
- 'backup-codes': navigateToScreen( 'home' ) } />,
- 'svn-password': ,
+ email: {
+ title: 'Account email',
+ component: ,
+ },
+ password: {
+ title: 'Password',
+ component: ,
+ },
+ totp: {
+ title: 'Two-factor authentication',
+ component: (
+ {
+ if ( ! backupCodesEnabled ) {
+ navigateToScreen( 'backup-codes' );
+ } else {
+ navigateToScreen( 'home' );
+ }
+ } }
+ />
+ ),
+ },
+ 'backup-codes': {
+ title: 'Backup codes',
+ component: navigateToScreen( 'home' ) } />,
+ },
+ webauthn: {
+ title: 'Two-factor security key',
+ component: (
+ {
+ if ( ! backupCodesEnabled ) {
+ navigateToScreen( 'backup-codes' );
+ }
+ } }
+ />
+ ),
+ },
+ 'svn-password': {
+ title: 'SVN Password',
+ component: ,
+ },
};
const currentScreenComponent =
'home' === screen ? (
- components[ screen ]
+
) : (
- { components[ screen ] }
+
+ { components[ screen ].component }
+
);
return currentScreenComponent;
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 (
- 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{ ' ' }