Merge pull request Expensify#60064 from Themoonalsofall/update-2FA-page

Improvements Two-Factor Authentication Required Page

Author: neil-marcellini

src/languages/en.ts

@@ -1534,7 +1534,7 @@ const translations = {
         twoFactorAuthIsRequiredDescription: 'For security purposes, Xero requires two-factor authentication to connect the integration.',
         twoFactorAuthIsRequiredForAdminsHeader: 'Two-factor authentication required',
         twoFactorAuthIsRequiredForAdminsTitle: 'Please enable two-factor authentication',
-        twoFactorAuthIsRequiredForAdminsDescription: 'Your Xero accounting connection requires two-factor authentication. Please enable it to continue.',
+        twoFactorAuthIsRequiredForAdminsDescription: 'Your Xero accounting connection requires the use of two-factor authentication. To continue using Expensify, please enable it.',
         twoFactorAuthCannotDisable: 'Cannot disable 2FA',
         twoFactorAuthRequired: 'Two-factor authentication (2FA) is required for your Xero connection and cannot be disabled.',
     },

src/languages/es.ts

@@ -1534,7 +1534,8 @@ const translations = {
         twoFactorAuthIsRequiredDescription: 'Por razones de seguridad, Xero requiere la autenticación de dos factores para conectar la integración.',
         twoFactorAuthIsRequiredForAdminsHeader: 'Autenticación de dos factores requerida',
         twoFactorAuthIsRequiredForAdminsTitle: 'Por favor, habilita la autenticación de dos factores',
-        twoFactorAuthIsRequiredForAdminsDescription: 'Tu conexión de contabilidad con Xero requiere autenticación de dos factores. Por favor, habilítala para continuar.',
+        twoFactorAuthIsRequiredForAdminsDescription:
+            'Tu conexión de contabilidad con Xero requiere el uso de autenticación de dos factores. Por favor, habilítala para seguir usando Expensify.',
         twoFactorAuthCannotDisable: 'No se puede desactivar la autenticación de dos factores (2FA)',
         twoFactorAuthRequired: 'La autenticación de dos factores (2FA) es obligatoria para tu conexión a Xero y no se puede desactivar.',
     },

src/pages/RequireTwoFactorAuthenticationPage.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
 import Button from '@components/Button';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Icon from '@components/Icon';
 import {Encryption} from '@components/Icon/Illustrations';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -18,22 +17,17 @@ function RequireTwoFactorAuthenticationPage() {
 
     return (
         <ScreenWrapper testID={RequireTwoFactorAuthenticationPage.displayName}>
-            <HeaderWithBackButton
-                title={translate('twoFactorAuth.twoFactorAuthIsRequiredForAdminsHeader')}
-                shouldShowBackButton={false}
-                shouldDisplayHelpButton={false}
-            />
             <View style={[styles.twoFARequiredContainer]}>
-                <View style={[styles.cardSectionIllustration, styles.alignItemsCenter]}>
+                <View style={[styles.twoFAIllustration, styles.alignItemsCenter]}>
                     <Icon
                         src={Encryption}
-                        width={variables.modalTopIconHeight}
-                        height={variables.modalTopIconHeight}
+                        width={variables.twoFAIconHeight}
+                        height={variables.twoFAIconHeight}
                     />
                 </View>
-                <View style={[styles.mt5, styles.mh5]}>
-                    <View style={[styles.gap2, styles.mb10]}>
-                        <Text style={[styles.textHeadlineH1, styles.textAlignCenter]}>{translate('twoFactorAuth.twoFactorAuthIsRequiredForAdminsTitle')}</Text>
+                <View style={[styles.mt2, styles.mh5, styles.dFlex, styles.alignItemsCenter]}>
+                    <View style={[styles.mb5]}>
+                        <Text style={[styles.textHeadlineH1, styles.textAlignCenter, styles.mv2]}>{translate('twoFactorAuth.twoFactorAuthIsRequiredForAdminsHeader')}</Text>
                         <Text style={[styles.textSupporting, styles.textAlignCenter]}>{translate('twoFactorAuth.twoFactorAuthIsRequiredForAdminsDescription')}</Text>
                     </View>
                     <Button

src/styles/index.ts

@@ -4006,6 +4006,11 @@ const styles = (theme: ThemeColors) =>
             height: variables.sectionIllustrationHeight,
         },
 
+        twoFAIllustration: {
+            width: 'auto',
+            height: 140,
+        },
+
         cardSectionTitle: {
             fontSize: variables.fontSizeLarge,
             lineHeight: variables.lineHeightXLarge,
@@ -5394,7 +5399,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         twoFARequiredContainer: {
-            maxWidth: 350,
+            maxWidth: 520,
             margin: 'auto',
         },
 

src/styles/variables.ts

@@ -138,6 +138,7 @@ export default {
     emptyListIconHeight: 144,
     modalTopIconWidth: 200,
     modalTopIconHeight: 164,
+    twoFAIconHeight: 140,
     modalTopMediumIconHeight: 203,
     modalTopBigIconHeight: 244,
     modalWordmarkWidth: 154,