Simplify TermsWithLicenses and SignInPageLayout

src/pages/signin/TermsAndLicenses.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import {View} from 'react-native';
+import styles from '../../styles/styles';
+import CONST from '../../CONST';
+import Text from '../../components/Text';
+import TextLink from '../../components/TextLink';
+import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
+import LogoWordmark from '../../../assets/images/expensify-wordmark.svg';
+import LocalePicker from '../../components/LocalePicker';
+
+const TermsAndLicenses = ({translate}) => (
+    <>
+        <View
+            style={[
+                styles.dFlex,
+                styles.flexRow,
+                styles.flexWrap,
+                styles.textAlignCenter,
+                styles.alignItemsCenter,
+            ]}
+        >
+            <Text style={[styles.textAlignCenter, styles.textExtraSmallSupporting]}>
+                {translate('termsOfUse.phrase1')}
+            </Text>
+            <TextLink
+                style={[styles.textExtraSmallSupporting, styles.link]}
+                href={CONST.TERMS_URL}
+            >
+                {' '}
+                {translate('termsOfUse.phrase2')}
+                {' '}
+            </TextLink>
+            <Text style={[styles.textAlignCenter, styles.textExtraSmallSupporting]}>
+                {translate('termsOfUse.phrase3')}
+            </Text>
+            <TextLink
+                style={[styles.textExtraSmallSupporting, styles.link]}
+                href={CONST.PRIVACY_URL}
+            >
+                {' '}
+                {translate('termsOfUse.phrase4')}
+            </TextLink>
+            <Text style={[styles.textAlignCenter, styles.textExtraSmallSupporting]}>.</Text>
+            <Text style={[styles.textAlignCenter, styles.textExtraSmallSupporting]}>
+                {translate('termsOfUse.phrase5')}
+                {' '}
+            </Text>
+            <Text style={[styles.textAlignCenter, styles.textExtraSmallSupporting]}>
+                {translate('termsOfUse.phrase6')}
+            </Text>
+            <TextLink
+                style={[styles.textExtraSmallSupporting, styles.link]}
+                href={CONST.LICENSES_URL}
+            >
+                {' '}
+                {translate('termsOfUse.phrase7')}
+            </TextLink>
+            <Text style={[styles.textAlignCenter, styles.textExtraSmallSupporting]}>.</Text>
+        </View>
+        <View style={[styles.mt4, styles.alignItemsCenter, styles.mb2, styles.flexRow, styles.justifyContentBetween]}>
+            <LogoWordmark height={30} width={80} />
+            <LocalePicker size="small" />
+        </View>
+    </>
+);
+
+TermsAndLicenses.propTypes = {...withLocalizePropTypes};
+TermsAndLicenses.displayName = 'TermsAndLicenses';
+
+export default withLocalize(TermsAndLicenses);

src/styles/styles.js

@@ -113,6 +113,12 @@ const styles = {
         lineHeight: 14,
     },
 
+    textExtraSmallSupporting: {
+        color: themeColors.textSupporting,
+        fontFamily: fontFamily.GTA,
+        fontSize: variables.fontSizeExtraSmall,
+    },
+
     textLarge: {
         fontSize: variables.fontSizeLarge,
     },
@@ -730,21 +736,6 @@ const styles = {
         ...wordBreak.breakWord,
     },
 
-    loginTermsText: {
-        color: themeColors.textSupporting,
-        fontFamily: fontFamily.GTA,
-        fontSize: variables.fontSizeExtraSmall,
-    },
-
-    termsLink: {
-        color: themeColors.link,
-    },
-
-    termsLinkNative: {
-        color: themeColors.link,
-        margin: 0,
-    },
-
     // Sidebar Styles
     sidebar: {
         backgroundColor: themeColors.sidebar,