Fix Web Safari Signin page layout

src/components/withWindowDimensions.js

@@ -14,6 +14,9 @@ const windowDimensionsPropTypes = {
 
     // Is the window width narrow, like on a mobile device?
     isSmallScreenWidth: PropTypes.bool.isRequired,
+
+    // Is the window width narrow, like on a tablet device?
+    isMediumScreenWidth: PropTypes.bool.isRequired,
 };
 
 export default function (WrappedComponent) {
@@ -40,10 +43,12 @@ export default function (WrappedComponent) {
 
             const initialDimensions = Dimensions.get('window');
             const isSmallScreenWidth = initialDimensions.width <= variables.mobileResponsiveWidthBreakpoint;
+            const isMediumScreenWidth = !isSmallScreenWidth && initialDimensions.width <= variables.mediumScreenResponsiveWidthBreakpoint;
             this.state = {
                 windowHeight: initialDimensions.height,
                 windowWidth: initialDimensions.width,
                 isSmallScreenWidth,
+                isMediumScreenWidth,
             };
         }
 
@@ -64,10 +69,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,
             });
         }
 
@@ -81,6 +88,7 @@ export default function (WrappedComponent) {
                     windowHeight={this.state.windowHeight}
                     windowWidth={this.state.windowWidth}
                     isSmallScreenWidth={this.state.isSmallScreenWidth}
+                    isMediumScreenWidth={this.state.isMediumScreenWidth}
                 />
             );
         }

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]}>

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>
 );
 

src/styles/utilities/spacing.js

@@ -184,7 +184,9 @@ export default {
     p5: {
         padding: 20,
     },
-
+    p10: {
+        padding: 40,
+    },
     p20: {
         padding: 80,
     },

src/styles/variables.js

@@ -29,6 +29,7 @@ export default {
     iconSizeLarge: 24,
     iouAmountTextSize: 40,
     mobileResponsiveWidthBreakpoint: 800,
+    mediumScreenResponsiveWidthBreakpoint: 1024,
     safeInsertPercentage: 0.7,
     sideBarWidth: 375,
     pdfPageMaxWidth: 992,