Merge pull request #4802 from mananjadhav/fix/signin-page-layout

Fix Web Safari Signin page layout
Expensify · Aug 27, 2021 · e0497e3 · e0497e3
2 parents 95b28b4 + 5e62d66
commit e0497e3
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/src/components/withWindowDimensions.js b/src/components/withWindowDimensions.js
@@ -71,10 +71,12 @@ export default function (WrappedComponent) {
         onDimensionChange(newDimensions) {
             const {window} = newDimensions;
             const isSmallScreenWidth = window.width <= variables.mobileResponsiveWidthBreakpoint;
+            const isMediumScreenWidth = !isSmallScreenWidth && window.width <= variables.mediumScreenResponsiveWidthBreakpoint;
             this.setState({
                 windowHeight: window.height,
                 windowWidth: window.width,
                 isSmallScreenWidth,
+                isMediumScreenWidth,
             });
         }
 

diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
@@ -19,11 +19,14 @@ const propTypes = {
      * on form type (set password, sign in, etc.) */
     welcomeText: PropTypes.string.isRequired,
 
+    /* Flag to check medium screen with device */
+    isMediumScreenWidth: PropTypes.string.isRequired,
+
     ...withLocalizePropTypes,
 };
 
 const SignInPageLayoutWide = props => (
-    <View style={[styles.signInPageInner]}>
+    <View style={[styles.flex1, styles.signInPageInner]}>
         <View style={[styles.flex1, styles.flexRow, styles.dFlex, styles.flexGrow1]}>
             <View style={[styles.signInPageWideLeftContainer, styles.dFlex, styles.flexColumn, styles.ph6]}>
                 <View style={[
@@ -61,7 +64,9 @@ const SignInPageLayoutWide = props => (
                 styles.justifyContentAround,
                 styles.backgroundBlue,
                 styles.pb10Percentage,
-                styles.p20,
+                !props.isMediumScreenWidth && styles.p20,
+                props.isMediumScreenWidth && styles.p10,
+                props.isMediumScreenWidth && styles.alignItemsCenter,
             ]}
             >
                 <View style={[styles.dFlex, styles.flexColumnReverse, styles.alignItemsCenter, styles.w50]}>

diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
@@ -9,7 +9,14 @@ const propTypes = {
 
 const SignInPageLayout = props => (
     !props.isSmallScreenWidth
-        ? <SignInPageLayoutWide welcomeText={props.welcomeText}>{props.children}</SignInPageLayoutWide>
+        ? (
+            <SignInPageLayoutWide
+                welcomeText={props.welcomeText}
+                isMediumScreenWidth={props.isMediumScreenWidth}
+            >
+                {props.children}
+            </SignInPageLayoutWide>
+        )
         : <SignInPageLayoutNarrow welcomeText={props.welcomeText}>{props.children}</SignInPageLayoutNarrow>
 );
 

diff --git a/src/styles/utilities/spacing.js b/src/styles/utilities/spacing.js
@@ -184,7 +184,9 @@ export default {
     p5: {
         padding: 20,
     },
-
+    p10: {
+        padding: 40,
+    },
     p20: {
         padding: 80,
     },
-Original file line number
+Diff line change
@@ Expand Up / @@ -184,7 +184,9 @@ export default { @@
         p5: {
             padding: 20,
         },
+        p10: {
+            padding: 40,
+        },
         p20: {
             padding: 80,
         },
@@ Expand Down @@