From 3d5b543c6bef2f3d53aada28800dbb3a1caa1b15 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Sun, 31 Oct 2021 10:24:57 +0530
Subject: [PATCH 1/5] fix: LoginPage for wide screens

---
 .../SignInPageLayout/SignInPageLayoutWide.js  | 59 ++++++++++---------
 src/styles/styles.js                          |  1 +
 2 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
index baa74be76aef..5c856b66c439 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {View} from 'react-native';
+import {KeyboardAvoidingView, ScrollView, View} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import styles from '../../../styles/styles';
@@ -31,41 +31,42 @@ const backgroundStyle = backgroundStyles[_.random(0, 3)];
 
 const SignInPageLayoutWide = props => (
     <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={[
-                    styles.flex1,
-                    styles.dFlex,
-                    styles.flexColumn,
-                    styles.mt40Percentage,
-                    styles.signInPageFormContainer,
-                    styles.alignSelfCenter,
-                ]}
+        <View style={[styles.flex1, styles.flexRow, styles.flexGrow1]}>
+            <ScrollView
+                keyboardShouldPersistTaps="handled"
+                showsVerticalScrollIndicator={false}
+                style={styles.signInPageWideLeftContainer}
+                contentContainerStyle={[styles.ph6, styles.flexColumn]}
+            >
+                <KeyboardAvoidingView
+                    behavior="position"
+                    style={[
+                        styles.flex1,
+                        styles.mt40Percentage,
+                        styles.alignSelfCenter,
+                        styles.w100,
+                        styles.ph4,
+                    ]}
                 >
-                    <View style={[styles.flex1]}>
-                        <View style={[styles.signInPageLogo, styles.mt6, styles.mb5]}>
-                            <ExpensifyCashLogo
-                                width={variables.componentSizeLarge}
-                                height={variables.componentSizeLarge}
-                            />
-                        </View>
-                        {props.shouldShowWelcomeText && (
+                    <View style={[styles.signInPageLogo, styles.mt6, styles.mb5]}>
+                        <ExpensifyCashLogo
+                            width={variables.componentSizeLarge}
+                            height={variables.componentSizeLarge}
+                        />
+                    </View>
+                    {props.shouldShowWelcomeText && (
                         <Text style={[styles.mv5, styles.textLabel, styles.h3]}>
                             {props.welcomeText}
                         </Text>
-                        )}
-                        <View>
-                            {props.children}
-                        </View>
-                    </View>
-                    <View style={[styles.mv5]}>
-                        <TermsAndLicenses />
-                    </View>
+                    )}
+                    {props.children}
+                </KeyboardAvoidingView>
+                <View style={[styles.mv5, styles.ph4, styles.w100, styles.alignSelfCenter]}>
+                    <TermsAndLicenses />
                 </View>
-            </View>
+            </ScrollView>
             <View style={[
                 styles.flexGrow1,
-                styles.dFlex,
                 styles.flexRow,
                 styles.background100,
                 backgroundStyle,
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 4488a4643d4a..7d7866e9132a 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -715,6 +715,7 @@ const styles = {
 
     signInPageWideLeftContainer: {
         width: 375,
+        maxWidth: 375,
     },
 
     signInPageWideHeroContent: {

From 7ee51cb3bd88ff4e2fa22a411a9b3825cadd7eb8 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Mon, 22 Nov 2021 16:32:35 +0530
Subject: [PATCH 2/5] Wide Page style fix

---
 .../SignInPageLayoutNarrow.js                 |  2 +-
 .../SignInPageLayout/SignInPageLayoutWide.js  | 74 ++++++++++++-------
 src/styles/styles.js                          |  8 ++
 src/styles/utilities/spacing.js               |  4 -
 4 files changed, 55 insertions(+), 33 deletions(-)

diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js
index 380e5793b6c8..d5ca063b9d3a 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js
@@ -48,7 +48,7 @@ const SignInPageLayoutNarrow = props => (
             <LoginKeyboardAvoidingView
                 behavior="position"
                 contentContainerStyle={[
-                    styles.mt40Percentage,
+                    styles.signInPageNarrowContentMargin,
                     styles.mb3,
                     getModalPaddingStyles({
                         shouldAddBottomSafeAreaPadding: true,
diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
index 2e21ebfdf1aa..f77a8b890ae3 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
@@ -1,13 +1,19 @@
 import React from 'react';
 import {KeyboardAvoidingView, ScrollView, View} from 'react-native';
 import PropTypes from 'prop-types';
+import {withSafeAreaInsets} from 'react-native-safe-area-context';
 import SVGImage from '../../../components/SVGImage';
-import styles, {getBackgroundColorStyle, getLoginPagePromoStyle} from '../../../styles/styles';
+import styles, {getBackgroundColorStyle, getLoginPagePromoStyle, getModalPaddingStyles} from '../../../styles/styles';
 import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo';
 import Text from '../../../components/Text';
 import variables from '../../../styles/variables';
 import TermsAndLicenses from '../TermsAndLicenses';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
+import compose from '../../../libs/compose';
+import scrollViewContentContainerStyles from './signInPageStyles.js';
+import LoginKeyboardAvoidingView from './LoginKeyboardAvoidingView';
+import withKeyboardState from '../../../components/withKeyboardState';
+
 
 const propTypes = {
     /** The children to show inside the layout */
@@ -34,33 +40,41 @@ const SignInPageLayoutWide = props => (
             <ScrollView
                 keyboardShouldPersistTaps="handled"
                 showsVerticalScrollIndicator={false}
-                style={styles.signInPageWideLeftContainer}
-                contentContainerStyle={[styles.ph6, styles.flexColumn]}
+                style={[
+                    styles.h100,
+                    styles.alignSelfCenter,
+                    styles.signInPageWideLeftContainer,
+                ]}
+                contentContainerStyle={[scrollViewContentContainerStyles, styles.ph6]}
             >
-                <KeyboardAvoidingView
-                    behavior="position"
-                    style={[
-                        styles.flex1,
-                        styles.mt40Percentage,
-                        styles.alignSelfCenter,
-                        styles.w100,
-                        styles.ph4,
-                    ]}
-                >
-                    <View style={[styles.signInPageLogo, styles.mt6, styles.mb5]}>
-                        <ExpensifyCashLogo
-                            width={variables.componentSizeLarge}
-                            height={variables.componentSizeLarge}
-                        />
-                    </View>
-                    {props.shouldShowWelcomeText && (
-                        <Text style={[styles.mv5, styles.textLabel, styles.h3]}>
-                            {props.welcomeText}
-                        </Text>
-                    )}
-                    {props.children}
-                </KeyboardAvoidingView>
-                <View style={[styles.mv5, styles.ph4, styles.w100, styles.alignSelfCenter]}>
+                <View style={[styles.flex1, styles.alignSelfStretch, styles.ph4]}>
+                    <LoginKeyboardAvoidingView
+                        behavior="position"
+                        contentContainerStyle={[
+                            styles.signInPageWideLeftContentMargin,
+                            styles.mb3,
+                            getModalPaddingStyles({
+                                shouldAddBottomSafeAreaPadding: true,
+                                modalContainerStylePaddingBottom: 20,
+                                safeAreaPaddingBottom: props.insets.bottom,
+                            }),
+                        ]}
+                    >
+                        <View style={[styles.componentHeightLarge, styles.mt6, styles.mb5]}>
+                            <ExpensifyCashLogo
+                                width={variables.componentSizeLarge}
+                                height={variables.componentSizeLarge}
+                            />
+                        </View>
+                        {props.shouldShowWelcomeText && (
+                            <Text style={[styles.mv5, styles.textLabel, styles.h3]}>
+                                {props.welcomeText}
+                            </Text>
+                        )}
+                        {props.children}
+                    </LoginKeyboardAvoidingView>
+                </View>
+                <View style={[styles.mb5, styles.alignSelfCenter, styles.ph5]}>
                     <TermsAndLicenses />
                 </View>
             </ScrollView>
@@ -83,4 +97,8 @@ const SignInPageLayoutWide = props => (
 SignInPageLayoutWide.propTypes = propTypes;
 SignInPageLayoutWide.displayName = 'SignInPageLayoutWide';
 
-export default withLocalize(SignInPageLayoutWide);
+export default compose(
+    withLocalize,
+    withKeyboardState,
+    withSafeAreaInsets,
+)(SignInPageLayoutWide);
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 1b0fe15048f0..c3c752d1c268 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -691,11 +691,19 @@ const styles = {
         maxWidth: 335,
     },
 
+    signInPageNarrowContentMargin: {
+        marginTop: '40%',
+    },
+
     signInPageWideLeftContainer: {
         width: 375,
         maxWidth: 375,
     },
 
+    signInPageWideLeftContentMargin: {
+        marginTop: '44.5%',
+    },
+
     signInPageWideHeroContent: {
         maxWidth: 400,
     },
diff --git a/src/styles/utilities/spacing.js b/src/styles/utilities/spacing.js
index 9696cc0e7afe..a33ea6fd95a7 100644
--- a/src/styles/utilities/spacing.js
+++ b/src/styles/utilities/spacing.js
@@ -125,10 +125,6 @@ export default {
         marginTop: 24,
     },
 
-    mt40Percentage: {
-        marginTop: '40%',
-    },
-
     mb0: {
         marginBottom: 0,
     },

From a09676841bd1887818fb8264721e66650e158739 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Sun, 5 Dec 2021 22:47:25 +0530
Subject: [PATCH 3/5] merge Narrow and Wide SignInpages

---
 ...geLayoutNarrow.js => SignInPageContent.js} |  41 +++++--
 .../SignInPageLayout/SignInPageLayoutWide.js  | 105 ------------------
 .../SignInPageWideContainer.js                |  41 +++++++
 src/pages/signin/SignInPageLayout/index.js    |  40 +++----
 .../index.ios.js                              |   0
 .../index.js                                  |   0
 6 files changed, 89 insertions(+), 138 deletions(-)
 rename src/pages/signin/SignInPageLayout/{SignInPageLayoutNarrow.js => SignInPageContent.js} (66%)
 delete mode 100755 src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
 create mode 100755 src/pages/signin/SignInPageLayout/SignInPageWideContainer.js
 rename src/pages/signin/SignInPageLayout/{signInPageStyles.js => signInPageStyles}/index.ios.js (100%)
 rename src/pages/signin/SignInPageLayout/{signInPageStyles.js => signInPageStyles}/index.js (100%)

diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
similarity index 66%
rename from src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js
rename to src/pages/signin/SignInPageLayout/SignInPageContent.js
index 54d7b81f6fc2..bdf27febdbd0 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -10,9 +10,10 @@ import ExpensifyText from '../../../components/ExpensifyText';
 import TermsAndLicenses from '../TermsAndLicenses';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 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 */
@@ -29,27 +30,38 @@ const propTypes = {
     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}
     >
-        <View style={[styles.flex1, styles.signInPageNarrowContentContainer, styles.alignSelfStretch, styles.ph5]}>
+        <View style={[
+            styles.flex1,
+            styles.alignSelfStretch,
+            props.isSmallScreenWidth && styles.signInPageNarrowContentContainer,
+            props.isSmallScreenWidth ? styles.ph5 : styles.ph4,
+        ]}
+        >
             <LoginKeyboardAvoidingView
                 behavior="position"
                 contentContainerStyle={[
-                    styles.signInPageNarrowContentMargin,
+                    props.isSmallScreenWidth ? styles.signInPageNarrowContentMargin : styles.signInPageWideLeftContentMargin,
                     styles.mb3,
                     StyleUtils.getModalPaddingStyles({
                         shouldAddBottomSafeAreaPadding: true,
@@ -58,7 +70,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}
@@ -72,18 +88,21 @@ const SignInPageLayoutNarrow = props => (
                 {props.children}
             </LoginKeyboardAvoidingView>
         </View>
-        <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.defaultProps = defaultProps;
+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);
diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
deleted file mode 100755
index 4d072c7d0303..000000000000
--- a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import React from 'react';
-import {ScrollView, View} from 'react-native';
-import PropTypes from 'prop-types';
-import {withSafeAreaInsets} from 'react-native-safe-area-context';
-import SVGImage from '../../../components/SVGImage';
-import styles from '../../../styles/styles';
-import * as StyleUtils from '../../../styles/StyleUtils';
-import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo';
-import ExpensifyText from '../../../components/ExpensifyText';
-import variables from '../../../styles/variables';
-import TermsAndLicenses from '../TermsAndLicenses';
-import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import compose from '../../../libs/compose';
-import scrollViewContentContainerStyles from './signInPageStyles.js';
-import LoginKeyboardAvoidingView from './LoginKeyboardAvoidingView';
-import withKeyboardState from '../../../components/withKeyboardState';
-
-
-const propTypes = {
-    /** The children to show inside the layout */
-    children: PropTypes.node.isRequired,
-
-    /** Welcome text to show in the header of the form, changes depending
-     * on form type (set password, sign in, etc.) */
-    welcomeText: PropTypes.string.isRequired,
-
-    /* Flag to check medium screen with device */
-    isMediumScreenWidth: PropTypes.bool.isRequired,
-
-    /** Whether to show welcome text on a particular page */
-    shouldShowWelcomeText: PropTypes.bool.isRequired,
-
-    ...withLocalizePropTypes,
-};
-
-const backgroundStyle = StyleUtils.getLoginPagePromoStyle();
-
-const SignInPageLayoutWide = props => (
-    <View style={[styles.flex1, styles.signInPageInner]}>
-        <View style={[styles.flex1, styles.flexRow, styles.flexGrow1]}>
-            <ScrollView
-                keyboardShouldPersistTaps="handled"
-                showsVerticalScrollIndicator={false}
-                style={[
-                    styles.h100,
-                    styles.alignSelfCenter,
-                    styles.signInPageWideLeftContainer,
-                ]}
-                contentContainerStyle={[scrollViewContentContainerStyles, styles.ph6]}
-            >
-                <View style={[styles.flex1, styles.alignSelfStretch, styles.ph4]}>
-                    <LoginKeyboardAvoidingView
-                        behavior="position"
-                        contentContainerStyle={[
-                            styles.signInPageWideLeftContentMargin,
-                            styles.mb3,
-                            styles.getModalPaddingStyles({
-                                shouldAddBottomSafeAreaPadding: true,
-                                modalContainerStylePaddingBottom: 20,
-                                safeAreaPaddingBottom: props.insets.bottom,
-                            }),
-                        ]}
-                    >
-                        <View style={[styles.componentHeightLarge, styles.mt6, styles.mb5]}>
-                            <ExpensifyCashLogo
-                                width={variables.componentSizeLarge}
-                                height={variables.componentSizeLarge}
-                            />
-                        </View>
-                        {props.shouldShowWelcomeText && (
-                            <ExpensifyText style={[styles.mv5, styles.textLabel, styles.h3]}>
-                                {props.welcomeText}
-                            </ExpensifyText>
-                        )}
-                        {props.children}
-                    </LoginKeyboardAvoidingView>
-                </View>
-                <View style={[styles.mb5, styles.alignSelfCenter, styles.ph5]}>
-                    <TermsAndLicenses />
-                </View>
-            </ScrollView>
-            <View style={[
-                styles.flexGrow1,
-                StyleUtils.getBackgroundColorStyle(backgroundStyle.backgroundColor),
-                props.isMediumScreenWidth && styles.alignItemsCenter,
-            ]}
-            >
-                <SVGImage
-                    width="100%"
-                    height="100%"
-                    src={backgroundStyle.backgroundImageUri}
-                />
-            </View>
-        </View>
-    </View>
-);
-
-SignInPageLayoutWide.propTypes = propTypes;
-SignInPageLayoutWide.displayName = 'SignInPageLayoutWide';
-
-export default compose(
-    withLocalize,
-    withKeyboardState,
-    withSafeAreaInsets,
-)(SignInPageLayoutWide);
diff --git a/src/pages/signin/SignInPageLayout/SignInPageWideContainer.js b/src/pages/signin/SignInPageLayout/SignInPageWideContainer.js
new file mode 100755
index 000000000000..a90770a8b04c
--- /dev/null
+++ b/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);
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 813b051de259..b28a660fd836 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/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';
diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles.js/index.ios.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.ios.js
similarity index 100%
rename from src/pages/signin/SignInPageLayout/signInPageStyles.js/index.ios.js
rename to src/pages/signin/SignInPageLayout/signInPageStyles/index.ios.js
diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles.js/index.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
similarity index 100%
rename from src/pages/signin/SignInPageLayout/signInPageStyles.js/index.js
rename to src/pages/signin/SignInPageLayout/signInPageStyles/index.js

From 44ad2b093436792356e4fd1244a1f6046966970f Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Tue, 7 Dec 2021 01:32:47 +0530
Subject: [PATCH 4/5] Extra prop definition removed

---
 src/pages/signin/SignInPageLayout/SignInPageContent.js | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
index bdf27febdbd0..1e276a2e4ed2 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageContent.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -26,17 +26,10 @@ 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 SignInPageContent = props => (
     <ScrollView
         keyboardShouldPersistTaps="handled"
@@ -95,7 +88,6 @@ const SignInPageContent = props => (
 );
 
 SignInPageContent.propTypes = propTypes;
-SignInPageContent.defaultProps = defaultProps;
 SignInPageContent.displayName = 'SignInPageContent';
 
 export default compose(

From 3eec0a6352ca4912722acdca85f9e9f2e97e8ba1 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Tue, 7 Dec 2021 04:02:56 +0530
Subject: [PATCH 5/5] Cleanup

---
 .../SignInPageWideContainer.js                | 41 -------------------
 src/pages/signin/SignInPageLayout/index.js    | 27 +++++++++++-
 2 files changed, 25 insertions(+), 43 deletions(-)
 delete mode 100755 src/pages/signin/SignInPageLayout/SignInPageWideContainer.js

diff --git a/src/pages/signin/SignInPageLayout/SignInPageWideContainer.js b/src/pages/signin/SignInPageLayout/SignInPageWideContainer.js
deleted file mode 100755
index a90770a8b04c..000000000000
--- a/src/pages/signin/SignInPageLayout/SignInPageWideContainer.js
+++ /dev/null
@@ -1,41 +0,0 @@
-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);
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index b28a660fd836..e0495202839e 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -1,8 +1,11 @@
 import React from 'react';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import SignInPageContent from './SignInPageContent';
-import SignInPageWideContainer from './SignInPageWideContainer';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
+import SVGImage from '../../../components/SVGImage';
+import styles from '../../../styles/styles';
+import * as StyleUtils from '../../../styles/StyleUtils';
 
 const propTypes = {
     /** The children to show inside the layout */
@@ -18,6 +21,8 @@ const propTypes = {
     ...windowDimensionsPropTypes,
 };
 
+const backgroundStyle = StyleUtils.getLoginPagePromoStyle();
+
 const SignInPageLayout = (props) => {
     const content = (
         <SignInPageContent
@@ -32,7 +37,25 @@ const SignInPageLayout = (props) => {
         return content;
     }
 
-    return <SignInPageWideContainer>{content}</SignInPageWideContainer>;
+    return (
+        <View style={[styles.flex1, styles.signInPageInner]}>
+            <View style={[styles.flex1, styles.flexRow, styles.flexGrow1]}>
+                {content}
+                <View style={[
+                    styles.flexGrow1,
+                    StyleUtils.getBackgroundColorStyle(backgroundStyle.backgroundColor),
+                    props.isMediumScreenWidth && styles.alignItemsCenter,
+                ]}
+                >
+                    <SVGImage
+                        width="100%"
+                        height="100%"
+                        src={backgroundStyle.backgroundImageUri}
+                    />
+                </View>
+            </View>
+        </View>
+    );
 };
 
 SignInPageLayout.propTypes = propTypes;