-
Notifications
You must be signed in to change notification settings - Fork 2.9k
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
Changes from 35 commits
059a4d3
7f86170
91a8646
f523511
71ae6cb
139c0c5
c5b6fb4
ed71ce5
eaad43f
ac9e2ac
3da8027
006c3e2
a75866a
8304251
378f819
22c347d
c722b51
3428329
f01754c
bff85e3
2337582
c879f91
7722159
00be768
c02dbb3
d1a9a3f
0098d17
4025c76
348b803
b5b7656
e29925c
5a66452
222e83b
6857b11
042cf83
ee03da9
2303b03
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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.', | ||
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.', | ||
}, | ||
|
@@ -259,17 +259,26 @@ export default { | |
}, | ||
signInPage: { | ||
expensifyDotCash: 'Expensify.cash', | ||
expensifyIsOpenSource: 'Expensify.cash is open source', | ||
expensifyIsOpenSource: 'New Expensify is open source', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Perhaps |
||
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', | ||
|
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); |
There was a problem hiding this comment.
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!"
?There was a problem hiding this comment.
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.