Merge pull request #46860 from koko57/fix/46488-fix-modal-centering

Fix/46488 fix modal centering
Expensify · Aug 12, 2024 · a5b4b64 · a5b4b64
2 parents fd61159 + 114d61b
commit a5b4b64
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 11 deletions.
diff --git a/src/components/EmptyStateComponent/index.tsx b/src/components/EmptyStateComponent/index.tsx
@@ -23,7 +23,6 @@ function EmptyStateComponent({
     subtitle,
     headerStyles,
     headerContentStyles,
-    emptyStateForegroundStyles,
     minModalHeight = 400,
 }: EmptyStateComponentProps) {
     const styles = useThemeStyles();
@@ -85,8 +84,7 @@ function EmptyStateComponent({
                     shouldAnimate={false}
                 />
             </View>
-
-            <View style={[styles.emptyStateForeground, emptyStateForegroundStyles]}>
+            <View style={styles.emptyStateForeground}>
                 <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
@@ -19,7 +19,6 @@ type SharedProps<T> = {
     headerStyles?: StyleProp<ViewStyle>;
     headerMediaType: T;
     headerContentStyles?: StyleProp<ViewStyle & ImageStyle>;
-    emptyStateForegroundStyles?: StyleProp<ViewStyle>;
     minModalHeight?: number;
 };
 

diff --git a/src/hooks/useEmptyViewHeaderHeight/const.ts b/src/hooks/useEmptyViewHeaderHeight/const.ts
@@ -0,0 +1,5 @@
+const HEADER_HEIGHT = 80;
+const BUTTON_HEIGHT = 40;
+const BUTTON_MARGIN = 12;
+
+export {HEADER_HEIGHT, BUTTON_HEIGHT, BUTTON_MARGIN};
diff --git a/src/hooks/useEmptyViewHeaderHeight/index.ios.ts b/src/hooks/useEmptyViewHeaderHeight/index.ios.ts
@@ -0,0 +1,10 @@
+import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
+import {BUTTON_HEIGHT, BUTTON_MARGIN, HEADER_HEIGHT} from './const';
+
+function useEmptyViewHeaderHeight(isSmallScreenWidth: boolean): number {
+    const safeAreaInsets = useSafeAreaInsets();
+
+    return isSmallScreenWidth ? HEADER_HEIGHT + BUTTON_HEIGHT + BUTTON_MARGIN + safeAreaInsets.top : HEADER_HEIGHT;
+}
+
+export default useEmptyViewHeaderHeight;
diff --git a/src/hooks/useEmptyViewHeaderHeight/index.ts b/src/hooks/useEmptyViewHeaderHeight/index.ts
@@ -0,0 +1,7 @@
+import {BUTTON_HEIGHT, BUTTON_MARGIN, HEADER_HEIGHT} from './const';
+
+function useEmptyViewHeaderHeight(isSmallScreenWidth: boolean): number {
+    return isSmallScreenWidth ? HEADER_HEIGHT + BUTTON_HEIGHT + BUTTON_MARGIN : HEADER_HEIGHT;
+}
+
+export default useEmptyViewHeaderHeight;
diff --git a/src/pages/workspace/expensifyCard/EmptyCardView.tsx b/src/pages/workspace/expensifyCard/EmptyCardView.tsx
@@ -5,26 +5,23 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import ScrollView from '@components/ScrollView';
 import CardRowSkeleton from '@components/Skeletons/CardRowSkeleton';
 import Text from '@components/Text';
+import useEmptyViewHeaderHeight from '@hooks/useEmptyViewHeaderHeight';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import colors from '@styles/theme/colors';
 import CONST from '@src/CONST';
 
-const HEADER_HEIGHT = 80;
-const BUTTON_HEIGHT = 40;
-const BUTTON_MARGIN = 12;
-
 function EmptyCardView() {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const {windowHeight, isSmallScreenWidth} = useWindowDimensions();
 
-    const headerHeight = isSmallScreenWidth ? HEADER_HEIGHT + BUTTON_HEIGHT + BUTTON_MARGIN : HEADER_HEIGHT;
+    const headerHeight = useEmptyViewHeaderHeight(isSmallScreenWidth);
 
     return (
         <ScrollView>
-            <View style={[{height: windowHeight - headerHeight}, styles.mt5]}>
+            <View style={[{height: windowHeight - headerHeight}, styles.pt5]}>
                 <EmptyStateComponent
                     SkeletonComponent={CardRowSkeleton}
                     headerMediaType={CONST.EMPTY_STATE_MEDIA.ILLUSTRATION}
@@ -38,7 +35,6 @@ function EmptyCardView() {
                     ]}
                     title={translate('workspace.expensifyCard.issueAndManageCards')}
                     subtitle={translate('workspace.expensifyCard.getStartedIssuing')}
-                    emptyStateForegroundStyles={isSmallScreenWidth && {justifyContent: 'flex-start'}}
                     minModalHeight={500}
                 />
             </View>