[Update Account Settings] Preferences, About, Security

src/components/FeatureList.js

@@ -50,7 +50,7 @@ const defaultProps = {
     subtitle: '',
     onCtaPress: () => {},
     illustration: null,
-    illustrationBackgroundColor: '',
+    illustrationBackgroundColor: null,
     illustrationStyle: [],
 };
 

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,8 @@
+import colors from '@styles/theme/colors';
 import variables from '@styles/variables';
 import type DotLottieAnimation from './types';
 
-const DotLottieAnimations: Record<string, DotLottieAnimation> = {
+const DotLottieAnimations = {
     ExpensifyLounge: {
         file: require('@assets/animations/ExpensifyLounge.lottie'),
         w: 1920,
@@ -26,6 +27,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'),
@@ -36,6 +38,7 @@ const DotLottieAnimations: Record<string, DotLottieAnimation> = {
         file: require('@assets/animations/WorkspacePlanet.lottie'),
         w: 375,
         h: 240,
+        backgroundColor: colors.pink800,
     },
     SaveTheWorld: {
         file: require('@assets/animations/SaveTheWorld.lottie'),
@@ -62,6 +65,6 @@ const DotLottieAnimations: Record<string, DotLottieAnimation> = {
         w: 375,
         h: 240,
     },
-};
+} satisfies Record<string, DotLottieAnimation>;
 
 export default DotLottieAnimations;

src/components/LottieAnimations/types.ts

@@ -1,9 +1,11 @@
 import type {LottieViewProps} from 'lottie-react-native';
+import type {ColorValue} from '@styles/utils/types';
 
 type DotLottieAnimation = {
     file: LottieViewProps['source'];
     w: number;
     h: number;
+    backgroundColor?: ColorValue;
 };
 
 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,26 +1,26 @@
 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';
 import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
-import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Navigation from '@libs/Navigation/Navigation';
 import * as User from '@userActions/User';
 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 +43,93 @@ const defaultProps = {
 };
 
 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/pages/workspace/WorkspacesListPage.tsx

@@ -31,7 +31,6 @@ import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import SCREENS from '@src/SCREENS';
 import type {PolicyMembers, Policy as PolicyType, ReimbursementAccount, Report} from '@src/types/onyx';
 import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
@@ -341,9 +340,7 @@ function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, r
                             ctaText={translate('workspace.new.newWorkspace')}
                             ctaAccessibilityLabel={translate('workspace.new.newWorkspace')}
                             onCtaPress={() => App.createWorkspaceWithPolicyDraftAndNavigateToIt()}
-                            // @ts-expect-error TODO: Remove once FeatureList (https://github.com/Expensify/App/issues/25039) is migrated to TS
                             illustration={LottieAnimations.WorkspacePlanet}
-                            illustrationBackgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.WORKSPACES].backgroundColor}
                             // We use this style to vertically center the illustration, as the original illustration is not centered
                             illustrationStyle={styles.emptyWorkspaceIllustrationStyle}
                         />

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]: {