diff --git a/src/components/EmptyStateComponent/index.tsx b/src/components/EmptyStateComponent/index.tsx index c3d8323b2cf4..1efa526355f1 100644 --- 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 ( - + - + + {HeaderComponent} diff --git a/src/components/EmptyStateComponent/types.ts b/src/components/EmptyStateComponent/types.ts index 258e8a610e16..94860893c2c4 100644 --- a/src/components/EmptyStateComponent/types.ts +++ b/src/components/EmptyStateComponent/types.ts @@ -20,6 +20,7 @@ type SharedProps = { headerMediaType: T; headerContentStyles?: StyleProp; emptyStateForegroundStyles?: StyleProp; + minModalHeight?: number; }; type MediaType = SharedProps & { diff --git a/src/pages/workspace/expensifyCard/EmptyCardView.tsx b/src/pages/workspace/expensifyCard/EmptyCardView.tsx index a7d2b9949703..ace0b84165d8 100644 --- 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} /> {translate('workspace.expensifyCard.disclaimer')} diff --git a/src/styles/index.ts b/src/styles/index.ts index 52dee2c5e9fd..9be740868330 100644 --- 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,