Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: New landing page design #3079

Merged
Merged
Show file tree
Hide file tree
Changes from 35 commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
059a4d3
feat: New landing page design
pranshuchittora May 29, 2021
7f86170
chore: PR review changes
pranshuchittora Jun 2, 2021
91a8646
feat: PR review changes
pranshuchittora Jun 6, 2021
f523511
Merge remote-tracking branch 'origin/main' into pranshuchittora/feat/…
pranshuchittora Jun 9, 2021
71ae6cb
feat: Added open in new tab
pranshuchittora Jun 11, 2021
139c0c5
Merge remote-tracking branch 'origin/main' into pranshuchittora/feat/…
pranshuchittora Jun 11, 2021
c5b6fb4
feat: Migration to text link
pranshuchittora Jun 14, 2021
ed71ce5
feat: Migrated to TextLink
pranshuchittora Jun 15, 2021
eaad43f
fix: Floating links
pranshuchittora Jun 17, 2021
ac9e2ac
fix: Removed inline styles
pranshuchittora Jun 17, 2021
3da8027
Merge branch 'main' into pranshuchittora/feat/landing-design
pranshuchittora Jun 17, 2021
006c3e2
fix: Styling changes
pranshuchittora Jun 17, 2021
a75866a
feat: PR review changes
pranshuchittora Jun 17, 2021
8304251
fix: Styling fixes
pranshuchittora Jun 17, 2021
378f819
chore: Removed unwanted files
pranshuchittora Jun 17, 2021
22c347d
fix: Minor styling changes
pranshuchittora Jun 17, 2021
c722b51
fix: Terms and licenses fix
pranshuchittora Jun 22, 2021
3428329
fix: Textlink
pranshuchittora Jun 22, 2021
f01754c
fix: Removed unused styles
pranshuchittora Jun 22, 2021
bff85e3
Merge remote-tracking branch 'origin/main' into pranshuchittora/feat/…
pranshuchittora Jun 22, 2021
2337582
fix: Linting fixes
pranshuchittora Jun 22, 2021
c879f91
fix: Minor changes to the terms with licenses
pranshuchittora Jun 23, 2021
7722159
fix: Platform patches
pranshuchittora Jun 23, 2021
00be768
fix: Removed unwanted spaces
pranshuchittora Jun 23, 2021
c02dbb3
feat: Terns with Licenses for ios
pranshuchittora Jun 24, 2021
d1a9a3f
feat: Minor file structure changes
pranshuchittora Jul 1, 2021
0098d17
fix: Minor styling changes
pranshuchittora Jul 7, 2021
4025c76
fix: Minor style name changes
pranshuchittora Jul 8, 2021
348b803
fix: Minor changes
pranshuchittora Jul 13, 2021
b5b7656
Merge remote-tracking branch 'origin/main' into pranshuchittora/feat/…
pranshuchittora Jul 13, 2021
e29925c
fix: Minor string changes
pranshuchittora Jul 13, 2021
5a66452
chore: Minor string changes
pranshuchittora Jul 13, 2021
222e83b
fix: Minor string changes
pranshuchittora Jul 13, 2021
6857b11
fix: File refs
pranshuchittora Jul 13, 2021
042cf83
fix: Minor terms styling changes
pranshuchittora Jul 13, 2021
ee03da9
fix: adhoc string changes
pranshuchittora Jul 13, 2021
2303b03
fix: Minor string changes
pranshuchittora Jul 13, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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 new Expensify! Enter your phone or email to continue.',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This language is confusing. Perhaps 'Welcome to the new Expensify! Enter your phone number or email to continue.'

@kevinksullivan does it not seem weird to you to have it say "Welcome to new Expensify!"?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree. I think the New Expensify is best as the latest mockup shows.

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: 'New Expensify is open source',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kevinksullivan is this how we want it to read? As stated elsewhere, this just seems clunky/grammatically incorrect to me.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps "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: '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',
joelbettner marked this conversation as resolved.
Show resolved Hide resolved
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