Merge pull request Expensify#28122 from margelo/status-ui-fixes

Status UI fixes
JaHRSe · Sep 27, 2023 · 6a6f9c5 · 6a6f9c5
2 parents 9b7d09e + 5c4ad5f
commit 6a6f9c5
Showing 1 changed file with 13 additions and 4 deletions.
diff --git a/src/pages/settings/Profile/CustomStatus/StatusPage.js b/src/pages/settings/Profile/CustomStatus/StatusPage.js
@@ -7,9 +7,9 @@ import MenuItemWithTopDescription from '../../../../components/MenuItemWithTopDe
 import HeaderPageLayout from '../../../../components/HeaderPageLayout';
 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';
+import MenuItem from '../../../../components/MenuItem';
 import Navigation from '../../../../libs/Navigation/Navigation';
 import * as User from '../../../../libs/actions/User';
 import MobileBackgroundImage from '../../../../../assets/images/money-stack.svg';
@@ -34,8 +34,16 @@ function StatusPage({draftStatus, currentUserPersonalDetails}) {
 
     const defaultEmoji = draftEmojiCode || currentUserEmojiCode;
     const defaultText = draftEmojiCode ? draftText : currentUserStatusText;
-    const customStatus = draftEmojiCode ? `${draftEmojiCode} ${draftText}` : `${currentUserEmojiCode || ''} ${currentUserStatusText || ''}`;
     const hasDraftStatus = !!draftEmojiCode || !!draftText;
+    const customStatus = useMemo(() => {
+        if (draftEmojiCode) {
+            return `${draftEmojiCode} ${draftText}`;
+        }
+        if (currentUserEmojiCode || currentUserStatusText) {
+            return `${currentUserEmojiCode || ''} ${currentUserStatusText || ''}`;
+        }
+        return '';
+    }, [draftEmojiCode, draftText, currentUserEmojiCode, currentUserStatusText]);
 
     const clearStatus = () => {
         User.clearCustomStatus();
@@ -77,7 +85,7 @@ function StatusPage({draftStatus, currentUserPersonalDetails}) {
             backgroundColor={themeColors.PAGE_BACKGROUND_COLORS[SCREENS.SETTINGS.STATUS]}
             footer={footerComponent}
         >
-            <View style={styles.m5}>
+            <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>
             </View>
@@ -92,10 +100,11 @@ function StatusPage({draftStatus, currentUserPersonalDetails}) {
             {(!!currentUserEmojiCode || !!currentUserStatusText) && (
                 <MenuItem
                     title={localize.translate('statusPage.clearStatus')}
+                    titleStyle={styles.ml0}
                     icon={Expensicons.Close}
                     onPress={clearStatus}
                     iconFill={themeColors.danger}
-                    wrapperStyle={[styles.cardMenuItem]}
+                    wrapperStyle={[styles.pl2]}
                 />
             )}
         </HeaderPageLayout>