feat: PR review changes

Expensify · Jun 6, 2021 · 91a8646 · 91a8646
1 parent 7f86170
commit 91a8646
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 13 deletions.
diff --git a/assets/images/expensify-wordmark.svg b/assets/images/expensify-wordmark.svg
diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js
@@ -6,24 +6,35 @@ import variables from '../../../styles/variables';
 import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo';
 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,
 
+    ...windowDimensionsPropTypes,
     ...withLocalizePropTypes,
 };
 
 const SignInPageLayoutNarrow = props => (
-    <ScrollView keyboardShouldPersistTaps="handled" contentContainerStyle={[styles.flexGrow1, styles.p8]}>
+    <ScrollView
+        keyboardShouldPersistTaps="handled"
+        contentContainerStyle={[
+            styles.flexGrow1,
+            styles.p8,
+            styles.signInPageNarrowContentContainer,
+            styles.alignSelfCenter,
+        ]}
+    >
         <View style={[styles.flexGrow1]}>
             <View
                 style={[
                     styles.signInPageInnerNative,
                     styles.flex1,
                     styles.dFlex,
                     styles.flexColumn,
-                    styles.mt30Percentage,
+                    props.windowHeight > props.windowWidth ? styles.mt40Percentage : null,
                 ]}
             >
                 <View style={[styles.signInPageLogoNative, styles.mb2]}>
@@ -45,4 +56,7 @@ const SignInPageLayoutNarrow = props => (
 SignInPageLayoutNarrow.propTypes = propTypes;
 SignInPageLayoutNarrow.displayName = 'SignInPageLayoutNarrow';
 
-export default withLocalize(SignInPageLayoutNarrow);
+export default compose(
+    withWindowDimensions,
+    withLocalize,
+)(SignInPageLayoutNarrow);
diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
@@ -20,8 +20,8 @@ const propTypes = {
 const SignInPageLayoutWide = props => (
     <View style={[styles.signInPageInner]}>
         <View style={[styles.flex1, styles.flexRow, styles.dFlex, styles.flexGrow1]}>
-            <View style={[styles.signInPageWideLeftContainer, styles.dFlex, styles.flexColumn]}>
-                <View style={[styles.flex1, styles.dFlex, styles.flexColumn, styles.mt30Percentage, styles.ph8]}>
+            <View style={[styles.signInPageWideLeftContainer, styles.dFlex, styles.flexColumn, styles.ph6]}>
+                <View style={[styles.flex1, styles.dFlex, styles.flexColumn, styles.mt40Percentage]}>
                     <View style={[styles.signInPageLogo, styles.mt6, styles.mb5]}>
                         <ExpensifyCashLogo width={variables.componentSizeLarge} height={variables.componentSizeLarge} />
                     </View>
@@ -32,7 +32,9 @@ const SignInPageLayoutWide = props => (
                         {props.children}
                     </View>
                 </View>
-                <TermsAndLicenses />
+                <View style={[styles.mv5]}>
+                    <TermsAndLicenses />
+                </View>
             </View>
             <View style={[
                 styles.flexGrow1,

diff --git a/src/pages/signin/TermsAndLicenses/TermsWithLicenses.js b/src/pages/signin/TermsAndLicenses/TermsWithLicenses.js
@@ -4,10 +4,13 @@ import styles from '../../../styles/styles';
 import CONST from '../../../CONST';
 import openURLInNewTab from '../../../libs/openURLInNewTab';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
+import LogoWordmark from '../../../../assets/images/expensify-wordmark.svg';
 
 const TermsWithLicenses = ({translate}) => (
-    <View style={[styles.mv3, styles.alignItemsCenter]}>
-        <Text style={[styles.h1, {letterSpacing: -1}, styles.mb3]}>Expensify</Text>
+    <View style={[styles.mt3, styles.alignItemsCenter]}>
+        <View style={[styles.mb1]}>
+            <LogoWordmark height={30} width={80} />
+        </View>
         <Text style={[styles.loginTermsText, styles.textAlignCenter]}>
             {translate('termsOfUse.phrase1')}
             {' '}

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -467,10 +467,12 @@ const styles = {
         width: '100%',
     },
 
+    signInPageNarrowContentContainer: {
+        width: 400,
+    },
+
     signInPageWideLeftContainer: {
-        maxWidth: 400,
-        minWidth: 350,
-        width: '25%',
+        width: 375,
     },
 
     signInPageWideHeroContent: {

diff --git a/src/styles/utilities/spacing.js b/src/styles/utilities/spacing.js
@@ -107,8 +107,12 @@ export default {
         marginTop: 24,
     },
 
-    mt30Percentage: {
-        marginTop: '30%',
+    mt25Percentage: {
+        marginTop: '25%',
+    },
+
+    mt40Percentage: {
+        marginTop: '40%',
     },
 
     mb1: {