Merge pull request #46649 from software-mansion-labs/filip-solecki/em…

…pty-state-modal-height-fix
Expensify · Aug 6, 2024 · 6c3dcc2 · 6c3dcc2
2 parents 0988e7a + aca8eb1
commit 6c3dcc2
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 11 deletions.
diff --git a/src/components/EmptyStateComponent/index.tsx b/src/components/EmptyStateComponent/index.tsx
@@ -7,7 +7,6 @@ import Lottie from '@components/Lottie';
 import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
 import VideoPlayer from '@components/VideoPlayer';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import type {EmptyStateComponentProps, VideoLoadedEventType} from './types';
@@ -25,9 +24,9 @@ function EmptyStateComponent({
     headerStyles,
     headerContentStyles,
     emptyStateForegroundStyles,
+    minModalHeight = 400,
 }: EmptyStateComponentProps) {
     const styles = useThemeStyles();
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const [videoAspectRatio, setVideoAspectRatio] = useState(VIDEO_ASPECT_RATIO);
 
     const setAspectRatio = (event: VideoReadyForDisplayEvent | VideoLoadedEventType | undefined) => {
@@ -79,14 +78,15 @@ function EmptyStateComponent({
     }, [headerMedia, headerMediaType, headerContentStyles, videoAspectRatio, styles.emptyStateVideo]);
 
     return (
-        <ScrollView contentContainerStyle={styles.emptyStateScrollView}>
+        <ScrollView contentContainerStyle={[styles.emptyStateScrollView, {minHeight: minModalHeight}]}>
             <View style={styles.skeletonBackground}>
                 <SkeletonComponent
                     gradientOpacityEnabled
                     shouldAnimate={false}
                 />
             </View>
-            <View style={[styles.emptyStateForeground(shouldUseNarrowLayout), emptyStateForegroundStyles]}>
+
+            <View style={[styles.emptyStateForeground, emptyStateForegroundStyles]}>
                 <View style={styles.emptyStateContent}>
                     <View style={[styles.emptyStateHeader(headerMediaType === CONST.EMPTY_STATE_MEDIA.ILLUSTRATION), headerStyles]}>{HeaderComponent}</View>
                     <View style={styles.p8}>

diff --git a/src/components/EmptyStateComponent/types.ts b/src/components/EmptyStateComponent/types.ts
@@ -20,6 +20,7 @@ type SharedProps<T> = {
     headerMediaType: T;
     headerContentStyles?: StyleProp<ViewStyle & ImageStyle>;
     emptyStateForegroundStyles?: StyleProp<ViewStyle>;
+    minModalHeight?: number;
 };
 
 type MediaType<HeaderMedia, T extends MediaTypes> = SharedProps<T> & {

diff --git a/src/pages/workspace/expensifyCard/EmptyCardView.tsx b/src/pages/workspace/expensifyCard/EmptyCardView.tsx
@@ -39,6 +39,7 @@ function EmptyCardView() {
                     title={translate('workspace.expensifyCard.issueAndManageCards')}
                     subtitle={translate('workspace.expensifyCard.getStartedIssuing')}
                     emptyStateForegroundStyles={isSmallScreenWidth && {justifyContent: 'flex-start'}}
+                    minModalHeight={500}
                 />
             </View>
             <Text style={[styles.textMicroSupporting, styles.m5]}>{translate('workspace.expensifyCard.disclaimer')}</Text>

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -5110,19 +5110,16 @@ const styles = (theme: ThemeColors) =>
         },
 
         emptyStateScrollView: {
-            marginTop: 12,
-            minHeight: 400,
             height: '100%',
             flex: 1,
         },
 
-        emptyStateForeground: (isSmallScreenWidth: boolean) => ({
+        emptyStateForeground: {
+            margin: 32,
             justifyContent: 'center',
             alignItems: 'center',
-            height: '100%',
-            padding: isSmallScreenWidth ? 32 : 0,
-            width: '100%',
-        }),
+            flex: 1,
+        },
 
         emptyStateContent: {
             backgroundColor: theme.cardBG,