Fix settings page / status bugs

src/SCREENS.ts

@@ -14,6 +14,11 @@ export default {
     SETTINGS: {
         PREFERENCES: 'Settings_Preferences',
         WORKSPACES: 'Settings_Workspaces',
+        SECURITY: 'Settings_Security',
+        STATUS: 'Settings_Status',
+    },
+    SAVE_THE_WORLD: {
+        ROOT: 'SaveTheWorld_Root',
     },
     SIGN_IN_WITH_APPLE_DESKTOP: 'AppleSignInDesktop',
     SIGN_IN_WITH_GOOGLE_DESKTOP: 'GoogleSignInDesktop',

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -334,7 +334,7 @@ const NewTeachersUniteNavigator = createModalStackNavigator([
             const SaveTheWorldPage = require('../../../pages/TeachersUnite/SaveTheWorldPage').default;
             return SaveTheWorldPage;
         },
-        name: 'SaveTheWorld_Root',
+        name: SCREENS.SAVE_THE_WORLD.ROOT,
     },
     {
         getComponent: () => {
@@ -506,7 +506,7 @@ const SettingsModalStackNavigator = createModalStackNavigator([
             const SettingsSecurityPage = require('../../../pages/settings/Security/SecuritySettingsPage').default;
             return SettingsSecurityPage;
         },
-        name: 'Settings_Security',
+        name: SCREENS.SETTINGS.SECURITY,
     },
     {
         getComponent: () => {
@@ -583,7 +583,7 @@ const SettingsModalStackNavigator = createModalStackNavigator([
             const SettingsStatus = require('../../../pages/settings/Profile/CustomStatus/StatusPage').default;
             return SettingsStatus;
         },
-        name: 'Settings_Status',
+        name: SCREENS.SETTINGS.STATUS,
     },
     {
         getComponent: () => {

src/libs/Navigation/linkingConfig.js

@@ -65,7 +65,7 @@ export default {
                                 path: ROUTES.SETTINGS_CLOSE,
                                 exact: true,
                             },
-                            Settings_Security: {
+                            [SCREENS.SETTINGS.SECURITY]: {
                                 path: ROUTES.SETTINGS_SECURITY,
                                 exact: true,
                             },
@@ -163,7 +163,7 @@ export default {
                                 path: ROUTES.SETTINGS_SHARE_CODE,
                                 exact: true,
                             },
-                            Settings_Status: {
+                            [SCREENS.SETTINGS.STATUS]: {
                                 path: ROUTES.SETTINGS_STATUS,
                                 exact: true,
                             },
@@ -277,7 +277,7 @@ export default {
                     },
                     TeachersUnite: {
                         screens: {
-                            SaveTheWorld_Root: ROUTES.TEACHERS_UNITE,
+                            [SCREENS.SAVE_THE_WORLD.ROOT]: ROUTES.TEACHERS_UNITE,
                             I_Know_A_Teacher: ROUTES.I_KNOW_A_TEACHER,
                             Intro_School_Principal: ROUTES.INTRO_SCHOOL_PRINCIPAL,
                             I_Am_A_Teacher: ROUTES.I_AM_A_TEACHER,

src/pages/TeachersUnite/SaveTheWorldPage.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import _ from 'lodash';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
+import SCREENS from '../../SCREENS';
 import ONYXKEYS from '../../ONYXKEYS';
 import CONST from '../../CONST';
 import styles from '../../styles/styles';
@@ -54,7 +55,7 @@ function SaveTheWorldPage(props) {
             shouldShowBackButton
             title={translate('sidebarScreen.saveTheWorld')}
             onBackButtonPress={Navigation.goBack}
-            backgroundColor={themeColors.PAGE_BACKGROUND_COLORS[ROUTES.I_KNOW_A_TEACHER]}
+            backgroundColor={themeColors.PAGE_BACKGROUND_COLORS[SCREENS.SAVE_THE_WORLD.ROOT]}
             illustration={LottieAnimations.SaveTheWorld}
         >
             <View style={[styles.mb4, styles.justifyContentBetween, styles.mh5]}>

src/pages/settings/Profile/CustomStatus/StatusPage.js

@@ -7,7 +7,6 @@ import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes}
 import MenuItemWithTopDescription from '../../../../components/MenuItemWithTopDescription';
 import StaticHeaderPageLayout from '../../../../components/StaticHeaderPageLayout';
 import * as Expensicons from '../../../../components/Icon/Expensicons';
-import withLocalize from '../../../../components/withLocalize';
 import MenuItem from '../../../../components/MenuItem';
 import Button from '../../../../components/Button';
 import Text from '../../../../components/Text';
@@ -20,13 +19,14 @@ import styles from '../../../../styles/styles';
 import compose from '../../../../libs/compose';
 import ONYXKEYS from '../../../../ONYXKEYS';
 import ROUTES from '../../../../ROUTES';
+import SCREENS from '../../../../SCREENS';
 
 const propTypes = {
     ...withCurrentUserPersonalDetailsPropTypes,
 };
 
 function StatusPage({draftStatus, currentUserPersonalDetails}) {
-    const localize = useLocalize();
+    const {translate} = useLocalize();
     const currentUserEmojiCode = lodashGet(currentUserPersonalDetails, 'status.emojiCode', '');
     const currentUserStatusText = lodashGet(currentUserPersonalDetails, 'status.text', '');
     const draftEmojiCode = lodashGet(draftStatus, 'emojiCode');
@@ -55,38 +55,38 @@ function StatusPage({draftStatus, currentUserPersonalDetails}) {
             hasDraftStatus ? (
                 <Button
                     success
-                    text={localize.translate('statusPage.save')}
+                    text={translate('statusPage.save')}
                     onPress={updateStatus}
                 />
             ) : null,
-        [hasDraftStatus, localize, updateStatus],
+        [hasDraftStatus, translate, updateStatus],
     );
 
     useEffect(() => () => User.clearDraftCustomStatus(), []);
 
     return (
         <StaticHeaderPageLayout
-            title={localize.translate('statusPage.status')}
+            title={translate('statusPage.status')}
             onBackButtonPress={navigateBackToSettingsPage}
-            backgroundColor={themeColors.PAGE_BACKGROUND_COLORS[ROUTES.SETTINGS_STATUS]}
+            backgroundColor={themeColors.PAGE_BACKGROUND_COLORS[SCREENS.SETTINGS.STATUS]}
             image={MobileBackgroundImage}
             footer={footerComponent}
         >
             <View style={styles.m5}>
-                <Text style={[styles.textHeadline]}>{localize.translate('statusPage.setStatusTitle')}</Text>
-                <Text style={[styles.textNormal, styles.mt2]}>{localize.translate('statusPage.statusExplanation')}</Text>
+                <Text style={[styles.textHeadline]}>{translate('statusPage.setStatusTitle')}</Text>
+                <Text style={[styles.textNormal, styles.mt2]}>{translate('statusPage.statusExplanation')}</Text>
             </View>
             <MenuItemWithTopDescription
                 title={customStatus}
-                description={localize.translate('statusPage.status')}
+                description={translate('statusPage.status')}
                 shouldShowRightIcon
                 inputID="test"
                 onPress={() => Navigation.navigate(ROUTES.SETTINGS_STATUS_SET)}
             />
 
             {(!!currentUserEmojiCode || !!currentUserStatusText) && (
                 <MenuItem
-                    title={localize.translate('statusPage.clearStatus')}
+                    title={translate('statusPage.clearStatus')}
                     icon={Expensicons.Close}
                     onPress={clearStatus}
                     iconFill={themeColors.danger}
@@ -101,7 +101,6 @@ StatusPage.displayName = 'StatusPage';
 StatusPage.propTypes = propTypes;
 
 export default compose(
-    withLocalize,
     withCurrentUserPersonalDetails,
     withOnyx({
         draftStatus: {

src/pages/settings/Security/SecuritySettingsPage.js

@@ -5,6 +5,7 @@ import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import Navigation from '../../../libs/Navigation/Navigation';
 import ROUTES from '../../../ROUTES';
+import SCREENS from '../../../SCREENS';
 import styles from '../../../styles/styles';
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import themeColors from '../../../styles/themes/default';
@@ -51,10 +52,8 @@ function SecuritySettingsPage(props) {
         <IllustratedHeaderPageLayout
             title={props.translate('initialSettingsPage.security')}
             onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
-            shouldShowBackButton
-            shouldShowCloseButton
             illustration={LottieAnimations.Safe}
-            backgroundColor={themeColors.PAGE_BACKGROUND_COLORS[ROUTES.SETTINGS_SECURITY]}
+            backgroundColor={themeColors.PAGE_BACKGROUND_COLORS[SCREENS.SETTINGS.SECURITY]}
         >
             <ScrollView contentContainerStyle={[styles.flexGrow1, styles.flexColumn, styles.justifyContentBetween]}>
                 <View style={[styles.flex1]}>

src/styles/themes/default.js

@@ -1,7 +1,6 @@
 /* eslint-disable no-unused-vars */
 import colors from '../colors';
 import SCREENS from '../../SCREENS';
-import ROUTES from '../../ROUTES';
 
 const darkTheme = {
     // Figma keys
@@ -84,13 +83,17 @@ const darkTheme = {
     starDefaultBG: 'rgb(254, 228, 94)',
 };
 
+// Adding a color here will animate the status bar to the right color when the screen is opened.
+// Note that it needs to be a screen name, not a route url.
+// The route urls from ROUTES.ts are only used for deep linking and configuring URLs on web.
+// The screen name (see SCREENS.ts) is the name of the screen as far as react-navigation is concerned, and the linkingConfig maps screen names to URLs
 darkTheme.PAGE_BACKGROUND_COLORS = {
     [SCREENS.HOME]: darkTheme.sidebar,
+    [SCREENS.SAVE_THE_WORLD.ROOT]: colors.tangerine800,
     [SCREENS.SETTINGS.PREFERENCES]: colors.blue500,
     [SCREENS.SETTINGS.WORKSPACES]: colors.pink800,
-    [ROUTES.SETTINGS_STATUS]: colors.green700,
-    [ROUTES.I_KNOW_A_TEACHER]: colors.tangerine800,
-    [ROUTES.SETTINGS_SECURITY]: colors.ice500,
+    [SCREENS.SETTINGS.SECURITY]: colors.ice500,
+    [SCREENS.SETTINGS.STATUS]: colors.green700,
 };
 
 export default darkTheme;

src/styles/themes/light.js

@@ -1,6 +1,5 @@
 import colors from '../colors';
 import SCREENS from '../../SCREENS';
-import ROUTES from '../../ROUTES';
 
 const lightTheme = {
     // Figma keys
@@ -83,13 +82,17 @@ const lightTheme = {
     starDefaultBG: 'rgb(254, 228, 94)',
 };
 
+// Adding a color here will animate the status bar to the right color when the screen is opened.
+// Note that it needs to be a screen name, not a route url.
+// The route urls from ROUTES.ts are only used for deep linking and configuring URLs on web.
+// The screen name (see SCREENS.ts) is the name of the screen as far as react-navigation is concerned, and the linkingConfig maps screen names to URLs
 lightTheme.PAGE_BACKGROUND_COLORS = {
     [SCREENS.HOME]: lightTheme.sidebar,
+    [SCREENS.SAVE_THE_WORLD.ROOT]: colors.tangerine800,
     [SCREENS.SETTINGS.PREFERENCES]: colors.blue500,
     [SCREENS.SETTINGS.WORKSPACES]: colors.pink800,
-    [ROUTES.SETTINGS_STATUS]: colors.green700,
-    [ROUTES.I_KNOW_A_TEACHER]: colors.tangerine800,
-    [ROUTES.SETTINGS_SECURITY]: colors.ice500,
+    [SCREENS.SETTINGS.SECURITY]: colors.ice500,
+    [SCREENS.SETTINGS.STATUS]: colors.green700,
 };
 
 export default lightTheme;