From 283d471bbd631d8b35c12788cdeeecf53eaa758d Mon Sep 17 00:00:00 2001
From: Joe Cooper <joe@dhis2.org>
Date: Mon, 27 Feb 2023 16:06:20 +0100
Subject: [PATCH] fix: twofactor design changes (#1245)

* fix: twofactor design changes

* chore: fix i18n

---------

Co-authored-by: HendrikThePendric <hendrik@dhis2.org>
---
 i18n/en.pot                                   | 122 +++++++++---------
 src/account/twoFactor/TwoFactor.js            |   8 +-
 src/account/twoFactor/TwoFactor.module.css    |   5 +-
 .../twoFactor/TwoFactorDisableInstructions.js |  25 +++-
 .../TwoFactorDisableInstructions.module.css   |  15 +++
 .../twoFactor/TwoFactorDisableNoticeBox.js    |   7 +-
 .../twoFactor/TwoFactorEnableInstructions.js  |  43 +++---
 .../TwoFactorEnableInstructions.module.css    |  17 ++-
 .../twoFactor/TwoFactorEnableNotice.js        |  23 ++++
 .../TwoFactorEnableNotice.module.css          |  21 +++
 .../twoFactor/TwoFactorEnableNoticeBox.js     |  16 ---
 .../twoFactor/TwoFactorIntroduction.js        |  14 ++
 .../TwoFactorIntroduction.module.css          |   7 +
 src/account/twoFactor/TwoFactorStatus.js      |  19 ++-
 .../twoFactor/TwoFactorStatus.module.css      |   9 +-
 src/account/twoFactor/TwoFactorToggler.js     |  20 ++-
 .../twoFactor/TwoFactorToggler.module.css     |  11 +-
 17 files changed, 244 insertions(+), 138 deletions(-)
 create mode 100644 src/account/twoFactor/TwoFactorDisableInstructions.module.css
 create mode 100644 src/account/twoFactor/TwoFactorEnableNotice.js
 create mode 100644 src/account/twoFactor/TwoFactorEnableNotice.module.css
 delete mode 100644 src/account/twoFactor/TwoFactorEnableNoticeBox.js
 create mode 100644 src/account/twoFactor/TwoFactorIntroduction.js
 create mode 100644 src/account/twoFactor/TwoFactorIntroduction.module.css

diff --git a/i18n/en.pot b/i18n/en.pot
index 8603da1f..15c29834 100644
--- a/i18n/en.pot
+++ b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2023-02-23T14:26:05.271Z\n"
-"PO-Revision-Date: 2023-02-23T14:26:05.271Z\n"
+"POT-Creation-Date: 2023-02-27T14:55:39.217Z\n"
+"PO-Revision-Date: 2023-02-27T14:55:39.217Z\n"
 
 msgid "Never"
 msgstr "Never"
@@ -190,27 +190,29 @@ msgstr "Login"
 msgid "Failed to update password"
 msgstr "Failed to update password"
 
-msgid "2 Factor Authentication"
-msgstr "2 Factor Authentication"
+msgid "Two-factor Authentication"
+msgstr "Two-factor Authentication"
 
-msgid ""
-"To disable 2 Factor Authentication for your account, first enter the "
-"confirmation code from the Authenticator App and then click \"Disable\"."
-msgstr ""
-"To disable 2 Factor Authentication for your account, first enter the "
-"confirmation code from the Authenticator App and then click \"Disable\"."
+msgid "Turn off two-factor authentication"
+msgstr "Turn off two-factor authentication"
+
+msgid "Open your authenticator app."
+msgstr "Open your authenticator app."
+
+msgid "Now, enter the authentication code below and click the \"Turn off\" button."
+msgstr "Now, enter the authentication code below and click the \"Turn off\" button."
 
-msgid "Instructions after disabling 2FA"
-msgstr "Instructions after disabling 2FA"
+msgid "Remove two-factor account"
+msgstr "Remove two-factor account"
 
 msgid ""
-"After disabling 2-factor authentication on your account we recommend to "
-"also remove the account from the Authenticator App on your phone/tablet, so "
-"you don't run into problems if you want to re-enable it in the future."
+"Two-factor authentication is now turned off. It is recommended to remove "
+"the account from your authenticator app now to prevent any future issues "
+"re-enabling two-factor authentication."
 msgstr ""
-"After disabling 2-factor authentication on your account we recommend to "
-"also remove the account from the Authenticator App on your phone/tablet, so "
-"you don't run into problems if you want to re-enable it in the future."
+"Two-factor authentication is now turned off. It is recommended to remove "
+"the account from your authenticator app now to prevent any future issues "
+"re-enabling two-factor authentication."
 
 msgid "Play store"
 msgstr "Play store"
@@ -218,58 +220,62 @@ msgstr "Play store"
 msgid "App store"
 msgstr "App store"
 
-msgid "In the Authenticator App, click the ➕ sign to add a new entry."
-msgstr "In the Authenticator App, click the ➕ sign to add a new entry."
-
-msgid "Choose \"Scan a barcode\""
-msgstr "Choose \"Scan a barcode\""
-
-msgid "Scan the barcode below"
-msgstr "Scan the barcode below"
-
-msgid "Now enter the code from the Authenticator app below and click \"enable\""
-msgstr "Now enter the code from the Authenticator app below and click \"enable\""
-
-msgid "Instructions for re-enabling 2-Factor Authentication"
-msgstr "Instructions for re-enabling 2-Factor Authentication"
+msgid "Turn on two-factor authentication"
+msgstr "Turn on two-factor authentication"
 
 msgid ""
-"When enabling 2 Factor Authentication, you have to add a new entry to the "
-"Authenticator App. If you previously had configured the Authenticator App "
-"for this user account you need to remove this entry and create a new one, "
-"otherwise two Factor Authentication can not be enabled."
+"Make sure you have an authenticator app installed on your device. We "
+"recommend Google Authenticator"
 msgstr ""
-"When enabling 2 Factor Authentication, you have to add a new entry to the "
-"Authenticator App. If you previously had configured the Authenticator App "
-"for this user account you need to remove this entry and create a new one, "
-"otherwise two Factor Authentication can not be enabled."
+"Make sure you have an authenticator app installed on your device. We "
+"recommend Google Authenticator"
 
-msgid "2 Factor Authentication is currently"
-msgstr "2 Factor Authentication is currently"
+msgid ""
+"Now, enter the code from your authenticator app below and click the \"Turn "
+"on\" button."
+msgstr ""
+"Now, enter the code from your authenticator app below and click the \"Turn "
+"on\" button."
 
-msgid "enabled"
-msgstr "enabled"
+msgid "Already set up two-factor authentication before?"
+msgstr "Already set up two-factor authentication before?"
 
-msgid "disabled"
-msgstr "disabled"
+msgid ""
+"If you have set up two-factor authentication for this account before, you "
+"need to remove that entry from your authenticator app before setting it up "
+"again."
+msgstr ""
+"If you have set up two-factor authentication for this account before, you "
+"need to remove that entry from your authenticator app before setting it up "
+"again."
 
-msgid "Could not update 2 Factor authentication status"
-msgstr "Could not update 2 Factor authentication status"
+msgid ""
+"Two-factor authentication protects your account with an extra layer of "
+"security. With two-factor authentication turned on, you will need to enter "
+"an authentication code from your device every time you log in."
+msgstr ""
+"Two-factor authentication protects your account with an extra layer of "
+"security. With two-factor authentication turned on, you will need to enter "
+"an authentication code from your device every time you log in."
 
-msgid "Please enter a 6 digit code"
-msgstr "Please enter a 6 digit code"
+msgid "Two-factor authentication is on."
+msgstr "Two-factor authentication is on."
 
-msgid "2 Factor Authentication code"
-msgstr "2 Factor Authentication code"
+msgid "Two-factor authentication is off."
+msgstr "Two-factor authentication is off."
 
-msgid "XXXXXX"
-msgstr "XXXXXX"
+msgid "Could not update two-factor authentication"
+msgstr "Could not update two-factor authentication"
 
-msgid "Disable"
-msgstr "Disable"
+msgid ""
+"This code does not look right. Enter the six digit code from your "
+"authentication app."
+msgstr ""
+"This code does not look right. Enter the six digit code from your "
+"authentication app."
 
-msgid "Enable"
-msgstr "Enable"
+msgid "Six digit authentication code"
+msgstr "Six digit authentication code"
 
 msgid "Could not enable 2 Factor Authentication"
 msgstr "Could not enable 2 Factor Authentication"
diff --git a/src/account/twoFactor/TwoFactor.js b/src/account/twoFactor/TwoFactor.js
index 8a023723..caf93d80 100644
--- a/src/account/twoFactor/TwoFactor.js
+++ b/src/account/twoFactor/TwoFactor.js
@@ -6,7 +6,8 @@ import styles from './TwoFactor.module.css'
 import TwoFactorDisableInstructions from './TwoFactorDisableInstructions.js'
 import TwoFactorDisableNoticeBox from './TwoFactorDisableNoticeBox.js'
 import TwoFactorEnableInstructions from './TwoFactorEnableInstructions.js'
-import TwoFactorEnableNoticeBox from './TwoFactorEnableNoticeBox.js'
+import TwoFactorEnableNotice from './TwoFactorEnableNotice.js'
+import TwoFactorIntroduction from './TwoFactorIntroduction.js'
 import TwoFactorStatus from './TwoFactorStatus.js'
 import TwoFactorToggler from './TwoFactorToggler.js'
 import useTwoFaToggleMutation from './useTwoFaToggleMutation.js'
@@ -23,9 +24,10 @@ const TwoFactor = () => {
     return (
         <div className={cx('content-area', styles.container)}>
             <div className={styles.header}>
-                {i18n.t('2 Factor Authentication')}
+                {i18n.t('Two-factor Authentication', { keySeparator: '<|>' })}
             </div>
             <Card className={styles.card}>
+                <TwoFactorIntroduction />
                 <TwoFactorStatus isTwoFaEnabled={isTwoFaEnabled} />
                 {lastActionWasTwoFaDisableSuccess && (
                     <TwoFactorDisableNoticeBox />
@@ -42,7 +44,7 @@ const TwoFactor = () => {
                     loading={loading}
                 />
                 {!isTwoFaEnabled && !lastActionWasTwoFaDisableSuccess && (
-                    <TwoFactorEnableNoticeBox />
+                    <TwoFactorEnableNotice />
                 )}
             </Card>
         </div>
diff --git a/src/account/twoFactor/TwoFactor.module.css b/src/account/twoFactor/TwoFactor.module.css
index 2951a2f0..745d42e3 100644
--- a/src/account/twoFactor/TwoFactor.module.css
+++ b/src/account/twoFactor/TwoFactor.module.css
@@ -7,6 +7,7 @@
     display: block;
     width: auto;
     margin-right: 16px;
-    padding: 16px;
+    padding: var(--spacers-dp24);
     max-width: 960px;
-}
\ No newline at end of file
+    height: auto;
+}
diff --git a/src/account/twoFactor/TwoFactorDisableInstructions.js b/src/account/twoFactor/TwoFactorDisableInstructions.js
index 7a08c150..b1383253 100644
--- a/src/account/twoFactor/TwoFactorDisableInstructions.js
+++ b/src/account/twoFactor/TwoFactorDisableInstructions.js
@@ -1,12 +1,27 @@
 import i18n from '@dhis2/d2-i18n'
 import React from 'react'
+import styles from './TwoFactorDisableInstructions.module.css'
 
 const TwoFactorDisableInstructions = () => (
-    <p>
-        {i18n.t(
-            'To disable 2 Factor Authentication for your account, first enter the confirmation code from the Authenticator App and then click "Disable".'
-        )}
-    </p>
+    <>
+        <p className={styles.instructionsHeader}>
+            {i18n.t('Turn off two-factor authentication', {
+                keySeparator: '<|>',
+            })}
+        </p>
+        <ol className={styles.orderedList}>
+            <li>
+                {i18n.t('Open your authenticator app.', {
+                    keySeparator: '<|>',
+                })}
+            </li>
+            <li>
+                {i18n.t(
+                    'Now, enter the authentication code below and click the "Turn off" button.'
+                )}
+            </li>
+        </ol>
+    </>
 )
 
 export default TwoFactorDisableInstructions
diff --git a/src/account/twoFactor/TwoFactorDisableInstructions.module.css b/src/account/twoFactor/TwoFactorDisableInstructions.module.css
new file mode 100644
index 00000000..472bd5e3
--- /dev/null
+++ b/src/account/twoFactor/TwoFactorDisableInstructions.module.css
@@ -0,0 +1,15 @@
+.instructionsHeader {
+    font-size: 18px;
+    font-weight: 500;
+    color: var(--colors-grey900);
+}
+
+.orderedList {
+    padding-inline-start: 24px;
+    font-size: 14px;
+    line-height: 19px;
+}
+
+.orderedList li + li {
+    margin-top: var(--spacers-dp8);
+}
diff --git a/src/account/twoFactor/TwoFactorDisableNoticeBox.js b/src/account/twoFactor/TwoFactorDisableNoticeBox.js
index db37c0e3..03ac965b 100644
--- a/src/account/twoFactor/TwoFactorDisableNoticeBox.js
+++ b/src/account/twoFactor/TwoFactorDisableNoticeBox.js
@@ -6,11 +6,12 @@ import styles from './TwoFactorDisableNoticeBox.module.css'
 const TwoFactorDisableNoticeBox = () => (
     <NoticeBox
         className={styles.container}
-        info
-        title={i18n.t('Instructions after disabling 2FA')}
+        warning
+        title={i18n.t('Remove two-factor account', { keySeparator: '<|>' })}
     >
         {i18n.t(
-            "After disabling 2-factor authentication on your account we recommend to also remove the account from the Authenticator App on your phone/tablet, so you don't run into problems if you want to re-enable it in the future."
+            'Two-factor authentication is now turned off. It is recommended to remove the account from your authenticator app now to prevent any future issues re-enabling two-factor authentication.',
+            { keySeparator: '<|>' }
         )}
     </NoticeBox>
 )
diff --git a/src/account/twoFactor/TwoFactorEnableInstructions.js b/src/account/twoFactor/TwoFactorEnableInstructions.js
index 414994eb..62eea1a7 100644
--- a/src/account/twoFactor/TwoFactorEnableInstructions.js
+++ b/src/account/twoFactor/TwoFactorEnableInstructions.js
@@ -35,40 +35,37 @@ const QRCode = () => {
 
 const TwoFactorEnableInstructions = () => (
     <>
-        <p className={styles.intro}>
-            {i18n.t(
-                'To enable 2 Factor Authentication for your account, follow the following steps:'
-            )}
+        <p className={styles.instructionsHeader}>
+            {i18n.t('Turn on two-factor authentication', {
+                keySeparator: '<|>',
+            })}
         </p>
         <ol className={styles.orderedList}>
-            <li>
-                <span>
-                    {i18n.t(
-                        'Ensure you have the Authenticator App installed on you phone or tablet. It is available for download here:'
-                    )}
-                </span>
-                <ul className={styles.unOrderedList}>
-                    <li>
-                        <PlayStoreLink />
-                    </li>
-                    <li>
-                        <AppStoreLink />
-                    </li>
-                </ul>
-            </li>
             <li>
                 {i18n.t(
-                    'In the Authenticator App, click the ➕ sign to add a new entry.'
+                    'Make sure you have an authenticator app installed on your device. We recommend Google Authenticator'
                 )}
+                {' ('}
+                <span className={styles.downloadLink}>
+                    <PlayStoreLink />
+                </span>
+                {', '}
+                <span className={styles.downloadLink}>
+                    <AppStoreLink />
+                </span>
+                {').'}
             </li>
-            <li>{i18n.t('Choose "Scan a barcode"')}</li>
             <li>
-                <span>{i18n.t('Scan the barcode below')}</span>
+                <span>
+                    {i18n.t(
+                        'Use the authenticator app to scan the QR code below:'
+                    )}
+                </span>
                 <QRCode />
             </li>
             <li>
                 {i18n.t(
-                    'Now enter the code from the Authenticator app below and click "enable"'
+                    'Now, enter the code from your authenticator app below and click the "Turn on" button.'
                 )}
             </li>
         </ol>
diff --git a/src/account/twoFactor/TwoFactorEnableInstructions.module.css b/src/account/twoFactor/TwoFactorEnableInstructions.module.css
index 8f095ae0..3d1385c2 100644
--- a/src/account/twoFactor/TwoFactorEnableInstructions.module.css
+++ b/src/account/twoFactor/TwoFactorEnableInstructions.module.css
@@ -4,13 +4,22 @@
     display: block;
 }
 
+.instructionsHeader {
+    font-size: 18px;
+    font-weight: 500;
+    color: var(--colors-grey900);
+}
+
 .orderedList {
     padding-inline-start: 24px;
-    line-height: 24px;
+    font-size: 14px;
+    line-height: 19px;
 }
 
-.unOrderedList {
-    padding-inline-start: 16px;
-    line-height: 20px;
+.orderedList li + li {
+    margin-top: var(--spacers-dp8);
 }
 
+.downloadLink a {
+    color: var(--colors-grey900);
+}
diff --git a/src/account/twoFactor/TwoFactorEnableNotice.js b/src/account/twoFactor/TwoFactorEnableNotice.js
new file mode 100644
index 00000000..1f310abc
--- /dev/null
+++ b/src/account/twoFactor/TwoFactorEnableNotice.js
@@ -0,0 +1,23 @@
+import i18n from '@dhis2/d2-i18n'
+import { IconQuestion16 } from '@dhis2/ui'
+import React from 'react'
+import styles from './TwoFactorEnableNotice.module.css'
+
+const TwoFactorEnableNotice = () => (
+    <div className={styles.enableNoticeContainer}>
+        <p className={styles.enableNoticeTitle}>
+            <IconQuestion16 />
+            {i18n.t('Already set up two-factor authentication before?', {
+                keySeparator: '<|>',
+            })}
+        </p>
+        <p className={styles.enableNoticeBody}>
+            {i18n.t(
+                'If you have set up two-factor authentication for this account before, you need to remove that entry from your authenticator app before setting it up again.',
+                { keySeparator: '<|>' }
+            )}
+        </p>
+    </div>
+)
+
+export default TwoFactorEnableNotice
diff --git a/src/account/twoFactor/TwoFactorEnableNotice.module.css b/src/account/twoFactor/TwoFactorEnableNotice.module.css
new file mode 100644
index 00000000..1031e165
--- /dev/null
+++ b/src/account/twoFactor/TwoFactorEnableNotice.module.css
@@ -0,0 +1,21 @@
+.enableNoticeContainer {
+    max-width: 640px;
+    margin-top: var(--spacers-dp32);
+}
+
+.enableNoticeTitle {
+    display: flex;
+    align-items: center;
+    gap: var(--spacers-dp8);
+    font-size: 14px;
+    line-height: 19px;
+    color: var(--colors-grey900);
+    margin: 0 0 var(--spacers-dp8);
+}
+
+.enableNoticeBody {
+    color: var(--colors-grey800);
+    font-size: 14px;
+    line-height: 19px;
+    margin: 0 0 0 var(--spacers-dp24);
+}
diff --git a/src/account/twoFactor/TwoFactorEnableNoticeBox.js b/src/account/twoFactor/TwoFactorEnableNoticeBox.js
deleted file mode 100644
index 58c14021..00000000
--- a/src/account/twoFactor/TwoFactorEnableNoticeBox.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import i18n from '@dhis2/d2-i18n'
-import { NoticeBox } from '@dhis2/ui'
-import React from 'react'
-
-const TwoFactorEnableNoticeBox = () => (
-    <NoticeBox
-        info
-        title={i18n.t('Instructions for re-enabling 2-Factor Authentication')}
-    >
-        {i18n.t(
-            'When enabling 2 Factor Authentication, you have to add a new entry to the Authenticator App. If you previously had configured the Authenticator App for this user account you need to remove this entry and create a new one, otherwise two Factor Authentication can not be enabled.'
-        )}
-    </NoticeBox>
-)
-
-export default TwoFactorEnableNoticeBox
diff --git a/src/account/twoFactor/TwoFactorIntroduction.js b/src/account/twoFactor/TwoFactorIntroduction.js
new file mode 100644
index 00000000..3efd2242
--- /dev/null
+++ b/src/account/twoFactor/TwoFactorIntroduction.js
@@ -0,0 +1,14 @@
+import i18n from '@dhis2/d2-i18n'
+import React from 'react'
+import styles from './TwoFactorIntroduction.module.css'
+
+const TwoFactorIntroduction = () => (
+    <p className={styles.introductionText}>
+        {i18n.t(
+            'Two-factor authentication protects your account with an extra layer of security. With two-factor authentication turned on, you will need to enter an authentication code from your device every time you log in.',
+            { keySeparator: '<|>' }
+        )}
+    </p>
+)
+
+export default TwoFactorIntroduction
diff --git a/src/account/twoFactor/TwoFactorIntroduction.module.css b/src/account/twoFactor/TwoFactorIntroduction.module.css
new file mode 100644
index 00000000..f41ff47b
--- /dev/null
+++ b/src/account/twoFactor/TwoFactorIntroduction.module.css
@@ -0,0 +1,7 @@
+.introductionText {
+    font-size: 14px;
+    line-height: 19px;
+    max-width: 720px;
+    margin: 0 0 var(--spacers-dp24);
+    color: var(--colors-grey700);
+}
diff --git a/src/account/twoFactor/TwoFactorStatus.js b/src/account/twoFactor/TwoFactorStatus.js
index 5b5d09ae..48262fe1 100644
--- a/src/account/twoFactor/TwoFactorStatus.js
+++ b/src/account/twoFactor/TwoFactorStatus.js
@@ -1,15 +1,24 @@
 import i18n from '@dhis2/d2-i18n'
-import { Tag } from '@dhis2/ui'
+import { NoticeBox } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 import styles from './TwoFactorStatus.module.css'
 
 const TwoFactorStatus = ({ isTwoFaEnabled }) => (
     <div className={styles.statusHeader}>
-        {i18n.t('2 Factor Authentication is currently')}{' '}
-        <Tag positive={isTwoFaEnabled} bold>
-            {isTwoFaEnabled ? i18n.t('enabled') : i18n.t('disabled')}
-        </Tag>
+        {isTwoFaEnabled ? (
+            <NoticeBox valid>
+                {i18n.t('Two-factor authentication is on.', {
+                    keySeparator: '<|>',
+                })}
+            </NoticeBox>
+        ) : (
+            <NoticeBox>
+                {i18n.t('Two-factor authentication is off.', {
+                    keySeparator: '<|>',
+                })}
+            </NoticeBox>
+        )}
     </div>
 )
 
diff --git a/src/account/twoFactor/TwoFactorStatus.module.css b/src/account/twoFactor/TwoFactorStatus.module.css
index 4a57d6ad..904d47e8 100644
--- a/src/account/twoFactor/TwoFactorStatus.module.css
+++ b/src/account/twoFactor/TwoFactorStatus.module.css
@@ -1,7 +1,4 @@
 .statusHeader {
-    font-weight: 500;
-    font-size: 1.2rem;
-    margin: 0;
-    display: inline-flex;
-    gap: 8px;
-}
\ No newline at end of file
+    width: 100%;
+    margin: var(--spacers-dp16) 0 var(--spacers-dp32);
+}
diff --git a/src/account/twoFactor/TwoFactorToggler.js b/src/account/twoFactor/TwoFactorToggler.js
index 56d621f7..4a759e9c 100644
--- a/src/account/twoFactor/TwoFactorToggler.js
+++ b/src/account/twoFactor/TwoFactorToggler.js
@@ -10,10 +10,14 @@ const getValidationText = (hasErrorState, error) => {
     if (error) {
         return (
             error?.message ??
-            i18n.t('Could not update 2 Factor authentication status')
+            i18n.t('Could not update two-factor authentication', {
+                keySeparator: '<|>',
+            })
         )
     } else if (hasErrorState) {
-        return i18n.t('Please enter a 6 digit code')
+        return i18n.t(
+            'This code does not look right. Enter the six digit code from your authentication app.'
+        )
     } else {
         return undefined
     }
@@ -31,8 +35,7 @@ const TwoFactorToggler = ({ error, isTwoFaEnabled, loading, toggleTwoFa }) => {
     return (
         <form className={styles.container}>
             <InputField
-                label={i18n.t('2 Factor Authentication code')}
-                placeholder={i18n.t('XXXXXX')} // As seen on GitHub
+                label={i18n.t('Six digit authentication code')}
                 value={twoFaConfirmationCode}
                 onChange={({ value }) => setTwoFaConfirmationCode(value)}
                 onBlur={() => setTouched(true)}
@@ -50,11 +53,16 @@ const TwoFactorToggler = ({ error, isTwoFaEnabled, loading, toggleTwoFa }) => {
                     setTwoFaConfirmationCode('')
                 }}
                 primary
-                large
                 className={styles.button}
                 type="submit"
             >
-                {isTwoFaEnabled ? i18n.t('Disable') : i18n.t('Enable')}
+                {isTwoFaEnabled
+                    ? i18n.t('Turn off two-factor authentication', {
+                          keySeparator: '<|>',
+                      })
+                    : i18n.t('Turn on two-factor authentication', {
+                          keySeparator: '<|>',
+                      })}
             </Button>
         </form>
     )
diff --git a/src/account/twoFactor/TwoFactorToggler.module.css b/src/account/twoFactor/TwoFactorToggler.module.css
index 53d4dee0..1509c726 100644
--- a/src/account/twoFactor/TwoFactorToggler.module.css
+++ b/src/account/twoFactor/TwoFactorToggler.module.css
@@ -1,11 +1,8 @@
 .container {
     display: flex;
+    flex-direction: column;
     align-items: flex-start;
-    gap: 16px;
-    /* prevent content shift when showing error */
-    min-height: 80px;
-    margin-bottom: 16px;
+    gap: var(--spacers-dp8);
+    margin-bottom: var(--spacers-dp24);
+    padding-left: var(--spacers-dp24);
 }
-.button {
-    margin-top: 18px;
-}
\ No newline at end of file