Merge pull request #14295 from Expensify/marcaaron-addSafeAreaPadding…

…ToErrorPage Add safe area padding to error page
Expensify · Jan 19, 2023 · b197f26 · b197f26
2 parents 39a4992 + aae8230
commit b197f26
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 52 deletions.
diff --git a/src/pages/ErrorPage/GenericErrorPage.js b/src/pages/ErrorPage/GenericErrorPage.js
@@ -14,6 +14,8 @@ import styles from '../../styles/styles';
 import ErrorBodyText from './ErrorBodyText';
 import TextLink from '../../components/TextLink';
 import CONST from '../../CONST';
+import SafeAreaConsumer from '../../components/SafeAreaConsumer';
+import * as StyleUtils from '../../styles/StyleUtils';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -23,58 +25,62 @@ const propTypes = {
 };
 
 const GenericErrorPage = props => (
-    <View style={[styles.flex1, styles.pv10, styles.ph5, styles.errorPageContainer]}>
-        <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
-            <View>
-                <View style={styles.mb5}>
-                    <Icon
-                        src={Expensicons.Bug}
-                        height={variables.componentSizeNormal}
-                        width={variables.componentSizeNormal}
-                        fill={defaultTheme.iconSuccessFill}
-                    />
-                </View>
-                <View style={styles.mb5}>
-                    <Text style={[styles.textHeadline]}>
-                        {props.translate('genericErrorPage.title')}
-                    </Text>
-                </View>
-                <View style={styles.mb5}>
-                    <ErrorBodyText />
-                    <Text>
-                        {`${props.translate('genericErrorPage.body.helpTextConcierge')} `}
-                        <TextLink href={`mailto:${CONST.EMAIL.CONCIERGE}`} style={[styles.link]}>
-                            {CONST.EMAIL.CONCIERGE}
-                        </TextLink>
-                    </Text>
+    <SafeAreaConsumer>
+        {({paddingBottom}) => (
+            <View style={[styles.flex1, styles.pt10, styles.ph5, StyleUtils.getErrorPageContainerStyle(paddingBottom)]}>
+                <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
+                    <View>
+                        <View style={styles.mb5}>
+                            <Icon
+                                src={Expensicons.Bug}
+                                height={variables.componentSizeNormal}
+                                width={variables.componentSizeNormal}
+                                fill={defaultTheme.iconSuccessFill}
+                            />
+                        </View>
+                        <View style={styles.mb5}>
+                            <Text style={[styles.textHeadline]}>
+                                {props.translate('genericErrorPage.title')}
+                            </Text>
+                        </View>
+                        <View style={styles.mb5}>
+                            <ErrorBodyText />
+                            <Text>
+                                {`${props.translate('genericErrorPage.body.helpTextConcierge')} `}
+                                <TextLink href={`mailto:${CONST.EMAIL.CONCIERGE}`} style={[styles.link]}>
+                                    {CONST.EMAIL.CONCIERGE}
+                                </TextLink>
+                            </Text>
+                        </View>
+                        <View style={[styles.flexRow]}>
+                            <View style={[styles.flex1, styles.flexRow]}>
+                                <Button
+                                    success
+                                    medium
+                                    onPress={props.onRefresh}
+                                    text={props.translate('genericErrorPage.refresh')}
+                                    style={styles.mr3}
+                                />
+                                <Button
+                                    medium
+                                    onPress={() => {
+                                        Session.signOutAndRedirectToSignIn();
+                                        props.onRefresh();
+                                    }}
+                                    text={props.translate('initialSettingsPage.signOut')}
+                                />
+                            </View>
+                        </View>
+                    </View>
                 </View>
-                <View style={[styles.flexRow]}>
-                    <View style={[styles.flex1, styles.flexRow]}>
-                        <Button
-                            success
-                            medium
-                            onPress={props.onRefresh}
-                            text={props.translate('genericErrorPage.refresh')}
-                            style={styles.mr3}
-                        />
-                        <Button
-                            medium
-                            onPress={() => {
-                                Session.signOutAndRedirectToSignIn();
-                                props.onRefresh();
-                            }}
-                            text={props.translate('initialSettingsPage.signOut')}
-                        />
+                <View styles={styles.alignSelfEnd}>
+                    <View style={[styles.flex1, styles.flexRow, styles.justifyContentCenter]}>
+                        <LogoWordmark height={30} width={80} fill={defaultTheme.textLight} />
                     </View>
                 </View>
             </View>
-        </View>
-        <View styles={styles.alignSelfEnd}>
-            <View style={[styles.flex1, styles.flexRow, styles.justifyContentCenter]}>
-                <LogoWordmark height={30} width={80} fill={defaultTheme.textLight} />
-            </View>
-        </View>
-    </View>
+        )}
+    </SafeAreaConsumer>
 );
 
 GenericErrorPage.propTypes = propTypes;

diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
@@ -649,9 +649,21 @@ function getHorizontalStackedAvatarBorderStyle(isHovered, isPressed) {
     };
 }
 
+/**
+ * @param {Number} safeAreaPaddingBottom
+ * @returns {Object}
+ */
+function getErrorPageContainerStyle(safeAreaPaddingBottom = 0) {
+    return {
+        backgroundColor: themeColors.componentBG,
+        paddingBottom: 40 + safeAreaPaddingBottom,
+    };
+}
+
 export {
     getAvatarSize,
     getAvatarStyle,
+    getErrorPageContainerStyle,
     getSafeAreaPadding,
     getSafeAreaMargins,
     getNavigationDrawerStyle,

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -2702,10 +2702,6 @@ const styles = {
         flex: 1,
     },
 
-    errorPageContainer: {
-        backgroundColor: themeColors.componentBG,
-    },
-
     transferBalancePayment: {
         borderWidth: 1,
         borderRadius: variables.componentBorderRadiusNormal,

diff --git a/src/styles/utilities/spacing.js b/src/styles/utilities/spacing.js
@@ -346,6 +346,10 @@ export default {
         paddingTop: 20,
     },
 
+    pt10: {
+        paddingTop: 40,
+    },
+
     pb1: {
         paddingBottom: 4,
     },