From 0f80d692080473e3f3082f326331f08ea1894d4d Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Fri, 2 Feb 2024 15:47:29 +0100
Subject: [PATCH 01/26] redesign preferences page

---
 src/components/TestToolMenu.tsx               |  10 --
 src/components/TestToolRow.tsx                |   2 +-
 src/languages/en.ts                           |   8 ++
 .../settings/Preferences/PreferencesPage.js   | 132 +++++++++++-------
 src/styles/index.ts                           |   8 ++
 5 files changed, 98 insertions(+), 62 deletions(-)

diff --git a/src/components/TestToolMenu.tsx b/src/components/TestToolMenu.tsx
index 410bd5081e2..3766ed71a14 100644
--- a/src/components/TestToolMenu.tsx
+++ b/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. */}
diff --git a/src/components/TestToolRow.tsx b/src/components/TestToolRow.tsx
index 4ed1aa12600..f6ff1787b56 100644
--- a/src/components/TestToolRow.tsx
+++ b/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>
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 77164c9cc17..012469f95b1 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1045,6 +1045,14 @@ export default {
         defaultPaymentMethod: 'Default',
     },
     preferencesPage: {
+        appSection: {
+            title: 'App preferences',
+            subtitle: 'That is when you can experience true joy, when you have no fear.',
+        },
+        testSection: {
+            title: 'Test preferences',
+            subtitle: 'That is when you can experience true joy, when you have no fear.',
+        },
         receiveRelevantFeatureUpdatesAndExpensifyNews: 'Receive relevant feature updates and Expensify news',
     },
     priorityModePage: {
diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js
index da0d87afe93..23149b5f992 100755
--- a/src/pages/settings/Preferences/PreferencesPage.js
+++ b/src/pages/settings/Preferences/PreferencesPage.js
@@ -1,11 +1,13 @@
 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 IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
 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';
@@ -49,58 +51,86 @@ function PreferencesPage(props) {
     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
         >
-            <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.workspaces')}
+                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}
+                        illustrationBackgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.PREFERENCES.ROOT].backgroundColor}
+                        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>
     );
 }
 
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 4a87b581159..4f96696d473 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -529,6 +529,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,

From bd0d93004074be358ce57ccc94641bb176153884 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Mon, 5 Feb 2024 15:10:49 +0100
Subject: [PATCH 02/26] new about page design

---
 src/components/Section/index.tsx           |   6 ++
 src/pages/settings/AboutPage/AboutPage.tsx | 100 ++++++++++++---------
 src/styles/index.ts                        |   6 +-
 src/styles/variables.ts                    |   2 +-
 4 files changed, 71 insertions(+), 43 deletions(-)

diff --git a/src/components/Section/index.tsx b/src/components/Section/index.tsx
index 7737927e530..ce53f4dfaab 100644
--- a/src/components/Section/index.tsx
+++ b/src/components/Section/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import type {ReactNode} from 'react';
 import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import type {ValueOf} from 'type-fest';
@@ -65,6 +66,9 @@ type SectionProps = ChildrenProps & {
 
     /** Styles to apply to illustration component */
     illustrationStyle?: StyleProp<ViewStyle>;
+
+    /** Overlay content to display on top of animation */
+    overlayContent?: () => ReactNode;
 };
 
 function Section({
@@ -84,6 +88,7 @@ function Section({
     illustration,
     illustrationBackgroundColor,
     illustrationStyle,
+    overlayContent,
 }: SectionProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -110,6 +115,7 @@ function Section({
                                 autoPlay
                                 loop
                             />
+                            {overlayContent?.()}
                         </View>
                     </View>
                 )}
diff --git a/src/pages/settings/AboutPage/AboutPage.tsx b/src/pages/settings/AboutPage/AboutPage.tsx
index f19c9eb2d53..6c8f87851f3 100644
--- a/src/pages/settings/AboutPage/AboutPage.tsx
+++ b/src/pages/settings/AboutPage/AboutPage.tsx
@@ -1,12 +1,14 @@
 import React, {useCallback, useMemo, useRef} from 'react';
-import {View} from 'react-native';
+import {ScrollView, View} from 'react-native';
 // eslint-disable-next-line no-restricted-imports
-import type {GestureResponderEvent, Text as RNText} from 'react-native';
+import type {GestureResponderEvent, Text as RNText, StyleProp, ViewStyle} from 'react-native';
 import DeviceInfo from 'react-native-device-info';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
-import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
 import LottieAnimations from '@components/LottieAnimations';
 import MenuItemList from '@components/MenuItemList';
+import ScreenWrapper from '@components/ScreenWrapper';
+import Section from '@components/Section';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
@@ -43,6 +45,7 @@ type MenuItem = {
     iconRight?: IconAsset;
     action: () => Promise<void>;
     link?: string;
+    wrapperStyle?: StyleProp<ViewStyle>;
 };
 
 function AboutPage() {
@@ -104,12 +107,13 @@ function AboutPage() {
                 : undefined,
             ref: popoverAnchor,
             shouldBlockSelection: !!link,
+            wrapperStyle: [styles.sectionMenuItemTopDescription],
         }));
-    }, [translate, waitForNavigate]);
+    }, [styles, translate, waitForNavigate]);
 
     const overlayContent = useCallback(
         () => (
-            <View style={[styles.pAbsolute, styles.w100, styles.h100, styles.justifyContentEnd, styles.pb5]}>
+            <View style={[styles.pAbsolute, styles.w100, styles.h100, styles.justifyContentEnd, styles.pb3]}>
                 <Text
                     selectable
                     style={[styles.textLabel, styles.textIvoryLight, styles.alignSelfCenter]}
@@ -124,46 +128,62 @@ function AboutPage() {
     );
 
     return (
-        <IllustratedHeaderPageLayout
-            title={translate('initialSettingsPage.about')}
-            onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
-            shouldShowBackButton={isSmallScreenWidth}
-            illustration={LottieAnimations.Coin}
-            backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.ABOUT].backgroundColor}
-            overlayContent={overlayContent}
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            shouldEnablePickerAvoiding={false}
+            shouldEnableMaxHeight
             shouldShowOfflineIndicatorInWideScreen
+            testID={AboutPage.name}
         >
-            <View style={[styles.settingsPageBody, styles.ph5]}>
-                <Text style={[styles.textHeadline, styles.mb1]}>{translate('footer.aboutExpensify')}</Text>
-                <Text style={styles.mb4}>{translate('initialSettingsPage.aboutPage.description')}</Text>
-            </View>
-            <MenuItemList
-                menuItems={menuItems}
-                shouldUseSingleExecution
+            <HeaderWithBackButton
+                title={translate('initialSettingsPage.about')}
+                shouldShowBackButton={isSmallScreenWidth}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
             />
-            <View style={[styles.sidebarFooter]}>
-                <Text
-                    style={[styles.chatItemMessageHeaderTimestamp]}
-                    numberOfLines={1}
-                >
-                    {translate('initialSettingsPage.readTheTermsAndPrivacy.phrase1')}{' '}
-                    <TextLink
-                        style={[styles.textMicroSupporting, styles.link]}
-                        href={CONST.TERMS_URL}
+            <ScrollView contentContainerStyle={styles.pt3}>
+                <View style={[styles.flex1, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
+                    <Section
+                        title={translate('footer.aboutExpensify')}
+                        subtitle={translate('initialSettingsPage.aboutPage.description')}
+                        isCentralPane
+                        subtitleMuted
+                        illustration={LottieAnimations.Coin}
+                        illustrationBackgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.ABOUT].backgroundColor}
+                        titleStyles={styles.accountSettingsSectionTitle}
+                        overlayContent={overlayContent}
                     >
-                        {translate('initialSettingsPage.readTheTermsAndPrivacy.phrase2')}
-                    </TextLink>{' '}
-                    {translate('initialSettingsPage.readTheTermsAndPrivacy.phrase3')}{' '}
-                    <TextLink
-                        style={[styles.textMicroSupporting, styles.link]}
-                        href={CONST.PRIVACY_URL}
+                        <View style={[styles.flex1, styles.mt5]}>
+                            <MenuItemList
+                                menuItems={menuItems}
+                                shouldUseSingleExecution
+                            />
+                        </View>
+                    </Section>
+                </View>
+                <View style={[styles.sidebarFooter]}>
+                    <Text
+                        style={[styles.chatItemMessageHeaderTimestamp]}
+                        numberOfLines={1}
                     >
-                        {translate('initialSettingsPage.readTheTermsAndPrivacy.phrase4')}
-                    </TextLink>
-                    .
-                </Text>
-            </View>
-        </IllustratedHeaderPageLayout>
+                        {translate('initialSettingsPage.readTheTermsAndPrivacy.phrase1')}{' '}
+                        <TextLink
+                            style={[styles.textMicroSupporting, styles.link]}
+                            href={CONST.TERMS_URL}
+                        >
+                            {translate('initialSettingsPage.readTheTermsAndPrivacy.phrase2')}
+                        </TextLink>{' '}
+                        {translate('initialSettingsPage.readTheTermsAndPrivacy.phrase3')}{' '}
+                        <TextLink
+                            style={[styles.textMicroSupporting, styles.link]}
+                            href={CONST.PRIVACY_URL}
+                        >
+                            {translate('initialSettingsPage.readTheTermsAndPrivacy.phrase4')}
+                        </TextLink>
+                        .
+                    </Text>
+                </View>
+            </ScrollView>
+        </ScreenWrapper>
     );
 }
 
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 4a87b581159..97e8e93c481 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -441,6 +441,9 @@ const styles = (theme: ThemeColors) =>
 
         textIvoryLight: {
             color: theme.iconColorfulBackground,
+            fontSize: variables.fontSizeNormal,
+            lineHeight: variables.lineHeightNormal,
+            fontFamily: FontUtils.fontFamily.platform.MONOSPACE,
         },
 
         textNoWrap: {
@@ -1360,11 +1363,10 @@ const styles = (theme: ThemeColors) =>
         },
 
         sidebarFooter: {
-            alignItems: 'center',
             display: 'flex',
             justifyContent: 'center',
-            paddingVertical: variables.lineHeightXLarge,
             width: '100%',
+            paddingLeft: 20,
         },
 
         sidebarAvatar: {
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index e0e3a3ee888..956dfc9faa9 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -188,7 +188,7 @@ export default {
     workspaceTypeIconWidth: 34,
     sectionMargin: 16,
     workspaceSectionMaxWidth: 680,
-    sectionIllustrationHeight: 240,
+    sectionIllustrationHeight: 220,
     photoUploadPopoverWidth: 335,
 
     // The height of the empty list is 14px (2px for borders and 12px for vertical padding)

From beebe048cc0c72937c40b97101111f8fa3e6bf45 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Tue, 6 Feb 2024 08:36:04 +0100
Subject: [PATCH 03/26] add english copy

---
 src/languages/en.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index 012469f95b1..6b72177dad7 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1047,11 +1047,11 @@ export default {
     preferencesPage: {
         appSection: {
             title: 'App preferences',
-            subtitle: 'That is when you can experience true joy, when you have no fear.',
+            subtitle: 'Customize your Expensify account.',
         },
         testSection: {
             title: 'Test preferences',
-            subtitle: 'That is when you can experience true joy, when you have no fear.',
+            subtitle: 'Settings to help debug and test the app on staging.',
         },
         receiveRelevantFeatureUpdatesAndExpensifyNews: 'Receive relevant feature updates and Expensify news',
     },

From 1b2d2a712e64de4223f904165b7ffe73e01f8b55 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Wed, 7 Feb 2024 12:13:27 +0100
Subject: [PATCH 04/26] add Spanish copy

---
 src/languages/es.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/languages/es.ts b/src/languages/es.ts
index d29b2d02c86..f35caf2af3e 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1043,6 +1043,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',

From 4397fc52c901091914a08c38910c0d025285b487 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Wed, 7 Feb 2024 19:00:09 +0100
Subject: [PATCH 05/26] rename

---
 src/components/Icon/Illustrations.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts
index 51422e7b4a4..a1de06314e4 100644
--- a/src/components/Icon/Illustrations.ts
+++ b/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,
 };

From 312444438eed91f9dfb2e464efdec55ad956c8f0 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Wed, 7 Feb 2024 19:05:03 +0100
Subject: [PATCH 06/26] small fixes

---
 src/pages/settings/Preferences/PreferencesPage.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js
index 354ecf351c7..243b220fa51 100755
--- a/src/pages/settings/Preferences/PreferencesPage.js
+++ b/src/pages/settings/Preferences/PreferencesPage.js
@@ -57,11 +57,11 @@ function PreferencesPage(props) {
             shouldEnablePickerAvoiding={false}
             shouldEnableMaxHeight
             shouldShowOfflineIndicatorInWideScreen
-            icon={Illustrations.Gears}
             testID={PreferencesPage.displayName}
         >
             <HeaderWithBackButton
-                title={translate('common.workspaces')}
+                title={translate('common.preferences')}
+                icon={Illustrations.Gears}
                 shouldShowBackButton={isSmallScreenWidth}
                 onBackButtonPress={() => Navigation.goBack()}
             />

From 3a8cd2d48e2a93135a81f0c2bc8f573cf28c00c0 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Wed, 7 Feb 2024 19:06:53 +0100
Subject: [PATCH 07/26] fix icon

---
 src/pages/ShareCodePage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ShareCodePage.tsx b/src/pages/ShareCodePage.tsx
index 9ed8bf3d76a..0423a795cc7 100644
--- a/src/pages/ShareCodePage.tsx
+++ b/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]}>

From 330fb72518c1e05aa380898dd6b0960c6346b6a3 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Thu, 8 Feb 2024 10:06:26 +0100
Subject: [PATCH 08/26] fix illustration height

---
 src/components/Section/index.tsx | 1 +
 src/styles/variables.ts          | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Section/index.tsx b/src/components/Section/index.tsx
index 7737927e530..948094c90bf 100644
--- a/src/components/Section/index.tsx
+++ b/src/components/Section/index.tsx
@@ -107,6 +107,7 @@ function Section({
                             <Lottie
                                 source={illustration}
                                 style={styles.h100}
+                                webStyle={styles.h100}
                                 autoPlay
                                 loop
                             />
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index c5ed7b79f76..58732dea906 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -189,7 +189,7 @@ export default {
     workspaceTypeIconWidth: 34,
     sectionMargin: 16,
     workspaceSectionMaxWidth: 680,
-    sectionIllustrationHeight: 240,
+    sectionIllustrationHeight: 220,
     photoUploadPopoverWidth: 335,
 
     // The height of the empty list is 14px (2px for borders and 12px for vertical padding)

From 1d0e5a916de5b5f287d6f51bf5dbb6a67567f01f Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Thu, 8 Feb 2024 10:53:00 +0100
Subject: [PATCH 09/26] fix statusbar color on mWeb iOS

---
 src/components/LottieAnimations/index.tsx       |  5 ++++-
 src/components/LottieAnimations/types.ts        | 17 +++++++++++++++++
 src/components/Section/index.tsx                |  2 +-
 .../settings/Preferences/PreferencesPage.js     |  2 --
 src/styles/theme/themes/dark.ts                 |  2 +-
 src/styles/theme/themes/light.ts                |  2 +-
 6 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/LottieAnimations/index.tsx b/src/components/LottieAnimations/index.tsx
index fd593421232..83300a5ccca 100644
--- a/src/components/LottieAnimations/index.tsx
+++ b/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'),
diff --git a/src/components/LottieAnimations/types.ts b/src/components/LottieAnimations/types.ts
index 6000b9f853f..840e6a3cfa6 100644
--- a/src/components/LottieAnimations/types.ts
+++ b/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;
diff --git a/src/components/Section/index.tsx b/src/components/Section/index.tsx
index 948094c90bf..c4b900bea8b 100644
--- a/src/components/Section/index.tsx
+++ b/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 (
         <>
diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js
index 243b220fa51..b85e700df02 100755
--- a/src/pages/settings/Preferences/PreferencesPage.js
+++ b/src/pages/settings/Preferences/PreferencesPage.js
@@ -22,7 +22,6 @@ 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 */
@@ -73,7 +72,6 @@ function PreferencesPage(props) {
                         isCentralPane
                         subtitleMuted
                         illustration={LottieAnimations.PreferencesDJ}
-                        illustrationBackgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.PREFERENCES.ROOT].backgroundColor}
                         titleStyles={styles.accountSettingsSectionTitle}
                     >
                         <View style={[styles.flex1, styles.mt5]}>
diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts
index ea61a1b98dd..613959307a8 100644
--- a/src/styles/theme/themes/dark.ts
+++ b/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]: {
diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts
index 7317dc836b2..10d37219465 100644
--- a/src/styles/theme/themes/light.ts
+++ b/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]: {

From c74a873c05b12e0259f7a12c1234b9a1fe9c1457 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Thu, 8 Feb 2024 11:22:54 +0100
Subject: [PATCH 10/26] fix lint

---
 src/pages/settings/Preferences/PreferencesPage.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js
index b85e700df02..5e92be02400 100755
--- a/src/pages/settings/Preferences/PreferencesPage.js
+++ b/src/pages/settings/Preferences/PreferencesPage.js
@@ -14,7 +14,6 @@ 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';
@@ -44,7 +43,6 @@ const defaultProps = {
 };
 
 function PreferencesPage(props) {
-    const theme = useTheme();
     const styles = useThemeStyles();
     const {isProduction} = useEnvironment();
     const {translate, preferredLocale} = useLocalize();

From 715eacd08158c7dd4b71d5106995243deb3d2f31 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Thu, 8 Feb 2024 11:26:17 +0100
Subject: [PATCH 11/26] improve types

---
 src/components/LottieAnimations/index.tsx |  5 ++---
 src/components/LottieAnimations/types.ts  | 15 ---------------
 2 files changed, 2 insertions(+), 18 deletions(-)

diff --git a/src/components/LottieAnimations/index.tsx b/src/components/LottieAnimations/index.tsx
index 83300a5ccca..8389dec70ee 100644
--- a/src/components/LottieAnimations/index.tsx
+++ b/src/components/LottieAnimations/index.tsx
@@ -1,9 +1,8 @@
 import colors from '@styles/theme/colors';
 import variables from '@styles/variables';
 import type DotLottieAnimation from './types';
-import type {AnimationKey} from './types';
 
-const DotLottieAnimations: Record<AnimationKey, DotLottieAnimation> = {
+const DotLottieAnimations = {
     ExpensifyLounge: {
         file: require('@assets/animations/ExpensifyLounge.lottie'),
         w: 1920,
@@ -65,6 +64,6 @@ const DotLottieAnimations: Record<AnimationKey, DotLottieAnimation> = {
         w: 375,
         h: 240,
     },
-};
+} satisfies Record<string, DotLottieAnimation>;
 
 export default DotLottieAnimations;
diff --git a/src/components/LottieAnimations/types.ts b/src/components/LottieAnimations/types.ts
index 840e6a3cfa6..e1a6e0b66c7 100644
--- a/src/components/LottieAnimations/types.ts
+++ b/src/components/LottieAnimations/types.ts
@@ -1,20 +1,6 @@
 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;
@@ -22,5 +8,4 @@ type DotLottieAnimation = {
     backgroundColor?: ColorValue;
 };
 
-export type {AnimationKey};
 export default DotLottieAnimation;

From 426632ce9d32bdd9a7f0eb656230aa46bbe6c300 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Thu, 8 Feb 2024 11:37:38 +0100
Subject: [PATCH 12/26] fix workspace list empty state

---
 src/components/LottieAnimations/index.tsx  | 1 +
 src/pages/workspace/WorkspacesListPage.tsx | 2 --
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/LottieAnimations/index.tsx b/src/components/LottieAnimations/index.tsx
index 8389dec70ee..3c89353b4aa 100644
--- a/src/components/LottieAnimations/index.tsx
+++ b/src/components/LottieAnimations/index.tsx
@@ -38,6 +38,7 @@ const DotLottieAnimations = {
         file: require('@assets/animations/WorkspacePlanet.lottie'),
         w: 375,
         h: 240,
+        backgroundColor: colors.pink800,
     },
     SaveTheWorld: {
         file: require('@assets/animations/SaveTheWorld.lottie'),
diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx
index 9b763120b30..827fa762aae 100755
--- a/src/pages/workspace/WorkspacesListPage.tsx
+++ b/src/pages/workspace/WorkspacesListPage.tsx
@@ -341,9 +341,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}
                         />

From b6d178920af490918c4c5e1504ab2cc8e5df4f59 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Thu, 8 Feb 2024 11:41:02 +0100
Subject: [PATCH 13/26] fix

---
 src/components/FeatureList.js              | 2 +-
 src/pages/workspace/WorkspacesListPage.tsx | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/FeatureList.js b/src/components/FeatureList.js
index 14b807aed85..ba82e26e5a0 100644
--- a/src/components/FeatureList.js
+++ b/src/components/FeatureList.js
@@ -50,7 +50,7 @@ const defaultProps = {
     subtitle: '',
     onCtaPress: () => {},
     illustration: null,
-    illustrationBackgroundColor: '',
+    illustrationBackgroundColor: null,
     illustrationStyle: [],
 };
 
diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx
index 827fa762aae..74798c40a5f 100755
--- a/src/pages/workspace/WorkspacesListPage.tsx
+++ b/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';

From 3e44c6f805e6001e362ed5c16fae33cee15ea6b1 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Thu, 8 Feb 2024 12:47:07 +0100
Subject: [PATCH 14/26] fix About page status bar

---
 src/components/LottieAnimations/index.tsx  | 1 +
 src/pages/settings/AboutPage/AboutPage.tsx | 1 -
 src/styles/theme/themes/dark.ts            | 4 ----
 src/styles/theme/themes/light.ts           | 4 ----
 4 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/components/LottieAnimations/index.tsx b/src/components/LottieAnimations/index.tsx
index 3c89353b4aa..cfba2c01a56 100644
--- a/src/components/LottieAnimations/index.tsx
+++ b/src/components/LottieAnimations/index.tsx
@@ -64,6 +64,7 @@ const DotLottieAnimations = {
         file: require('@assets/animations/Coin.lottie'),
         w: 375,
         h: 240,
+        backgroundColor: colors.yellow600,
     },
 } satisfies Record<string, DotLottieAnimation>;
 
diff --git a/src/pages/settings/AboutPage/AboutPage.tsx b/src/pages/settings/AboutPage/AboutPage.tsx
index 8da2444985e..dc25c26fd56 100644
--- a/src/pages/settings/AboutPage/AboutPage.tsx
+++ b/src/pages/settings/AboutPage/AboutPage.tsx
@@ -150,7 +150,6 @@ function AboutPage() {
                         isCentralPane
                         subtitleMuted
                         illustration={LottieAnimations.Coin}
-                        illustrationBackgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.ABOUT].backgroundColor}
                         titleStyles={styles.accountSettingsSectionTitle}
                         overlayContent={overlayContent}
                     >
diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts
index 613959307a8..3359a1cae3f 100644
--- a/src/styles/theme/themes/dark.ts
+++ b/src/styles/theme/themes/dark.ts
@@ -132,10 +132,6 @@ const darkTheme = {
             backgroundColor: colors.productDark100,
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
-        [SCREENS.SETTINGS.ABOUT]: {
-            backgroundColor: colors.yellow600,
-            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
-        },
         [SCREENS.REFERRAL_DETAILS]: {
             backgroundColor: colors.pink800,
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts
index 10d37219465..263c1eec505 100644
--- a/src/styles/theme/themes/light.ts
+++ b/src/styles/theme/themes/light.ts
@@ -132,10 +132,6 @@ const lightTheme = {
             backgroundColor: colors.productLight100,
             statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,
         },
-        [SCREENS.SETTINGS.ABOUT]: {
-            backgroundColor: colors.yellow600,
-            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
-        },
         [SCREENS.REFERRAL_DETAILS]: {
             backgroundColor: colors.pink800,
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,

From 376932124f3aa2f941277944104c7027b1529fbd Mon Sep 17 00:00:00 2001
From: Filip Solecki <filip.solecki@swmansion.com>
Date: Thu, 8 Feb 2024 12:49:14 +0100
Subject: [PATCH 15/26] Security page update

---
 src/languages/en.ts                           |  5 ++
 src/languages/es.ts                           |  5 ++
 .../Security/SecuritySettingsPage.tsx         | 52 +++++++++++++------
 3 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index cdccba17577..7e2f07ca1e3 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -146,6 +146,7 @@ export default {
         payments: 'Payments',
         wallet: 'Wallet',
         preferences: 'Preferences',
+        security: 'Security',
         view: 'View',
         not: 'Not',
         signIn: 'Sign in',
@@ -722,6 +723,10 @@ export default {
             subtitle: 'These details are used for travel and payments. They are never shown on your public profile.',
         },
     },
+    securityPage: {
+        title: 'Security options',
+        subtitle: 'Enable two-factor authentication to keep your account safe.',
+    },
     loungeAccessPage: {
         loungeAccess: 'Lounge access',
         headline: 'The Expensify Lounge is closed.',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index dd3df85e5d9..485785735d2 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -135,6 +135,7 @@ export default {
         payments: 'Pagos',
         wallet: 'Billetera',
         preferences: 'Preferencias',
+        security: 'Seguridad',
         view: 'Ver',
         not: 'No',
         signIn: 'Conectarse',
@@ -716,6 +717,10 @@ export default {
             subtitle: 'Estos detalles se utilizan para viajes y pagos. Nunca se mostrarán en tu perfil público.',
         },
     },
+    securityPage: {
+        title: 'Opciones de seguridad',
+        subtitle: 'Activa la autenticación de dos factores para mantener tu cuenta segura.',
+    },
     loungeAccessPage: {
         loungeAccess: 'Acceso a la sala vip',
         headline: 'La sala vip de Expensify está cerrada.',
diff --git a/src/pages/settings/Security/SecuritySettingsPage.tsx b/src/pages/settings/Security/SecuritySettingsPage.tsx
index b6881a9b368..452eb3f6dae 100644
--- a/src/pages/settings/Security/SecuritySettingsPage.tsx
+++ b/src/pages/settings/Security/SecuritySettingsPage.tsx
@@ -1,10 +1,12 @@
 import React, {useMemo} from 'react';
 import {ScrollView, View} from 'react-native';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
-import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
 import LottieAnimations from '@components/LottieAnimations';
 import MenuItemList from '@components/MenuItemList';
+import ScreenWrapper from '@components/ScreenWrapper';
+import Section from '@components/Section';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -43,29 +45,45 @@ function SecuritySettingsPage() {
             onPress: item.action,
             shouldShowRightIcon: true,
             link: '',
+            wrapperStyle: [styles.sectionMenuItemTopDescription],
         }));
-    }, [translate, waitForNavigate]);
+    }, [translate, waitForNavigate, styles]);
 
     return (
-        <IllustratedHeaderPageLayout
-            title={translate('initialSettingsPage.security')}
-            onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
-            shouldShowBackButton={isSmallScreenWidth}
-            illustration={LottieAnimations.Safe}
-            backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.SECURITY].backgroundColor}
-            shouldShowOfflineIndicatorInWideScreen
-            icon={Illustrations.LockClosed}
+        <ScreenWrapper
             testID={SecuritySettingsPage.displayName}
+            includeSafeAreaPaddingBottom={false}
+            shouldEnablePickerAvoiding={false}
+            shouldEnableMaxHeight
+            shouldShowOfflineIndicatorInWideScreen
         >
-            <ScrollView contentContainerStyle={[styles.flexGrow1, styles.flexColumn, styles.justifyContentBetween]}>
-                <View style={[styles.flex1]}>
-                    <MenuItemList
-                        menuItems={menuItems}
-                        shouldUseSingleExecution
-                    />
+            <HeaderWithBackButton
+                title={translate('common.security')}
+                shouldShowBackButton={isSmallScreenWidth}
+                onBackButtonPress={() => Navigation.goBack()}
+                icon={Illustrations.LockClosed}
+            />
+            <ScrollView contentContainerStyle={styles.pt3}>
+                <View style={[styles.flex1, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
+                    <Section
+                        title={translate('securityPage.title')}
+                        subtitle={translate('securityPage.subtitle')}
+                        isCentralPane
+                        subtitleMuted
+                        illustration={LottieAnimations.Safe}
+                        illustrationStyle={{height: 220}}
+                        illustrationBackgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.SECURITY].backgroundColor}
+                        titleStyles={styles.accountSettingsSectionTitle}
+                        childrenStyles={styles.pt5}
+                    >
+                        <MenuItemList
+                            menuItems={menuItems}
+                            shouldUseSingleExecution
+                        />
+                    </Section>
                 </View>
             </ScrollView>
-        </IllustratedHeaderPageLayout>
+        </ScreenWrapper>
     );
 }
 

From 028d355d588416e8f4ef81f54bdb21ba5b21c5d9 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Thu, 8 Feb 2024 12:56:09 +0100
Subject: [PATCH 16/26] fix lint issues

---
 src/pages/settings/AboutPage/AboutPage.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/pages/settings/AboutPage/AboutPage.tsx b/src/pages/settings/AboutPage/AboutPage.tsx
index dc25c26fd56..2c94444bdb2 100644
--- a/src/pages/settings/AboutPage/AboutPage.tsx
+++ b/src/pages/settings/AboutPage/AboutPage.tsx
@@ -13,7 +13,6 @@ import Section from '@components/Section';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
-import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -25,7 +24,6 @@ import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ROUTES from '@src/ROUTES';
-import SCREENS from '@src/SCREENS';
 import type IconAsset from '@src/types/utils/IconAsset';
 import pkg from '../../../../package.json';
 
@@ -51,7 +49,6 @@ type MenuItem = {
 
 function AboutPage() {
     const {translate} = useLocalize();
-    const theme = useTheme();
     const styles = useThemeStyles();
     const popoverAnchor = useRef<View | RNText | null>(null);
     const waitForNavigate = useWaitForNavigation();

From eab2a13a554a6317c9cc31473d9470e55d72e0c2 Mon Sep 17 00:00:00 2001
From: Filip Solecki <filip.solecki@swmansion.com>
Date: Thu, 8 Feb 2024 13:14:36 +0100
Subject: [PATCH 17/26] Adjust illustration background color logic

---
 src/components/LottieAnimations/index.tsx            | 1 +
 src/languages/en.ts                                  | 1 -
 src/languages/es.ts                                  | 1 -
 src/pages/settings/Security/SecuritySettingsPage.tsx | 7 +------
 src/styles/theme/themes/dark.ts                      | 4 ----
 src/styles/theme/themes/light.ts                     | 4 ----
 6 files changed, 2 insertions(+), 16 deletions(-)

diff --git a/src/components/LottieAnimations/index.tsx b/src/components/LottieAnimations/index.tsx
index cfba2c01a56..10dc195365a 100644
--- a/src/components/LottieAnimations/index.tsx
+++ b/src/components/LottieAnimations/index.tsx
@@ -49,6 +49,7 @@ const DotLottieAnimations = {
         file: require('@assets/animations/Safe.lottie'),
         w: 625,
         h: 400,
+        backgroundColor: colors.ice500,
     },
     Magician: {
         file: require('@assets/animations/Magician.lottie'),
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 7e2f07ca1e3..9f68ae1f901 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -146,7 +146,6 @@ export default {
         payments: 'Payments',
         wallet: 'Wallet',
         preferences: 'Preferences',
-        security: 'Security',
         view: 'View',
         not: 'Not',
         signIn: 'Sign in',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 485785735d2..1c05207247b 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -135,7 +135,6 @@ export default {
         payments: 'Pagos',
         wallet: 'Billetera',
         preferences: 'Preferencias',
-        security: 'Seguridad',
         view: 'Ver',
         not: 'No',
         signIn: 'Conectarse',
diff --git a/src/pages/settings/Security/SecuritySettingsPage.tsx b/src/pages/settings/Security/SecuritySettingsPage.tsx
index 452eb3f6dae..c4d0e46936a 100644
--- a/src/pages/settings/Security/SecuritySettingsPage.tsx
+++ b/src/pages/settings/Security/SecuritySettingsPage.tsx
@@ -8,17 +8,14 @@ import MenuItemList from '@components/MenuItemList';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Section from '@components/Section';
 import useLocalize from '@hooks/useLocalize';
-import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Navigation from '@libs/Navigation/Navigation';
 import type {TranslationPaths} from '@src/languages/types';
 import ROUTES from '@src/ROUTES';
-import SCREENS from '@src/SCREENS';
 
 function SecuritySettingsPage() {
-    const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const waitForNavigate = useWaitForNavigation();
@@ -58,7 +55,7 @@ function SecuritySettingsPage() {
             shouldShowOfflineIndicatorInWideScreen
         >
             <HeaderWithBackButton
-                title={translate('common.security')}
+                title={translate('initialSettingsPage.security')}
                 shouldShowBackButton={isSmallScreenWidth}
                 onBackButtonPress={() => Navigation.goBack()}
                 icon={Illustrations.LockClosed}
@@ -71,8 +68,6 @@ function SecuritySettingsPage() {
                         isCentralPane
                         subtitleMuted
                         illustration={LottieAnimations.Safe}
-                        illustrationStyle={{height: 220}}
-                        illustrationBackgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.SECURITY].backgroundColor}
                         titleStyles={styles.accountSettingsSectionTitle}
                         childrenStyles={styles.pt5}
                     >
diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts
index 3359a1cae3f..a6014a54541 100644
--- a/src/styles/theme/themes/dark.ts
+++ b/src/styles/theme/themes/dark.ts
@@ -116,10 +116,6 @@ const darkTheme = {
             backgroundColor: colors.productDark100,
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
-        [SCREENS.SETTINGS.SECURITY]: {
-            backgroundColor: colors.ice500,
-            statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,
-        },
         [SCREENS.SETTINGS.PROFILE.STATUS]: {
             backgroundColor: colors.productDark100,
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts
index 263c1eec505..a8dfebee795 100644
--- a/src/styles/theme/themes/light.ts
+++ b/src/styles/theme/themes/light.ts
@@ -116,10 +116,6 @@ const lightTheme = {
             backgroundColor: colors.productLight100,
             statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,
         },
-        [SCREENS.SETTINGS.SECURITY]: {
-            backgroundColor: colors.ice500,
-            statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,
-        },
         [SCREENS.SETTINGS.PROFILE.STATUS]: {
             backgroundColor: colors.productLight100,
             statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,

From 479203f36d0e094d5a547f0b2780d8f9e582cf58 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Thu, 8 Feb 2024 13:18:19 +0100
Subject: [PATCH 18/26] add missing icons

---
 src/pages/settings/AboutPage/AboutPage.tsx | 1 -
 src/pages/settings/InitialSettingsPage.js  | 6 ++++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/pages/settings/AboutPage/AboutPage.tsx b/src/pages/settings/AboutPage/AboutPage.tsx
index 2c94444bdb2..8215881498e 100644
--- a/src/pages/settings/AboutPage/AboutPage.tsx
+++ b/src/pages/settings/AboutPage/AboutPage.tsx
@@ -127,7 +127,6 @@ function AboutPage() {
 
     return (
         <ScreenWrapper
-            includeSafeAreaPaddingBottom={false}
             shouldEnablePickerAvoiding={false}
             shouldEnableMaxHeight
             shouldShowOfflineIndicatorInWideScreen
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index 5b85359d501..5c5d5f50cdf 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -172,6 +172,8 @@ function InitialSettingsPage(props) {
                         Link.openOldDotLink(CONST.OLDDOT_URLS.INBOX);
                     },
                     link: () => Link.buildOldDotURL(CONST.OLDDOT_URLS.INBOX),
+                    iconRight: Expensicons.NewWindow,
+                    shouldShowRightIcon: true,
                 },
                 {
                     translationKey: 'initialSettingsPage.signOut',
@@ -221,6 +223,8 @@ function InitialSettingsPage(props) {
                     action: () => {
                         Link.openExternalLink(CONST.NEWHELP_URL);
                     },
+                    iconRight: Expensicons.NewWindow,
+                    shouldShowRightIcon: true,
                     link: CONST.NEWHELP_URL,
                 },
                 {
@@ -291,6 +295,8 @@ function InitialSettingsPage(props) {
                                 onSecondaryInteraction={item.link ? (event) => openPopover(item.link, event) : undefined}
                                 focused={activeRoute && item.routeName && activeRoute.toLowerCase().replaceAll('_', '') === item.routeName.toLowerCase().replaceAll('/', '')}
                                 isPaneMenu
+                                iconRight={item.iconRight}
+                                shouldShowRightIcon={item.shouldShowRightIcon}
                             />
                         );
                     })}

From 56fd6571a7540ddd3662df2fcd4338e4e3140cf5 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Fri, 9 Feb 2024 10:20:27 +0100
Subject: [PATCH 19/26] address review

---
 src/components/CustomStatusBarAndBackground/index.tsx | 3 ++-
 src/pages/settings/AboutPage/AboutPage.tsx            | 2 +-
 src/pages/settings/Preferences/PreferencesPage.js     | 2 +-
 src/pages/settings/Security/SecuritySettingsPage.tsx  | 2 +-
 src/pages/workspace/WorkspacesListPage.tsx            | 2 +-
 5 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/CustomStatusBarAndBackground/index.tsx b/src/components/CustomStatusBarAndBackground/index.tsx
index f66a0204ac5..2a4c8461c9f 100644
--- a/src/components/CustomStatusBarAndBackground/index.tsx
+++ b/src/components/CustomStatusBarAndBackground/index.tsx
@@ -124,7 +124,8 @@ function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBack
         }
 
         updateGlobalBackgroundColor(theme);
-    }, [isDisabled, theme]);
+        updateStatusBarStyle();
+    }, [isDisabled, theme, updateStatusBarStyle]);
 
     if (isDisabled) {
         return null;
diff --git a/src/pages/settings/AboutPage/AboutPage.tsx b/src/pages/settings/AboutPage/AboutPage.tsx
index 8215881498e..a2d6402858b 100644
--- a/src/pages/settings/AboutPage/AboutPage.tsx
+++ b/src/pages/settings/AboutPage/AboutPage.tsx
@@ -138,7 +138,7 @@ function AboutPage() {
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
                 icon={Illustrations.PalmTree}
             />
-            <ScrollView contentContainerStyle={styles.pt3}>
+            <ScrollView>
                 <View style={[styles.flex1, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
                     <Section
                         title={translate('footer.aboutExpensify')}
diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js
index 5e92be02400..fe6537e5c50 100755
--- a/src/pages/settings/Preferences/PreferencesPage.js
+++ b/src/pages/settings/Preferences/PreferencesPage.js
@@ -62,7 +62,7 @@ function PreferencesPage(props) {
                 shouldShowBackButton={isSmallScreenWidth}
                 onBackButtonPress={() => Navigation.goBack()}
             />
-            <ScrollView contentContainerStyle={styles.pt3}>
+            <ScrollView>
                 <View style={[styles.flex1, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
                     <Section
                         title={translate('preferencesPage.appSection.title')}
diff --git a/src/pages/settings/Security/SecuritySettingsPage.tsx b/src/pages/settings/Security/SecuritySettingsPage.tsx
index c4d0e46936a..cfad1fcb5fe 100644
--- a/src/pages/settings/Security/SecuritySettingsPage.tsx
+++ b/src/pages/settings/Security/SecuritySettingsPage.tsx
@@ -60,7 +60,7 @@ function SecuritySettingsPage() {
                 onBackButtonPress={() => Navigation.goBack()}
                 icon={Illustrations.LockClosed}
             />
-            <ScrollView contentContainerStyle={styles.pt3}>
+            <ScrollView>
                 <View style={[styles.flex1, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
                     <Section
                         title={translate('securityPage.title')}
diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx
index 74798c40a5f..64ff825ae92 100755
--- a/src/pages/workspace/WorkspacesListPage.tsx
+++ b/src/pages/workspace/WorkspacesListPage.tsx
@@ -331,7 +331,7 @@ function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, r
                         onPress={() => App.createWorkspaceWithPolicyDraftAndNavigateToIt()}
                     />
                 </HeaderWithBackButton>
-                <ScrollView contentContainerStyle={styles.pt3}>
+                <ScrollView>
                     <View style={[styles.flex1, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
                         <FeatureList
                             menuItems={workspaceFeatures}

From 782d2ca07d5090f44d8e052893e9c093b77613db Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Fri, 9 Feb 2024 11:09:25 +0100
Subject: [PATCH 20/26] add comment

---
 src/components/CustomStatusBarAndBackground/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/CustomStatusBarAndBackground/index.tsx b/src/components/CustomStatusBarAndBackground/index.tsx
index ed20ee14cde..c653fec73e9 100644
--- a/src/components/CustomStatusBarAndBackground/index.tsx
+++ b/src/components/CustomStatusBarAndBackground/index.tsx
@@ -116,8 +116,9 @@ function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBack
         return () => navigationRef.removeListener('state', listener);
     }, [isDisabled, theme.appBG, updateStatusBarStyle]);
 
-    // Update the global background (on web) everytime the theme changes.
+    // Update the global background and status bar style (on web) everytime the theme changes.
     // The background of the html element needs to be updated, otherwise you will see a big contrast when resizing the window or when the keyboard is open on iOS web.
+    // The status bar style needs to be updated when the user changes the theme, otherwise, the status bar will not change its color (mWeb iOS).
     useEffect(() => {
         if (isDisabled) {
             return;

From a33f3a8c9a8bb0675b1730cf74edce8ad9319294 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Fri, 9 Feb 2024 17:44:40 +0100
Subject: [PATCH 21/26] remove shouldEnableMaxHeight

---
 src/pages/settings/AboutPage/AboutPage.tsx           | 1 -
 src/pages/settings/Preferences/PreferencesPage.js    | 1 -
 src/pages/settings/Security/SecuritySettingsPage.tsx | 1 -
 3 files changed, 3 deletions(-)

diff --git a/src/pages/settings/AboutPage/AboutPage.tsx b/src/pages/settings/AboutPage/AboutPage.tsx
index a2d6402858b..aa978ff153c 100644
--- a/src/pages/settings/AboutPage/AboutPage.tsx
+++ b/src/pages/settings/AboutPage/AboutPage.tsx
@@ -128,7 +128,6 @@ function AboutPage() {
     return (
         <ScreenWrapper
             shouldEnablePickerAvoiding={false}
-            shouldEnableMaxHeight
             shouldShowOfflineIndicatorInWideScreen
             testID={AboutPage.displayName}
         >
diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js
index fe6537e5c50..3becc2caf6c 100755
--- a/src/pages/settings/Preferences/PreferencesPage.js
+++ b/src/pages/settings/Preferences/PreferencesPage.js
@@ -52,7 +52,6 @@ function PreferencesPage(props) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnablePickerAvoiding={false}
-            shouldEnableMaxHeight
             shouldShowOfflineIndicatorInWideScreen
             testID={PreferencesPage.displayName}
         >
diff --git a/src/pages/settings/Security/SecuritySettingsPage.tsx b/src/pages/settings/Security/SecuritySettingsPage.tsx
index cfad1fcb5fe..b44848ad14a 100644
--- a/src/pages/settings/Security/SecuritySettingsPage.tsx
+++ b/src/pages/settings/Security/SecuritySettingsPage.tsx
@@ -51,7 +51,6 @@ function SecuritySettingsPage() {
             testID={SecuritySettingsPage.displayName}
             includeSafeAreaPaddingBottom={false}
             shouldEnablePickerAvoiding={false}
-            shouldEnableMaxHeight
             shouldShowOfflineIndicatorInWideScreen
         >
             <HeaderWithBackButton

From 1743d9722ba495c899d4bd528e9c1635e48a415c Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Fri, 9 Feb 2024 18:08:50 +0100
Subject: [PATCH 22/26] Revert "address review"

This reverts commit 56fd6571a7540ddd3662df2fcd4338e4e3140cf5.
---
 src/pages/settings/AboutPage/AboutPage.tsx           | 2 +-
 src/pages/settings/Preferences/PreferencesPage.js    | 2 +-
 src/pages/settings/Security/SecuritySettingsPage.tsx | 2 +-
 src/pages/workspace/WorkspacesListPage.tsx           | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/settings/AboutPage/AboutPage.tsx b/src/pages/settings/AboutPage/AboutPage.tsx
index aa978ff153c..6e55bc76a52 100644
--- a/src/pages/settings/AboutPage/AboutPage.tsx
+++ b/src/pages/settings/AboutPage/AboutPage.tsx
@@ -137,7 +137,7 @@ function AboutPage() {
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
                 icon={Illustrations.PalmTree}
             />
-            <ScrollView>
+            <ScrollView contentContainerStyle={styles.pt3}>
                 <View style={[styles.flex1, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
                     <Section
                         title={translate('footer.aboutExpensify')}
diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js
index 3becc2caf6c..6a9af62e75c 100755
--- a/src/pages/settings/Preferences/PreferencesPage.js
+++ b/src/pages/settings/Preferences/PreferencesPage.js
@@ -61,7 +61,7 @@ function PreferencesPage(props) {
                 shouldShowBackButton={isSmallScreenWidth}
                 onBackButtonPress={() => Navigation.goBack()}
             />
-            <ScrollView>
+            <ScrollView contentContainerStyle={styles.pt3}>
                 <View style={[styles.flex1, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
                     <Section
                         title={translate('preferencesPage.appSection.title')}
diff --git a/src/pages/settings/Security/SecuritySettingsPage.tsx b/src/pages/settings/Security/SecuritySettingsPage.tsx
index b44848ad14a..8600c9e0847 100644
--- a/src/pages/settings/Security/SecuritySettingsPage.tsx
+++ b/src/pages/settings/Security/SecuritySettingsPage.tsx
@@ -59,7 +59,7 @@ function SecuritySettingsPage() {
                 onBackButtonPress={() => Navigation.goBack()}
                 icon={Illustrations.LockClosed}
             />
-            <ScrollView>
+            <ScrollView contentContainerStyle={styles.pt3}>
                 <View style={[styles.flex1, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
                     <Section
                         title={translate('securityPage.title')}
diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx
index 64ff825ae92..74798c40a5f 100755
--- a/src/pages/workspace/WorkspacesListPage.tsx
+++ b/src/pages/workspace/WorkspacesListPage.tsx
@@ -331,7 +331,7 @@ function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, r
                         onPress={() => App.createWorkspaceWithPolicyDraftAndNavigateToIt()}
                     />
                 </HeaderWithBackButton>
-                <ScrollView>
+                <ScrollView contentContainerStyle={styles.pt3}>
                     <View style={[styles.flex1, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
                         <FeatureList
                             menuItems={workspaceFeatures}

From 0375e276caadeca44e5d9bfc87629a4bc1ac65f0 Mon Sep 17 00:00:00 2001
From: Filip Solecki <filip.solecki@swmansion.com>
Date: Fri, 9 Feb 2024 18:15:45 +0100
Subject: [PATCH 23/26] Rename text styles

---
 src/pages/settings/AboutPage/AboutPage.tsx | 2 +-
 src/styles/index.ts                        | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/settings/AboutPage/AboutPage.tsx b/src/pages/settings/AboutPage/AboutPage.tsx
index 6e55bc76a52..26d845a6a92 100644
--- a/src/pages/settings/AboutPage/AboutPage.tsx
+++ b/src/pages/settings/AboutPage/AboutPage.tsx
@@ -114,7 +114,7 @@ function AboutPage() {
             <View style={[styles.pAbsolute, styles.w100, styles.h100, styles.justifyContentEnd, styles.pb3]}>
                 <Text
                     selectable
-                    style={[styles.textLabel, styles.textIvoryLight, styles.alignSelfCenter]}
+                    style={[styles.textLabel, styles.textVersion, styles.alignSelfCenter]}
                 >
                     v{Environment.isInternalTestBuild() ? `${pkg.version} PR:${CONST.PULL_REQUEST_NUMBER}${getFlavor()}` : `${pkg.version}${getFlavor()}`}
                 </Text>
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 6afa9c62f04..f503f589203 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -443,11 +443,12 @@ const styles = (theme: ThemeColors) =>
             color: theme.link,
         },
 
-        textIvoryLight: {
+        textVersion: {
             color: theme.iconColorfulBackground,
             fontSize: variables.fontSizeNormal,
             lineHeight: variables.lineHeightNormal,
             fontFamily: FontUtils.fontFamily.platform.MONOSPACE,
+            textAlign: 'center',
         },
 
         textNoWrap: {

From 099345668b6c6b2f783f1eb2cf599292b6f84c9a Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Fri, 9 Feb 2024 18:25:21 +0100
Subject: [PATCH 24/26] fix centering

---
 src/components/Section/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Section/index.tsx b/src/components/Section/index.tsx
index 3c0a73e3a6e..33f5f3d2230 100644
--- a/src/components/Section/index.tsx
+++ b/src/components/Section/index.tsx
@@ -116,8 +116,8 @@ function Section({
                                 autoPlay
                                 loop
                             />
-                            {overlayContent?.()}
                         </View>
+                        {overlayContent?.()}
                     </View>
                 )}
                 <View style={[styles.w100, isCentralPane && (isSmallScreenWidth ? styles.p5 : styles.p8)]}>

From 5e5bce0c0b597b611348a2bb65e9a1f201660bb2 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Mon, 12 Feb 2024 10:03:59 +0100
Subject: [PATCH 25/26] attempt to fix the SignInPage-perf test

---
 tests/perf-test/SignInPage.perf-test.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/tests/perf-test/SignInPage.perf-test.tsx b/tests/perf-test/SignInPage.perf-test.tsx
index dde8596fb2a..d0d9256cfa0 100644
--- a/tests/perf-test/SignInPage.perf-test.tsx
+++ b/tests/perf-test/SignInPage.perf-test.tsx
@@ -18,6 +18,8 @@ import * as TestHelper from '../utils/TestHelper';
 import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
 import wrapOnyxWithWaitForBatchedUpdates from '../utils/wrapOnyxWithWaitForBatchedUpdates';
 
+jest.mock('../../src/libs/Navigation/Navigation');
+
 const mockedNavigate = jest.fn();
 jest.mock('@react-navigation/native', () => {
     const actualNav = jest.requireActual('@react-navigation/native');

From 4f303551e3c050a8a8eba040fdc8ec2e162afa5b Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Mon, 12 Feb 2024 10:35:49 +0100
Subject: [PATCH 26/26] fix perf tests

---
 tests/perf-test/SignInPage.perf-test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/perf-test/SignInPage.perf-test.tsx b/tests/perf-test/SignInPage.perf-test.tsx
index d0d9256cfa0..88a653b1fbb 100644
--- a/tests/perf-test/SignInPage.perf-test.tsx
+++ b/tests/perf-test/SignInPage.perf-test.tsx
@@ -18,8 +18,6 @@ import * as TestHelper from '../utils/TestHelper';
 import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
 import wrapOnyxWithWaitForBatchedUpdates from '../utils/wrapOnyxWithWaitForBatchedUpdates';
 
-jest.mock('../../src/libs/Navigation/Navigation');
-
 const mockedNavigate = jest.fn();
 jest.mock('@react-navigation/native', () => {
     const actualNav = jest.requireActual('@react-navigation/native');
@@ -37,6 +35,8 @@ jest.mock('@react-navigation/native', () => {
         createNavigationContainerRef: () => ({
             addListener: () => jest.fn(),
             removeListener: () => jest.fn(),
+            isReady: () => jest.fn(),
+            getCurrentRoute: () => jest.fn(),
         }),
     } as typeof NativeNavigation;
 });
