Merge pull request #2190 from Expensify/jasper-welcomeText

Add WelcomeText component
Expensify · Apr 2, 2021 · 106c52b · 106c52b
2 parents 5794592 + 8edbf79
commit 106c52b
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 23 deletions.
diff --git a/src/components/WelcomeText.js b/src/components/WelcomeText.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import {Text} from 'react-native';
+import PropTypes from 'prop-types';
+import styles from '../styles/styles';
+
+const propTypes = {
+
+    // Fontsize
+    textSize: PropTypes.oneOf(['default', 'large']),
+};
+
+const defaultProps = {
+    textSize: 'default',
+};
+
+const WelcomeText = props => (
+    <>
+        <Text style={[props.textSize === 'large' ? styles.textP : styles.textLabel, styles.textStrong, styles.mb1]}>
+            With Expensify.cash, chat and payments are the same thing.
+        </Text>
+        <Text style={[props.textSize === 'large' ? styles.textP : styles.textLabel]}>
+            Money talks. And now that chat and payments are in one place, it&apos;s also easy.
+            {' '}
+            Your payments get to you as fast as you can get your point across.
+        </Text>
+    </>
+);
+
+WelcomeText.displayName = 'WelcomeText';
+WelcomeText.propTypes = propTypes;
+WelcomeText.defaultProps = defaultProps;
+
+export default WelcomeText;
diff --git a/src/pages/signin/LoginForm/LoginFormNarrow.js b/src/pages/signin/LoginForm/LoginFormNarrow.js
@@ -11,6 +11,7 @@ import ButtonWithLoader from '../../../components/ButtonWithLoader';
 import {fetchAccountDetails} from '../../../libs/actions/Session';
 import welcomeScreenshot from '../../../../assets/images/welcome-screenshot.png';
 import ONYXKEYS from '../../../ONYXKEYS';
+import WelcomeText from '../../../components/WelcomeText';
 
 const propTypes = {
     /* Onyx Props */
@@ -102,17 +103,7 @@ class LoginFormNarrow extends React.Component {
                         source={welcomeScreenshot}
                     />
                 </View>
-
-                <View>
-                    <Text style={[styles.textLabel, styles.textStrong, styles.mb1]}>
-                        With Expensify.cash, chat and payments are the same thing.
-                    </Text>
-                    <Text style={[styles.textLabel]}>
-                        Money talks. And now that chat and payments are in one place, it&apos;s also easy.
-                        {' '}
-                        Your payments get to you as fast as you can get your point across.
-                    </Text>
-                </View>
+                <WelcomeText />
             </View>
         );
     }

diff --git a/src/pages/signin/LoginForm/LoginFormWide.js b/src/pages/signin/LoginForm/LoginFormWide.js
@@ -7,6 +7,7 @@ import {fetchAccountDetails} from '../../../libs/actions/Session';
 import styles from '../../../styles/styles';
 import ButtonWithLoader from '../../../components/ButtonWithLoader';
 import ONYXKEYS from '../../../ONYXKEYS';
+import WelcomeText from '../../../components/WelcomeText';
 
 const propTypes = {
     /* Onyx Props */
@@ -92,18 +93,8 @@ class LoginFormWide extends React.Component {
                         </Text>
                     )}
                 </View>
-
-                <View style={[styles.mt6]}>
-                    <View style={[styles.mb6]}>
-                        <Text style={[styles.textP, styles.textStrong, styles.mb1]}>
-                            With Expensify.cash, chat and payments are the same thing.
-                        </Text>
-                        <Text style={[styles.textP]}>
-                            Money talks. And now that chat and payments are in one place, it&apos;s also easy.
-                            {' '}
-                            Your payments get to you as fast as you can get your point across.
-                        </Text>
-                    </View>
+                <View style={[styles.mb6, styles.mt6]}>
+                    <WelcomeText textSize="large" />
                 </View>
             </>
         );