[Update Account Settings] Preferences, About, Security

src/components/Icon/Illustrations.ts

@@ -54,7 +54,7 @@ import MoneyWings from '@assets/images/simple-illustrations/simple-illustration_
 import OpenSafe from '@assets/images/simple-illustrations/simple-illustration__opensafe.svg';
 import PalmTree from '@assets/images/simple-illustrations/simple-illustration__palmtree.svg';
 import Profile from '@assets/images/simple-illustrations/simple-illustration__profile.svg';
-import QrCode from '@assets/images/simple-illustrations/simple-illustration__qr-code.svg';
+import QRCode from '@assets/images/simple-illustrations/simple-illustration__qr-code.svg';
 import SanFrancisco from '@assets/images/simple-illustrations/simple-illustration__sanfrancisco.svg';
 import ShieldYellow from '@assets/images/simple-illustrations/simple-illustration__shield.svg';
 import SmallRocket from '@assets/images/simple-illustrations/simple-illustration__smallrocket.svg';
@@ -127,5 +127,5 @@ export {
     PalmTree,
     LockClosed,
     Gears,
-    QrCode,
+    QRCode,
 };

src/components/LottieAnimations/index.tsx

@@ -1,7 +1,9 @@
+import colors from '@styles/theme/colors';
 import variables from '@styles/variables';
 import type DotLottieAnimation from './types';
+import type {AnimationKey} from './types';
 
-const DotLottieAnimations: Record<string, DotLottieAnimation> = {
+const DotLottieAnimations: Record<AnimationKey, DotLottieAnimation> = {
     ExpensifyLounge: {
         file: require('@assets/animations/ExpensifyLounge.lottie'),
         w: 1920,
@@ -26,6 +28,7 @@ const DotLottieAnimations: Record<string, DotLottieAnimation> = {
         file: require('@assets/animations/PreferencesDJ.lottie'),
         w: 375,
         h: 240,
+        backgroundColor: colors.blue500,
     },
     ReviewingBankInfo: {
         file: require('@assets/animations/ReviewingBankInfo.lottie'),

src/components/LottieAnimations/types.ts

@@ -1,9 +1,26 @@
 import type {LottieViewProps} from 'lottie-react-native';
+import type {ColorValue} from '@styles/utils/types';
+
+type AnimationKey =
+    | 'ExpensifyLounge'
+    | 'FastMoney'
+    | 'Fireworks'
+    | 'Hands'
+    | 'PreferencesDJ'
+    | 'ReviewingBankInfo'
+    | 'WorkspacePlanet'
+    | 'SaveTheWorld'
+    | 'Safe'
+    | 'Magician'
+    | 'Update'
+    | 'Coin';
 
 type DotLottieAnimation = {
     file: LottieViewProps['source'];
     w: number;
     h: number;
+    backgroundColor?: ColorValue;
 };
 
+export type {AnimationKey};
 export default DotLottieAnimation;

src/components/Section/index.tsx

@@ -90,7 +90,7 @@ function Section({
     const StyleUtils = useStyleUtils();
     const {isSmallScreenWidth} = useWindowDimensions();
 
-    const illustrationContainerStyle: StyleProp<ViewStyle> = StyleUtils.getBackgroundColorStyle(illustrationBackgroundColor ?? theme.appBG);
+    const illustrationContainerStyle: StyleProp<ViewStyle> = StyleUtils.getBackgroundColorStyle(illustrationBackgroundColor ?? illustration?.backgroundColor ?? theme.appBG);
 
     return (
         <>
@@ -107,6 +107,7 @@ function Section({
                             <Lottie
                                 source={illustration}
                                 style={styles.h100}
+                                webStyle={styles.h100}
                                 autoPlay
                                 loop
                             />

src/components/TestToolMenu.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
-import useThemeStyles from '@hooks/useThemeStyles';
 import * as ApiUtils from '@libs/ApiUtils';
 import compose from '@libs/compose';
 import * as Network from '@userActions/Network';
@@ -14,7 +13,6 @@ import Button from './Button';
 import {withNetwork} from './OnyxProvider';
 import Switch from './Switch';
 import TestToolRow from './TestToolRow';
-import Text from './Text';
 
 type TestToolMenuOnyxProps = {
     /** User object in Onyx */
@@ -29,17 +27,9 @@ const USER_DEFAULT: UserOnyx = {shouldUseStagingServer: undefined, isSubscribedT
 
 function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) {
     const shouldUseStagingServer = user?.shouldUseStagingServer ?? ApiUtils.isUsingStagingApi();
-    const styles = useThemeStyles();
 
     return (
         <>
-            <Text
-                style={[styles.textLabelSupporting, styles.mb4]}
-                numberOfLines={1}
-            >
-                Test Preferences
-            </Text>
-
             {/* Option to switch between staging and default api endpoints.
         This enables QA, internal testers and external devs to take advantage of sandbox environments for 3rd party services like Plaid and Onfido.
         This toggle is not rendered for internal devs as they make environment changes directly to the .env file. */}

src/components/TestToolRow.tsx

@@ -14,7 +14,7 @@ type TestToolRowProps = {
 function TestToolRow({title, children}: TestToolRowProps) {
     const styles = useThemeStyles();
     return (
-        <View style={[styles.flexRow, styles.mb6, styles.justifyContentBetween, styles.alignItemsCenter, styles.mnw120]}>
+        <View style={styles.testRowContainer}>
             <View style={styles.flex2}>
                 <Text>{title}</Text>
             </View>

src/languages/en.ts

@@ -1048,6 +1048,14 @@ export default {
         defaultPaymentMethod: 'Default',
     },
     preferencesPage: {
+        appSection: {
+            title: 'App preferences',
+            subtitle: 'Customize your Expensify account.',
+        },
+        testSection: {
+            title: 'Test preferences',
+            subtitle: 'Settings to help debug and test the app on staging.',
+        },
         receiveRelevantFeatureUpdatesAndExpensifyNews: 'Receive relevant feature updates and Expensify news',
     },
     priorityModePage: {

src/languages/es.ts

@@ -1046,6 +1046,14 @@ export default {
     },
     preferencesPage: {
         receiveRelevantFeatureUpdatesAndExpensifyNews: 'Recibir noticias sobre Expensify y actualizaciones del producto',
+        appSection: {
+            title: 'Preferencias de la aplicación',
+            subtitle: 'Personaliza tu cuenta de Expensify.',
+        },
+        testSection: {
+            title: 'Preferencias para tests',
+            subtitle: 'Ajustes para ayudar a depurar y probar la aplicación en “staging”.',
+        },
     },
     priorityModePage: {
         priorityMode: 'Modo prioridad',

src/pages/ShareCodePage.tsx

@@ -80,7 +80,7 @@ function ShareCodePage({report, session, currentUserPersonalDetails}: ShareCodeP
                 title={translate('common.shareCode')}
                 onBackButtonPress={() => Navigation.goBack(isReport ? ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report.reportID) : ROUTES.SETTINGS)}
                 shouldShowBackButton={isReport || isSmallScreenWidth}
-                icon={Illustrations.QrCode}
+                icon={Illustrations.QRCode}
             />
             <ScrollView style={[themeStyles.flex1, themeStyles.mt3]}>
                 <View style={[isSmallScreenWidth ? themeStyles.workspaceSectionMobile : themeStyles.workspaceSection, themeStyles.ph4]}>

src/pages/settings/Preferences/PreferencesPage.js

@@ -1,12 +1,14 @@
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React from 'react';
-import {View} from 'react-native';
+import {ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Illustrations from '@components/Icon/Illustrations';
-import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
 import LottieAnimations from '@components/LottieAnimations';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import ScreenWrapper from '@components/ScreenWrapper';
+import Section from '@components/Section';
 import Switch from '@components/Switch';
 import TestToolMenu from '@components/TestToolMenu';
 import Text from '@components/Text';
@@ -20,7 +22,6 @@
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import SCREENS from '@src/SCREENS';
 
 const propTypes = {
     /** The chat priority mode */
@@ -43,67 +44,94 @@
 };
 
 function PreferencesPage(props) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {isProduction} = useEnvironment();
     const {translate, preferredLocale} = useLocalize();
     const {isSmallScreenWidth} = useWindowDimensions();
 
     return (
-        <IllustratedHeaderPageLayout
-            title={translate('common.preferences')}
-            backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.PREFERENCES.ROOT].backgroundColor}
-            illustration={LottieAnimations.PreferencesDJ}
-            shouldShowBackButton={isSmallScreenWidth}
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            shouldEnablePickerAvoiding={false}
+            shouldEnableMaxHeight
             shouldShowOfflineIndicatorInWideScreen
-            icon={Illustrations.Gears}
             testID={PreferencesPage.displayName}
         >
-            <View style={styles.mb6}>
-                <Text
-                    style={[styles.textLabelSupporting, styles.mb2, styles.ml5, styles.mr8]}
-                    numberOfLines={1}
-                >
-                    {translate('common.notifications')}
-                </Text>
-                <View style={[styles.flexRow, styles.mb4, styles.justifyContentBetween, styles.ml5, styles.mr8]}>
-                    <View style={styles.flex4}>
-                        <Text>{translate('preferencesPage.receiveRelevantFeatureUpdatesAndExpensifyNews')}</Text>
-                    </View>
-                    <View style={[styles.flex1, styles.alignItemsEnd]}>
-                        <Switch
-                            accessibilityLabel={translate('preferencesPage.receiveRelevantFeatureUpdatesAndExpensifyNews')}
-                            isOn={lodashGet(props.user, 'isSubscribedToNewsletter', true)}
-                            onToggle={User.updateNewsletterSubscription}
-                        />
-                    </View>
+            <HeaderWithBackButton
+                title={translate('common.preferences')}
+                icon={Illustrations.Gears}
+                shouldShowBackButton={isSmallScreenWidth}
+                onBackButtonPress={() => Navigation.goBack()}
+            />
+            <ScrollView contentContainerStyle={styles.pt3}>
+                <View style={[styles.flex1, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
+                    <Section
+                        title={translate('preferencesPage.appSection.title')}
+                        subtitle={translate('preferencesPage.appSection.subtitle')}
+                        isCentralPane
+                        subtitleMuted
+                        illustration={LottieAnimations.PreferencesDJ}
+                        titleStyles={styles.accountSettingsSectionTitle}
+                    >
+                        <View style={[styles.flex1, styles.mt5]}>
+                            <Text
+                                style={[styles.textLabelSupporting, styles.mb2]}
+                                numberOfLines={1}
+                            >
+                                {translate('common.notifications')}
+                            </Text>
+                            <View style={[styles.flexRow, styles.mb4, styles.justifyContentBetween, styles.sectionMenuItemTopDescription]}>
+                                <View style={styles.flex4}>
+                                    <Text>{translate('preferencesPage.receiveRelevantFeatureUpdatesAndExpensifyNews')}</Text>
+                                </View>
+                                <View style={[styles.flex1, styles.alignItemsEnd]}>
+                                    <Switch
+                                        accessibilityLabel={translate('preferencesPage.receiveRelevantFeatureUpdatesAndExpensifyNews')}
+                                        isOn={lodashGet(props.user, 'isSubscribedToNewsletter', true)}
+                                        onToggle={User.updateNewsletterSubscription}
+                                    />
+                                </View>
+                            </View>
+                            <MenuItemWithTopDescription
+                                shouldShowRightIcon
+                                title={translate(`priorityModePage.priorityModes.${props.priorityMode}.label`)}
+                                description={translate('priorityModePage.priorityMode')}
+                                onPress={() => Navigation.navigate(ROUTES.SETTINGS_PRIORITY_MODE)}
+                                wrapperStyle={styles.sectionMenuItemTopDescription}
+                            />
+                            <MenuItemWithTopDescription
+                                shouldShowRightIcon
+                                title={translate(`languagePage.languages.${preferredLocale}.label`)}
+                                description={translate('languagePage.language')}
+                                onPress={() => Navigation.navigate(ROUTES.SETTINGS_LANGUAGE)}
+                                wrapperStyle={styles.sectionMenuItemTopDescription}
+                            />
+                            <MenuItemWithTopDescription
+                                shouldShowRightIcon
+                                title={translate(`themePage.themes.${props.preferredTheme || CONST.THEME.DEFAULT}.label`)}
+                                description={translate('themePage.theme')}
+                                onPress={() => Navigation.navigate(ROUTES.SETTINGS_THEME)}
+                                wrapperStyle={styles.sectionMenuItemTopDescription}
+                            />
+                        </View>
+                    </Section>
+                    {!isProduction && (
+                        <Section
+                            title={translate('preferencesPage.testSection.title')}
+                            subtitle={translate('preferencesPage.testSection.subtitle')}
+                            isCentralPane
+                            subtitleMuted
+                            titleStyles={styles.accountSettingsSectionTitle}
+                        >
+                            <View style={styles.mt5}>
+                                <TestToolMenu />
+                            </View>
+                        </Section>
+                    )}
                 </View>
-                <MenuItemWithTopDescription
-                    shouldShowRightIcon
-                    title={translate(`priorityModePage.priorityModes.${props.priorityMode}.label`)}
-                    description={translate('priorityModePage.priorityMode')}
-                    onPress={() => Navigation.navigate(ROUTES.SETTINGS_PRIORITY_MODE)}
-                />
-                <MenuItemWithTopDescription
-                    shouldShowRightIcon
-                    title={translate(`languagePage.languages.${preferredLocale}.label`)}
-                    description={translate('languagePage.language')}
-                    onPress={() => Navigation.navigate(ROUTES.SETTINGS_LANGUAGE)}
-                />
-                <MenuItemWithTopDescription
-                    shouldShowRightIcon
-                    title={translate(`themePage.themes.${props.preferredTheme || CONST.THEME.DEFAULT}.label`)}
-                    description={translate('themePage.theme')}
-                    onPress={() => Navigation.navigate(ROUTES.SETTINGS_THEME)}
-                />
-                {/* Enable additional test features in non-production environments */}
-                {!isProduction && (
-                    <View style={[styles.ml5, styles.mr8, styles.mt6]}>
-                        <TestToolMenu />
-                    </View>
-                )}
-            </View>
-        </IllustratedHeaderPageLayout>
+            </ScrollView>
+        </ScreenWrapper>
     );
 }
 

src/styles/index.ts

@@ -533,6 +533,14 @@ const styles = (theme: ThemeColors) =>
             paddingBottom: 1,
         },
 
+        testRowContainer: {
+            ...flex.flexRow,
+            ...flex.justifyContentBetween,
+            ...flex.alignItemsCenter,
+            ...sizing.mnw120,
+            height: 64,
+        },
+
         buttonSmall: {
             borderRadius: variables.buttonBorderRadius,
             minHeight: variables.componentSizeSmall,

src/styles/theme/themes/dark.ts

@@ -105,7 +105,7 @@ const darkTheme = {
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
         [SCREENS.SETTINGS.PREFERENCES.ROOT]: {
-            backgroundColor: colors.blue500,
+            backgroundColor: colors.productDark100,
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
         [SCREENS.SETTINGS.WORKSPACES]: {

src/styles/theme/themes/light.ts

@@ -105,7 +105,7 @@ const lightTheme = {
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
         [SCREENS.SETTINGS.PREFERENCES.ROOT]: {
-            backgroundColor: colors.blue500,
+            backgroundColor: colors.productLight100,
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
         [SCREENS.SETTINGS.WORKSPACES]: {

src/styles/variables.ts

@@ -192,7 +192,7 @@ export default {
     workspaceSectionMaxWidth: 680,
     oldDotWireframeIconWidth: 263.38,
     oldDotWireframeIconHeight: 143.28,
-    sectionIllustrationHeight: 240,
+    sectionIllustrationHeight: 220,
     photoUploadPopoverWidth: 335,
 
     // The height of the empty list is 14px (2px for borders and 12px for vertical padding)