Fix settings page / status bugs

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

@@ -10,7 +10,6 @@ import MenuItem from '@components/MenuItem';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import Text from '@components/Text';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
-import withLocalize from '@components/withLocalize';
 import useLocalize from '@hooks/useLocalize';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
@@ -26,7 +25,7 @@ const propTypes = {
 };
 
 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');
@@ -62,18 +61,18 @@ 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 (
         <HeaderPageLayout
-            title={localize.translate('statusPage.status')}
+            title={translate('statusPage.status')}
             onBackButtonPress={navigateBackToSettingsPage}
             headerContent={
                 <MobileBackgroundImage
@@ -86,20 +85,20 @@ function StatusPage({draftStatus, currentUserPersonalDetails}) {
             footer={footerComponent}
         >
             <View style={[styles.mh5, styles.mb5]}>
-                <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')}
                     titleStyle={styles.ml0}
                     icon={Expensicons.Close}
                     onPress={clearStatus}
@@ -115,7 +114,6 @@ StatusPage.displayName = 'StatusPage';
 StatusPage.propTypes = propTypes;
 
 export default compose(
-    withLocalize,
     withCurrentUserPersonalDetails,
     withOnyx({
         draftStatus: {

src/styles/themes/default.ts

@@ -85,6 +85,10 @@ const darkTheme = {
     mapAttributionText: colors.black,
     white: colors.white,
 
+    // 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
     PAGE_BACKGROUND_COLORS: {
         [SCREENS.HOME]: colors.darkHighlightBackground,
         [SCREENS.SAVE_THE_WORLD.ROOT]: colors.tangerine800,

src/styles/themes/light.ts

@@ -85,6 +85,10 @@ const lightTheme = {
     mapAttributionText: colors.black,
     white: colors.white,
 
+    // 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
     PAGE_BACKGROUND_COLORS: {
         [SCREENS.HOME]: colors.lightHighlightBackground,
         [SCREENS.SAVE_THE_WORLD.ROOT]: colors.tangerine800,