fix: LoginPage for wide screens

src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js → src/pages/signin/SignInPageLayout/SignInPageContent.js

@@ -11,9 +11,10 @@ import TermsAndLicenses from '../TermsAndLicenses';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import Form from '../../../components/Form';
 import compose from '../../../libs/compose';
-import scrollViewContentContainerStyles from './signInPageStyles.js';
+import scrollViewContentContainerStyles from './signInPageStyles';
 import LoginKeyboardAvoidingView from './LoginKeyboardAvoidingView';
 import withKeyboardState from '../../../components/withKeyboardState';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 
 const propTypes = {
     /** The children to show inside the layout */
@@ -26,31 +27,35 @@ const propTypes = {
     /** Whether to show welcome text on a particular page */
     shouldShowWelcomeText: PropTypes.bool.isRequired,
 
-    /** SafeArea insets */
-    insets: PropTypes.shape(PropTypes.object),
-
     ...withLocalizePropTypes,
+    ...windowDimensionsPropTypes,
 };
 
-const defaultProps = {
-    insets: {},
-};
-
-const SignInPageLayoutNarrow = props => (
+const SignInPageContent = props => (
     <ScrollView
         keyboardShouldPersistTaps="handled"
         showsVerticalScrollIndicator={false}
         style={[
             styles.h100,
             styles.alignSelfCenter,
+            !props.isSmallScreenWidth && styles.signInPageWideLeftContainer,
+        ]}
+        contentContainerStyle={[
+            scrollViewContentContainerStyles,
+            !props.isSmallScreenWidth && styles.ph6,
         ]}
-        contentContainerStyle={scrollViewContentContainerStyles}
     >
-        <Form style={[styles.flex1, styles.signInPageNarrowContentContainer, styles.alignSelfStretch, styles.ph5]}>
+        <Form style={[
+            styles.flex1,
+            styles.alignSelfStretch,
+            props.isSmallScreenWidth && styles.signInPageNarrowContentContainer,
+            props.isSmallScreenWidth ? styles.ph5 : styles.ph4,
+        ]}
+        >
             <LoginKeyboardAvoidingView
                 behavior="position"
                 contentContainerStyle={[
-                    styles.mt40Percentage,
+                    props.isSmallScreenWidth ? styles.signInPageNarrowContentMargin : styles.signInPageWideLeftContentMargin,
                     styles.mb3,
                     StyleUtils.getModalPaddingStyles({
                         shouldAddBottomSafeAreaPadding: true,
@@ -59,7 +64,11 @@ const SignInPageLayoutNarrow = props => (
                     }),
                 ]}
             >
-                <View style={[styles.componentHeightLarge, styles.mb2]}>
+                <View style={[
+                    styles.componentHeightLarge,
+                    ...(props.isSmallScreenWidth ? [styles.mb2] : [styles.mt6, styles.mb5]),
+                ]}
+                >
                     <ExpensifyCashLogo
                         width={variables.componentSizeLarge}
                         height={variables.componentSizeLarge}
@@ -73,18 +82,20 @@ const SignInPageLayoutNarrow = props => (
                 {props.children}
             </LoginKeyboardAvoidingView>
         </Form>
-        <View style={[styles.mb5, styles.alignSelfCenter, styles.signInPageNarrowContentContainer, styles.ph5]}>
+        <View style={[styles.mb5, styles.alignSelfCenter, props.isSmallScreenWidth && styles.signInPageNarrowContentContainer, styles.ph5]}>
             <TermsAndLicenses />
         </View>
     </ScrollView>
 );
 
-SignInPageLayoutNarrow.propTypes = propTypes;
-SignInPageLayoutNarrow.defaultProps = defaultProps;
-SignInPageLayoutNarrow.displayName = 'SignInPageLayoutNarrow';
+SignInPageContent.propTypes = propTypes;
+SignInPageContent.displayName = 'SignInPageContent';
 
 export default compose(
+    withWindowDimensions,
     withLocalize,
+
+    // KeyboardState HOC is needed to trigger recalculation of the UI when keyboard opens or closes
     withKeyboardState,
     withSafeAreaInsets,
-)(SignInPageLayoutNarrow);
+)(SignInPageContent);

src/pages/signin/SignInPageLayout/SignInPageWideContainer.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import SVGImage from '../../../components/SVGImage';
+import styles from '../../../styles/styles';
+import * as StyleUtils from '../../../styles/StyleUtils';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
+
+const propTypes = {
+    /** The children to show inside the Container */
+    children: PropTypes.node.isRequired,
+
+    ...windowDimensionsPropTypes,
+};
+
+const backgroundStyle = StyleUtils.getLoginPagePromoStyle();
+
+const SignInPageWideContainer = props => (
+    <View style={[styles.flex1, styles.signInPageInner]}>
+        <View style={[styles.flex1, styles.flexRow, styles.flexGrow1]}>
+            {props.children}
+            <View style={[
+                styles.flexGrow1,
+                StyleUtils.getBackgroundColorStyle(backgroundStyle.backgroundColor),
+                props.isMediumScreenWidth && styles.alignItemsCenter,
+            ]}
+            >
+                <SVGImage
+                    width="100%"
+                    height="100%"
+                    src={backgroundStyle.backgroundImageUri}
+                />
+            </View>
+        </View>
+    </View>
+);
+
+SignInPageWideContainer.propTypes = propTypes;
+SignInPageWideContainer.displayName = 'SignInPageWideContainer';
+
+export default withWindowDimensions(SignInPageWideContainer);

src/pages/signin/SignInPageLayout/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import SignInPageLayoutNarrow from './SignInPageLayoutNarrow';
-import SignInPageLayoutWide from './SignInPageLayoutWide';
+import SignInPageContent from './SignInPageContent';
+import SignInPageWideContainer from './SignInPageWideContainer';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 
 const propTypes = {
@@ -18,26 +18,22 @@ const propTypes = {
     ...windowDimensionsPropTypes,
 };
 
-const SignInPageLayout = props => (
-    !props.isSmallScreenWidth
-        ? (
-            <SignInPageLayoutWide
-                welcomeText={props.welcomeText}
-                isMediumScreenWidth={props.isMediumScreenWidth}
-                shouldShowWelcomeText={props.shouldShowWelcomeText}
-            >
-                {props.children}
-            </SignInPageLayoutWide>
-        )
-        : (
-            <SignInPageLayoutNarrow
-                welcomeText={props.welcomeText}
-                shouldShowWelcomeText={props.shouldShowWelcomeText}
-            >
-                {props.children}
-            </SignInPageLayoutNarrow>
-        )
-);
+const SignInPageLayout = (props) => {
+    const content = (
+        <SignInPageContent
+            welcomeText={props.welcomeText}
+            shouldShowWelcomeText={props.shouldShowWelcomeText}
+        >
+            {props.children}
+        </SignInPageContent>
+    );
+
+    if (props.isSmallScreenWidth) {
+        return content;
+    }
+
+    return <SignInPageWideContainer>{content}</SignInPageWideContainer>;
+};
 
 SignInPageLayout.propTypes = propTypes;
 SignInPageLayout.displayName = 'SignInPageLayout';

src/styles/styles.js

@@ -811,8 +811,17 @@ const styles = {
         maxWidth: 335,
     },
 
+    signInPageNarrowContentMargin: {
+        marginTop: '40%',
+    },
+
     signInPageWideLeftContainer: {
         width: 375,
+        maxWidth: 375,
+    },
+
+    signInPageWideLeftContentMargin: {
+        marginTop: '44.5%',
     },
 
     signInPageWideHeroContent: {

src/styles/utilities/spacing.js

@@ -125,10 +125,6 @@ export default {
         marginTop: 24,
     },
 
-    mt40Percentage: {
-        marginTop: '40%',
-    },
-
     mb0: {
         marginBottom: 0,
     },