Merge pull request Expensify#30143 from allroundexperts/fix-30129

fix: unify the spacing on the money report
allroundexperts · Oct 22, 2023 · cb5aeb1 · cb5aeb1
2 parents 3656ae1 + 524fa76
commit cb5aeb1
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 56 deletions.
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -124,7 +124,16 @@ const CONST = {
             VIEW_HEIGHT: 275,
         },
         MONEY_REPORT: {
-            MIN_HEIGHT: 280,
+            SMALL_SCREEN: {
+                IMAGE_HEIGHT: 300,
+                CONTAINER_MINHEIGHT: 280,
+                VIEW_HEIGHT: 220,
+            },
+            WIDE_SCREEN: {
+                IMAGE_HEIGHT: 450,
+                CONTAINER_MINHEIGHT: 280,
+                VIEW_HEIGHT: 275,
+            },
         },
     },
 

diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js
@@ -7,7 +7,6 @@ import styles from '../../styles/styles';
 import themeColors from '../../styles/themes/default';
 import * as ReportUtils from '../../libs/ReportUtils';
 import * as StyleUtils from '../../styles/StyleUtils';
-import CONST from '../../CONST';
 import Text from '../Text';
 import Icon from '../Icon';
 import * as Expensicons from '../Icon/Expensicons';
@@ -41,9 +40,9 @@ function MoneyReportView(props) {
     const subAmountTextStyles = [styles.taskTitleMenuItem, styles.alignSelfCenter, StyleUtils.getFontSizeStyle(variables.fontSizeh1), StyleUtils.getColorStyle(themeColors.textSupporting)];
 
     return (
-        <View style={[StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth), StyleUtils.getMinimumHeight(CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT.MIN_HEIGHT)]}>
+        <View style={[StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth, true)]}>
             <AnimatedEmptyStateBackground />
-            <View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}>
+            <View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth, true)]}>
                 <View style={[styles.flexRow, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv2]}>
                     <View style={[styles.flex1, styles.justifyContentCenter]}>
                         <Text
@@ -70,51 +69,51 @@ function MoneyReportView(props) {
                         </Text>
                     </View>
                 </View>
-            </View>
-            {shouldShowBreakdown ? (
-                <>
-                    <View style={[styles.flexRow, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv1]}>
-                        <View style={[styles.flex1, styles.justifyContentCenter]}>
-                            <Text
-                                style={[styles.textLabelSupporting]}
-                                numberOfLines={1}
-                            >
-                                {translate('cardTransactions.outOfPocket')}
-                            </Text>
-                        </View>
-                        <View style={[styles.flexRow, styles.justifyContentCenter]}>
-                            <Text
-                                numberOfLines={1}
-                                style={subAmountTextStyles}
-                            >
-                                {formattedOutOfPocketAmount}
-                            </Text>
-                        </View>
-                    </View>
-                    <View style={[styles.flexRow, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv1]}>
-                        <View style={[styles.flex1, styles.justifyContentCenter]}>
-                            <Text
-                                style={[styles.textLabelSupporting]}
-                                numberOfLines={1}
-                            >
-                                {translate('cardTransactions.companySpend')}
-                            </Text>
+                {shouldShowBreakdown ? (
+                    <>
+                        <View style={[styles.flexRow, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv1]}>
+                            <View style={[styles.flex1, styles.justifyContentCenter]}>
+                                <Text
+                                    style={[styles.textLabelSupporting]}
+                                    numberOfLines={1}
+                                >
+                                    {translate('cardTransactions.outOfPocket')}
+                                </Text>
+                            </View>
+                            <View style={[styles.flexRow, styles.justifyContentCenter]}>
+                                <Text
+                                    numberOfLines={1}
+                                    style={subAmountTextStyles}
+                                >
+                                    {formattedOutOfPocketAmount}
+                                </Text>
+                            </View>
                         </View>
-                        <View style={[styles.flexRow, styles.justifyContentCenter]}>
-                            <Text
-                                numberOfLines={1}
-                                style={subAmountTextStyles}
-                            >
-                                {formattedCompanySpendAmount}
-                            </Text>
+                        <View style={[styles.flexRow, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv1]}>
+                            <View style={[styles.flex1, styles.justifyContentCenter]}>
+                                <Text
+                                    style={[styles.textLabelSupporting]}
+                                    numberOfLines={1}
+                                >
+                                    {translate('cardTransactions.companySpend')}
+                                </Text>
+                            </View>
+                            <View style={[styles.flexRow, styles.justifyContentCenter]}>
+                                <Text
+                                    numberOfLines={1}
+                                    style={subAmountTextStyles}
+                                >
+                                    {formattedCompanySpendAmount}
+                                </Text>
+                            </View>
                         </View>
-                    </View>
-                </>
-            ) : undefined}
-            <SpacerView
-                shouldShow={props.shouldShowHorizontalRule}
-                style={[props.shouldShowHorizontalRule ? styles.reportHorizontalRule : {}]}
-            />
+                    </>
+                ) : undefined}
+                <SpacerView
+                    shouldShow={props.shouldShowHorizontalRule}
+                    style={[props.shouldShowHorizontalRule ? styles.reportHorizontalRule : {}]}
+                />
+            </View>
         </View>
     );
 }

diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts
@@ -882,17 +882,19 @@ function getErrorPageContainerStyle(safeAreaPaddingBottom = 0): ViewStyle {
 /**
  * Gets the correct size for the empty state background image based on screen dimensions
  */
-function getReportWelcomeBackgroundImageStyle(isSmallScreenWidth: boolean): ViewStyle {
+function getReportWelcomeBackgroundImageStyle(isSmallScreenWidth: boolean, isMoneyReport = false): ViewStyle {
+    const emptyStateBackground = isMoneyReport ? CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT : CONST.EMPTY_STATE_BACKGROUND;
+
     if (isSmallScreenWidth) {
         return {
-            height: CONST.EMPTY_STATE_BACKGROUND.SMALL_SCREEN.IMAGE_HEIGHT,
+            height: emptyStateBackground.SMALL_SCREEN.IMAGE_HEIGHT,
             width: '200%',
             position: 'absolute',
         };
     }
 
     return {
-        height: CONST.EMPTY_STATE_BACKGROUND.WIDE_SCREEN.IMAGE_HEIGHT,
+        height: emptyStateBackground.WIDE_SCREEN.IMAGE_HEIGHT,
         width: '100%',
         position: 'absolute',
     };
@@ -901,15 +903,16 @@ function getReportWelcomeBackgroundImageStyle(isSmallScreenWidth: boolean): View
 /**
  * Gets the correct top margin size for the chat welcome message based on screen dimensions
  */
-function getReportWelcomeTopMarginStyle(isSmallScreenWidth: boolean): ViewStyle {
+function getReportWelcomeTopMarginStyle(isSmallScreenWidth: boolean, isMoneyReport = false): ViewStyle {
+    const emptyStateBackground = isMoneyReport ? CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT : CONST.EMPTY_STATE_BACKGROUND;
     if (isSmallScreenWidth) {
         return {
-            marginTop: CONST.EMPTY_STATE_BACKGROUND.SMALL_SCREEN.VIEW_HEIGHT,
+            marginTop: emptyStateBackground.SMALL_SCREEN.VIEW_HEIGHT,
         };
     }
 
     return {
-        marginTop: CONST.EMPTY_STATE_BACKGROUND.WIDE_SCREEN.VIEW_HEIGHT,
+        marginTop: emptyStateBackground.WIDE_SCREEN.VIEW_HEIGHT,
     };
 }
 
@@ -934,17 +937,18 @@ function getLineHeightStyle(lineHeight: number): TextStyle {
 /**
  * Gets the correct size for the empty state container based on screen dimensions
  */
-function getReportWelcomeContainerStyle(isSmallScreenWidth: boolean): ViewStyle {
+function getReportWelcomeContainerStyle(isSmallScreenWidth: boolean, isMoneyReport = false): ViewStyle {
+    const emptyStateBackground = isMoneyReport ? CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT : CONST.EMPTY_STATE_BACKGROUND;
     if (isSmallScreenWidth) {
         return {
-            minHeight: CONST.EMPTY_STATE_BACKGROUND.SMALL_SCREEN.CONTAINER_MINHEIGHT,
+            minHeight: emptyStateBackground.SMALL_SCREEN.CONTAINER_MINHEIGHT,
             display: 'flex',
             justifyContent: 'space-between',
         };
     }
 
     return {
-        minHeight: CONST.EMPTY_STATE_BACKGROUND.WIDE_SCREEN.CONTAINER_MINHEIGHT,
+        minHeight: emptyStateBackground.WIDE_SCREEN.CONTAINER_MINHEIGHT,
         display: 'flex',
         justifyContent: 'space-between',
     };