Fix sign in page/set password page styles, refactoring

src/components/WelcomeText.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import {Text, View} from 'react-native';
+import styles from '../styles/styles';
+import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
+
+const propTypes = {
+    ...windowDimensionsPropTypes,
+};
+
+const WelcomeText = props => (
+    <View style={props.isSmallScreenWidth ? [] : [styles.mb6, styles.mt6]}>
+        <Text style={[props.isSmallScreenWidth ? styles.textLabel : styles.textP, styles.textStrong, styles.mb1]}>
+            With Expensify.cash, chat and payments are the same thing.
+        </Text>
+        <Text style={[props.isSmallScreenWidth ? styles.textLabel : styles.textP]}>
+            Money talks. And now that chat and payments are in one place, it&apos;s also easy.
+            {' '}
+            Your payments get to you as fast as you can get your point across.
+        </Text>
+    </View>
+);
+
+WelcomeText.propTypes = propTypes;
+WelcomeText.displayName = 'WelcomeText';
+
+export default withWindowDimensions(WelcomeText);

src/pages/SetPasswordPage.js

@@ -1,20 +1,24 @@
 import React, {Component} from 'react';
 import {
+    Image,
     SafeAreaView,
     Text,
     TextInput,
     View,
 } from 'react-native';
 import PropTypes from 'prop-types';
+import lodashGet from 'lodash/get';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
-import lodashGet from 'lodash/get';
 import styles from '../styles/styles';
-import ExpensifyCashLogo from '../../assets/images/expensify-cash.svg';
-import {setPassword} from '../libs/actions/Session';
+import SignInPageLayout from './signin/SignInPageLayout';
+import welcomeScreenshot from '../../assets/images/welcome-screenshot.png';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../components/withWindowDimensions';
+import WelcomeText from '../components/WelcomeText';
 import ONYXKEYS from '../ONYXKEYS';
-import variables from '../styles/variables';
+import {setPassword} from '../libs/actions/Session';
 import ButtonWithLoader from '../components/ButtonWithLoader';
+import compose from '../libs/compose';
 
 const propTypes = {
     /* Onyx Props */
@@ -42,8 +46,8 @@ const propTypes = {
             validateCode: PropTypes.string,
         }),
     }),
+    ...windowDimensionsPropTypes,
 };
-
 const defaultProps = {
     account: {},
     credentials: {},
@@ -83,17 +87,11 @@ class SetPasswordPage extends Component {
 
     render() {
         return (
-            <>
-                <SafeAreaView style={[styles.signInPage]}>
-                    <View style={[styles.signInPageInner]}>
-                        <View style={[styles.signInPageLogo]}>
-                            <ExpensifyCashLogo
-                                width={variables.componentSizeLarge}
-                                height={variables.componentSizeLarge}
-                            />
-                        </View>
+            <SafeAreaView style={[styles.signInPage]}>
+                <SignInPageLayout>
+                    <View style={[styles.loginFormContainer]}>
                         <View style={[styles.mb4]}>
-                            <Text style={[styles.formLabel]}>Enter a password</Text>
+                            <Text style={[styles.formLabel]}>Enter a password:</Text>
                             <TextInput
                                 style={[styles.textInput]}
                                 secureTextEntry
@@ -102,6 +100,7 @@ class SetPasswordPage extends Component {
                                 value={this.state.password}
                                 onChangeText={text => this.setState({password: text})}
                                 onSubmitEditing={this.submitForm}
+                                autoFocus
                             />
                         </View>
                         <ButtonWithLoader
@@ -119,17 +118,30 @@ class SetPasswordPage extends Component {
                                 {this.props.account.error}
                             </Text>
                         )}
+                        {this.props.isSmallScreenWidth && (
+                            <View style={[styles.mt5, styles.mb5]}>
+                                <Image
+                                    resizeMode="contain"
+                                    style={[styles.signinWelcomeScreenshot]}
+                                    source={welcomeScreenshot}
+                                />
+                            </View>
+                        )}
                     </View>
-                </SafeAreaView>
-            </>
+                    <WelcomeText />
+                </SignInPageLayout>
+            </SafeAreaView>
         );
     }
 }
 
 SetPasswordPage.propTypes = propTypes;
 SetPasswordPage.defaultProps = defaultProps;
 
-export default withOnyx({
-    credentials: {key: ONYXKEYS.CREDENTIALS},
-    account: {key: ONYXKEYS.ACCOUNT},
-})(SetPasswordPage);
+export default compose(
+    withOnyx({
+        credentials: {key: ONYXKEYS.CREDENTIALS},
+        account: {key: ONYXKEYS.ACCOUNT},
+    }),
+    withWindowDimensions,
+)(SetPasswordPage);

src/pages/signin/LoginForm/LoginFormNarrow.js

@@ -11,6 +11,7 @@ import ButtonWithLoader from '../../../components/ButtonWithLoader';
 import {fetchAccountDetails} from '../../../libs/actions/Session';
 import welcomeScreenshot from '../../../../assets/images/welcome-screenshot.png';
 import ONYXKEYS from '../../../ONYXKEYS';
+import WelcomeText from '../../../components/WelcomeText';
 
 const propTypes = {
     /* Onyx Props */
@@ -103,16 +104,7 @@ class LoginFormNarrow extends React.Component {
                     />
                 </View>
 
-                <View>
-                    <Text style={[styles.textLabel, styles.textStrong, styles.mb1]}>
-                        With Expensify.cash, chat and payments are the same thing.
-                    </Text>
-                    <Text style={[styles.textLabel]}>
-                        Money talks. And now that chat and payments are in one place, it&apos;s also easy.
-                        {' '}
-                        Your payments get to you as fast as you can get your point across.
-                    </Text>
-                </View>
+                <WelcomeText />
             </View>
         );
     }

src/pages/signin/LoginForm/LoginFormWide.js

@@ -7,6 +7,7 @@ import {fetchAccountDetails} from '../../../libs/actions/Session';
 import styles from '../../../styles/styles';
 import ButtonWithLoader from '../../../components/ButtonWithLoader';
 import ONYXKEYS from '../../../ONYXKEYS';
+import WelcomeText from '../../../components/WelcomeText';
 
 const propTypes = {
     /* Onyx Props */
@@ -92,19 +93,7 @@ class LoginFormWide extends React.Component {
                         </Text>
                     )}
                 </View>
-
-                <View style={[styles.mt6]}>
-                    <View style={[styles.mb6]}>
-                        <Text style={[styles.textP, styles.textStrong, styles.mb1]}>
-                            With Expensify.cash, chat and payments are the same thing.
-                        </Text>
-                        <Text style={[styles.textP]}>
-                            Money talks. And now that chat and payments are in one place, it&apos;s also easy.
-                            {' '}
-                            Your payments get to you as fast as you can get your point across.
-                        </Text>
-                    </View>
-                </View>
+                <WelcomeText />
             </>
         );
     }

src/styles/styles.js

@@ -349,6 +349,7 @@ const styles = {
         backgroundColor: themeColors.sidebar,
         padding: 20,
         minHeight: '100%',
+        flex: 1,
     },
 
     signInPageLogo: {