fix: empty category illustration is not center aligned

Expensify · Jun 6, 2024 · d7f1ae6 · d7f1ae6
1 parent 952d844
commit d7f1ae6
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/src/components/WorkspaceEmptyStateSection.tsx b/src/components/WorkspaceEmptyStateSection.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
+import type {StyleProp, ViewStyle} from 'react-native';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type IconAsset from '@src/types/utils/IconAsset';
@@ -15,14 +16,29 @@ type WorkspaceEmptyStateSectionProps = {
 
     /** The icon to display along with the title */
     icon: IconAsset;
+
+    /** Additional style for container */
+    containerStyle?: StyleProp<ViewStyle>;
+
+    /** Whether to apply card style to container */
+    shouldStyleAsCard?: boolean;
 };
 
-function WorkspaceEmptyStateSection({icon, subtitle, title}: WorkspaceEmptyStateSectionProps) {
+function WorkspaceEmptyStateSection({icon, subtitle, title, containerStyle, shouldStyleAsCard = true}: WorkspaceEmptyStateSectionProps) {
     const styles = useThemeStyles();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     return (
-        <View style={[styles.pageWrapper, styles.cardSectionContainer, styles.workspaceSection, styles.ph8, shouldUseNarrowLayout ? styles.pv10 : styles.pv12]}>
+        <View
+            style={[
+                styles.pageWrapper,
+                shouldStyleAsCard && styles.cardSectionContainer,
+                styles.workspaceSection,
+                styles.ph8,
+                shouldUseNarrowLayout ? styles.pv10 : styles.pv12,
+                containerStyle,
+            ]}
+        >
             <Icon
                 src={icon}
                 width={184}

diff --git a/src/pages/iou/request/step/IOURequestStepCategory.tsx b/src/pages/iou/request/step/IOURequestStepCategory.tsx
@@ -3,13 +3,13 @@ import React, {useEffect} from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
-import BlockingView from '@components/BlockingViews/BlockingView';
 import Button from '@components/Button';
 import CategoryPicker from '@components/CategoryPicker';
 import FixedFooter from '@components/FixedFooter';
 import * as Illustrations from '@components/Icon/Illustrations';
 import type {ListItem} from '@components/SelectionList/types';
 import Text from '@components/Text';
+import WorkspaceEmptyStateSection from '@components/WorkspaceEmptyStateSection';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useTheme from '@hooks/useTheme';
@@ -18,7 +18,6 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
-import variables from '@styles/variables';
 import * as IOU from '@userActions/IOU';
 import * as PolicyActions from '@userActions/Policy/Policy';
 import CONST from '@src/CONST';
@@ -169,13 +168,12 @@ function IOURequestStepCategory({
             )}
             {shouldShowEmptyState && (
                 <View style={[styles.flex1]}>
-                    <BlockingView
+                    <WorkspaceEmptyStateSection
+                        shouldStyleAsCard={false}
                         icon={Illustrations.EmptyStateExpenses}
-                        iconWidth={variables.modalTopIconWidth}
-                        iconHeight={variables.modalTopIconHeight}
                         title={translate('workspace.categories.emptyCategories.title')}
                         subtitle={translate('workspace.categories.emptyCategories.subtitle')}
-                        contentFitImage="contain"
+                        containerStyle={[styles.flex1, styles.justifyContentCenter]}
                     />
                     <FixedFooter style={[styles.mtAuto, styles.pt5]}>
                         <Button