feat: New landing page design

src/components/TextLink.js

@@ -13,6 +13,7 @@ const propTypes = {
     children: PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.array,
+        PropTypes.object,
     ]).isRequired,
 
     /** Additional style props */

src/languages/en.js

@@ -87,7 +87,7 @@ export default {
     hello: 'Hello',
     phoneCountryCode: '1',
     welcomeText: {
-        phrase1: 'With Expensify.cash, chat and payments are the same thing.',
+        phrase1: 'Welcome to Expensify.cash! Enter your phone or email to continue.',
         phrase2: 'Money talks. And now that chat and payments are in one place, it\'s also easy.',
         phrase3: 'Your payments get to you as fast as you can get your point across.',
     },
@@ -235,14 +235,23 @@ export default {
         expensifyIsOpenSource: 'Expensify.cash is open source',
         theCode: 'the code',
         openJobs: 'open jobs',
+        heroHeading: 'Split bills\nand chat with friends.',
+        heroDescription: {
+            phrase1: 'Money talks. And now that chat and payments are in one place, it\'s also easy. Your payments get to you as fast as you can get your point across.',
+            phrase2: 'Expensify.cash is open source. View',
+            phrase3: 'the code',
+            phrase4: 'View',
+            phrase5: 'open jobs',
+        },
     },
     termsOfUse: {
         phrase1: 'By logging in, you agree to the',
         phrase2: 'terms of service',
         phrase3: 'and',
         phrase4: 'privacy policy',
-        phrase5: 'Money transmission is provided by Expensify Payments LLC (NMLS ID:2017010) pursuant to its',
-        phrase6: 'licenses',
+        phrase5: 'Money transmission is provided by Expensify Payments LLC (NMLS',
+        phrase6: 'ID:2017010) pursuant to its',
+        phrase7: 'licenses',
     },
     passwordForm: {
         pleaseFillOutAllFields: 'Please fill out all fields',

src/pages/signin/ChangeExpensifyLoginLink.js

@@ -27,7 +27,7 @@ const ChangeExpensifyLoginLink = ({credentials, translate, toLocalPhone}) => (
             onPress={restartSignin}
             underlayColor={themeColors.componentBG}
         >
-            <Text style={[styles.link]}>
+            <Text style={[styles.link, styles.mt3]}>
                 {translate('common.not')}
                 &nbsp;
                 {Str.isSMSLogin(credentials.login)

src/pages/signin/LoginForm.js

@@ -1,9 +1,5 @@
 import React from 'react';
-import {
-    Text,
-    TextInput,
-    View,
-} from 'react-native';
+import {Text, TextInput, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
@@ -74,7 +70,7 @@ class LoginForm extends React.Component {
     render() {
         return (
             <>
-                <View style={[styles.mb4]}>
+                <View style={[styles.mt3]}>
                     <Text style={[styles.formLabel]}>{this.props.translate('loginForm.enterYourPhoneOrEmail')}</Text>
                     <TextInput
                         style={[styles.textInput]}
@@ -91,10 +87,9 @@ class LoginForm extends React.Component {
                         autoFocus={canFocusInputOnScreenFocus()}
                     />
                 </View>
-                <View>
+                <View style={[styles.mt5]}>
                     <Button
                         success
-                        style={[styles.mb2]}
                         text={this.props.translate('common.continue')}
                         isLoading={this.props.account.loading}
                         onPress={this.validateAndSubmitForm}

src/pages/signin/PasswordForm.js

@@ -70,8 +70,19 @@ class PasswordForm extends React.Component {
     render() {
         return (
             <>
-                <View style={[styles.mb4]}>
-                    <Text style={[styles.formLabel]}>{this.props.translate('common.password')}</Text>
+                <View style={[styles.mv3]}>
+                    <View style={[styles.dFlex, styles.flexRow]}>
+                        <Text style={[styles.formLabel]}>{this.props.translate('common.password')}</Text>
+                        <TouchableOpacity
+                            style={[styles.ml2]}
+                            onPress={resetPassword}
+                            underlayColor={themeColors.componentBG}
+                        >
+                            <Text style={[styles.link, styles.h4]}>
+                                {this.props.translate('passwordForm.forgot')}
+                            </Text>
+                        </TouchableOpacity>
+                    </View>
                     <TextInput
                         style={[styles.textInput]}
                         secureTextEntry
@@ -83,17 +94,9 @@ class PasswordForm extends React.Component {
                         autoFocus
                     />
                 </View>
-                <TouchableOpacity
-                    style={[styles.link, styles.mb4]}
-                    onPress={resetPassword}
-                    underlayColor={themeColors.componentBG}
-                >
-                    <Text style={[styles.link]}>
-                        {this.props.translate('passwordForm.forgot')}
-                    </Text>
-                </TouchableOpacity>
+
                 {this.props.account.requiresTwoFactorAuth && (
-                    <View style={[styles.mb4]}>
+                    <View style={[styles.mv3]}>
                         <Text style={[styles.formLabel]}>{this.props.translate('passwordForm.twoFactorCode')}</Text>
                         <TextInput
                             style={[styles.textInput]}
@@ -109,7 +112,7 @@ class PasswordForm extends React.Component {
                 <View>
                     <Button
                         success
-                        style={[styles.mb2]}
+                        style={[styles.mv3]}
                         text={this.props.translate('common.signIn')}
                         isLoading={this.props.account.loading}
                         onPress={this.validateAndSubmitForm}

src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js

@@ -1,98 +1,66 @@
 import React from 'react';
-import {
-    Image,
-    ScrollView, Text, View,
-} from 'react-native';
+import {ScrollView, View} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../../../styles/styles';
 import variables from '../../../styles/variables';
 import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo';
-import welcomeScreenshot from '../../../../assets/images/welcome-screenshot.png';
+import Text from '../../../components/Text';
 import TermsAndLicenses from '../TermsAndLicenses';
-import WelcomeText from '../../../components/WelcomeText';
-import TextLink from '../../../components/TextLink';
-import CONST from '../../../CONST';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
+import compose from '../../../libs/compose';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 
 const propTypes = {
-
     /** The children to show inside the layout */
     children: PropTypes.node.isRequired,
 
-    /** Whether we should show the welcome elements */
-    shouldShowWelcomeText: PropTypes.bool,
-    shouldShowWelcomeScreenshot: PropTypes.bool,
-
+    ...windowDimensionsPropTypes,
     ...withLocalizePropTypes,
 };
 
-const defaultProps = {
-    shouldShowWelcomeText: true,
-    shouldShowWelcomeScreenshot: true,
-};
-
 const SignInPageLayoutNarrow = props => (
-    <ScrollView keyboardShouldPersistTaps="handled">
-        <View>
-            <View style={[styles.signInPageInnerNative]}>
-                <View style={[styles.signInPageLogoNative]}>
-                    <ExpensifyCashLogo width={variables.componentSizeLarge} height={variables.componentSizeLarge} />
-                </View>
-
-                <View style={[styles.mb6, styles.alignItemsCenter]}>
-                    <Text style={[styles.h1]}>
-                        {props.translate('signInPage.expensifyDotCash')}
-                    </Text>
-                </View>
-
-                <View style={[styles.signInPageFormContainer]}>
-                    {props.children}
-
-                    {props.shouldShowWelcomeScreenshot
-                        && (
-                        <View style={[styles.mt5, styles.mb5]}>
-                            <Image
-                                resizeMode="contain"
-                                style={[styles.signinWelcomeScreenshot]}
-                                source={welcomeScreenshot}
-                            />
-                        </View>
-                        )}
-
-                    {props.shouldShowWelcomeText && <WelcomeText />}
-                    <View style={[styles.flexRow, styles.flexWrap, styles.mt6]}>
-                        <Text style={[styles.textLabel]}>
-                            {`${props.translate('signInPage.expensifyIsOpenSource')}. ${
-                                props.translate('common.view')}`}
-                            {' '}
-                        </Text>
-                        <TextLink style={[styles.textLabel]} href={CONST.GITHUB_URL}>
-                            {props.translate('signInPage.theCode')}
-                        </TextLink>
-                        <Text style={[styles.textLabel]}>
-                            .
-                        </Text>
-                        <Text style={[styles.textLabel]}>
-                            {`${props.translate('common.view')}`}
-                            {' '}
-                        </Text>
-                        <TextLink style={[styles.textLabel]} href={CONST.UPWORK_URL}>
-                            {props.translate('signInPage.openJobs')}
-                        </TextLink>
-                        <Text style={[styles.textLabel]}>
-                            .
-                        </Text>
-                    </View>
+    <ScrollView
+        keyboardShouldPersistTaps="handled"
+        contentContainerStyle={[
+            styles.flexGrow1,
+            styles.pb5,
+            styles.mh5,
+            styles.signInPageNarrowContentContainer,
+            styles.alignSelfCenter,
+        ]}
+    >
+        <View style={[styles.flexGrow1]}>
+            <View
+                style={[
+                    styles.signInPageInnerNative,
+                    styles.flex1,
+                    styles.dFlex,
+                    styles.flexColumn,
+                    props.windowHeight > props.windowWidth ? styles.mt40Percentage : null,
+                ]}
+            >
+                <View style={[styles.signInPageLogoNative, styles.mb2]}>
+                    <ExpensifyCashLogo
+                        width={variables.componentSizeLarge}
+                        height={variables.componentSizeLarge}
+                    />
                 </View>
+                <Text style={[styles.mv5, styles.textLabel, styles.h3]}>
+                    {props.translate('welcomeText.phrase1')}
+                </Text>
+                {props.children}
+            </View>
+            <View style={[styles.mt3]}>
                 <TermsAndLicenses />
             </View>
         </View>
     </ScrollView>
 );
 
 SignInPageLayoutNarrow.propTypes = propTypes;
-SignInPageLayoutNarrow.defaultProps = defaultProps;
 SignInPageLayoutNarrow.displayName = 'SignInPageLayoutNarrow';
 
-
-export default withLocalize(SignInPageLayoutNarrow);
+export default compose(
+    withWindowDimensions,
+    withLocalize,
+)(SignInPageLayoutNarrow);