Skip to content

Commit

Permalink
Merge pull request #3079 from pranshuchittora/pranshuchittora/feat/la…
Browse files Browse the repository at this point in the history
…nding-design

feat: New landing page design
  • Loading branch information
Jag96 authored Jul 14, 2021
2 parents 87e9be6 + 2303b03 commit b9569af
Show file tree
Hide file tree
Showing 24 changed files with 466 additions and 266 deletions.
30 changes: 30 additions & 0 deletions assets/images/expensify-wordmark.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed assets/images/welcome-screenshot-wide.png
Binary file not shown.
Binary file modified assets/images/welcome-screenshot.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 7 additions & 7 deletions ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -438,7 +438,7 @@ PODS:
- React-Core
- RNBootSplash (3.2.0):
- React-Core
- RNCAsyncStorage (1.12.1):
- RNCAsyncStorage (1.15.5):
- React-Core
- RNCClipboard (1.5.1):
- React-Core
Expand Down Expand Up @@ -589,7 +589,7 @@ DEPENDENCIES:
- ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
- rn-fetch-blob (from `../node_modules/rn-fetch-blob`)
- RNBootSplash (from `../node_modules/react-native-bootsplash`)
- "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
- "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
- "RNCClipboard (from `../node_modules/@react-native-community/clipboard`)"
- "RNCMaskedView (from `../node_modules/@react-native-masked-view/masked-view`)"
- "RNCPicker (from `../node_modules/@react-native-picker/picker`)"
Expand Down Expand Up @@ -734,7 +734,7 @@ EXTERNAL SOURCES:
RNBootSplash:
:path: "../node_modules/react-native-bootsplash"
RNCAsyncStorage:
:path: "../node_modules/@react-native-community/async-storage"
:path: "../node_modules/@react-native-async-storage/async-storage"
RNCClipboard:
:path: "../node_modules/@react-native-community/clipboard"
RNCMaskedView:
Expand Down Expand Up @@ -792,10 +792,10 @@ SPEC CHECKSUMS:
Airship: 7609d263d3a207f112d6db066af5852b80af6819
boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
DoubleConversion: cde416483dac037923206447da6e1454df403714
DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
EXHaptics: 337c160c148baa6f0e7166249f368965906e346b
FBLazyVector: 7b423f9e248eae65987838148c36eec1dbfe0b53
FBReactNativeSpec: b15821921060872c380643b0392daa279e2f0309
FBReactNativeSpec: e564123bce1111e84dc7aa0765fb1175f0c48aa0
Firebase: c23a36d9e4cdf7877dfcba8dd0c58add66358999
FirebaseAnalytics: 3bb096873ee0d7fa4b6c70f5e9166b6da413cc7f
FirebaseCore: d3a978a3cfa3240bf7e4ba7d137fdf5b22b628ec
Expand All @@ -809,7 +809,7 @@ SPEC CHECKSUMS:
Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9
Flipper-RSocket: 127954abe8b162fcaf68d2134d34dc2bd7076154
FlipperKit: 8a20b5c5fcf9436cac58551dc049867247f64b00
glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
GoogleAppMeasurement: a6a3a066369828db64eda428cb2856dc1cdc7c4e
GoogleDataTransport: f56af7caa4ed338dc8e138a5d7c5973e66440833
GoogleUtilities: 7f2f5a07f888cdb145101d6042bc4422f57e70b3
Expand Down Expand Up @@ -857,7 +857,7 @@ SPEC CHECKSUMS:
ReactCommon: bedc99ed4dae329c4fcf128d0c31b9115e5365ca
rn-fetch-blob: f065bb7ab7fb48dd002629f8bdcb0336602d3cba
RNBootSplash: 3123ba68fe44d8be09a014e89cc8f0f55b68a521
RNCAsyncStorage: cb9a623793918c6699586281f0b51cbc38f046f9
RNCAsyncStorage: 8324611026e8dc3706f829953aa6e3899f581589
RNCClipboard: 5e299c6df8e0c98f3d7416b86ae563d3a9f768a3
RNCMaskedView: 138134c4d8a9421b4f2bf39055a79aa05c2d47b1
RNCPicker: 6780c753e9e674065db90d9c965920516402579d
Expand Down
1 change: 1 addition & 0 deletions src/components/TextLink.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const propTypes = {
children: PropTypes.oneOfType([
PropTypes.string,
PropTypes.array,
PropTypes.object,
]).isRequired,

/** Additional style props */
Expand Down
17 changes: 13 additions & 4 deletions src/languages/en.js
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export default {
hello: 'Hello',
phoneCountryCode: '1',
welcomeText: {
phrase1: 'With Expensify.cash, chat and payments are the same thing.',
phrase1: 'Welcome to the New Expensify! Enter your phone number 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.',
},
Expand Down Expand Up @@ -259,17 +259,26 @@ export default {
},
signInPage: {
expensifyDotCash: 'Expensify.cash',
expensifyIsOpenSource: 'Expensify.cash is open source',
expensifyIsOpenSource: 'The New Expensify 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: 'The New Expensify 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',
Expand Down
2 changes: 1 addition & 1 deletion src/pages/EnablePayments/OnfidoStep.js
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ class OnfidoStep extends React.Component {
&& this.props.walletOnfidoData.loading && <FullscreenLoadingIndicator />}
{!this.props.walletOnfidoData.loading && this.props.walletOnfidoData.error && (
<>
<Text style={[styles.h3, styles.mb2]}>
<Text style={[styles.h3, styles.textStrong, styles.mb2]}>
{this.props.walletOnfidoData.error}
</Text>
<Button
Expand Down
2 changes: 1 addition & 1 deletion src/pages/signin/ChangeExpensifyLoginLink.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,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)
Expand Down
10 changes: 3 additions & 7 deletions src/pages/signin/LoginForm.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
import React from 'react';
import {
TextInput,
View,
} from 'react-native';
import {TextInput, View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import PropTypes from 'prop-types';
import _ from 'underscore';
Expand Down Expand Up @@ -74,7 +71,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]}
Expand All @@ -91,10 +88,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}
Expand Down
29 changes: 16 additions & 13 deletions src/pages/signin/PasswordForm.js
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,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
Expand All @@ -84,17 +95,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]}
Expand All @@ -110,7 +113,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}
Expand Down
114 changes: 40 additions & 74 deletions src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js
Original file line number Diff line number Diff line change
@@ -1,100 +1,66 @@
import React from 'react';
import {
Image,
ScrollView,
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 TermsAndLicenses from '../TermsAndLicenses';
import WelcomeText from '../../../components/WelcomeText';
import Text from '../../../components/Text';
import TextLink from '../../../components/TextLink';
import CONST from '../../../CONST';
import TermsAndLicenses from '../TermsAndLicenses';
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);
Loading

0 comments on commit b9569af

Please sign in to comment.