feat: mobile styles

MrMuzyk · Sep 4, 2024 · 45484f1 · 45484f1
1 parent bdc036e
commit 45484f1
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 25 deletions.
diff --git a/src/components/PushRowWithModal/PushRowModal.tsx b/src/components/PushRowWithModal/PushRowModal.tsx
@@ -85,8 +85,11 @@ function PushRowModal({isVisible, selectedOption, onOptionChange, onClose, optio
             type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
             onModalHide={onClose}
             shouldUseCustomBackdrop
+            fullscreen
+            useNativeDriver
         >
             <ScreenWrapper
+                includePaddingTop={false}
                 includeSafeAreaPaddingBottom={false}
                 testID={PushRowModal.displayName}
             >

diff --git a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/Confirmation.tsx
@@ -106,7 +106,7 @@ function Confirmation({onNext, onMove}: SubStepProps) {
                             onMove(6);
                         }}
                     />
-                    <View style={[styles.ph5, styles.pb5, styles.flexGrow1, styles.justifyContentEnd]}>
+                    <View style={[styles.p5, styles.flexGrow1, styles.justifyContentEnd]}>
                         <Button
                             success
                             style={[styles.w100]}

diff --git a/src/pages/ReimbursementAccount/NonUSD/Country/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/NonUSD/Country/substeps/Confirmation.tsx
@@ -114,7 +114,7 @@ function Confirmation({onNext}: SubStepProps) {
                         validate={validate}
                         onSubmit={onNext}
                         style={[styles.flexGrow1]}
-                        submitButtonStyles={[styles.mh5]}
+                        submitButtonStyles={[styles.mh5, styles.pb0, styles.mbn1]}
                         isSubmitDisabled={disableSubmit}
                     >
                         <InputWrapper

diff --git a/src/pages/ReimbursementAccount/NonUSD/SignerInfo/HangTight.tsx b/src/pages/ReimbursementAccount/NonUSD/SignerInfo/HangTight.tsx
@@ -4,6 +4,8 @@ import Button from '@components/Button';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
+import SafeAreaConsumer from '@components/SafeAreaConsumer';
+import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -18,29 +20,36 @@ function HangTight({tempSubmit}: {tempSubmit: () => void}) {
     };
 
     return (
-        <>
-            <View style={[styles.flexGrow1, styles.justifyContentCenter, styles.alignItemsCenter]}>
-                <View style={styles.mb5}>
-                    <Icon
-                        width={144}
-                        height={132}
-                        src={Illustrations.Pillow}
-                    />
-                </View>
-                <Text style={[styles.textHeadlineLineHeightXXL, styles.mh5, styles.mb3, styles.mt5]}>{translate('signerInfoStep.hangTight')}</Text>
-                <Text style={[styles.mutedTextLabel, styles.mh5]}>{translate('signerInfoStep.weAreWaiting')}</Text>
-            </View>
-            <View style={[styles.ph5, styles.pb5, styles.flexGrow1, styles.justifyContentEnd]}>
-                <Button
-                    success
-                    style={[styles.w100]}
-                    onPress={handleSendReminder}
-                    large
-                    icon={Expensicons.Bell}
-                    text={translate('signerInfoStep.sendReminder')}
-                />
-            </View>
-        </>
+        <SafeAreaConsumer>
+            {({safeAreaPaddingBottomStyle}) => (
+                <ScrollView
+                    style={styles.pt0}
+                    contentContainerStyle={[styles.flexGrow1, safeAreaPaddingBottomStyle]}
+                >
+                    <View style={[styles.flexGrow1, styles.justifyContentCenter, styles.alignItemsCenter]}>
+                        <View style={styles.mb5}>
+                            <Icon
+                                width={144}
+                                height={132}
+                                src={Illustrations.Pillow}
+                            />
+                        </View>
+                        <Text style={[styles.textHeadlineLineHeightXXL, styles.mh5, styles.mb3, styles.mt5]}>{translate('signerInfoStep.hangTight')}</Text>
+                        <Text style={[styles.mutedTextLabel, styles.mh5]}>{translate('signerInfoStep.weAreWaiting')}</Text>
+                    </View>
+                    <View style={[styles.ph5, styles.pb5, styles.flexGrow1, styles.justifyContentEnd]}>
+                        <Button
+                            success
+                            style={[styles.w100]}
+                            onPress={handleSendReminder}
+                            large
+                            icon={Expensicons.Bell}
+                            text={translate('signerInfoStep.sendReminder')}
+                        />
+                    </View>
+                </ScrollView>
+            )}
+        </SafeAreaConsumer>
     );
 }