-
Notifications
You must be signed in to change notification settings - Fork 2.8k
/
SignInPageLayoutWide.js
executable file
·82 lines (73 loc) · 3.14 KB
/
SignInPageLayoutWide.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import React from 'react';
import {View} from 'react-native';
import PropTypes from 'prop-types';
import _ from 'underscore';
import styles from '../../../styles/styles';
import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo';
import Text from '../../../components/Text';
import variables from '../../../styles/variables';
import TermsAndLicenses from '../TermsAndLicenses';
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
const propTypes = {
/** The children to show inside the layout */
children: PropTypes.node.isRequired,
/** Welcome text to show in the header of the form, changes depending
* on form type (set password, sign in, etc.) */
welcomeText: PropTypes.string.isRequired,
/* Flag to check medium screen with device */
isMediumScreenWidth: PropTypes.bool.isRequired,
/** Whether to show welcome text on a particular page */
shouldShowWelcomeText: PropTypes.bool.isRequired,
...withLocalizePropTypes,
};
const backgroundStyles = [styles.backgroundBlue, styles.backgroundGreen, styles.backgroundOrange, styles.backgroundPink];
const backgroundStyle = backgroundStyles[_.random(0, 3)];
const SignInPageLayoutWide = props => (
<View style={[styles.flex1, styles.signInPageInner]}>
<View style={[styles.flex1, styles.flexRow, styles.dFlex, styles.flexGrow1]}>
<View style={[styles.signInPageWideLeftContainer, styles.dFlex, styles.flexColumn, styles.ph6]}>
<View style={[
styles.flex1,
styles.dFlex,
styles.flexColumn,
styles.mt40Percentage,
styles.signInPageFormContainer,
styles.alignSelfCenter,
]}
>
<View style={[styles.flex1]}>
<View style={[styles.signInPageLogo, styles.mt6, styles.mb5]}>
<ExpensifyCashLogo
width={variables.componentSizeLarge}
height={variables.componentSizeLarge}
/>
</View>
{props.shouldShowWelcomeText && (
<Text style={[styles.mv5, styles.textLabel, styles.h3]}>
{props.welcomeText}
</Text>
)}
<View>
{props.children}
</View>
</View>
<View style={[styles.mv5]}>
<TermsAndLicenses />
</View>
</View>
</View>
<View style={[
styles.flexGrow1,
styles.dFlex,
styles.flexRow,
styles.background100,
backgroundStyle,
props.isMediumScreenWidth && styles.alignItemsCenter,
]}
/>
</View>
</View>
);
SignInPageLayoutWide.propTypes = propTypes;
SignInPageLayoutWide.displayName = 'SignInPageLayoutWide';
export default withLocalize(SignInPageLayoutWide);