From 00927cd914bee59cb8426f852bdc68e142d957b8 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Mon, 30 Jan 2023 10:14:39 -0800
Subject: [PATCH 01/45] Add skeleton for component

---
 src/pages/signin/SignInPageLayout/Footer.js | 33 +++++++++++++++++++++
 src/pages/signin/SignInPageLayout/index.js  |  6 +++-
 2 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/signin/SignInPageLayout/Footer.js

diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
new file mode 100644
index 000000000000..1ba307e6c056
--- /dev/null
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -0,0 +1,33 @@
+import {Pressable} from 'react-native';
+import React from 'react';
+import _ from 'underscore';
+import styles from '../../../styles/styles';
+import * as StyleUtils from '../../../styles/StyleUtils';
+import * as Link from '../../../libs/actions/Link';
+import SVGImage from '../../../components/SVGImage';
+
+const backgroundStyle = StyleUtils.getLoginPagePromoStyle();
+
+const Footer = () => (
+    <Pressable
+        style={[
+            styles.flex1,
+            StyleUtils.getBackgroundColorStyle(backgroundStyle.backgroundColor),
+        ]}
+        onPress={() => {
+            Link.openExternalLink(backgroundStyle.redirectUri);
+        }}
+        disabled={_.isEmpty(backgroundStyle.redirectUri)}
+    >
+        <SVGImage
+            width="100%"
+            height="100%"
+            src={backgroundStyle.backgroundImageUri}
+            resizeMode="contain"
+        />
+    </Pressable>
+);
+
+Footer.displayName = 'Footer';
+
+export default Footer;
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index c165b336bb3d..49fde2ee3229 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import SignInPageContent from './SignInPageContent';
+import Footer from './Footer';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import styles from '../../../styles/styles';
 import SignInPageGraphics from './SignInPageGraphics';
@@ -39,7 +40,10 @@ const SignInPageLayout = (props) => {
                     {props.children}
                 </SignInPageContent>
                 {!props.isSmallScreenWidth && (
-                    <SignInPageGraphics />
+                    <>
+                        <SignInPageGraphics />
+                        <Footer />
+                    </>
                 )}
             </View>
         </View>

From 27d325c20967ebb2867bcb042823e809b085fa18 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Tue, 31 Jan 2023 15:14:45 -0800
Subject: [PATCH 02/45] Temporary Block

---
 src/pages/signin/SignInPageLayout/Footer.js | 32 +++++----------------
 1 file changed, 7 insertions(+), 25 deletions(-)

diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index 1ba307e6c056..5a65c2c78a10 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -1,31 +1,13 @@
-import {Pressable} from 'react-native';
+import {View} from 'react-native';
 import React from 'react';
-import _ from 'underscore';
-import styles from '../../../styles/styles';
-import * as StyleUtils from '../../../styles/StyleUtils';
-import * as Link from '../../../libs/actions/Link';
-import SVGImage from '../../../components/SVGImage';
-
-const backgroundStyle = StyleUtils.getLoginPagePromoStyle();
+import Text from '../../../components/Text';
 
 const Footer = () => (
-    <Pressable
-        style={[
-            styles.flex1,
-            StyleUtils.getBackgroundColorStyle(backgroundStyle.backgroundColor),
-        ]}
-        onPress={() => {
-            Link.openExternalLink(backgroundStyle.redirectUri);
-        }}
-        disabled={_.isEmpty(backgroundStyle.redirectUri)}
-    >
-        <SVGImage
-            width="100%"
-            height="100%"
-            src={backgroundStyle.backgroundImageUri}
-            resizeMode="contain"
-        />
-    </Pressable>
+    <View>
+        <Text>
+            HELLO
+        </Text>
+    </View>
 );
 
 Footer.displayName = 'Footer';

From 48278e5a533ff9b36a9d8cb48dbbe31cb133bd17 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Mon, 6 Feb 2023 12:15:16 -0800
Subject: [PATCH 03/45] Add footer columns/row titles into en/es.js

---
 src/languages/en.js | 29 +++++++++++++++++++++++++++++
 src/languages/es.js | 29 +++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+)

diff --git a/src/languages/en.js b/src/languages/en.js
index 32ea9bb7ba15..f4d876d9657f 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -1154,4 +1154,33 @@ export default {
     report: {
         genericAddCommentFailureMessage: 'Unexpected error while posting the comment, please try again later',
     },
+    footer: {
+        features: 'Features',
+        expenseManagement: 'Expense Management',
+        spendManagement: 'Spend Management',
+        expenseReports: 'Expense Reports',
+        companyCreditCard: 'Company Credit Card',
+        receiptScanningApp: 'Receipt Scanning App',
+        billPay: 'Bill Pay',
+        invoicing: 'Invoicing',
+        CPACard: 'CPA Card',
+        payroll: 'Payroll',
+        travel: 'Travel',
+        resources: 'Resources',
+        expensifyApproved: 'ExpensifyApproved!',
+        pressKit: 'Press Kit',
+        support: 'Support',
+        expensifyHelp: 'ExpensifyHelp',
+        community: 'Community',
+        privacy: 'Privacy',
+        learnMore: 'Learn More',
+        aboutExpensify: 'About Expensify',
+        blog: 'Blog',
+        jobs: 'Jobs',
+        expensifyOrg: 'Expensify.org',
+        investorRelations: 'Investor Relations',
+        getStarted: 'Get Started',
+        createAaccount: 'Create a new account',
+        logIn: 'Log in',
+    },
 };
diff --git a/src/languages/es.js b/src/languages/es.js
index 6a4985f201e6..b4e2119f2a7e 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -1156,4 +1156,33 @@ export default {
     report: {
         genericAddCommentFailureMessage: 'Error inesperado al agregar el comentario, por favor inténtalo más tarde',
     },
+    footer: {
+        features: '',
+        expenseManagement: '',
+        spendManagement: '',
+        expenseReports: '',
+        companyCreditCard: '',
+        receiptScanningApp: '',
+        billPay: '',
+        invoicing: '',
+        CPACard: '',
+        payroll: '',
+        travel: '',
+        resources: '',
+        expensifyApproved: '',
+        pressKit: '',
+        support: '',
+        expensifyHelp: '',
+        community: '',
+        privacy: '',
+        learnMore: '',
+        aboutExpensify: '',
+        blog: '',
+        jobs: '',
+        expensifyOrg: '',
+        investorRelations: '',
+        getStarted: '',
+        createAaccount: '',
+        logIn: '',
+    },
 };

From c3f3b46d0099104a5f36c7429ad856f34baf79f4 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Mon, 6 Feb 2023 22:09:08 -0800
Subject: [PATCH 04/45] Add data and basic structure of footer component /
 styles

---
 src/components/Icon/Expensicons.js            |   4 +
 src/pages/signin/SignInPageLayout/Footer.js   | 172 +++++++++++++++++-
 .../SignInPageLayout/SignInPageGraphics.js    |  38 ++--
 src/pages/signin/SignInPageLayout/index.js    |  25 ++-
 src/styles/styles.js                          |  33 ++++
 5 files changed, 241 insertions(+), 31 deletions(-)

diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js
index 5b562d790ae1..44dd1b8e3cd9 100644
--- a/src/components/Icon/Expensicons.js
+++ b/src/components/Icon/Expensicons.js
@@ -98,6 +98,8 @@ import Zoom from '../../../assets/images/zoom.svg';
 import FallbackAvatar from '../../../assets/images/avatars/fallback-avatar.svg';
 import FallbackWorkspaceAvatar from '../../../assets/images/avatars/fallback-workspace-avatar.svg';
 import DragAndDrop from '../../../assets/images/drag-and-drop.svg';
+import ExpensifyFooterLogo from '../../../assets/images/expensify-footer-logo.svg';
+import ExpensifyFooterLogoVertical from '../../../assets/images/expensify-footer-logo-vertical.svg';
 
 export {
     ActiveRoomAvatar,
@@ -140,6 +142,8 @@ export {
     Exit,
     ExpensifyCard,
     ExpensifyWordmark,
+    ExpensifyFooterLogo,
+    ExpensifyFooterLogoVertical,
     Expand,
     Eye,
     EyeDisabled,
diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index 5a65c2c78a10..2d04ab784928 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -1,15 +1,175 @@
 import {View} from 'react-native';
 import React from 'react';
+import _ from 'underscore';
 import Text from '../../../components/Text';
+import styles from '../../../styles/styles';
+import Icon from '../../../components/Icon';
+import * as Expensicons from '../../../components/Icon/Expensicons';
+import TextLink from '../../../components/TextLink';
+import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
+import compose from '../../../libs/compose';
 
-const Footer = () => (
-    <View>
-        <Text>
-            HELLO
-        </Text>
+const propTypes = {
+    ...windowDimensionsPropTypes,
+    ...withLocalizePropTypes,
+};
+
+const columns = [
+    {
+        translationPath: 'footer.features',
+        rows: [
+            {
+                link: 'https://use.expensify.com/expense-management',
+                translationPath: 'footer.expenseManagement',
+            },
+            {
+                link: 'https://use.expensify.com/spend-management',
+                translationPath: 'footer.spendManagement',
+            },
+            {
+                link: 'https://use.expensify.com/expense-reports',
+                translationPath: 'footer.expenseReports',
+            },
+            {
+                link: 'https://use.expensify.com/company-credit-card',
+                translationPath: 'footer.companyCreditCard',
+            },
+            {
+                link: 'https://use.expensify.com/receipt-scanning-app',
+                translationPath: 'footer.receiptScanningApp',
+            },
+            {
+                link: 'https://use.expensify.com/bills',
+                translationPath: 'footer.billPay',
+            },
+            {
+                link: 'https://use.expensify.com/invoices',
+                translationPath: 'footer.invoicing',
+            },
+            {
+                link: 'https://use.expensify.com/cpa-card',
+                translationPath: 'footer.CPACard',
+            },
+            {
+                link: 'https://use.expensify.com/payroll',
+                translationPath: 'footer.payroll',
+            },
+            {
+                link: 'https://use.expensify.com/travel',
+                translationPath: 'footer.travel',
+            },
+        ],
+    },
+    {
+        translationPath: 'footer.resources',
+        rows: [
+            {
+                link: 'https://use.expensify.com/accountants',
+                translationPath: 'footer.expensifyApproved',
+            },
+            {
+                link: 'https://we.are.expensify.com/press-kit',
+                translationPath: 'footer.pressKit',
+            },
+            {
+                link: 'https://use.expensify.com/support',
+                translationPath: 'footer.support',
+            },
+            {
+                link: 'https://help.expensify.com/',
+                translationPath: 'footer.expensifyHelp',
+            },
+            {
+                link: 'https://community.expensify.com/',
+                translationPath: 'footer.community',
+            },
+            {
+                link: 'https://use.expensify.com/privacy',
+                translationPath: 'footer.privacy',
+            },
+        ],
+    },
+    {
+        translationPath: 'footer.learnMore',
+        rows: [
+            {
+                link: 'https://we.are.expensify.com/',
+                translationPath: 'footer.aboutExpensify',
+            },
+            {
+                link: 'https://blog.expensify.com/',
+                translationPath: 'footer.blog',
+            },
+            {
+                link: 'https://we.are.expensify.com/apply',
+                translationPath: 'footer.jobs',
+            },
+            {
+                link: 'https://www.expensify.org/',
+                translationPath: 'footer.expensifyOrg',
+            },
+            {
+                link: 'https://ir.expensify.com/',
+                translationPath: 'footer.investorRelations',
+            },
+        ],
+    },
+    {
+        translationPath: 'footer.getStarted',
+        rows: [
+            {
+                link: 'https://www.expensify.com/',
+                translationPath: 'footer.createAaccount',
+            },
+            {
+                link: 'https://www.expensify.com/',
+                translationPath: 'footer.logIn',
+            },
+        ],
+    },
+];
+
+const Footer = props => (
+    <View style={styles.footerContainer}>
+        <View style={[styles.footerColumns, props.isSmallScreenWidth ? styles.flexColumn : styles.flexRow]}>
+            { /** Columns * */ }
+            {_.map(columns, (column, i) => (
+                <View key={column.translationPath + i} style={styles.footerColumn}>
+                    <Text style={styles.footerTitle}>
+                        {props.translate(column.translationPath)}
+                        {i}
+                    </Text>
+                    <View style={[styles.footerRow]}>
+                        { /** Rows * */ }
+                        {_.map(column.rows, (row, j) => (
+                            <TextLink
+                                style={styles.ml1}
+                                href={row.link}
+                                key={row.translationPath + j}
+                            >
+                                {props.translate(row.translationPath)}
+                            </TextLink>
+                        ))}
+                    </View>
+                </View>
+            ))}
+        </View>
+        { /** Expensify Wordmark * */ }
+        <View>
+            <Icon
+                width={500}
+                height={500}
+                src={props.isSmallScreenWidth ? Expensicons.ExpensifyFooterLogoVertical : Expensicons.ExpensifyFooterLogo}
+            />
+        </View>
     </View>
 );
 
+Footer.propTypes = propTypes;
 Footer.displayName = 'Footer';
 
-export default Footer;
+export default compose(
+    withLocalize,
+    withWindowDimensions,
+)(Footer);
diff --git a/src/pages/signin/SignInPageLayout/SignInPageGraphics.js b/src/pages/signin/SignInPageLayout/SignInPageGraphics.js
index c735bc9fd283..dec212467163 100644
--- a/src/pages/signin/SignInPageLayout/SignInPageGraphics.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageGraphics.js
@@ -5,27 +5,31 @@ import styles from '../../../styles/styles';
 import * as StyleUtils from '../../../styles/StyleUtils';
 import * as Link from '../../../libs/actions/Link';
 import SVGImage from '../../../components/SVGImage';
+import Footer from './Footer';
 
 const backgroundStyle = StyleUtils.getLoginPagePromoStyle();
 
 const SignInPageGraphics = () => (
-    <Pressable
-        style={[
-            styles.flex1,
-            StyleUtils.getBackgroundColorStyle(backgroundStyle.backgroundColor),
-        ]}
-        onPress={() => {
-            Link.openExternalLink(backgroundStyle.redirectUri);
-        }}
-        disabled={_.isEmpty(backgroundStyle.redirectUri)}
-    >
-        <SVGImage
-            width="100%"
-            height="100%"
-            src={backgroundStyle.backgroundImageUri}
-            resizeMode="contain"
-        />
-    </Pressable>
+    <>
+        <Pressable
+            style={[
+                styles.flex1,
+                StyleUtils.getBackgroundColorStyle(backgroundStyle.backgroundColor),
+            ]}
+            onPress={() => {
+                Link.openExternalLink(backgroundStyle.redirectUri);
+            }}
+            disabled={_.isEmpty(backgroundStyle.redirectUri)}
+        >
+            <SVGImage
+                width="100%"
+                height="100%"
+                src={backgroundStyle.backgroundImageUri}
+                resizeMode="contain"
+            />
+        </Pressable>
+        <Footer />
+    </>
 );
 
 SignInPageGraphics.displayName = 'SignInPageGraphics';
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 49fde2ee3229..ef3c633af2ec 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {View} from 'react-native';
+import {View, ScrollView} from 'react-native';
 import PropTypes from 'prop-types';
 import SignInPageContent from './SignInPageContent';
 import Footer from './Footer';
@@ -27,11 +27,14 @@ const SignInPageLayout = (props) => {
 
     if (props.isSmallScreenWidth) {
         containerStyles = [styles.flex1];
-        contentContainerStyles = [styles.flex1];
+        contentContainerStyles = [styles.flex1, styles.flexColumn];
     }
 
     return (
-        <View style={containerStyles}>
+        <ScrollView
+            style={containerStyles}
+            contentHeight="100%"
+        >
             <View style={contentContainerStyles}>
                 <SignInPageContent
                     welcomeText={props.welcomeText}
@@ -39,14 +42,20 @@ const SignInPageLayout = (props) => {
                 >
                     {props.children}
                 </SignInPageContent>
-                {!props.isSmallScreenWidth && (
+                {!props.isSmallScreenWidth ? (
                     <>
-                        <SignInPageGraphics />
-                        <Footer />
+                        <ScrollView
+                            contentHeight="100%"
+                        >
+                            <SignInPageGraphics />
+                        </ScrollView>
                     </>
-                )}
+                )
+                    : (
+                        <Footer />
+                    )}
             </View>
-        </View>
+        </ScrollView>
     );
 };
 
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 2b2a3498d510..8f64bbc634ff 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2878,6 +2878,39 @@ const styles = {
         paddingTop: 80,
         paddingBottom: 45,
     },
+
+    // homepageContainer: {
+    //     height: '100vh',
+    //     maxHeight: 900,
+    //     minHeight: 400,
+    //     position: 'relative',
+    //     width: '100%',
+    // },
+
+    footerContainer: {
+        backgroundColor: 'ivory',
+        fontSize: variables.fontSizeNormal,
+        flex: 1,
+        minHeight: '100vh',
+    },
+
+    footerColumns: {
+
+    },
+
+    footerColumn: {
+        marginBottom: 40,
+    },
+
+    footerTitle: {
+        fontSize: variables.fontSizeMedium,
+        color: themeColors.heroCard,
+    },
+
+    footerRow: {
+
+    },
+
 };
 
 export default styles;

From 1b5c2b3afb03d8483bf6496afb266e8be7b92d3e Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Tue, 7 Feb 2023 09:42:25 -0800
Subject: [PATCH 05/45] Add flex container to footer

---
 src/styles/styles.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index 8f64bbc634ff..99ff45a747d1 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2892,6 +2892,7 @@ const styles = {
         fontSize: variables.fontSizeNormal,
         flex: 1,
         minHeight: '100vh',
+        display: flex,
     },
 
     footerColumns: {

From c437e27e92e411b882e90e8ade3d9b5f240a4e9d Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Tue, 7 Feb 2023 09:43:08 -0800
Subject: [PATCH 06/45] Add SEO wordmark SVGsk

---
 .../images/expensify-footer-logo-vertical.svg | 30 +++++++++++++++++++
 assets/images/expensify-footer-logo.svg       | 30 +++++++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 assets/images/expensify-footer-logo-vertical.svg
 create mode 100644 assets/images/expensify-footer-logo.svg

diff --git a/assets/images/expensify-footer-logo-vertical.svg b/assets/images/expensify-footer-logo-vertical.svg
new file mode 100644
index 000000000000..58dc05ad2944
--- /dev/null
+++ b/assets/images/expensify-footer-logo-vertical.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 176 980" style="enable-background:new 0 0 176 980;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#03D47C;}
+</style>
+<g>
+	<path class="st0" d="M40.6,212.5c0-12-9-20.7-20.3-20.7c-11.2,0-20,8.5-20,20.7c0,12,8.8,20.5,20,20.5S40.6,224.4,40.6,212.5z"/>
+	<path class="st0" d="M151.3,290.8c0,13.5-4.9,19.6-16,21.3v38.1c21.6-1.6,35.2-13.2,40.7-33.6v-49.9c-5.2-19.7-17.5-30.7-37-30.7
+		c-21.2,0-30.8,14.3-38.2,47l0,0l-2.2,9.8c-2.2,10.3-6.7,13.9-11.4,13.9c-6.7,0-11-5.6-11-14.7c0-11.5,3.7-17.6,14.8-17.6v-33.7
+		c-25.4,0.8-40.4,15.6-40.4,53c0,32.3,12,51.6,38.9,51.6c21.2,0,30.8-14.3,38.2-47l2.2-9.8c2.2-10.3,7-13.9,11.7-13.9
+		C148.3,274.6,151.3,280.5,151.3,290.8z"/>
+	<path class="st0" d="M176,173v-39H91v-22l81.8-29.3l3.2,1.2V45.3L55.4,0v39.8l0,0l73.7,22L55.4,83.2v50.6h-3.8
+		c-9.9,0-19.7-7.3-19.7-18.8v-5.6H0v8C0.8,151,24.3,173,53.9,173h1.5v14.6H91V173H176z"/>
+	<rect x="55.4" y="192.6" class="st0" width="120.5" height="39"/>
+	<polygon class="st0" points="176,868.2 176,820.4 143.5,801.3 176,782.4 176,733.2 113.6,776 55.2,735.8 55.2,783.7 84.3,799.7 
+		55.2,816.4 55.2,865.6 113.6,825.4 	"/>
+	<path class="st0" d="M108.8,431.8c-16.1,0-23.5-8.3-23.5-19.1c0-11.5,4.9-18.3,23.2-18.3H176v-39.1h-70.4
+		c-38.1,0-53.3,15.4-53.3,45.7c0,13.5,5.9,25.4,17.1,33.2H55.2v36.7H176v-39.1L108.8,431.8L108.8,431.8z"/>
+	<polygon class="st0" points="143.9,871.3 143.9,940 114.2,940 114.2,884.7 81.3,884.7 81.3,940 53.1,940 53.1,871.3 21,871.3 
+		21,980 176,980 176,871.3 	"/>
+	<path class="st0" d="M176,691.2h-9.1c3.9-3.7,7-8.5,9.1-14v-34.6c-7.6-22.1-29.5-36.3-60.4-36.3c-38.6,0-63.3,21-63.3,54l0,0
+		c0,13.2,5.4,24.7,15.7,33.2H55.2v36.7H176V691.2z M84.3,669c0-14.7,11.3-23.5,31.3-23.5s31.3,8.8,31.3,23.5s-11.5,23.5-31.3,23.5
+		S84.3,683.7,84.3,669z"/>
+	<path class="st0" d="M176,559.2v-43.6c-4.8-16.7-16.4-32.3-41.1-38.6v39.6c6.6,1.7,13.4,6.9,13.5,20.8c0,12-6.9,21-24.4,23.2v-83.4
+		h-5.1c-37.7,0-66.5,21-66.5,61.9c0,28.9,15.7,62.1,63.3,62.1C146.5,601.2,168.4,585.3,176,559.2z M81.1,539.1
+		c0-11.3,6.4-18.8,20.3-20.1v40.8C86,557,81.1,548.4,81.1,539.1z"/>
+</g>
+</svg>
diff --git a/assets/images/expensify-footer-logo.svg b/assets/images/expensify-footer-logo.svg
new file mode 100644
index 000000000000..e664651b84fd
--- /dev/null
+++ b/assets/images/expensify-footer-logo.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 980 176" style="enable-background:new 0 0 980 176;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#03D47C;}
+</style>
+<g>
+	<path class="st0" d="M767.5,40.6c12,0,20.7-9,20.7-20.3c0-11.2-8.5-20-20.7-20c-12,0-20.5,8.8-20.5,20S755.6,40.6,767.5,40.6z"/>
+	<path class="st0" d="M689.2,151.3c-13.5,0-19.6-4.9-21.3-16h-38.1c1.6,21.6,13.2,35.2,33.6,40.7h49.9c19.7-5.2,30.7-17.5,30.7-37
+		c0-21.2-14.3-30.8-47-38.2l0,0l-9.8-2.2c-10.3-2.2-13.9-6.7-13.9-11.4c0-6.7,5.6-11,14.7-11c11.5,0,17.6,3.7,17.6,14.8h33.7
+		c-0.8-25.4-15.6-40.4-53-40.4c-32.3,0-51.6,12-51.6,38.9c0,21.2,14.3,30.8,47,38.2l9.8,2.2c10.3,2.2,13.9,7,13.9,11.7
+		C705.4,148.3,699.5,151.3,689.2,151.3z"/>
+	<path class="st0" d="M807,176h39V91h22l29.3,81.8l-1.2,3.2h38.6L980,55.4h-39.8l0,0l-22,73.7l-21.5-73.7h-50.6v-3.8
+		c0-9.9,7.3-19.7,18.8-19.7h5.6V0h-8C829,0.8,807,24.3,807,53.9v1.5h-14.6V91H807V176z"/>
+	<rect x="748.4" y="55.4" class="st0" width="39" height="120.5"/>
+	<polygon class="st0" points="111.8,176 159.6,176 178.7,143.5 197.6,176 246.8,176 204,113.6 244.2,55.2 196.3,55.2 180.3,84.3 
+		163.6,55.2 114.4,55.2 154.6,113.6 	"/>
+	<path class="st0" d="M548.2,108.8c0-16.1,8.3-23.5,19.1-23.5c11.5,0,18.3,4.9,18.3,23.2V176h39.1v-70.4c0-38.1-15.4-53.3-45.7-53.3
+		c-13.5,0-25.4,5.9-33.2,17.1V55.2h-36.7V176h39.1L548.2,108.8L548.2,108.8z"/>
+	<polygon class="st0" points="108.7,143.9 40,143.9 40,114.2 95.3,114.2 95.3,81.3 40,81.3 40,53.1 108.7,53.1 108.7,21 0,21 0,176 
+		108.7,176 	"/>
+	<path class="st0" d="M288.8,176v-9.1c3.7,3.9,8.5,7,14,9.1h34.6c22.1-7.6,36.3-29.5,36.3-60.4c0-38.6-21-63.3-54-63.3l0,0
+		c-13.2,0-24.7,5.4-33.2,15.7V55.2h-36.7V176H288.8z M311,84.3c14.7,0,23.5,11.3,23.5,31.3s-8.8,31.3-23.5,31.3
+		s-23.5-11.5-23.5-31.3S296.3,84.3,311,84.3z"/>
+	<path class="st0" d="M420.8,176h43.6c16.7-4.8,32.3-16.4,38.6-41.1h-39.6c-1.7,6.6-6.9,13.4-20.8,13.5c-12,0-21-6.9-23.2-24.4h83.4
+		v-5.1c0-37.7-21-66.5-61.9-66.5c-28.9,0-62.1,15.7-62.1,63.3C378.8,146.5,394.7,168.4,420.8,176z M440.9,81.1
+		c11.3,0,18.8,6.4,20.1,20.3h-40.8C423,86,431.6,81.1,440.9,81.1z"/>
+</g>
+</svg>

From 112e5b1df4fdb188aaca467a8250258ab72fe689 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Tue, 7 Feb 2023 11:12:54 -0800
Subject: [PATCH 07/45] Initial styling

---
 src/pages/signin/SignInPageLayout/Footer.js   | 10 +++----
 .../SignInPageLayout/SignInPageGraphics.js    |  3 +-
 src/pages/signin/SignInPageLayout/index.js    | 30 +++++++++----------
 src/styles/styles.js                          | 10 +++++--
 4 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index 2d04ab784928..a65f77c02efb 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -140,11 +140,11 @@ const Footer = props => (
                         {props.translate(column.translationPath)}
                         {i}
                     </Text>
-                    <View style={[styles.footerRow]}>
+                    <View style={[styles.footerRow, {margin: '0px 0px 8px'}]}>
                         { /** Rows * */ }
                         {_.map(column.rows, (row, j) => (
                             <TextLink
-                                style={styles.ml1}
+                                style={[styles.ml1, {display: 'block', padding: '4px 0px'}]}
                                 href={row.link}
                                 key={row.translationPath + j}
                             >
@@ -156,10 +156,10 @@ const Footer = props => (
             ))}
         </View>
         { /** Expensify Wordmark * */ }
-        <View>
+        <View style={props.isSmallScreenWidth ? {} : [{margin: '0 auto 16px'}, {display: 'block'}]}>
             <Icon
-                width={500}
-                height={500}
+                width={props.isSmallScreenWidth ? 100 : 500}
+                height={props.isSmallScreenWidth ? 500 : 100}
                 src={props.isSmallScreenWidth ? Expensicons.ExpensifyFooterLogoVertical : Expensicons.ExpensifyFooterLogo}
             />
         </View>
diff --git a/src/pages/signin/SignInPageLayout/SignInPageGraphics.js b/src/pages/signin/SignInPageLayout/SignInPageGraphics.js
index dec212467163..d71f162f272c 100644
--- a/src/pages/signin/SignInPageLayout/SignInPageGraphics.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageGraphics.js
@@ -5,7 +5,6 @@ import styles from '../../../styles/styles';
 import * as StyleUtils from '../../../styles/StyleUtils';
 import * as Link from '../../../libs/actions/Link';
 import SVGImage from '../../../components/SVGImage';
-import Footer from './Footer';
 
 const backgroundStyle = StyleUtils.getLoginPagePromoStyle();
 
@@ -14,6 +13,7 @@ const SignInPageGraphics = () => (
         <Pressable
             style={[
                 styles.flex1,
+                {minHeight: '100%', minWidth: '100%'},
                 StyleUtils.getBackgroundColorStyle(backgroundStyle.backgroundColor),
             ]}
             onPress={() => {
@@ -28,7 +28,6 @@ const SignInPageGraphics = () => (
                 resizeMode="contain"
             />
         </Pressable>
-        <Footer />
     </>
 );
 
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index ef3c633af2ec..d2ab606ceef6 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -31,10 +31,7 @@ const SignInPageLayout = (props) => {
     }
 
     return (
-        <ScrollView
-            style={containerStyles}
-            contentHeight="100%"
-        >
+        <View style={containerStyles}>
             <View style={contentContainerStyles}>
                 <SignInPageContent
                     welcomeText={props.welcomeText}
@@ -42,20 +39,21 @@ const SignInPageLayout = (props) => {
                 >
                     {props.children}
                 </SignInPageContent>
-                {!props.isSmallScreenWidth ? (
-                    <>
-                        <ScrollView
-                            contentHeight="100%"
-                        >
+                <ScrollView
+                    contentContainerStyle={{height: '100%'}}
+                >
+                    {!props.isSmallScreenWidth ? (
+                        <>
                             <SignInPageGraphics />
-                        </ScrollView>
-                    </>
-                )
-                    : (
-                        <Footer />
-                    )}
+                            <Footer />
+                        </>
+                    )
+                        : (
+                            <Footer />
+                        )}
+                </ScrollView>
             </View>
-        </ScrollView>
+        </View>
     );
 };
 
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 99ff45a747d1..8ba57536da25 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2891,12 +2891,18 @@ const styles = {
         backgroundColor: 'ivory',
         fontSize: variables.fontSizeNormal,
         flex: 1,
-        minHeight: '100vh',
+        minHeight: 400,
+        maxHeight: 900,
         display: flex,
+        height: '100vh',
+        position: 'relative',
+        width: '100%',
     },
 
     footerColumns: {
-
+        margin: '0 auto',
+        maxWidth: '1000px',
+        padding: '64px $mediumSpacing 0',
     },
 
     footerColumn: {

From dcd56e4df96a17b8c2de1b93557e7e953a40f3eb Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Wed, 8 Feb 2023 14:29:12 -0800
Subject: [PATCH 08/45] Add footer scrolling (below fold) on small / large
 screen

---
 ios/Podfile.lock                              | 24 ++++-----
 src/pages/signin/SignInPageLayout/Footer.js   | 17 ++++---
 .../SignInPageLayout/SignInPageContent.js     |  3 +-
 .../SignInPageLayout/SignInPageGraphics.js    |  6 +--
 src/pages/signin/SignInPageLayout/index.js    | 51 +++++++++++--------
 src/styles/styles.js                          | 15 ++----
 src/styles/themes/default.js                  |  2 +
 7 files changed, 63 insertions(+), 55 deletions(-)

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index fbccc4067560..5021d9d8509b 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -177,29 +177,29 @@ PODS:
     - GoogleUtilities/Network (~> 7.4)
     - "GoogleUtilities/NSData+zlib (~> 7.4)"
     - nanopb (~> 2.30908.0)
-  - GoogleDataTransport (9.2.0):
+  - GoogleDataTransport (9.2.1):
     - GoogleUtilities/Environment (~> 7.7)
     - nanopb (< 2.30910.0, >= 2.30908.0)
     - PromisesObjC (< 3.0, >= 1.2)
-  - GoogleUtilities/AppDelegateSwizzler (7.10.0):
+  - GoogleUtilities/AppDelegateSwizzler (7.11.0):
     - GoogleUtilities/Environment
     - GoogleUtilities/Logger
     - GoogleUtilities/Network
-  - GoogleUtilities/Environment (7.10.0):
+  - GoogleUtilities/Environment (7.11.0):
     - PromisesObjC (< 3.0, >= 1.2)
-  - GoogleUtilities/ISASwizzler (7.10.0)
-  - GoogleUtilities/Logger (7.10.0):
+  - GoogleUtilities/ISASwizzler (7.11.0)
+  - GoogleUtilities/Logger (7.11.0):
     - GoogleUtilities/Environment
-  - GoogleUtilities/MethodSwizzler (7.10.0):
+  - GoogleUtilities/MethodSwizzler (7.11.0):
     - GoogleUtilities/Logger
-  - GoogleUtilities/Network (7.10.0):
+  - GoogleUtilities/Network (7.11.0):
     - GoogleUtilities/Logger
     - "GoogleUtilities/NSData+zlib"
     - GoogleUtilities/Reachability
-  - "GoogleUtilities/NSData+zlib (7.10.0)"
-  - GoogleUtilities/Reachability (7.10.0):
+  - "GoogleUtilities/NSData+zlib (7.11.0)"
+  - GoogleUtilities/Reachability (7.11.0):
     - GoogleUtilities/Logger
-  - GoogleUtilities/UserDefaults (7.10.0):
+  - GoogleUtilities/UserDefaults (7.11.0):
     - GoogleUtilities/Logger
   - hermes-engine (0.70.4)
   - libevent (2.1.12)
@@ -956,8 +956,8 @@ SPEC CHECKSUMS:
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
   glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
   GoogleAppMeasurement: 5ba1164e3c844ba84272555e916d0a6d3d977e91
-  GoogleDataTransport: 1c8145da7117bd68bbbed00cf304edb6a24de00f
-  GoogleUtilities: bad72cb363809015b1f7f19beb1f1cd23c589f95
+  GoogleDataTransport: ea169759df570f4e37bdee1623ec32a7e64e67c4
+  GoogleUtilities: c2bdc4cf2ce786c4d2e6b3bcfd599a25ca78f06f
   hermes-engine: 3623325e0d0676a45fbc544d72c57dd79fce7446
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef
diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index a65f77c02efb..808c8c805aa1 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -3,7 +3,6 @@ import React from 'react';
 import _ from 'underscore';
 import Text from '../../../components/Text';
 import styles from '../../../styles/styles';
-import Icon from '../../../components/Icon';
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import TextLink from '../../../components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
@@ -140,11 +139,11 @@ const Footer = props => (
                         {props.translate(column.translationPath)}
                         {i}
                     </Text>
-                    <View style={[styles.footerRow, {margin: '0px 0px 8px'}]}>
+                    <View style={[styles.footerRow]}>
                         { /** Rows * */ }
                         {_.map(column.rows, (row, j) => (
                             <TextLink
-                                style={[styles.ml1, {display: 'block', padding: '4px 0px'}]}
+                                style={[styles.ml1]}
                                 href={row.link}
                                 key={row.translationPath + j}
                             >
@@ -156,12 +155,18 @@ const Footer = props => (
             ))}
         </View>
         { /** Expensify Wordmark * */ }
-        <View style={props.isSmallScreenWidth ? {} : [{margin: '0 auto 16px'}, {display: 'block'}]}>
-            <Icon
+        <View style={props.isSmallScreenWidth ? {} : []}>
+            {!props.isSmallScreenWidth ? (
+                <Expensicons.ExpensifyFooterLogo height={100} width={500} />
+            )
+                : (
+                    <Expensicons.ExpensifyFooterLogoVertical height={500} width={100} />
+                )}
+            {/* <Icon
                 width={props.isSmallScreenWidth ? 100 : 500}
                 height={props.isSmallScreenWidth ? 500 : 100}
                 src={props.isSmallScreenWidth ? Expensicons.ExpensifyFooterLogoVertical : Expensicons.ExpensifyFooterLogo}
-            />
+            /> */}
         </View>
     </View>
 );
diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
index 2bfc28fc3046..9dc7212e2d8e 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageContent.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -13,6 +13,7 @@ import compose from '../../../libs/compose';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView';
 import TouchableDismissKeyboard from '../../../components/TouchableDismissKeyboard';
+import * as StyleUtils from '../../../styles/StyleUtils';
 
 const propTypes = {
     /** The children to show inside the layout */
@@ -33,7 +34,7 @@ const SignInPageContent = props => (
     <TouchableDismissKeyboard>
         <View
             style={[
-                styles.flex1,
+                StyleUtils.getHeight(props.windowHeight),
                 styles.signInPageLeftContainer,
                 !props.isSmallScreenWidth && styles.signInPageLeftContainerWide,
             ]}
diff --git a/src/pages/signin/SignInPageLayout/SignInPageGraphics.js b/src/pages/signin/SignInPageLayout/SignInPageGraphics.js
index d71f162f272c..a51961fa2b12 100644
--- a/src/pages/signin/SignInPageLayout/SignInPageGraphics.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageGraphics.js
@@ -1,7 +1,8 @@
 import {Pressable} from 'react-native';
 import React from 'react';
 import _ from 'underscore';
-import styles from '../../../styles/styles';
+
+// import styles from '../../../styles/styles';
 import * as StyleUtils from '../../../styles/StyleUtils';
 import * as Link from '../../../libs/actions/Link';
 import SVGImage from '../../../components/SVGImage';
@@ -12,8 +13,7 @@ const SignInPageGraphics = () => (
     <>
         <Pressable
             style={[
-                styles.flex1,
-                {minHeight: '100%', minWidth: '100%'},
+                StyleUtils.getHeight('100%'),
                 StyleUtils.getBackgroundColorStyle(backgroundStyle.backgroundColor),
             ]}
             onPress={() => {
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index d2ab606ceef6..e593135bdd98 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -6,6 +6,7 @@ import Footer from './Footer';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import styles from '../../../styles/styles';
 import SignInPageGraphics from './SignInPageGraphics';
+import * as StyleUtils from '../../../styles/StyleUtils';
 
 const propTypes = {
     /** The children to show inside the layout */
@@ -32,27 +33,35 @@ const SignInPageLayout = (props) => {
 
     return (
         <View style={containerStyles}>
-            <View style={contentContainerStyles}>
-                <SignInPageContent
-                    welcomeText={props.welcomeText}
-                    shouldShowWelcomeText={props.shouldShowWelcomeText}
-                >
-                    {props.children}
-                </SignInPageContent>
-                <ScrollView
-                    contentContainerStyle={{height: '100%'}}
-                >
-                    {!props.isSmallScreenWidth ? (
-                        <>
-                            <SignInPageGraphics />
-                            <Footer />
-                        </>
-                    )
-                        : (
-                            <Footer />
-                        )}
-                </ScrollView>
-            </View>
+            {!props.isSmallScreenWidth ? (
+                <View style={contentContainerStyles}>
+                    <SignInPageContent
+                        welcomeText={props.welcomeText}
+                        shouldShowWelcomeText={props.shouldShowWelcomeText}
+                    >
+                        {props.children}
+                    </SignInPageContent>
+                    <ScrollView
+                        contentContainerStyle={containerStyles}
+                    >
+                        <SignInPageGraphics />
+                        <Footer />
+                    </ScrollView>
+                </View>
+            )
+                : (
+                    <ScrollView
+                        contentContainerStyle={[StyleUtils.getHeight(props.windowHeight)]}
+                    >
+                        <SignInPageContent
+                            welcomeText={props.welcomeText}
+                            shouldShowWelcomeText={props.shouldShowWelcomeText}
+                        >
+                            {props.children}
+                        </SignInPageContent>
+                        <Footer />
+                    </ScrollView>
+                )}
         </View>
     );
 };
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 8ba57536da25..1c8a0c076706 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2888,21 +2888,12 @@ const styles = {
     // },
 
     footerContainer: {
-        backgroundColor: 'ivory',
+        backgroundColor: themeColors.ivory,
         fontSize: variables.fontSizeNormal,
-        flex: 1,
-        minHeight: 400,
-        maxHeight: 900,
-        display: flex,
-        height: '100vh',
-        position: 'relative',
-        width: '100%',
     },
 
     footerColumns: {
-        margin: '0 auto',
-        maxWidth: '1000px',
-        padding: '64px $mediumSpacing 0',
+        display: 'flex',
     },
 
     footerColumn: {
@@ -2910,7 +2901,7 @@ const styles = {
     },
 
     footerTitle: {
-        fontSize: variables.fontSizeMedium,
+        fontSize: variables.fontSizeLarge,
         color: themeColors.heroCard,
     },
 
diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js
index 823f58c598ce..48b3c15cb2e5 100644
--- a/src/styles/themes/default.js
+++ b/src/styles/themes/default.js
@@ -60,6 +60,7 @@ const darkTheme = {
     checkBox: colors.green,
     pickerOptionsTextColor: colors.midnight,
     imageCropBackgroundColor: colors.greenIcons,
+    ivory: colors.floralwhite,
 };
 
 const oldTheme = {
@@ -119,6 +120,7 @@ const oldTheme = {
     inverse: colors.dark,
     textLight: colors.white,
     textDark: colors.dark,
+    ivory: colors.floralwhite,
 };
 
 export default darkTheme;

From 225a0932218a9a4c334aa910352c09ee6f242cbd Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Wed, 8 Feb 2023 17:00:52 -0800
Subject: [PATCH 09/45] Add colors

---
 src/pages/signin/SignInPageLayout/Footer.js | 12 ++++++------
 src/styles/colors.js                        |  1 +
 src/styles/styles.js                        | 16 +++++++++++++---
 src/styles/themes/default.js                |  1 +
 4 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index 808c8c805aa1..8524209602c4 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -130,12 +130,12 @@ const columns = [
 ];
 
 const Footer = props => (
-    <View style={styles.footerContainer}>
-        <View style={[styles.footerColumns, props.isSmallScreenWidth ? styles.flexColumn : styles.flexRow]}>
+    <View style={[props.isSmallScreenWidth ? [styles.footerContainer, styles.flexRow] : [styles.footerContainer, styles.flexColumn]]}>
+        <View style={[styles.flex1, styles.footerColumns, props.isSmallScreenWidth ? styles.flexColumn : styles.flexRow]}>
             { /** Columns * */ }
             {_.map(columns, (column, i) => (
-                <View key={column.translationPath + i} style={styles.footerColumn}>
-                    <Text style={styles.footerTitle}>
+                <View key={column.translationPath + i} style={[styles.footerColumn, {marginRight: 20}]}>
+                    <Text style={[styles.textHeadline, {color: 'green'}, styles.footerTitle]}>
                         {props.translate(column.translationPath)}
                         {i}
                     </Text>
@@ -143,7 +143,7 @@ const Footer = props => (
                         { /** Rows * */ }
                         {_.map(column.rows, (row, j) => (
                             <TextLink
-                                style={[styles.ml1]}
+                                style={[styles.footerRow]}
                                 href={row.link}
                                 key={row.translationPath + j}
                             >
@@ -155,7 +155,7 @@ const Footer = props => (
             ))}
         </View>
         { /** Expensify Wordmark * */ }
-        <View style={props.isSmallScreenWidth ? {} : []}>
+        <View style={props.isSmallScreenWidth ? [] : []}>
             {!props.isSmallScreenWidth ? (
                 <Expensicons.ExpensifyFooterLogo height={100} width={500} />
             )
diff --git a/src/styles/colors.js b/src/styles/colors.js
index 7af4003a67f6..f27c7ab9d284 100644
--- a/src/styles/colors.js
+++ b/src/styles/colors.js
@@ -34,6 +34,7 @@ export default {
     greenDefaultButtonPressed: '#467164',
     greenDefaultButtonDisabled: '#8BA69E',
     midnight: '#002140',
+    greenMidtone: '#23503B',
 
     // DEPRECATED COLORS. Do not reference these colors. Will be deleted in color switch PR.
     gray1: '#FAFAFA',
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 1c8a0c076706..5e15bb3bc68e 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2888,25 +2888,35 @@ const styles = {
     // },
 
     footerContainer: {
-        backgroundColor: themeColors.ivory,
+        backgroundColor: themeColors.midtone,
         fontSize: variables.fontSizeNormal,
+        display: 'flex',
+        padding: '64px 32px 0',
     },
 
     footerColumns: {
         display: 'flex',
+        margin: '0 0 20px',
+        padding: 0,
     },
 
     footerColumn: {
         marginBottom: 40,
+        padding: 15,
+        margin: '0, 0, 8px',
     },
 
     footerTitle: {
         fontSize: variables.fontSizeLarge,
-        color: themeColors.heroCard,
+        color: themeColors.success,
+        marginBottom: 16,
+        marginTop: 0,
     },
 
     footerRow: {
-
+        padding: '4px 0',
+        marginBottom: 10,
+        color: themeColors.textLight,
     },
 
 };
diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js
index 48b3c15cb2e5..e2ad32582c39 100644
--- a/src/styles/themes/default.js
+++ b/src/styles/themes/default.js
@@ -28,6 +28,7 @@ const darkTheme = {
     successHover: colors.greenHover,
     successPressed: colors.greenPressed,
     transparent: colors.transparent,
+    midtone: colors.greenMidtone,
 
     // Additional keys
     overlay: colors.greenHighlightBackground,

From a82f0ad57c0718cf814b44313151d6f29d78ecfc Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Thu, 9 Feb 2023 09:02:41 -0800
Subject: [PATCH 10/45] Move license / add copywrite

---
 src/languages/en.js                         |  1 +
 src/languages/es.js                         |  1 +
 src/pages/signin/SignInPageLayout/Footer.js | 76 +++++++++++----------
 src/pages/signin/TermsAndLicenses.js        | 18 +++--
 4 files changed, 55 insertions(+), 41 deletions(-)

diff --git a/src/languages/en.js b/src/languages/en.js
index 579df4a7914b..b21d3a9ef507 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -543,6 +543,7 @@ export default {
         },
     },
     termsOfUse: {
+        phrase0: '© 2023 Expensify',
         phrase1: 'By logging in, you agree to the',
         phrase2: 'terms of service',
         phrase3: 'and',
diff --git a/src/languages/es.js b/src/languages/es.js
index ee23158d0626..38201223c942 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -543,6 +543,7 @@ export default {
         },
     },
     termsOfUse: {
+        phrase0: '© 2023 Expensify',
         phrase1: 'Al iniciar sesión, estás accediendo a los',
         phrase2: 'términos de servicio',
         phrase3: 'y',
diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index 8524209602c4..f9f6d65686b8 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -8,6 +8,7 @@ import TextLink from '../../../components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import compose from '../../../libs/compose';
+import TermsAndLicenses from '../TermsAndLicenses';
 
 const propTypes = {
     ...windowDimensionsPropTypes,
@@ -130,43 +131,48 @@ const columns = [
 ];
 
 const Footer = props => (
-    <View style={[props.isSmallScreenWidth ? [styles.footerContainer, styles.flexRow] : [styles.footerContainer, styles.flexColumn]]}>
-        <View style={[styles.flex1, styles.footerColumns, props.isSmallScreenWidth ? styles.flexColumn : styles.flexRow]}>
-            { /** Columns * */ }
-            {_.map(columns, (column, i) => (
-                <View key={column.translationPath + i} style={[styles.footerColumn, {marginRight: 20}]}>
-                    <Text style={[styles.textHeadline, {color: 'green'}, styles.footerTitle]}>
-                        {props.translate(column.translationPath)}
-                        {i}
-                    </Text>
-                    <View style={[styles.footerRow]}>
-                        { /** Rows * */ }
-                        {_.map(column.rows, (row, j) => (
-                            <TextLink
-                                style={[styles.footerRow]}
-                                href={row.link}
-                                key={row.translationPath + j}
-                            >
-                                {props.translate(row.translationPath)}
-                            </TextLink>
-                        ))}
+    <View style={{flex: 1}}>
+        <View style={[props.isSmallScreenWidth ? [styles.footerContainer, styles.flexRow] : [styles.footerContainer, styles.flexColumn]]}>
+            <View style={[styles.flex1, styles.footerColumns, props.isSmallScreenWidth ? styles.flexColumn : styles.flexRow]}>
+                { /** Columns * */ }
+                {_.map(columns, (column, i) => (
+                    <View key={column.translationPath + i} style={[styles.footerColumn, {marginRight: 20}]}>
+                        <Text style={[styles.textHeadline, {color: 'green'}, styles.footerTitle]}>
+                            {props.translate(column.translationPath)}
+                            {i}
+                        </Text>
+                        <View style={[styles.footerRow]}>
+                            { /** Rows * */ }
+                            {_.map(column.rows, (row, j) => (
+                                <TextLink
+                                    style={[styles.footerRow]}
+                                    href={row.link}
+                                    key={row.translationPath + j}
+                                >
+                                    {props.translate(row.translationPath)}
+                                </TextLink>
+                            ))}
+                        </View>
                     </View>
+                ))}
+                <View style={[styles.footerColumn, {marginRight: 20}, styles.mv5, {maxWidth: 200}]}>
+                    <TermsAndLicenses />
                 </View>
-            ))}
-        </View>
-        { /** Expensify Wordmark * */ }
-        <View style={props.isSmallScreenWidth ? [] : []}>
-            {!props.isSmallScreenWidth ? (
-                <Expensicons.ExpensifyFooterLogo height={100} width={500} />
-            )
-                : (
-                    <Expensicons.ExpensifyFooterLogoVertical height={500} width={100} />
-                )}
-            {/* <Icon
-                width={props.isSmallScreenWidth ? 100 : 500}
-                height={props.isSmallScreenWidth ? 500 : 100}
-                src={props.isSmallScreenWidth ? Expensicons.ExpensifyFooterLogoVertical : Expensicons.ExpensifyFooterLogo}
-            /> */}
+            </View>
+            { /** Expensify Wordmark * */ }
+            <View style={props.isSmallScreenWidth ? [] : []}>
+                {!props.isSmallScreenWidth ? (
+                    <Expensicons.ExpensifyFooterLogo height={100} width={500} />
+                )
+                    : (
+                        <Expensicons.ExpensifyFooterLogoVertical height={500} width={100} />
+                    )}
+                {/* <Icon
+                    width={props.isSmallScreenWidth ? 100 : 500}
+                    height={props.isSmallScreenWidth ? 500 : 100}
+                    src={props.isSmallScreenWidth ? Expensicons.ExpensifyFooterLogoVertical : Expensicons.ExpensifyFooterLogo}
+                /> */}
+            </View>
         </View>
     </View>
 );
diff --git a/src/pages/signin/TermsAndLicenses.js b/src/pages/signin/TermsAndLicenses.js
index 498a8299779d..39add2618694 100644
--- a/src/pages/signin/TermsAndLicenses.js
+++ b/src/pages/signin/TermsAndLicenses.js
@@ -1,16 +1,22 @@
 import React from 'react';
-import {View} from 'react-native';
+
+// import {View} from 'react-native';
 import styles from '../../styles/styles';
-import defaultTheme from '../../styles/themes/default';
+
+// import defaultTheme from '../../styles/themes/default';
 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';
+
+// import LogoWordmark from '../../../assets/images/expensify-wordmark.svg';
+// import LocalePicker from '../../components/LocalePicker';
 
 const TermsAndLicenses = props => (
     <>
+        <Text style={[styles.textExtraSmallSupporting, styles.mb2]}>
+            {props.translate('termsOfUse.phrase0')}
+        </Text>
         <Text style={[styles.textExtraSmallSupporting]}>
             {props.translate('termsOfUse.phrase1')}
             <TextLink style={[styles.textExtraSmallSupporting, styles.link]} href={CONST.TERMS_URL}>
@@ -31,10 +37,10 @@ const TermsAndLicenses = props => (
             </TextLink>
             .
         </Text>
-        <View style={[styles.mt4, styles.alignItemsCenter, styles.mb2, styles.flexRow, styles.justifyContentBetween]}>
+        {/* <View style={[styles.mt4, styles.alignItemsCenter, styles.mb2, styles.flexRow, styles.justifyContentBetween]}>
             <LogoWordmark height={30} width={80} fill={defaultTheme.textLight} />
             <LocalePicker size="small" />
-        </View>
+        // </View> */}
     </>
 );
 

From 1743e361d303117350f75ae98de01fd1303993d2 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Thu, 9 Feb 2023 11:03:49 -0800
Subject: [PATCH 11/45] Scrollview working on all platforms

---
 src/pages/signin/SignInPageLayout/index.js |  9 ++++++---
 src/pages/signin/TermsAndLicenses.js       | 12 ++++++------
 src/styles/styles.js                       | 15 +++++++++++----
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index e593135bdd98..aaa78e7c9749 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -6,7 +6,6 @@ import Footer from './Footer';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import styles from '../../../styles/styles';
 import SignInPageGraphics from './SignInPageGraphics';
-import * as StyleUtils from '../../../styles/StyleUtils';
 
 const propTypes = {
     /** The children to show inside the layout */
@@ -31,6 +30,9 @@ const SignInPageLayout = (props) => {
         contentContainerStyles = [styles.flex1, styles.flexColumn];
     }
 
+    // eslint-disable-next-line no-console
+    console.log(props);
+
     return (
         <View style={containerStyles}>
             {!props.isSmallScreenWidth ? (
@@ -42,7 +44,7 @@ const SignInPageLayout = (props) => {
                         {props.children}
                     </SignInPageContent>
                     <ScrollView
-                        contentContainerStyle={containerStyles}
+                        contentContainerStyle={[{flex: 1}]}
                     >
                         <SignInPageGraphics />
                         <Footer />
@@ -51,7 +53,8 @@ const SignInPageLayout = (props) => {
             )
                 : (
                     <ScrollView
-                        contentContainerStyle={[StyleUtils.getHeight(props.windowHeight)]}
+                        style={{maxHeight: 900}}
+                        contentContainerStyle={[]}
                     >
                         <SignInPageContent
                             welcomeText={props.welcomeText}
diff --git a/src/pages/signin/TermsAndLicenses.js b/src/pages/signin/TermsAndLicenses.js
index 39add2618694..32e20c097961 100644
--- a/src/pages/signin/TermsAndLicenses.js
+++ b/src/pages/signin/TermsAndLicenses.js
@@ -1,16 +1,16 @@
 import React from 'react';
 
-// import {View} from 'react-native';
+import {View} from 'react-native';
 import styles from '../../styles/styles';
 
-// import defaultTheme from '../../styles/themes/default';
+import defaultTheme from '../../styles/themes/default';
 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';
+import LogoWordmark from '../../../assets/images/expensify-wordmark.svg';
+import LocalePicker from '../../components/LocalePicker';
 
 const TermsAndLicenses = props => (
     <>
@@ -37,10 +37,10 @@ const TermsAndLicenses = props => (
             </TextLink>
             .
         </Text>
-        {/* <View style={[styles.mt4, styles.alignItemsCenter, styles.mb2, styles.flexRow, styles.justifyContentBetween]}>
+        <View style={[styles.mt4, styles.alignItemsCenter, styles.mb2, styles.flexRow, styles.justifyContentBetween]}>
             <LogoWordmark height={30} width={80} fill={defaultTheme.textLight} />
             <LocalePicker size="small" />
-        // </View> */}
+        </View>
     </>
 );
 
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 5e15bb3bc68e..08d30fa0ccb4 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2891,19 +2891,25 @@ const styles = {
         backgroundColor: themeColors.midtone,
         fontSize: variables.fontSizeNormal,
         display: 'flex',
-        padding: '64px 32px 0',
+        paddingTop: 64,
+        paddingHorizontal: 32,
+        paddingBottom: 0,
+        minHeight: 400,
     },
 
     footerColumns: {
         display: 'flex',
-        margin: '0 0 20px',
+        marginTop: 0,
+        marginHorizontal: 0,
+        marginBottom: 20,
         padding: 0,
     },
 
     footerColumn: {
         marginBottom: 40,
         padding: 15,
-        margin: '0, 0, 8px',
+        marginTop: 0,
+        marginHorizontal: 0,
     },
 
     footerTitle: {
@@ -2914,7 +2920,8 @@ const styles = {
     },
 
     footerRow: {
-        padding: '4px 0',
+        paddingVertical: 4,
+        paddingHorizontal: 0,
         marginBottom: 10,
         color: themeColors.textLight,
     },

From 606d41d57d9808e78b4a7441c93aba1bce66a7cd Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Thu, 9 Feb 2023 17:14:41 -0800
Subject: [PATCH 12/45] Styling Footer on Mobile and Web

---
 src/components/TextLink.js                    |   2 +
 src/pages/signin/SignInPageLayout/Footer.js   | 100 ++++++++++--------
 .../SignInPageLayout/SignInPageContent.js     |   2 +
 src/pages/signin/SignInPageLayout/index.js    |  26 ++---
 src/pages/signin/TermsAndLicenses.js          |   3 -
 src/styles/styles.js                          |  38 +++----
 6 files changed, 91 insertions(+), 80 deletions(-)

diff --git a/src/components/TextLink.js b/src/components/TextLink.js
index 17e73e02c819..a93de7c344c4 100644
--- a/src/components/TextLink.js
+++ b/src/components/TextLink.js
@@ -36,6 +36,8 @@ const defaultProps = {
 
 const TextLink = (props) => {
     const additionalStyles = _.isArray(props.style) ? props.style : [props.style];
+    // eslint-disable-next-line no-console
+    console.log(props);
 
     /**
    * @param {Event} event
diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index f9f6d65686b8..92f9da89beb0 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import {View} from 'react-native';
 import React from 'react';
 import _ from 'underscore';
@@ -130,52 +131,67 @@ const columns = [
     },
 ];
 
-const Footer = props => (
-    <View style={{flex: 1}}>
-        <View style={[props.isSmallScreenWidth ? [styles.footerContainer, styles.flexRow] : [styles.footerContainer, styles.flexColumn]]}>
-            <View style={[styles.flex1, styles.footerColumns, props.isSmallScreenWidth ? styles.flexColumn : styles.flexRow]}>
-                { /** Columns * */ }
-                {_.map(columns, (column, i) => (
-                    <View key={column.translationPath + i} style={[styles.footerColumn, {marginRight: 20}]}>
-                        <Text style={[styles.textHeadline, {color: 'green'}, styles.footerTitle]}>
-                            {props.translate(column.translationPath)}
-                            {i}
-                        </Text>
-                        <View style={[styles.footerRow]}>
-                            { /** Rows * */ }
-                            {_.map(column.rows, (row, j) => (
-                                <TextLink
-                                    style={[styles.footerRow]}
-                                    href={row.link}
-                                    key={row.translationPath + j}
-                                >
-                                    {props.translate(row.translationPath)}
-                                </TextLink>
-                            ))}
+const Footer = (props) => {
+    const imageDirection = props.isSmallScreenWidth ? styles.flexRow : styles.flexColumn;
+    const columnDirection = props.isSmallScreenWidth ? styles.flexColumn : styles.flexRow;
+
+    const centered = !props.isSmallScreenWidth ? styles.alignItemsCenter : {};
+
+    const pageFooter = [styles.flex1, centered];
+    const pageFooterWrapper = [styles.footerWrapper, centered, styles.flexGrow1, imageDirection];
+    const footerColumns = [styles.footerColumnsContainer, columnDirection];
+    let footerColumn = [styles.footerColumn];
+
+    if (!props.isSmallScreenWidth) {
+        footerColumn = [...footerColumn, styles.p4, styles.flex1];
+    }
+
+    return (
+        <View style={pageFooter}>
+            <View style={pageFooterWrapper}>
+                <View style={footerColumns}>
+                    { /** Columns * */ }
+                    {_.map(columns, (column, i) => (
+                        <View
+                            key={column.translationPath + i}
+                            style={footerColumn}
+                        >
+                            <Text style={[styles.textHeadline, styles.footerTitle]}>
+                                {props.translate(column.translationPath)}
+                            </Text>
+                            <View style={[styles.footerRow]}>
+                                { /** Rows * */ }
+                                {_.map(column.rows, (row, j) => (
+                                    <TextLink
+                                        style={[styles.footerRow]}
+                                        href={row.link}
+                                        key={row.translationPath + j}
+                                    >
+                                        {props.translate(row.translationPath)}
+                                    </TextLink>
+                                ))}
+                                {(i === 3) && (
+                                    <View style={{maxWidth: 200}}>
+                                        <TermsAndLicenses />
+                                    </View>
+                                )}
+                            </View>
                         </View>
-                    </View>
-                ))}
-                <View style={[styles.footerColumn, {marginRight: 20}, styles.mv5, {maxWidth: 200}]}>
-                    <TermsAndLicenses />
+                    ))}
+                </View>
+                { /** Expensify Wordmark * */ }
+                <View style={[styles.footerImage]}>
+                    {!props.isSmallScreenWidth ? (
+                        <Expensicons.ExpensifyFooterLogo height={111} width={618} />
+                    )
+                        : (
+                            <Expensicons.ExpensifyFooterLogoVertical height={618} width={111} />
+                        )}
                 </View>
-            </View>
-            { /** Expensify Wordmark * */ }
-            <View style={props.isSmallScreenWidth ? [] : []}>
-                {!props.isSmallScreenWidth ? (
-                    <Expensicons.ExpensifyFooterLogo height={100} width={500} />
-                )
-                    : (
-                        <Expensicons.ExpensifyFooterLogoVertical height={500} width={100} />
-                    )}
-                {/* <Icon
-                    width={props.isSmallScreenWidth ? 100 : 500}
-                    height={props.isSmallScreenWidth ? 500 : 100}
-                    src={props.isSmallScreenWidth ? Expensicons.ExpensifyFooterLogoVertical : Expensicons.ExpensifyFooterLogo}
-                /> */}
             </View>
         </View>
-    </View>
-);
+    );
+};
 
 Footer.propTypes = propTypes;
 Footer.displayName = 'Footer';
diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
index 9dc7212e2d8e..51a2ffff3ce3 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageContent.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -34,6 +34,8 @@ const SignInPageContent = props => (
     <TouchableDismissKeyboard>
         <View
             style={[
+
+                // props.isSmallScreenWidth && styles.flex1,
                 StyleUtils.getHeight(props.windowHeight),
                 styles.signInPageLeftContainer,
                 !props.isSmallScreenWidth && styles.signInPageLeftContainerWide,
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index aaa78e7c9749..f5167e21348f 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -44,7 +44,7 @@ const SignInPageLayout = (props) => {
                         {props.children}
                     </SignInPageContent>
                     <ScrollView
-                        contentContainerStyle={[{flex: 1}]}
+                        contentContainerStyle={[styles.flex1]}
                     >
                         <SignInPageGraphics />
                         <Footer />
@@ -52,18 +52,20 @@ const SignInPageLayout = (props) => {
                 </View>
             )
                 : (
-                    <ScrollView
-                        style={{maxHeight: 900}}
-                        contentContainerStyle={[]}
-                    >
-                        <SignInPageContent
-                            welcomeText={props.welcomeText}
-                            shouldShowWelcomeText={props.shouldShowWelcomeText}
+                    <View>
+                        <ScrollView
+                            style={{maxHeight: 980}}
+                            contentContainerStyle={[styles.flexGrow1]}
                         >
-                            {props.children}
-                        </SignInPageContent>
-                        <Footer />
-                    </ScrollView>
+                            <SignInPageContent
+                                welcomeText={props.welcomeText}
+                                shouldShowWelcomeText={props.shouldShowWelcomeText}
+                            >
+                                {props.children}
+                            </SignInPageContent>
+                            <Footer />
+                        </ScrollView>
+                    </View>
                 )}
         </View>
     );
diff --git a/src/pages/signin/TermsAndLicenses.js b/src/pages/signin/TermsAndLicenses.js
index 32e20c097961..2bec4a3fb1f6 100644
--- a/src/pages/signin/TermsAndLicenses.js
+++ b/src/pages/signin/TermsAndLicenses.js
@@ -3,13 +3,11 @@ import React from 'react';
 import {View} from 'react-native';
 import styles from '../../styles/styles';
 
-import defaultTheme from '../../styles/themes/default';
 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 = props => (
@@ -38,7 +36,6 @@ const TermsAndLicenses = props => (
             .
         </Text>
         <View style={[styles.mt4, styles.alignItemsCenter, styles.mb2, styles.flexRow, styles.justifyContentBetween]}>
-            <LogoWordmark height={30} width={80} fill={defaultTheme.textLight} />
             <LocalePicker size="small" />
         </View>
     </>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 08d30fa0ccb4..2b31425fbaee 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2879,37 +2879,26 @@ const styles = {
         paddingBottom: 45,
     },
 
-    // homepageContainer: {
-    //     height: '100vh',
-    //     maxHeight: 900,
-    //     minHeight: 400,
-    //     position: 'relative',
-    //     width: '100%',
-    // },
-
-    footerContainer: {
+    footerWrapper: {
         backgroundColor: themeColors.midtone,
         fontSize: variables.fontSizeNormal,
-        display: 'flex',
-        paddingTop: 64,
-        paddingHorizontal: 32,
-        paddingBottom: 0,
         minHeight: 400,
+        minWidth: 200,
+        maxWidth: 1000,
+        paddingTop: 64,
+        alignSelf: 'stretch',
     },
 
-    footerColumns: {
-        display: 'flex',
-        marginTop: 0,
-        marginHorizontal: 0,
-        marginBottom: 20,
+    footerColumnsContainer: {
+        paddingHorizontal: 32,
+        paddingBottom: 0,
         padding: 0,
+        flex: 1,
+        flexWrap: 'wrap',
     },
 
     footerColumn: {
         marginBottom: 40,
-        padding: 15,
-        marginTop: 0,
-        marginHorizontal: 0,
     },
 
     footerTitle: {
@@ -2921,11 +2910,14 @@ const styles = {
 
     footerRow: {
         paddingVertical: 4,
-        paddingHorizontal: 0,
-        marginBottom: 10,
+        marginBottom: 8,
         color: themeColors.textLight,
     },
 
+    footerImage: {
+        marginTop: 40,
+    },
+
 };
 
 export default styles;

From f4f498cbe7b03d643714b3aff9c1fa26a660e03d Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Fri, 10 Feb 2023 16:52:35 -0800
Subject: [PATCH 13/45] Add socials links, more style tweakss

---
 src/languages/en.js                           |  2 +-
 src/languages/es.js                           |  2 +-
 src/pages/signin/SignInPageLayout/Footer.js   | 41 ++++++++-----
 .../SignInPageLayout/SignInPageContent.js     |  8 +--
 src/pages/signin/SignInPageLayout/index.js    | 39 +++++++------
 src/pages/signin/Socials.js                   | 58 +++++++++++++++++++
 src/styles/styles.js                          | 24 ++++----
 7 files changed, 122 insertions(+), 52 deletions(-)
 create mode 100644 src/pages/signin/Socials.js

diff --git a/src/languages/en.js b/src/languages/en.js
index 33f3effa2f8f..bd2df2f2a8c4 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -1201,7 +1201,7 @@ export default {
         expensifyOrg: 'Expensify.org',
         investorRelations: 'Investor Relations',
         getStarted: 'Get Started',
-        createAaccount: 'Create a new account',
+        createAccount: 'Create a new account',
         logIn: 'Log in',
     },
 };
diff --git a/src/languages/es.js b/src/languages/es.js
index e265af6dcc08..459816e41aa3 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -1203,7 +1203,7 @@ export default {
         expensifyOrg: '',
         investorRelations: '',
         getStarted: '',
-        createAaccount: '',
+        createAccount: '',
         logIn: '',
     },
 };
diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index 92f9da89beb0..4ff1655f63ef 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -10,6 +10,8 @@ import withLocalize, {withLocalizePropTypes} from '../../../components/withLocal
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import compose from '../../../libs/compose';
 import TermsAndLicenses from '../TermsAndLicenses';
+import Socials from '../Socials';
+import Hoverable from '../../../components/Hoverable';
 
 const propTypes = {
     ...windowDimensionsPropTypes,
@@ -121,7 +123,7 @@ const columns = [
         rows: [
             {
                 link: 'https://www.expensify.com/',
-                translationPath: 'footer.createAaccount',
+                translationPath: 'footer.createAccount',
             },
             {
                 link: 'https://www.expensify.com/',
@@ -135,15 +137,14 @@ const Footer = (props) => {
     const imageDirection = props.isSmallScreenWidth ? styles.flexRow : styles.flexColumn;
     const columnDirection = props.isSmallScreenWidth ? styles.flexColumn : styles.flexRow;
 
-    const centered = !props.isSmallScreenWidth ? styles.alignItemsCenter : {};
-
-    const pageFooter = [styles.flex1, centered];
-    const pageFooterWrapper = [styles.footerWrapper, centered, styles.flexGrow1, imageDirection];
-    const footerColumns = [styles.footerColumnsContainer, columnDirection];
+    const pageFooter = [styles.flex1, styles.flexGrow1];
+    const pageFooterWrapper = [styles.footerWrapper, imageDirection];
+    let footerColumns = [styles.footerColumnsContainer, columnDirection];
     let footerColumn = [styles.footerColumn];
 
     if (!props.isSmallScreenWidth) {
         footerColumn = [...footerColumn, styles.p4, styles.flex1];
+        footerColumns = [...footerColumns, styles.footerLargeScreenAlign];
     }
 
     return (
@@ -162,16 +163,26 @@ const Footer = (props) => {
                             <View style={[styles.footerRow]}>
                                 { /** Rows * */ }
                                 {_.map(column.rows, (row, j) => (
-                                    <TextLink
-                                        style={[styles.footerRow]}
-                                        href={row.link}
+                                    <Hoverable
                                         key={row.translationPath + j}
                                     >
-                                        {props.translate(row.translationPath)}
-                                    </TextLink>
+                                        {hovered => (
+                                            <TextLink
+                                                style={[styles.footerRow, hovered ? styles.textBlue : {}]}
+                                                href={row.link}
+                                            >
+                                                {props.translate(row.translationPath)}
+                                            </TextLink>
+                                        )}
+                                    </Hoverable>
                                 ))}
+                                {(i === 2) && (
+                                    <View style={styles.mt5}>
+                                        <Socials />
+                                    </View>
+                                )}
                                 {(i === 3) && (
-                                    <View style={{maxWidth: 200}}>
+                                    <View style={styles.footerTermsContainer}>
                                         <TermsAndLicenses />
                                     </View>
                                 )}
@@ -180,12 +191,12 @@ const Footer = (props) => {
                     ))}
                 </View>
                 { /** Expensify Wordmark * */ }
-                <View style={[styles.footerImage]}>
+                <View style={[!props.isSmallScreenWidth && styles.footerLargeScreenAlign]}>
                     {!props.isSmallScreenWidth ? (
-                        <Expensicons.ExpensifyFooterLogo height={111} width={618} />
+                        <Expensicons.ExpensifyFooterLogo />
                     )
                         : (
-                            <Expensicons.ExpensifyFooterLogoVertical height={618} width={111} />
+                            <Expensicons.ExpensifyFooterLogoVertical height={634} width={111} />
                         )}
                 </View>
             </View>
diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
index 51a2ffff3ce3..0bed3c7594ff 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageContent.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -6,7 +6,6 @@ import styles from '../../../styles/styles';
 import variables from '../../../styles/variables';
 import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo';
 import Text from '../../../components/Text';
-import TermsAndLicenses from '../TermsAndLicenses';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import SignInPageForm from '../../../components/SignInPageForm';
 import compose from '../../../libs/compose';
@@ -34,9 +33,8 @@ const SignInPageContent = props => (
     <TouchableDismissKeyboard>
         <View
             style={[
-
-                // props.isSmallScreenWidth && styles.flex1,
                 StyleUtils.getHeight(props.windowHeight),
+                !props.isSmallScreenWidth && styles.flex1,
                 styles.signInPageLeftContainer,
                 !props.isSmallScreenWidth && styles.signInPageLeftContainerWide,
             ]}
@@ -73,9 +71,9 @@ const SignInPageContent = props => (
                         {props.children}
                     </SignInPageForm>
                 </View>
-                <View style={[styles.mv5]}>
+                {/* <View style={[styles.mv5]}>
                     <TermsAndLicenses />
-                </View>
+                </View> */}
             </KeyboardAvoidingView>
         </View>
     </TouchableDismissKeyboard>
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index f5167e21348f..70a94ccd30b4 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -6,6 +6,7 @@ import Footer from './Footer';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import styles from '../../../styles/styles';
 import SignInPageGraphics from './SignInPageGraphics';
+import * as StyleUtils from '../../../styles/StyleUtils';
 
 const propTypes = {
     /** The children to show inside the layout */
@@ -22,17 +23,16 @@ const propTypes = {
 };
 
 const SignInPageLayout = (props) => {
-    let containerStyles = [styles.flex1, styles.signInPageInner];
+    let containerStyles = [styles.flex1];
+
+    // , styles.signInPageInner];
     let contentContainerStyles = [styles.flex1, styles.flexRow];
 
     if (props.isSmallScreenWidth) {
-        containerStyles = [styles.flex1];
+        containerStyles = [];
         contentContainerStyles = [styles.flex1, styles.flexColumn];
     }
 
-    // eslint-disable-next-line no-console
-    console.log(props);
-
     return (
         <View style={containerStyles}>
             {!props.isSmallScreenWidth ? (
@@ -44,7 +44,8 @@ const SignInPageLayout = (props) => {
                         {props.children}
                     </SignInPageContent>
                     <ScrollView
-                        contentContainerStyle={[styles.flex1]}
+                        style={styles.flex1}
+                        contentContainerStyle={[styles.flexGrow1, styles.flexColumn]}
                     >
                         <SignInPageGraphics />
                         <Footer />
@@ -52,20 +53,20 @@ const SignInPageLayout = (props) => {
                 </View>
             )
                 : (
-                    <View>
-                        <ScrollView
-                            style={{maxHeight: 980}}
-                            contentContainerStyle={[styles.flexGrow1]}
+                    <ScrollView
+
+                        // To scroll on both mobile and web, we need to set the container height manually
+                        style={StyleUtils.getHeight(1 + props.windowHeight)}
+                        contentContainerStyle={[styles.flexGrow1]}
+                    >
+                        <SignInPageContent
+                            welcomeText={props.welcomeText}
+                            shouldShowWelcomeText={props.shouldShowWelcomeText}
                         >
-                            <SignInPageContent
-                                welcomeText={props.welcomeText}
-                                shouldShowWelcomeText={props.shouldShowWelcomeText}
-                            >
-                                {props.children}
-                            </SignInPageContent>
-                            <Footer />
-                        </ScrollView>
-                    </View>
+                            {props.children}
+                        </SignInPageContent>
+                        <Footer />
+                    </ScrollView>
                 )}
         </View>
     );
diff --git a/src/pages/signin/Socials.js b/src/pages/signin/Socials.js
new file mode 100644
index 000000000000..0d303fe8e35c
--- /dev/null
+++ b/src/pages/signin/Socials.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import _ from 'underscore';
+import {Pressable, Linking} from 'react-native';
+
+import Icon from '../../components/Icon';
+import Text from '../../components/Text';
+
+import * as Expensicons from '../../components/Icon/Expensicons';
+import themeColors from '../../styles/themes/default';
+import styles from '../../styles/styles';
+
+const socialsList = [
+    {
+        iconURL: Expensicons.Pencil,
+        link: 'https://we.are.expensify.com/podcast',
+    },
+    {
+        iconURL: Expensicons.Apple,
+        link: 'https://www.twitter.com/expensify',
+    },
+    {
+        iconURL: Expensicons.Android,
+        link: 'http://www.instagram.com/expensify',
+    },
+    {
+        iconURL: Expensicons.Chair,
+        link: 'https://www.facebook.com/expensify',
+    },
+    {
+        iconURL: Expensicons.CreditCard,
+        link: 'http://www.linkedin.com/company/expensify',
+    },
+];
+
+const Socials = () => (
+    <>
+        <Text>
+            {_.map(socialsList, social => (
+                <Pressable
+                    onPress={() => {
+                        Linking.openURL(social.link);
+                    }}
+                    style={styles.pr2}
+                    key={social.link}
+                >
+                    {({hovered}) => (
+                        <Icon src={social.iconURL} height={18} width={18} fill={hovered ? themeColors.link : themeColors.textLight} />
+                    )}
+                </Pressable>
+            ))}
+        </Text>
+
+    </>
+);
+
+Socials.displayName = 'Socials';
+
+export default Socials;
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 2b31425fbaee..51aae07e19a5 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2882,40 +2882,42 @@ const styles = {
     footerWrapper: {
         backgroundColor: themeColors.midtone,
         fontSize: variables.fontSizeNormal,
-        minHeight: 400,
-        minWidth: 200,
-        maxWidth: 1000,
         paddingTop: 64,
-        alignSelf: 'stretch',
+        paddingLeft: 17,
     },
 
     footerColumnsContainer: {
-        paddingHorizontal: 32,
-        paddingBottom: 0,
-        padding: 0,
+        maxWidth: 1100,
         flex: 1,
         flexWrap: 'wrap',
+        marginBottom: 40,
     },
 
     footerColumn: {
-        marginBottom: 40,
+        padding: 15,
     },
 
     footerTitle: {
         fontSize: variables.fontSizeLarge,
         color: themeColors.success,
         marginBottom: 16,
-        marginTop: 0,
     },
 
     footerRow: {
         paddingVertical: 4,
         marginBottom: 8,
         color: themeColors.textLight,
+        fontSize: variables.fontSizeMedium,
+    },
+
+    footerLargeScreenAlign: {
+        minWidth: '80%',
+        alignSelf: 'center',
     },
 
-    footerImage: {
-        marginTop: 40,
+    footerTermsContainer: {
+        marginVertical: 16,
+        maxWidth: 200,
     },
 
 };

From a3545fb8f94d3911b41b5fa6c7546fcbf3685a8b Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Mon, 13 Feb 2023 12:35:51 -0800
Subject: [PATCH 14/45] Add social icons, use dynamic date for copyright,
 modify color names

---
 assets/images/social-facebook.svg             |  7 +++
 assets/images/social-instagram.svg            | 17 ++++++++
 assets/images/social-linkedin.svg             |  7 +++
 assets/images/social-podcast.svg              | 28 ++++++++++++
 assets/images/social-twitter.svg              |  9 ++++
 assets/images/social-youtube.svg              | 11 +++++
 src/components/Icon/Expensicons.js            | 12 ++++++
 src/components/TextLink.js                    |  2 -
 src/languages/en.js                           |  1 -
 src/languages/es.js                           |  1 -
 src/pages/signin/SignInPageLayout/Footer.js   |  4 +-
 .../SignInPageLayout/SignInPageContent.js     |  2 +-
 src/pages/signin/SignInPageLayout/index.js    |  8 ++--
 src/pages/signin/Socials.js                   | 43 +++++++++----------
 src/pages/signin/TermsAndLicenses.js          |  4 +-
 src/styles/colors.js                          |  2 +-
 src/styles/themes/default.js                  |  4 +-
 17 files changed, 122 insertions(+), 40 deletions(-)
 create mode 100644 assets/images/social-facebook.svg
 create mode 100644 assets/images/social-instagram.svg
 create mode 100644 assets/images/social-linkedin.svg
 create mode 100644 assets/images/social-podcast.svg
 create mode 100644 assets/images/social-twitter.svg
 create mode 100644 assets/images/social-youtube.svg

diff --git a/assets/images/social-facebook.svg b/assets/images/social-facebook.svg
new file mode 100644
index 000000000000..2096ece9f5c6
--- /dev/null
+++ b/assets/images/social-facebook.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 21" style="enable-background:new 0 0 20 21;" xml:space="preserve">
+<path d="M11.2,16.9v-6.1h2l0.2-2.4h-2.2V6.8c0-0.6,0.2-1.1,1.2-1.1h1.2V3.5c-0.2,0-1-0.1-1.9-0.1c-1.9,0-3.1,1.1-3.1,3.1v1.8h-2v2.4
+	h2.1v6.2H11.2z"/>
+</svg>
diff --git a/assets/images/social-instagram.svg b/assets/images/social-instagram.svg
new file mode 100644
index 000000000000..b4a130e796f3
--- /dev/null
+++ b/assets/images/social-instagram.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 21" style="enable-background:new 0 0 20 21;" xml:space="preserve">
+<path d="M10,4.9c1.9,0,2.1,0,2.8,0c0.7,0,1.1,0.1,1.3,0.2c0.3,0.1,0.6,0.3,0.8,0.5c0.2,0.2,0.4,0.5,0.5,0.8c0.1,0.2,0.2,0.6,0.2,1.3
+	c0,0.7,0,1,0,2.8c0,1.9,0,2.1,0,2.8c0,0.7-0.1,1.1-0.2,1.3c-0.1,0.3-0.3,0.6-0.5,0.8c-0.2,0.2-0.5,0.4-0.8,0.5
+	c-0.2,0.1-0.6,0.2-1.3,0.2c-0.7,0-1,0-2.8,0c-1.9,0-2.1,0-2.8,0c-0.7,0-1.1-0.1-1.3-0.2c-0.3-0.1-0.6-0.3-0.8-0.5
+	c-0.2-0.2-0.4-0.5-0.5-0.8c-0.1-0.2-0.2-0.6-0.2-1.3c0-0.7,0-1,0-2.8c0-1.9,0-2.1,0-2.8c0-0.7,0.1-1.1,0.2-1.3
+	c0.1-0.3,0.3-0.6,0.5-0.8c0.2-0.2,0.5-0.4,0.8-0.5C6.1,5.1,6.5,5,7.2,4.9C7.9,4.9,8.1,4.9,10,4.9z M10,3.6c-1.9,0-2.1,0-2.9,0
+	C6.4,3.7,5.9,3.8,5.4,4C5,4.2,4.6,4.4,4.2,4.8C3.8,5.2,3.5,5.6,3.4,6C3.2,6.5,3.1,7,3,7.7c0,0.7,0,1,0,2.9c0,1.9,0,2.1,0,2.9
+	c0,0.7,0.2,1.3,0.3,1.7c0.2,0.5,0.4,0.9,0.8,1.2c0.4,0.4,0.8,0.6,1.2,0.8c0.4,0.2,1,0.3,1.7,0.3c0.7,0,1,0,2.9,0c1.9,0,2.1,0,2.9,0
+	c0.7,0,1.3-0.2,1.7-0.3c0.5-0.2,0.9-0.4,1.2-0.8c0.4-0.4,0.6-0.8,0.8-1.2c0.2-0.4,0.3-1,0.3-1.7c0-0.7,0-1,0-2.9c0-1.9,0-2.1,0-2.9
+	c0-0.7-0.2-1.3-0.3-1.7c-0.2-0.5-0.4-0.9-0.8-1.2C15.4,4.4,15,4.2,14.6,4c-0.4-0.2-1-0.3-1.7-0.3C12.1,3.6,11.9,3.6,10,3.6z"/>
+<path d="M10,7c-2,0-3.6,1.6-3.6,3.6S8,14.2,10,14.2s3.6-1.6,3.6-3.6S12,7,10,7z M10,13c-1.3,0-2.3-1-2.3-2.3c0-1.3,1-2.3,2.3-2.3
+	s2.3,1,2.3,2.3C12.3,11.9,11.3,13,10,13z"/>
+<path d="M13.7,7.7c0.5,0,0.8-0.4,0.8-0.8s-0.4-0.8-0.8-0.8s-0.8,0.4-0.8,0.8S13.3,7.7,13.7,7.7z"/>
+</svg>
diff --git a/assets/images/social-linkedin.svg b/assets/images/social-linkedin.svg
new file mode 100644
index 000000000000..4ee3bb98a884
--- /dev/null
+++ b/assets/images/social-linkedin.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 21" style="enable-background:new 0 0 20 21;" xml:space="preserve">
+<path d="M5.1,4.4C4.4,4.4,3.6,5,3.6,5.9s0.6,1.5,1.5,1.5s1.5-0.6,1.5-1.5C6.8,5,6,4.4,5.1,4.4z M3.9,16.9h2.6V8.6H3.9V16.9z
+	 M13.2,8.3c0,0-2-0.1-2.6,1.4v-1H8.1v8.3h2.6v-4.5c0-0.1,0-1.8,1.6-1.8c1.4,0,1.4,2,1.4,2v4.2h2.5V12C16.1,12,16.5,8.3,13.2,8.3z"/>
+</svg>
diff --git a/assets/images/social-podcast.svg b/assets/images/social-podcast.svg
new file mode 100644
index 000000000000..3e72d5ac286a
--- /dev/null
+++ b/assets/images/social-podcast.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 21" style="enable-background:new 0 0 20 21;" xml:space="preserve">
+<style type="text/css">
+	.st0{clip-path:url(#SVGID_00000156555878171973468280000002171440523883077530_);}
+</style>
+<g>
+	<defs>
+		<rect id="SVGID_1_" y="0.6" width="20" height="20"/>
+	</defs>
+	<clipPath id="SVGID_00000065054174782500876690000010121398893680703657_">
+		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+	</clipPath>
+	<g style="clip-path:url(#SVGID_00000065054174782500876690000010121398893680703657_);">
+		<path d="M6.2,2C6,2.3,6,2.6,6.2,2.8s0.5,0.1,0.6-0.1C7.2,2.3,7.6,2,8.1,1.9C8.8,1.6,9.4,1.5,10,1.5s1.2,0.1,1.9,0.4
+			c0.5,0.3,0.9,0.5,1.2,0.8c0.1,0.1,0.4,0.2,0.6,0.1s0.4-0.5,0.1-0.8c-0.4-0.4-0.9-0.6-1.5-0.9c-0.8-0.4-1.5-0.5-2.4-0.5
+			S8.4,0.8,7.6,1.1C7.1,1.4,6.6,1.6,6.2,2z"/>
+		<path d="M7.5,4.9c-0.1-0.1-0.2-0.4,0-0.5c0.2-0.2,0.6-0.5,1-0.7s1-0.4,1.5-0.4s1.1,0.1,1.6,0.4C12,3.8,12.2,4,12.5,4.4
+			c0.1,0.1,0.1,0.5-0.1,0.6c-0.1,0.1-0.4,0-0.5-0.1c-0.2-0.2-0.5-0.4-0.6-0.5c-0.4-0.1-0.9-0.2-1.2-0.2S9.1,4.3,8.8,4.4
+			C8.6,4.5,8.4,4.6,8.1,4.9C8,5,7.8,5.1,7.5,4.9z"/>
+		<path d="M10,5.9c-1,0-1.8,0.8-1.8,1.8V12c0,1,0.8,1.8,1.8,1.8s1.8-0.8,1.8-1.8V7.6C11.8,6.6,11,5.9,10,5.9z"/>
+		<path d="M7,10.3C7,10,6.8,9.9,6.6,9.9C6.2,9.8,6.1,10,6.1,10.3V12c0,2,1.5,3.6,3.5,3.9v2.6H7.9c-0.2,0-0.4,0.2-0.4,0.4
+			s0.1,0.5,0.4,0.5h4.4c0.2,0,0.4-0.2,0.4-0.4s-0.2-0.4-0.4-0.4h-1.9V16c2-0.2,3.5-1.9,3.5-3.9v-1.9c0-0.2-0.2-0.4-0.4-0.4
+			c-0.2,0-0.4,0.2-0.4,0.4V12c0,1.6-1.4,3-3,3s-3-1.4-3-3v-1.8H7z"/>
+	</g>
+</g>
+</svg>
diff --git a/assets/images/social-twitter.svg b/assets/images/social-twitter.svg
new file mode 100644
index 000000000000..03981f10bdd3
--- /dev/null
+++ b/assets/images/social-twitter.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 21" style="enable-background:new 0 0 20 21;" xml:space="preserve">
+<path d="M16.2,6.9c-0.5,0.2-1,0.4-1.5,0.4c0.5-0.4,0.9-0.9,1.1-1.4c-0.5,0.2-1,0.5-1.6,0.6c-0.4-0.5-1.1-0.9-1.9-0.9
+	c-1.6,0-2.9,1.5-2.5,3.1c-2.1,0-4-1-5.2-2.6C4,7.3,4.2,8.8,5.5,9.6C5,9.5,4.6,9.4,4.2,9.3c0,1.3,0.9,2.3,2,2.5
+	c-0.2,0.1-0.6,0.1-1.1,0.1c0.4,1,1.2,1.8,2.4,1.8c-1.1,0.9-2.4,1.2-3.8,1c1.1,0.8,2.5,1.1,3.9,1.1c4.8,0,7.5-4,7.2-7.6
+	C15.5,7.9,15.9,7.4,16.2,6.9z"/>
+</svg>
diff --git a/assets/images/social-youtube.svg b/assets/images/social-youtube.svg
new file mode 100644
index 000000000000..aa32e0824ea9
--- /dev/null
+++ b/assets/images/social-youtube.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 21" style="enable-background:new 0 0 20 21;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;}
+</style>
+<path class="st0" d="M4.3,5.2C3.1,5.3,2.2,6.4,2.1,7.7C2,8.8,2,10.1,2,11c0,0.9,0,2.2,0.1,3.3c0.1,1.3,1,2.4,2.2,2.5
+	C5.6,16.9,7.6,17,10,17c2.4,0,4.3-0.1,5.7-0.3c1.2-0.1,2.1-1.2,2.2-2.5c0.1-1.2,0.1-2.5,0.1-3.3c0-0.8,0-2.1-0.1-3.2
+	c-0.1-1.3-1-2.4-2.2-2.5C14.3,5.1,12.4,5,10,5C7.6,5,5.7,5.1,4.3,5.2L4.3,5.2z M8.4,8.4l4.1,2.5l-4.1,2.5V8.4z"/>
+</svg>
diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js
index 44dd1b8e3cd9..864ae755b15f 100644
--- a/src/components/Icon/Expensicons.js
+++ b/src/components/Icon/Expensicons.js
@@ -100,6 +100,12 @@ import FallbackWorkspaceAvatar from '../../../assets/images/avatars/fallback-wor
 import DragAndDrop from '../../../assets/images/drag-and-drop.svg';
 import ExpensifyFooterLogo from '../../../assets/images/expensify-footer-logo.svg';
 import ExpensifyFooterLogoVertical from '../../../assets/images/expensify-footer-logo-vertical.svg';
+import Twitter from '../../../assets/images/social-twitter.svg';
+import Youtube from '../../../assets/images/social-youtube.svg';
+import Facebook from '../../../assets/images/social-facebook.svg';
+import Podcast from '../../../assets/images/social-podcast.svg';
+import Linkedin from '../../../assets/images/social-linkedin.svg';
+import Instagram from '../../../assets/images/social-instagram.svg';
 
 export {
     ActiveRoomAvatar,
@@ -204,4 +210,10 @@ export {
     Wallet,
     Workspace,
     Zoom,
+    Twitter,
+    Youtube,
+    Facebook,
+    Podcast,
+    Linkedin,
+    Instagram,
 };
diff --git a/src/components/TextLink.js b/src/components/TextLink.js
index a93de7c344c4..17e73e02c819 100644
--- a/src/components/TextLink.js
+++ b/src/components/TextLink.js
@@ -36,8 +36,6 @@ const defaultProps = {
 
 const TextLink = (props) => {
     const additionalStyles = _.isArray(props.style) ? props.style : [props.style];
-    // eslint-disable-next-line no-console
-    console.log(props);
 
     /**
    * @param {Event} event
diff --git a/src/languages/en.js b/src/languages/en.js
index bd2df2f2a8c4..558519a252cb 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -545,7 +545,6 @@ export default {
         },
     },
     termsOfUse: {
-        phrase0: '© 2023 Expensify',
         phrase1: 'By logging in, you agree to the',
         phrase2: 'terms of service',
         phrase3: 'and',
diff --git a/src/languages/es.js b/src/languages/es.js
index 459816e41aa3..cd595a80857b 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -545,7 +545,6 @@ export default {
         },
     },
     termsOfUse: {
-        phrase0: '© 2023 Expensify',
         phrase1: 'Al iniciar sesión, estás accediendo a los',
         phrase2: 'términos de servicio',
         phrase3: 'y',
diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index 4ff1655f63ef..635ca131308f 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -122,11 +122,11 @@ const columns = [
         translationPath: 'footer.getStarted',
         rows: [
             {
-                link: 'https://www.expensify.com/',
+                link: 'https://www.new.expensify.com/',
                 translationPath: 'footer.createAccount',
             },
             {
-                link: 'https://www.expensify.com/',
+                link: 'https://www.new.expensify.com/',
                 translationPath: 'footer.logIn',
             },
         ],
diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
index 0bed3c7594ff..7c5586a4a7ce 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageContent.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -34,7 +34,7 @@ const SignInPageContent = props => (
         <View
             style={[
                 StyleUtils.getHeight(props.windowHeight),
-                !props.isSmallScreenWidth && styles.flex1,
+                styles.flex1,
                 styles.signInPageLeftContainer,
                 !props.isSmallScreenWidth && styles.signInPageLeftContainerWide,
             ]}
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 70a94ccd30b4..aac553ccfb27 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -23,13 +23,11 @@ const propTypes = {
 };
 
 const SignInPageLayout = (props) => {
-    let containerStyles = [styles.flex1];
-
-    // , styles.signInPageInner];
+    let containerStyles = [styles.flex1, styles.signInPageInner];
     let contentContainerStyles = [styles.flex1, styles.flexRow];
 
     if (props.isSmallScreenWidth) {
-        containerStyles = [];
+        containerStyles = [styles.flex1];
         contentContainerStyles = [styles.flex1, styles.flexColumn];
     }
 
@@ -45,7 +43,7 @@ const SignInPageLayout = (props) => {
                     </SignInPageContent>
                     <ScrollView
                         style={styles.flex1}
-                        contentContainerStyle={[styles.flexGrow1, styles.flexColumn]}
+                        contentContainerStyle={[styles.flexGrow1]}
                     >
                         <SignInPageGraphics />
                         <Footer />
diff --git a/src/pages/signin/Socials.js b/src/pages/signin/Socials.js
index 0d303fe8e35c..41c0a44975c6 100644
--- a/src/pages/signin/Socials.js
+++ b/src/pages/signin/Socials.js
@@ -11,46 +11,43 @@ import styles from '../../styles/styles';
 
 const socialsList = [
     {
-        iconURL: Expensicons.Pencil,
+        iconURL: Expensicons.Podcast,
         link: 'https://we.are.expensify.com/podcast',
     },
     {
-        iconURL: Expensicons.Apple,
+        iconURL: Expensicons.Twitter,
         link: 'https://www.twitter.com/expensify',
     },
     {
-        iconURL: Expensicons.Android,
+        iconURL: Expensicons.Instagram,
         link: 'http://www.instagram.com/expensify',
     },
     {
-        iconURL: Expensicons.Chair,
+        iconURL: Expensicons.Facebook,
         link: 'https://www.facebook.com/expensify',
     },
     {
-        iconURL: Expensicons.CreditCard,
+        iconURL: Expensicons.Linkedin,
         link: 'http://www.linkedin.com/company/expensify',
     },
 ];
 
 const Socials = () => (
-    <>
-        <Text>
-            {_.map(socialsList, social => (
-                <Pressable
-                    onPress={() => {
-                        Linking.openURL(social.link);
-                    }}
-                    style={styles.pr2}
-                    key={social.link}
-                >
-                    {({hovered}) => (
-                        <Icon src={social.iconURL} height={18} width={18} fill={hovered ? themeColors.link : themeColors.textLight} />
-                    )}
-                </Pressable>
-            ))}
-        </Text>
-
-    </>
+    <Text>
+        {_.map(socialsList, social => (
+            <Pressable
+                onPress={() => {
+                    Linking.openURL(social.link);
+                }}
+                style={styles.pr1}
+                key={social.link}
+            >
+                {({hovered}) => (
+                    <Icon src={social.iconURL} height={24} width={24} fill={hovered ? themeColors.link : themeColors.textLight} />
+                )}
+            </Pressable>
+        ))}
+    </Text>
 );
 
 Socials.displayName = 'Socials';
diff --git a/src/pages/signin/TermsAndLicenses.js b/src/pages/signin/TermsAndLicenses.js
index 2bec4a3fb1f6..5c047f712fc0 100644
--- a/src/pages/signin/TermsAndLicenses.js
+++ b/src/pages/signin/TermsAndLicenses.js
@@ -10,10 +10,12 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize
 
 import LocalePicker from '../../components/LocalePicker';
 
+const currentYear = new Date().getFullYear();
+
 const TermsAndLicenses = props => (
     <>
         <Text style={[styles.textExtraSmallSupporting, styles.mb2]}>
-            {props.translate('termsOfUse.phrase0')}
+            {`© ${currentYear} Expensify`}
         </Text>
         <Text style={[styles.textExtraSmallSupporting]}>
             {props.translate('termsOfUse.phrase1')}
diff --git a/src/styles/colors.js b/src/styles/colors.js
index f27c7ab9d284..996d3f39ccf7 100644
--- a/src/styles/colors.js
+++ b/src/styles/colors.js
@@ -34,7 +34,7 @@ export default {
     greenDefaultButtonPressed: '#467164',
     greenDefaultButtonDisabled: '#8BA69E',
     midnight: '#002140',
-    greenMidtone: '#23503B',
+    green700: '#23503B',
 
     // DEPRECATED COLORS. Do not reference these colors. Will be deleted in color switch PR.
     gray1: '#FAFAFA',
diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js
index e2ad32582c39..19d71c29bb00 100644
--- a/src/styles/themes/default.js
+++ b/src/styles/themes/default.js
@@ -28,7 +28,7 @@ const darkTheme = {
     successHover: colors.greenHover,
     successPressed: colors.greenPressed,
     transparent: colors.transparent,
-    midtone: colors.greenMidtone,
+    midtone: colors.green700,
 
     // Additional keys
     overlay: colors.greenHighlightBackground,
@@ -61,7 +61,6 @@ const darkTheme = {
     checkBox: colors.green,
     pickerOptionsTextColor: colors.midnight,
     imageCropBackgroundColor: colors.greenIcons,
-    ivory: colors.floralwhite,
 };
 
 const oldTheme = {
@@ -121,7 +120,6 @@ const oldTheme = {
     inverse: colors.dark,
     textLight: colors.white,
     textDark: colors.dark,
-    ivory: colors.floralwhite,
 };
 
 export default darkTheme;

From 2b89ce848370e151f8ad2ea709da57408ef85df7 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Mon, 13 Feb 2023 12:45:07 -0800
Subject: [PATCH 15/45] Use updated social svgs

---
 assets/images/social-facebook.svg  |  4 ++--
 assets/images/social-instagram.svg | 16 +++++++-------
 assets/images/social-linkedin.svg  |  7 +++---
 assets/images/social-podcast.svg   | 35 ++++++++++--------------------
 assets/images/social-twitter.svg   |  8 +++----
 assets/images/social-youtube.svg   |  8 +++----
 6 files changed, 33 insertions(+), 45 deletions(-)

diff --git a/assets/images/social-facebook.svg b/assets/images/social-facebook.svg
index 2096ece9f5c6..3a966653e688 100644
--- a/assets/images/social-facebook.svg
+++ b/assets/images/social-facebook.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 20 21" style="enable-background:new 0 0 20 21;" xml:space="preserve">
-<path d="M11.2,16.9v-6.1h2l0.2-2.4h-2.2V6.8c0-0.6,0.2-1.1,1.2-1.1h1.2V3.5c-0.2,0-1-0.1-1.9-0.1c-1.9,0-3.1,1.1-3.1,3.1v1.8h-2v2.4
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<path d="M11.2,16.2v-6.1h2l0.2-2.4h-2.2V6.1c0-0.6,0.2-1.1,1.2-1.1h1.2V2.9c-0.2,0-1-0.1-1.9-0.1c-1.9,0-3.1,1.1-3.1,3.1v1.8h-2V10
 	h2.1v6.2H11.2z"/>
 </svg>
diff --git a/assets/images/social-instagram.svg b/assets/images/social-instagram.svg
index b4a130e796f3..79d4aadf374a 100644
--- a/assets/images/social-instagram.svg
+++ b/assets/images/social-instagram.svg
@@ -1,17 +1,17 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 20 21" style="enable-background:new 0 0 20 21;" xml:space="preserve">
-<path d="M10,4.9c1.9,0,2.1,0,2.8,0c0.7,0,1.1,0.1,1.3,0.2c0.3,0.1,0.6,0.3,0.8,0.5c0.2,0.2,0.4,0.5,0.5,0.8c0.1,0.2,0.2,0.6,0.2,1.3
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<path d="M10,4.3c1.9,0,2.1,0,2.8,0c0.7,0,1.1,0.1,1.3,0.2c0.3,0.1,0.6,0.3,0.8,0.5c0.2,0.2,0.4,0.5,0.5,0.8c0.1,0.2,0.2,0.6,0.2,1.3
 	c0,0.7,0,1,0,2.8c0,1.9,0,2.1,0,2.8c0,0.7-0.1,1.1-0.2,1.3c-0.1,0.3-0.3,0.6-0.5,0.8c-0.2,0.2-0.5,0.4-0.8,0.5
 	c-0.2,0.1-0.6,0.2-1.3,0.2c-0.7,0-1,0-2.8,0c-1.9,0-2.1,0-2.8,0c-0.7,0-1.1-0.1-1.3-0.2c-0.3-0.1-0.6-0.3-0.8-0.5
 	c-0.2-0.2-0.4-0.5-0.5-0.8c-0.1-0.2-0.2-0.6-0.2-1.3c0-0.7,0-1,0-2.8c0-1.9,0-2.1,0-2.8c0-0.7,0.1-1.1,0.2-1.3
-	c0.1-0.3,0.3-0.6,0.5-0.8c0.2-0.2,0.5-0.4,0.8-0.5C6.1,5.1,6.5,5,7.2,4.9C7.9,4.9,8.1,4.9,10,4.9z M10,3.6c-1.9,0-2.1,0-2.9,0
-	C6.4,3.7,5.9,3.8,5.4,4C5,4.2,4.6,4.4,4.2,4.8C3.8,5.2,3.5,5.6,3.4,6C3.2,6.5,3.1,7,3,7.7c0,0.7,0,1,0,2.9c0,1.9,0,2.1,0,2.9
+	c0.1-0.3,0.3-0.6,0.5-0.8c0.2-0.2,0.5-0.4,0.8-0.5c0.2-0.1,0.6-0.2,1.3-0.2C7.9,4.3,8.1,4.3,10,4.3z M10,3C8.1,3,7.9,3,7.1,3
+	c-0.7,0-1.3,0.2-1.7,0.3C5,3.5,4.6,3.8,4.2,4.2C3.8,4.6,3.5,5,3.4,5.4C3.2,5.9,3.1,6.4,3,7.1c0,0.7,0,1,0,2.9c0,1.9,0,2.1,0,2.9
 	c0,0.7,0.2,1.3,0.3,1.7c0.2,0.5,0.4,0.9,0.8,1.2c0.4,0.4,0.8,0.6,1.2,0.8c0.4,0.2,1,0.3,1.7,0.3c0.7,0,1,0,2.9,0c1.9,0,2.1,0,2.9,0
 	c0.7,0,1.3-0.2,1.7-0.3c0.5-0.2,0.9-0.4,1.2-0.8c0.4-0.4,0.6-0.8,0.8-1.2c0.2-0.4,0.3-1,0.3-1.7c0-0.7,0-1,0-2.9c0-1.9,0-2.1,0-2.9
-	c0-0.7-0.2-1.3-0.3-1.7c-0.2-0.5-0.4-0.9-0.8-1.2C15.4,4.4,15,4.2,14.6,4c-0.4-0.2-1-0.3-1.7-0.3C12.1,3.6,11.9,3.6,10,3.6z"/>
-<path d="M10,7c-2,0-3.6,1.6-3.6,3.6S8,14.2,10,14.2s3.6-1.6,3.6-3.6S12,7,10,7z M10,13c-1.3,0-2.3-1-2.3-2.3c0-1.3,1-2.3,2.3-2.3
-	s2.3,1,2.3,2.3C12.3,11.9,11.3,13,10,13z"/>
-<path d="M13.7,7.7c0.5,0,0.8-0.4,0.8-0.8s-0.4-0.8-0.8-0.8s-0.8,0.4-0.8,0.8S13.3,7.7,13.7,7.7z"/>
+	c0-0.7-0.2-1.3-0.3-1.7c-0.2-0.5-0.4-0.9-0.8-1.2c-0.4-0.4-0.8-0.6-1.2-0.8c-0.4-0.2-1-0.3-1.7-0.3C12.1,3,11.9,3,10,3z"/>
+<path d="M10,6.4C8,6.4,6.4,8,6.4,10c0,2,1.6,3.6,3.6,3.6c2,0,3.6-1.6,3.6-3.6C13.6,8,12,6.4,10,6.4z M10,12.3c-1.3,0-2.3-1-2.3-2.3
+	c0-1.3,1-2.3,2.3-2.3s2.3,1,2.3,2.3C12.3,11.3,11.3,12.3,10,12.3z"/>
+<path d="M13.7,7.1c0.5,0,0.8-0.4,0.8-0.8s-0.4-0.8-0.8-0.8s-0.8,0.4-0.8,0.8S13.3,7.1,13.7,7.1z"/>
 </svg>
diff --git a/assets/images/social-linkedin.svg b/assets/images/social-linkedin.svg
index 4ee3bb98a884..97a1da8962f4 100644
--- a/assets/images/social-linkedin.svg
+++ b/assets/images/social-linkedin.svg
@@ -1,7 +1,8 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 20 21" style="enable-background:new 0 0 20 21;" xml:space="preserve">
-<path d="M5.1,4.4C4.4,4.4,3.6,5,3.6,5.9s0.6,1.5,1.5,1.5s1.5-0.6,1.5-1.5C6.8,5,6,4.4,5.1,4.4z M3.9,16.9h2.6V8.6H3.9V16.9z
-	 M13.2,8.3c0,0-2-0.1-2.6,1.4v-1H8.1v8.3h2.6v-4.5c0-0.1,0-1.8,1.6-1.8c1.4,0,1.4,2,1.4,2v4.2h2.5V12C16.1,12,16.5,8.3,13.2,8.3z"/>
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<path d="M5.1,3.8c-0.8,0-1.5,0.6-1.5,1.5s0.6,1.5,1.5,1.5s1.5-0.6,1.5-1.5C6.8,4.4,6,3.8,5.1,3.8z M3.9,16.2h2.6V8H3.9V16.2z
+	 M13.2,7.6c0,0-2-0.1-2.6,1.4V8H8.1v8.2h2.6v-4.5c0-0.1,0-1.8,1.6-1.8c1.4,0,1.4,2,1.4,2v4.2h2.5v-4.9C16.1,11.4,16.5,7.6,13.2,7.6z
+	"/>
 </svg>
diff --git a/assets/images/social-podcast.svg b/assets/images/social-podcast.svg
index 3e72d5ac286a..1366699b6823 100644
--- a/assets/images/social-podcast.svg
+++ b/assets/images/social-podcast.svg
@@ -1,28 +1,15 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 20 21" style="enable-background:new 0 0 20 21;" xml:space="preserve">
-<style type="text/css">
-	.st0{clip-path:url(#SVGID_00000156555878171973468280000002171440523883077530_);}
-</style>
-<g>
-	<defs>
-		<rect id="SVGID_1_" y="0.6" width="20" height="20"/>
-	</defs>
-	<clipPath id="SVGID_00000065054174782500876690000010121398893680703657_">
-		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
-	</clipPath>
-	<g style="clip-path:url(#SVGID_00000065054174782500876690000010121398893680703657_);">
-		<path d="M6.2,2C6,2.3,6,2.6,6.2,2.8s0.5,0.1,0.6-0.1C7.2,2.3,7.6,2,8.1,1.9C8.8,1.6,9.4,1.5,10,1.5s1.2,0.1,1.9,0.4
-			c0.5,0.3,0.9,0.5,1.2,0.8c0.1,0.1,0.4,0.2,0.6,0.1s0.4-0.5,0.1-0.8c-0.4-0.4-0.9-0.6-1.5-0.9c-0.8-0.4-1.5-0.5-2.4-0.5
-			S8.4,0.8,7.6,1.1C7.1,1.4,6.6,1.6,6.2,2z"/>
-		<path d="M7.5,4.9c-0.1-0.1-0.2-0.4,0-0.5c0.2-0.2,0.6-0.5,1-0.7s1-0.4,1.5-0.4s1.1,0.1,1.6,0.4C12,3.8,12.2,4,12.5,4.4
-			c0.1,0.1,0.1,0.5-0.1,0.6c-0.1,0.1-0.4,0-0.5-0.1c-0.2-0.2-0.5-0.4-0.6-0.5c-0.4-0.1-0.9-0.2-1.2-0.2S9.1,4.3,8.8,4.4
-			C8.6,4.5,8.4,4.6,8.1,4.9C8,5,7.8,5.1,7.5,4.9z"/>
-		<path d="M10,5.9c-1,0-1.8,0.8-1.8,1.8V12c0,1,0.8,1.8,1.8,1.8s1.8-0.8,1.8-1.8V7.6C11.8,6.6,11,5.9,10,5.9z"/>
-		<path d="M7,10.3C7,10,6.8,9.9,6.6,9.9C6.2,9.8,6.1,10,6.1,10.3V12c0,2,1.5,3.6,3.5,3.9v2.6H7.9c-0.2,0-0.4,0.2-0.4,0.4
-			s0.1,0.5,0.4,0.5h4.4c0.2,0,0.4-0.2,0.4-0.4s-0.2-0.4-0.4-0.4h-1.9V16c2-0.2,3.5-1.9,3.5-3.9v-1.9c0-0.2-0.2-0.4-0.4-0.4
-			c-0.2,0-0.4,0.2-0.4,0.4V12c0,1.6-1.4,3-3,3s-3-1.4-3-3v-1.8H7z"/>
-	</g>
-</g>
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<path d="M6.2,1.4C6,1.6,6,2,6.2,2.1S6.8,2.2,6.9,2c0.4-0.4,0.8-0.6,1.2-0.8C8.8,1,9.4,0.9,10,0.9s1.2,0.1,1.9,0.4
+	c0.5,0.2,0.9,0.5,1.2,0.8c0.1,0.1,0.4,0.2,0.6,0.1s0.4-0.5,0.1-0.8C13.5,1,13,0.8,12.4,0.5C11.6,0.1,10.9,0,10,0S8.4,0.1,7.6,0.5
+	C7.1,0.8,6.6,1,6.2,1.4z"/>
+<path d="M7.5,4.2c-0.1-0.1-0.2-0.4,0-0.5c0.2-0.2,0.6-0.5,1-0.8s1-0.4,1.5-0.4c0.5,0,1.1,0.1,1.6,0.4c0.4,0.1,0.6,0.4,0.9,0.8
+	c0.1,0.1,0.1,0.5-0.1,0.6c-0.1,0.1-0.4,0-0.5-0.1c-0.2-0.2-0.5-0.4-0.6-0.5c-0.4-0.1-0.9-0.2-1.3-0.2c-0.4,0-0.9,0.1-1.2,0.2
+	C8.6,3.9,8.4,4,8.1,4.2C8,4.4,7.7,4.5,7.5,4.2z"/>
+<path d="M10,5.2C9,5.2,8.2,6,8.2,7v4.4c0,1,0.8,1.8,1.8,1.8s1.8-0.8,1.8-1.8V7C11.8,6,11,5.2,10,5.2z"/>
+<path d="M7,9.6c0-0.2-0.2-0.4-0.4-0.4C6.2,9.1,6.1,9.4,6.1,9.6v1.7c0,2,1.5,3.6,3.5,3.9v2.6H7.9c-0.2,0-0.4,0.2-0.4,0.4
+	s0.1,0.5,0.4,0.5h4.4c0.2,0,0.4-0.2,0.4-0.4S12.4,18,12.2,18h-1.9v-2.6c2-0.2,3.5-1.9,3.5-3.9V9.6c0-0.2-0.2-0.4-0.4-0.4
+	c-0.2,0-0.4,0.2-0.4,0.4v1.7c0,1.6-1.4,3-3,3s-3-1.4-3-3V9.6H7z"/>
 </svg>
diff --git a/assets/images/social-twitter.svg b/assets/images/social-twitter.svg
index 03981f10bdd3..6a90f95032bb 100644
--- a/assets/images/social-twitter.svg
+++ b/assets/images/social-twitter.svg
@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 20 21" style="enable-background:new 0 0 20 21;" xml:space="preserve">
-<path d="M16.2,6.9c-0.5,0.2-1,0.4-1.5,0.4c0.5-0.4,0.9-0.9,1.1-1.4c-0.5,0.2-1,0.5-1.6,0.6c-0.4-0.5-1.1-0.9-1.9-0.9
-	c-1.6,0-2.9,1.5-2.5,3.1c-2.1,0-4-1-5.2-2.6C4,7.3,4.2,8.8,5.5,9.6C5,9.5,4.6,9.4,4.2,9.3c0,1.3,0.9,2.3,2,2.5
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<path d="M16.2,6.2c-0.5,0.2-1,0.4-1.5,0.4c0.5-0.4,0.9-0.9,1.1-1.4c-0.5,0.2-1,0.5-1.6,0.6C13.9,5.4,13.1,5,12.4,5
+	c-1.6,0-2.9,1.5-2.5,3.1c-2.1,0-4-1-5.2-2.6C4,6.6,4.2,8.1,5.5,9C5,8.9,4.6,8.8,4.2,8.6c0,1.2,0.9,2.2,2,2.5
 	c-0.2,0.1-0.6,0.1-1.1,0.1c0.4,1,1.2,1.8,2.4,1.8c-1.1,0.9-2.4,1.2-3.8,1c1.1,0.8,2.5,1.1,3.9,1.1c4.8,0,7.5-4,7.2-7.6
-	C15.5,7.9,15.9,7.4,16.2,6.9z"/>
+	C15.5,7.2,15.9,6.8,16.2,6.2z"/>
 </svg>
diff --git a/assets/images/social-youtube.svg b/assets/images/social-youtube.svg
index aa32e0824ea9..834314d27d27 100644
--- a/assets/images/social-youtube.svg
+++ b/assets/images/social-youtube.svg
@@ -1,11 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 20 21" style="enable-background:new 0 0 20 21;" xml:space="preserve">
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill-rule:evenodd;clip-rule:evenodd;}
 </style>
-<path class="st0" d="M4.3,5.2C3.1,5.3,2.2,6.4,2.1,7.7C2,8.8,2,10.1,2,11c0,0.9,0,2.2,0.1,3.3c0.1,1.3,1,2.4,2.2,2.5
-	C5.6,16.9,7.6,17,10,17c2.4,0,4.3-0.1,5.7-0.3c1.2-0.1,2.1-1.2,2.2-2.5c0.1-1.2,0.1-2.5,0.1-3.3c0-0.8,0-2.1-0.1-3.2
-	c-0.1-1.3-1-2.4-2.2-2.5C14.3,5.1,12.4,5,10,5C7.6,5,5.7,5.1,4.3,5.2L4.3,5.2z M8.4,8.4l4.1,2.5l-4.1,2.5V8.4z"/>
+<path class="st0" d="M4.3,4.6C3.1,4.7,2.2,5.8,2.1,7.1C2,8.2,2,9.5,2,10.3c0,0.9,0,2.2,0.1,3.3c0.1,1.3,1,2.4,2.2,2.5
+	c1.4,0.1,3.3,0.3,5.7,0.3c2.4,0,4.3-0.1,5.7-0.3c1.2-0.1,2.1-1.2,2.2-2.5c0.1-1.2,0.1-2.5,0.1-3.3c0-0.8,0-2.1-0.1-3.2
+	c-0.1-1.3-1-2.4-2.2-2.5c-1.3-0.1-3.3-0.2-5.7-0.2C7.6,4.4,5.7,4.5,4.3,4.6L4.3,4.6z M8.4,7.8l4.1,2.5l-4.1,2.5V7.8z"/>
 </svg>

From 6daa0527d015b0c78c46f95d1468b72d3fa6fc17 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Tue, 14 Feb 2023 11:23:52 -0800
Subject: [PATCH 16/45] Fix bug from merge- localizer should have transparent
 BG

---
 src/components/LocalePicker.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/LocalePicker.js b/src/components/LocalePicker.js
index 747433962d9b..d8caa7341296 100644
--- a/src/components/LocalePicker.js
+++ b/src/components/LocalePicker.js
@@ -11,6 +11,7 @@ import Permissions from '../libs/Permissions';
 import * as Localize from '../libs/Localize';
 import Picker from './Picker';
 import styles from '../styles/styles';
+import themeColors from '../styles/themes/default';
 
 const propTypes = {
     /** Indicates which locale the user currently has selected */
@@ -61,6 +62,7 @@ const LocalePicker = (props) => {
             size={props.size}
             value={props.preferredLocale}
             containerStyles={props.size === 'small' ? [styles.pickerContainerSmall] : []}
+            backgroundColor={themeColors.transparent}
         />
     );
 };

From 4ef06f678bbaa0783977be532e524baae2f8fd11 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Tue, 14 Feb 2023 11:36:29 -0800
Subject: [PATCH 17/45] Fix Terms and License paragraph spacing

---
 .../signin/SignInPageLayout/SignInPageContent.js    |  3 ---
 src/pages/signin/TermsAndLicenses.js                | 13 ++++++++-----
 src/styles/styles.js                                |  1 -
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
index 7c5586a4a7ce..b426ba742a09 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageContent.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -71,9 +71,6 @@ const SignInPageContent = props => (
                         {props.children}
                     </SignInPageForm>
                 </View>
-                {/* <View style={[styles.mv5]}>
-                    <TermsAndLicenses />
-                </View> */}
             </KeyboardAvoidingView>
         </View>
     </TouchableDismissKeyboard>
diff --git a/src/pages/signin/TermsAndLicenses.js b/src/pages/signin/TermsAndLicenses.js
index 5c047f712fc0..61dcc7a39fb2 100644
--- a/src/pages/signin/TermsAndLicenses.js
+++ b/src/pages/signin/TermsAndLicenses.js
@@ -11,27 +11,30 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize
 import LocalePicker from '../../components/LocalePicker';
 
 const currentYear = new Date().getFullYear();
+const linkStyles = [styles.textExtraSmallSupporting, styles.link];
 
 const TermsAndLicenses = props => (
     <>
-        <Text style={[styles.textExtraSmallSupporting, styles.mb2]}>
+        <Text style={[styles.textExtraSmallSupporting, styles.mb4]}>
             {`© ${currentYear} Expensify`}
         </Text>
-        <Text style={[styles.textExtraSmallSupporting]}>
+        <Text style={[styles.textExtraSmallSupporting, styles.mb4]}>
             {props.translate('termsOfUse.phrase1')}
-            <TextLink style={[styles.textExtraSmallSupporting, styles.link]} href={CONST.TERMS_URL}>
+            <TextLink style={linkStyles} href={CONST.TERMS_URL}>
                 {' '}
                 {props.translate('termsOfUse.phrase2')}
                 {' '}
             </TextLink>
             {props.translate('termsOfUse.phrase3')}
-            <TextLink style={[styles.textExtraSmallSupporting, styles.link]} href={CONST.PRIVACY_URL}>
+            <TextLink style={linkStyles} href={CONST.PRIVACY_URL}>
                 {' '}
                 {props.translate('termsOfUse.phrase4')}
             </TextLink>
             {'. '}
+        </Text>
+        <Text style={[styles.textExtraSmallSupporting]}>
             {props.translate('termsOfUse.phrase5')}
-            <TextLink style={[styles.textExtraSmallSupporting, styles.link]} href={CONST.LICENSES_URL}>
+            <TextLink style={linkStyles} href={CONST.LICENSES_URL}>
                 {' '}
                 {props.translate('termsOfUse.phrase6')}
             </TextLink>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index c229d242800b..d8f618d7c132 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2956,7 +2956,6 @@ const styles = {
 
     footerTermsContainer: {
         marginVertical: 16,
-        maxWidth: 200,
     },
 
 };

From 0288cde98728eef6692c6e5085e93c8aed38bc53 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Tue, 14 Feb 2023 15:11:29 -0800
Subject: [PATCH 18/45] Clean up styles, use 2 columns when medium screen size

---
 src/pages/signin/SignInPageLayout/Footer.js | 119 ++++++++++----------
 src/pages/signin/SignInPageLayout/index.js  |  61 +++++-----
 src/styles/styles.js                        |  24 ++--
 src/styles/utilities/sizing.js              |   8 ++
 4 files changed, 109 insertions(+), 103 deletions(-)

diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index 635ca131308f..d954ad15bc93 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -4,6 +4,7 @@ import React from 'react';
 import _ from 'underscore';
 import Text from '../../../components/Text';
 import styles from '../../../styles/styles';
+import themeColors from '../../../styles/themes/default';
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import TextLink from '../../../components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
@@ -134,70 +135,68 @@ const columns = [
 ];
 
 const Footer = (props) => {
-    const imageDirection = props.isSmallScreenWidth ? styles.flexRow : styles.flexColumn;
-    const columnDirection = props.isSmallScreenWidth ? styles.flexColumn : styles.flexRow;
+    const isVertical = props.isSmallScreenWidth;
+    const imageDirection = isVertical ? styles.flexRow : styles.flexColumn;
+    const imageStyle = isVertical ? styles.pr0 : styles.alignSelfCenter;
+    const columnDirection = isVertical ? styles.flexColumn : styles.flexRow;
 
-    const pageFooter = [styles.flex1, styles.flexGrow1];
-    const pageFooterWrapper = [styles.footerWrapper, imageDirection];
-    let footerColumns = [styles.footerColumnsContainer, columnDirection];
-    let footerColumn = [styles.footerColumn];
-
-    if (!props.isSmallScreenWidth) {
-        footerColumn = [...footerColumn, styles.p4, styles.flex1];
-        footerColumns = [...footerColumns, styles.footerLargeScreenAlign];
-    }
+    const pageFooterWrapper = [styles.footerWrapper, imageDirection, imageStyle];
+    const footerColumns = [styles.footerColumnsContainer, columnDirection];
+    const footerColumn = isVertical ? [styles.p4] : [styles.p4, styles.flex1, props.isMediumScreenWidth ? styles.mnw50 : styles.mnw25];
 
     return (
-        <View style={pageFooter}>
-            <View style={pageFooterWrapper}>
-                <View style={footerColumns}>
-                    { /** Columns * */ }
-                    {_.map(columns, (column, i) => (
-                        <View
-                            key={column.translationPath + i}
-                            style={footerColumn}
-                        >
-                            <Text style={[styles.textHeadline, styles.footerTitle]}>
-                                {props.translate(column.translationPath)}
-                            </Text>
-                            <View style={[styles.footerRow]}>
-                                { /** Rows * */ }
-                                {_.map(column.rows, (row, j) => (
-                                    <Hoverable
-                                        key={row.translationPath + j}
-                                    >
-                                        {hovered => (
-                                            <TextLink
-                                                style={[styles.footerRow, hovered ? styles.textBlue : {}]}
-                                                href={row.link}
-                                            >
-                                                {props.translate(row.translationPath)}
-                                            </TextLink>
-                                        )}
-                                    </Hoverable>
-                                ))}
-                                {(i === 2) && (
-                                    <View style={styles.mt5}>
-                                        <Socials />
-                                    </View>
-                                )}
-                                {(i === 3) && (
-                                    <View style={styles.footerTermsContainer}>
-                                        <TermsAndLicenses />
-                                    </View>
-                                )}
+        <View style={styles.flex1}>
+            <View style={styles.footerContainer}>
+                <View style={pageFooterWrapper}>
+                    <View style={footerColumns}>
+                        { /** Columns * */ }
+                        {_.map(columns, (column, i) => (
+                            <View
+                                key={column.translationPath + i}
+                                style={footerColumn}
+                            >
+                                <Text style={[styles.textHeadline, styles.footerTitle]}>
+                                    {props.translate(column.translationPath)}
+                                </Text>
+                                <View style={[styles.footerRow]}>
+                                    { /** Rows * */ }
+                                    {_.map(column.rows, (row, j) => (
+                                        <Hoverable
+                                            key={row.translationPath + j}
+                                        >
+                                            {hovered => (
+                                                <TextLink
+                                                    style={[styles.footerRow, hovered ? styles.textBlue : {}]}
+                                                    href={row.link}
+                                                >
+                                                    {props.translate(row.translationPath)}
+                                                </TextLink>
+                                            )}
+                                        </Hoverable>
+                                    ))}
+                                    {(i === 2) && (
+                                        <View style={styles.mt5}>
+                                            <Socials />
+                                        </View>
+                                    )}
+                                    {(i === 3) && (
+                                        <View style={styles.mv4}>
+                                            <TermsAndLicenses />
+                                        </View>
+                                    )}
+                                </View>
                             </View>
-                        </View>
-                    ))}
-                </View>
-                { /** Expensify Wordmark * */ }
-                <View style={[!props.isSmallScreenWidth && styles.footerLargeScreenAlign]}>
-                    {!props.isSmallScreenWidth ? (
-                        <Expensicons.ExpensifyFooterLogo />
-                    )
-                        : (
-                            <Expensicons.ExpensifyFooterLogoVertical height={634} width={111} />
-                        )}
+                        ))}
+                    </View>
+                    { /** Expensify Wordmark * */ }
+                    <View style={[!isVertical && styles.footerBottomLogo]}>
+                        {!isVertical ? (
+                            <Expensicons.ExpensifyFooterLogo />
+                        )
+                            : (
+                                <Expensicons.ExpensifyFooterLogoVertical height={634} width={111} />
+                            )}
+                    </View>
                 </View>
             </View>
         </View>
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index aac553ccfb27..755a847bac2b 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -7,6 +7,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../../../componen
 import styles from '../../../styles/styles';
 import SignInPageGraphics from './SignInPageGraphics';
 import * as StyleUtils from '../../../styles/StyleUtils';
+import ScreenWrapper from '../../../components/ScreenWrapper';
 
 const propTypes = {
     /** The children to show inside the layout */
@@ -32,41 +33,43 @@ const SignInPageLayout = (props) => {
     }
 
     return (
-        <View style={containerStyles}>
-            {!props.isSmallScreenWidth ? (
-                <View style={contentContainerStyles}>
-                    <SignInPageContent
-                        welcomeText={props.welcomeText}
-                        shouldShowWelcomeText={props.shouldShowWelcomeText}
-                    >
-                        {props.children}
-                    </SignInPageContent>
-                    <ScrollView
-                        style={styles.flex1}
-                        contentContainerStyle={[styles.flexGrow1]}
-                    >
-                        <SignInPageGraphics />
-                        <Footer />
-                    </ScrollView>
-                </View>
-            )
-                : (
-                    <ScrollView
-
-                        // To scroll on both mobile and web, we need to set the container height manually
-                        style={StyleUtils.getHeight(1 + props.windowHeight)}
-                        contentContainerStyle={[styles.flexGrow1]}
-                    >
+        <ScreenWrapper>
+            <View style={containerStyles}>
+                {!props.isSmallScreenWidth ? (
+                    <View style={contentContainerStyles}>
                         <SignInPageContent
                             welcomeText={props.welcomeText}
                             shouldShowWelcomeText={props.shouldShowWelcomeText}
                         >
                             {props.children}
                         </SignInPageContent>
-                        <Footer />
-                    </ScrollView>
-                )}
-        </View>
+                        <ScrollView
+                            style={styles.flex1}
+                            contentContainerStyle={[styles.flexGrow1]}
+                        >
+                            <SignInPageGraphics />
+                            <Footer />
+                        </ScrollView>
+                    </View>
+                )
+                    : (
+                        <ScrollView
+
+                            // To scroll on both mobile and web, we need to set the container height manually
+                            style={StyleUtils.getHeight(1 + props.windowHeight)}
+                            contentContainerStyle={[styles.flexGrow1]}
+                        >
+                            <SignInPageContent
+                                welcomeText={props.welcomeText}
+                                shouldShowWelcomeText={props.shouldShowWelcomeText}
+                            >
+                                {props.children}
+                            </SignInPageContent>
+                            <Footer />
+                        </ScrollView>
+                    )}
+            </View>
+        </ScreenWrapper>
     );
 };
 
diff --git a/src/styles/styles.js b/src/styles/styles.js
index d8f618d7c132..39609c6b2b1f 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2918,22 +2918,22 @@ const styles = {
         letterSpacing: 4,
     },
 
-    footerWrapper: {
+    footerContainer: {
         backgroundColor: themeColors.midtone,
+    },
+
+    footerWrapper: {
         fontSize: variables.fontSizeNormal,
         paddingTop: 64,
-        paddingLeft: 17,
+        paddingHorizontal: 32,
+        maxWidth: 1100,
     },
 
     footerColumnsContainer: {
-        maxWidth: 1100,
         flex: 1,
         flexWrap: 'wrap',
         marginBottom: 40,
-    },
-
-    footerColumn: {
-        padding: 15,
+        marginHorizontal: -16,
     },
 
     footerTitle: {
@@ -2949,13 +2949,9 @@ const styles = {
         fontSize: variables.fontSizeMedium,
     },
 
-    footerLargeScreenAlign: {
-        minWidth: '80%',
-        alignSelf: 'center',
-    },
-
-    footerTermsContainer: {
-        marginVertical: 16,
+    footerBottomLogo: {
+        marginTop: 40,
+        width: '100%',
     },
 
 };
diff --git a/src/styles/utilities/sizing.js b/src/styles/utilities/sizing.js
index 70826444f72d..e0d3d730c1a3 100644
--- a/src/styles/utilities/sizing.js
+++ b/src/styles/utilities/sizing.js
@@ -12,6 +12,10 @@ export default {
         width: '20%',
     },
 
+    w25: {
+        width: '25%',
+    },
+
     mnh100: {
         minHeight: '100%',
     },
@@ -24,6 +28,10 @@ export default {
         minWidth: '25%',
     },
 
+    mnw50: {
+        minWidth: '50%',
+    },
+
     w50: {
         width: '50%',
     },

From 9ef6e09802ecd108328c4792506d21a35ad1af16 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Tue, 14 Feb 2023 16:43:29 -0800
Subject: [PATCH 19/45] Ensure that the signin graphic is always the same
 height as the screen

---
 src/languages/es.js                                |  2 +-
 src/pages/signin/SignInPageLayout/Footer.js        |  2 +-
 .../signin/SignInPageLayout/SignInPageGraphics.js  | 14 +++++++++-----
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/languages/es.js b/src/languages/es.js
index c02c4c3a8d74..54f21210d834 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -1183,7 +1183,7 @@ export default {
         genericAddCommentFailureMessage: 'Error inesperado al agregar el comentario, por favor inténtalo más tarde',
     },
     footer: {
-        features: '',
+        features: 'Características',
         expenseManagement: '',
         spendManagement: '',
         expenseReports: '',
diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index d954ad15bc93..c748797f26f8 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -142,7 +142,7 @@ const Footer = (props) => {
 
     const pageFooterWrapper = [styles.footerWrapper, imageDirection, imageStyle];
     const footerColumns = [styles.footerColumnsContainer, columnDirection];
-    const footerColumn = isVertical ? [styles.p4] : [styles.p4, styles.flex1, props.isMediumScreenWidth ? styles.mnw50 : styles.mnw25];
+    const footerColumn = isVertical ? [styles.p4] : [styles.p4, props.isMediumScreenWidth ? styles.w50 : styles.w25];
 
     return (
         <View style={styles.flex1}>
diff --git a/src/pages/signin/SignInPageLayout/SignInPageGraphics.js b/src/pages/signin/SignInPageLayout/SignInPageGraphics.js
index a51961fa2b12..75251b677554 100644
--- a/src/pages/signin/SignInPageLayout/SignInPageGraphics.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageGraphics.js
@@ -1,19 +1,22 @@
 import {Pressable} from 'react-native';
 import React from 'react';
 import _ from 'underscore';
-
-// import styles from '../../../styles/styles';
 import * as StyleUtils from '../../../styles/StyleUtils';
 import * as Link from '../../../libs/actions/Link';
 import SVGImage from '../../../components/SVGImage';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 
 const backgroundStyle = StyleUtils.getLoginPagePromoStyle();
 
-const SignInPageGraphics = () => (
+const propTypes = {
+    ...windowDimensionsPropTypes,
+};
+
+const SignInPageGraphics = props => (
     <>
         <Pressable
             style={[
-                StyleUtils.getHeight('100%'),
+                StyleUtils.getHeight(props.windowHeight),
                 StyleUtils.getBackgroundColorStyle(backgroundStyle.backgroundColor),
             ]}
             onPress={() => {
@@ -32,5 +35,6 @@ const SignInPageGraphics = () => (
 );
 
 SignInPageGraphics.displayName = 'SignInPageGraphics';
+SignInPageGraphics.propTypes = propTypes;
 
-export default SignInPageGraphics;
+export default withWindowDimensions(SignInPageGraphics);

From 7dd193c0547111c8f8e4e598078e379c47b1d931 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Tue, 14 Feb 2023 16:48:47 -0800
Subject: [PATCH 20/45] Add initial spanish translations (needs review)

---
 src/languages/es.js | 48 ++++++++++++++++++++++-----------------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/languages/es.js b/src/languages/es.js
index 54f21210d834..694149b2afe1 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -1184,31 +1184,31 @@ export default {
     },
     footer: {
         features: 'Características',
-        expenseManagement: '',
-        spendManagement: '',
-        expenseReports: '',
-        companyCreditCard: '',
-        receiptScanningApp: '',
-        billPay: '',
-        invoicing: '',
-        CPACard: '',
-        payroll: '',
-        travel: '',
-        resources: '',
-        expensifyApproved: '',
-        pressKit: '',
-        support: '',
+        expenseManagement: 'Gestión de Gastos',
+        spendManagement: 'Gestión de Gastos',
+        expenseReports: 'Informes de Gastos',
+        companyCreditCard: 'Tarjeta de Crédito de Empresa',
+        receiptScanningApp: 'Aplicación de Escaneado de Recibos',
+        billPay: 'Pago de Facturas',
+        invoicing: 'Facturación',
+        CPACard: 'Tarjeta CPA',
+        payroll: 'Nómina',
+        travel: 'Viajes',
+        resources: 'Recursos',
+        expensifyApproved: 'ExpensifyApproved!',
+        pressKit: 'Kit de Prensa',
+        support: 'Soporte',
         expensifyHelp: '',
-        community: '',
-        privacy: '',
-        learnMore: '',
-        aboutExpensify: '',
-        blog: '',
-        jobs: '',
+        community: 'Comunidad',
+        privacy: 'Privacidad',
+        learnMore: 'Más Información',
+        aboutExpensify: 'Acerca de Expensify',
+        blog: 'Blog',
+        jobs: 'Empleo',
         expensifyOrg: '',
-        investorRelations: '',
-        getStarted: '',
-        createAccount: '',
-        logIn: '',
+        investorRelations: 'Relaciones Con Los Inversores',
+        getStarted: 'Comenzar',
+        createAccount: 'Crear una nueva cuenta',
+        logIn: 'Conectarse',
     },
 };

From b8e16665c8e74b148fff5ea9fff375a3c5ee1971 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Wed, 15 Feb 2023 11:05:07 -0800
Subject: [PATCH 21/45] Spanish Fixes

---
 src/languages/es.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/languages/es.js b/src/languages/es.js
index 694149b2afe1..d89e7a682597 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -1208,7 +1208,7 @@ export default {
         expensifyOrg: '',
         investorRelations: 'Relaciones Con Los Inversores',
         getStarted: 'Comenzar',
-        createAccount: 'Crear una nueva cuenta',
+        createAccount: 'Crear Una Cuenta Nueva',
         logIn: 'Conectarse',
     },
 };

From 8d6bd0b734b1bec4e33907b3e5a0939f623df77a Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Wed, 15 Feb 2023 11:46:34 -0800
Subject: [PATCH 22/45] Do not include <HeaderGap> on desktop sign in page

---
 src/components/ScreenWrapper/index.js      | 2 +-
 src/components/ScreenWrapper/propTypes.js  | 4 ++++
 src/pages/signin/SignInPageLayout/index.js | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
index e7ba7e5d0e2e..9bb5fc8892f2 100644
--- a/src/components/ScreenWrapper/index.js
+++ b/src/components/ScreenWrapper/index.js
@@ -97,7 +97,7 @@ class ScreenWrapper extends React.Component {
                             ]}
                         >
                             <KeyboardAvoidingView style={[styles.w100, styles.h100, {maxHeight: this.props.windowHeight}]} behavior={this.props.keyboardAvoidingViewBehavior}>
-                                <HeaderGap />
+                                {this.props.includesHeaderGap && (<HeaderGap />)}
                                 {// If props.children is a function, call it to provide the insets to the children.
                                     _.isFunction(this.props.children)
                                         ? this.props.children({
diff --git a/src/components/ScreenWrapper/propTypes.js b/src/components/ScreenWrapper/propTypes.js
index 46cc9ed6315b..87a004d25bf2 100644
--- a/src/components/ScreenWrapper/propTypes.js
+++ b/src/components/ScreenWrapper/propTypes.js
@@ -28,6 +28,9 @@ const propTypes = {
         /** Indicates when an Alert modal is about to be visible */
         willAlertModalBecomeVisible: PropTypes.bool,
     }),
+
+    /** Whether to include HeaderGap */
+    includesHeaderGap: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -37,6 +40,7 @@ const defaultProps = {
     onTransitionEnd: () => {},
     modal: {},
     keyboardAvoidingViewBehavior: 'padding',
+    includesHeaderGap: true,
 };
 
 export {propTypes, defaultProps};
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 755a847bac2b..678449f7071e 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -33,7 +33,7 @@ const SignInPageLayout = (props) => {
     }
 
     return (
-        <ScreenWrapper>
+        <ScreenWrapper includesHeaderGap={false}>
             <View style={containerStyles}>
                 {!props.isSmallScreenWidth ? (
                     <View style={contentContainerStyles}>

From 41971b31be0fbd14e5a7dc15d5c1519684b8820c Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Wed, 15 Feb 2023 12:23:42 -0800
Subject: [PATCH 23/45] Clean up const, remove any unused styles

---
 src/pages/signin/SignInPageLayout/Footer.js   |  8 +++--
 .../SignInPageLayout/SignInPageGraphics.js    | 36 +++++++++----------
 src/pages/signin/Socials.js                   |  3 +-
 src/styles/styles.js                          |  4 ---
 src/styles/utilities/sizing.js                |  4 ---
 5 files changed, 25 insertions(+), 30 deletions(-)

diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index c748797f26f8..572ae641afd3 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -4,6 +4,7 @@ import React from 'react';
 import _ from 'underscore';
 import Text from '../../../components/Text';
 import styles from '../../../styles/styles';
+import * as StyleUtils from '../../../styles/StyleUtils';
 import themeColors from '../../../styles/themes/default';
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import TextLink from '../../../components/TextLink';
@@ -134,6 +135,9 @@ const columns = [
     },
 ];
 
+const verticalLogoHeight = 634;
+const verticalLogoWidth = 111;
+
 const Footer = (props) => {
     const isVertical = props.isSmallScreenWidth;
     const imageDirection = isVertical ? styles.flexRow : styles.flexColumn;
@@ -146,7 +150,7 @@ const Footer = (props) => {
 
     return (
         <View style={styles.flex1}>
-            <View style={styles.footerContainer}>
+            <View style={StyleUtils.getBackgroundColorStyle(themeColors.midtone)}>
                 <View style={pageFooterWrapper}>
                     <View style={footerColumns}>
                         { /** Columns * */ }
@@ -194,7 +198,7 @@ const Footer = (props) => {
                             <Expensicons.ExpensifyFooterLogo />
                         )
                             : (
-                                <Expensicons.ExpensifyFooterLogoVertical height={634} width={111} />
+                                <Expensicons.ExpensifyFooterLogoVertical height={verticalLogoHeight} width={verticalLogoWidth} />
                             )}
                     </View>
                 </View>
diff --git a/src/pages/signin/SignInPageLayout/SignInPageGraphics.js b/src/pages/signin/SignInPageLayout/SignInPageGraphics.js
index 75251b677554..217a4713836c 100644
--- a/src/pages/signin/SignInPageLayout/SignInPageGraphics.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageGraphics.js
@@ -13,25 +13,23 @@ const propTypes = {
 };
 
 const SignInPageGraphics = props => (
-    <>
-        <Pressable
-            style={[
-                StyleUtils.getHeight(props.windowHeight),
-                StyleUtils.getBackgroundColorStyle(backgroundStyle.backgroundColor),
-            ]}
-            onPress={() => {
-                Link.openExternalLink(backgroundStyle.redirectUri);
-            }}
-            disabled={_.isEmpty(backgroundStyle.redirectUri)}
-        >
-            <SVGImage
-                width="100%"
-                height="100%"
-                src={backgroundStyle.backgroundImageUri}
-                resizeMode="contain"
-            />
-        </Pressable>
-    </>
+    <Pressable
+        style={[
+            StyleUtils.getHeight(props.windowHeight),
+            StyleUtils.getBackgroundColorStyle(backgroundStyle.backgroundColor),
+        ]}
+        onPress={() => {
+            Link.openExternalLink(backgroundStyle.redirectUri);
+        }}
+        disabled={_.isEmpty(backgroundStyle.redirectUri)}
+    >
+        <SVGImage
+            width="100%"
+            height="100%"
+            src={backgroundStyle.backgroundImageUri}
+            resizeMode="contain"
+        />
+    </Pressable>
 );
 
 SignInPageGraphics.displayName = 'SignInPageGraphics';
diff --git a/src/pages/signin/Socials.js b/src/pages/signin/Socials.js
index 41c0a44975c6..3b992aeb9683 100644
--- a/src/pages/signin/Socials.js
+++ b/src/pages/signin/Socials.js
@@ -8,6 +8,7 @@ import Text from '../../components/Text';
 import * as Expensicons from '../../components/Icon/Expensicons';
 import themeColors from '../../styles/themes/default';
 import styles from '../../styles/styles';
+import variables from '../../styles/variables';
 
 const socialsList = [
     {
@@ -43,7 +44,7 @@ const Socials = () => (
                 key={social.link}
             >
                 {({hovered}) => (
-                    <Icon src={social.iconURL} height={24} width={24} fill={hovered ? themeColors.link : themeColors.textLight} />
+                    <Icon src={social.iconURL} height={variables.iconSizeLarge} width={variables.iconSizeLarge} fill={hovered ? themeColors.link : themeColors.textLight} />
                 )}
             </Pressable>
         ))}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 39609c6b2b1f..c08b44f1d72d 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2918,10 +2918,6 @@ const styles = {
         letterSpacing: 4,
     },
 
-    footerContainer: {
-        backgroundColor: themeColors.midtone,
-    },
-
     footerWrapper: {
         fontSize: variables.fontSizeNormal,
         paddingTop: 64,
diff --git a/src/styles/utilities/sizing.js b/src/styles/utilities/sizing.js
index e0d3d730c1a3..a55774756075 100644
--- a/src/styles/utilities/sizing.js
+++ b/src/styles/utilities/sizing.js
@@ -28,10 +28,6 @@ export default {
         minWidth: '25%',
     },
 
-    mnw50: {
-        minWidth: '50%',
-    },
-
     w50: {
         width: '50%',
     },

From ea92b950c89932d307afa3c3665226d0db4acb78 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Wed, 15 Feb 2023 13:15:36 -0800
Subject: [PATCH 24/45] Spanish fixes

---
 src/languages/es.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/languages/es.js b/src/languages/es.js
index d89e7a682597..2ef7e15c42d8 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -1185,13 +1185,13 @@ export default {
     footer: {
         features: 'Características',
         expenseManagement: 'Gestión de Gastos',
-        spendManagement: 'Gestión de Gastos',
+        spendManagement: 'Control de Gastos',
         expenseReports: 'Informes de Gastos',
         companyCreditCard: 'Tarjeta de Crédito de Empresa',
         receiptScanningApp: 'Aplicación de Escaneado de Recibos',
         billPay: 'Pago de Facturas',
         invoicing: 'Facturación',
-        CPACard: 'Tarjeta CPA',
+        CPACard: 'Tarjeta Para Contables',
         payroll: 'Nómina',
         travel: 'Viajes',
         resources: 'Recursos',

From fe6156652ab679671571b4b01c03d09fd42fafab Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Thu, 16 Feb 2023 10:40:02 -0800
Subject: [PATCH 25/45] Fix extra offline indicator, move login terms

---
 src/components/ScreenWrapper/index.js         |  2 +-
 src/components/ScreenWrapper/propTypes.js     |  3 -
 .../SignInPageLayout/SignInPageContent.js     |  7 ++-
 src/pages/signin/SignInPageLayout/index.js    | 61 +++++++++----------
 src/pages/signin/Terms.js                     | 31 ++++++++++
 src/pages/signin/TermsAndLicenses.js          | 14 -----
 6 files changed, 67 insertions(+), 51 deletions(-)
 create mode 100644 src/pages/signin/Terms.js

diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
index 9bb5fc8892f2..e7ba7e5d0e2e 100644
--- a/src/components/ScreenWrapper/index.js
+++ b/src/components/ScreenWrapper/index.js
@@ -97,7 +97,7 @@ class ScreenWrapper extends React.Component {
                             ]}
                         >
                             <KeyboardAvoidingView style={[styles.w100, styles.h100, {maxHeight: this.props.windowHeight}]} behavior={this.props.keyboardAvoidingViewBehavior}>
-                                {this.props.includesHeaderGap && (<HeaderGap />)}
+                                <HeaderGap />
                                 {// If props.children is a function, call it to provide the insets to the children.
                                     _.isFunction(this.props.children)
                                         ? this.props.children({
diff --git a/src/components/ScreenWrapper/propTypes.js b/src/components/ScreenWrapper/propTypes.js
index 87a004d25bf2..f1237b57a8e6 100644
--- a/src/components/ScreenWrapper/propTypes.js
+++ b/src/components/ScreenWrapper/propTypes.js
@@ -29,8 +29,6 @@ const propTypes = {
         willAlertModalBecomeVisible: PropTypes.bool,
     }),
 
-    /** Whether to include HeaderGap */
-    includesHeaderGap: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -40,7 +38,6 @@ const defaultProps = {
     onTransitionEnd: () => {},
     modal: {},
     keyboardAvoidingViewBehavior: 'padding',
-    includesHeaderGap: true,
 };
 
 export {propTypes, defaultProps};
diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
index b426ba742a09..17116cf3df9a 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageContent.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -6,12 +6,14 @@ import styles from '../../../styles/styles';
 import variables from '../../../styles/variables';
 import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo';
 import Text from '../../../components/Text';
+import Terms from '../Terms';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import SignInPageForm from '../../../components/SignInPageForm';
 import compose from '../../../libs/compose';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView';
 import TouchableDismissKeyboard from '../../../components/TouchableDismissKeyboard';
+
 import * as StyleUtils from '../../../styles/StyleUtils';
 
 const propTypes = {
@@ -34,7 +36,7 @@ const SignInPageContent = props => (
         <View
             style={[
                 StyleUtils.getHeight(props.windowHeight),
-                styles.flex1,
+                !props.isSmallScreenWidth && styles.flex1,
                 styles.signInPageLeftContainer,
                 !props.isSmallScreenWidth && styles.signInPageLeftContainerWide,
             ]}
@@ -71,6 +73,9 @@ const SignInPageContent = props => (
                         {props.children}
                     </SignInPageForm>
                 </View>
+                <View style={[styles.mb8]}>
+                    <Terms />
+                </View>
             </KeyboardAvoidingView>
         </View>
     </TouchableDismissKeyboard>
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 678449f7071e..6877a99a3b13 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -7,7 +7,6 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../../../componen
 import styles from '../../../styles/styles';
 import SignInPageGraphics from './SignInPageGraphics';
 import * as StyleUtils from '../../../styles/StyleUtils';
-import ScreenWrapper from '../../../components/ScreenWrapper';
 
 const propTypes = {
     /** The children to show inside the layout */
@@ -33,43 +32,41 @@ const SignInPageLayout = (props) => {
     }
 
     return (
-        <ScreenWrapper includesHeaderGap={false}>
-            <View style={containerStyles}>
-                {!props.isSmallScreenWidth ? (
-                    <View style={contentContainerStyles}>
+        <View style={containerStyles}>
+            {!props.isSmallScreenWidth ? (
+                <View style={contentContainerStyles}>
+                    <SignInPageContent
+                        welcomeText={props.welcomeText}
+                        shouldShowWelcomeText={props.shouldShowWelcomeText}
+                    >
+                        {props.children}
+                    </SignInPageContent>
+                    <ScrollView
+                        style={[styles.flex1, StyleUtils.getHeight(1 + props.windowHeight)]}
+                        contentContainerStyle={[styles.flexGrow1]}
+                    >
+                        <SignInPageGraphics />
+                        <Footer />
+                    </ScrollView>
+                </View>
+            )
+                : (
+                    <ScrollView
+
+                        // To scroll on both mobile and web, we need to set the container height manually
+                        style={StyleUtils.getHeight(1 + props.windowHeight)}
+                        contentContainerStyle={[styles.flexGrow1]}
+                    >
                         <SignInPageContent
                             welcomeText={props.welcomeText}
                             shouldShowWelcomeText={props.shouldShowWelcomeText}
                         >
                             {props.children}
                         </SignInPageContent>
-                        <ScrollView
-                            style={styles.flex1}
-                            contentContainerStyle={[styles.flexGrow1]}
-                        >
-                            <SignInPageGraphics />
-                            <Footer />
-                        </ScrollView>
-                    </View>
-                )
-                    : (
-                        <ScrollView
-
-                            // To scroll on both mobile and web, we need to set the container height manually
-                            style={StyleUtils.getHeight(1 + props.windowHeight)}
-                            contentContainerStyle={[styles.flexGrow1]}
-                        >
-                            <SignInPageContent
-                                welcomeText={props.welcomeText}
-                                shouldShowWelcomeText={props.shouldShowWelcomeText}
-                            >
-                                {props.children}
-                            </SignInPageContent>
-                            <Footer />
-                        </ScrollView>
-                    )}
-            </View>
-        </ScreenWrapper>
+                        <Footer />
+                    </ScrollView>
+                )}
+        </View>
     );
 };
 
diff --git a/src/pages/signin/Terms.js b/src/pages/signin/Terms.js
new file mode 100644
index 000000000000..bae7a90295d3
--- /dev/null
+++ b/src/pages/signin/Terms.js
@@ -0,0 +1,31 @@
+import React from 'react';
+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';
+
+const linkStyles = [styles.textExtraSmallSupporting, styles.link];
+
+const Terms = props => (
+    <Text style={[styles.textExtraSmallSupporting, styles.mb4]}>
+        {props.translate('termsOfUse.phrase1')}
+        <TextLink style={linkStyles} href={CONST.TERMS_URL}>
+            {' '}
+            {props.translate('termsOfUse.phrase2')}
+            {' '}
+        </TextLink>
+        {props.translate('termsOfUse.phrase3')}
+        <TextLink style={linkStyles} href={CONST.PRIVACY_URL}>
+            {' '}
+            {props.translate('termsOfUse.phrase4')}
+        </TextLink>
+        {'. '}
+    </Text>
+);
+
+Terms.propTypes = {...withLocalizePropTypes};
+Terms.displayName = 'Terms';
+
+export default withLocalize(Terms);
diff --git a/src/pages/signin/TermsAndLicenses.js b/src/pages/signin/TermsAndLicenses.js
index 61dcc7a39fb2..df66d08ed059 100644
--- a/src/pages/signin/TermsAndLicenses.js
+++ b/src/pages/signin/TermsAndLicenses.js
@@ -18,20 +18,6 @@ const TermsAndLicenses = props => (
         <Text style={[styles.textExtraSmallSupporting, styles.mb4]}>
             {`© ${currentYear} Expensify`}
         </Text>
-        <Text style={[styles.textExtraSmallSupporting, styles.mb4]}>
-            {props.translate('termsOfUse.phrase1')}
-            <TextLink style={linkStyles} href={CONST.TERMS_URL}>
-                {' '}
-                {props.translate('termsOfUse.phrase2')}
-                {' '}
-            </TextLink>
-            {props.translate('termsOfUse.phrase3')}
-            <TextLink style={linkStyles} href={CONST.PRIVACY_URL}>
-                {' '}
-                {props.translate('termsOfUse.phrase4')}
-            </TextLink>
-            {'. '}
-        </Text>
         <Text style={[styles.textExtraSmallSupporting]}>
             {props.translate('termsOfUse.phrase5')}
             <TextLink style={linkStyles} href={CONST.LICENSES_URL}>

From 4bcef93282236572e093783d016a1bdbb69185ca Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Thu, 16 Feb 2023 10:59:30 -0800
Subject: [PATCH 26/45] Add URLs to CONST

---
 src/CONST.js                                | 24 +++++++++++
 src/pages/signin/SignInPageLayout/Footer.js | 47 +++++++++++----------
 2 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/src/CONST.js b/src/CONST.js
index 10f2a7e63dec..9eff2349f299 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -889,6 +889,30 @@ const CONST = {
         LEAVE_ROOM: 'leaveRoom',
     },
 
+    FOOTER: {
+        EXPENSE_MANAGEMENT_URL: 'https://use.expensify.com/expense-management',
+        SPEND_MANAGEMENT_URL: 'https://use.expensify.com/spend-management',
+        EXPENSE_REPORTS_URL: 'https://use.expensify.com/expense-reports',
+        COMPANY_CARD_URL: 'https://use.expensify.com/company-credit-card',
+        RECIEPT_SCANNING_URL: 'https://use.expensify.com/receipt-scanning-app',
+        BILL_PAY_URL: 'https://use.expensify.com/bills',
+        INVOICES_URL: 'https://use.expensify.com/invoices',
+        CPA_CARD_URL: 'https://use.expensify.com/cpa-card',
+        PAYROLL_URL: 'https://use.expensify.com/payroll',
+        TRAVEL_URL: 'https://use.expensify.com/travel',
+        EXPENSIFY_APPROVED_URL: 'https://use.expensify.com/accountants',
+        PRESS_KIT_URL: 'https://we.are.expensify.com/press-kit',
+        SUPPORT_URL: 'https://use.expensify.com/support',
+        HELP_URL: 'https://help.expensify.com/',
+        COMMUNITY_URL: 'https://community.expensify.com/',
+        PRIVACY_URL: 'https://use.expensify.com/privacy',
+        ABOUT_URL: 'https://we.are.expensify.com/',
+        BLOG_URL: 'https://blog.expensify.com/',
+        JOBS_URL: 'https://we.are.expensify.com/apply',
+        ORG_URL: 'https://expensify.org/',
+        INVESTOR_RELATIONS_URL: 'https://ir.expensify.com/',
+    },
+
     // These split the maximum decimal value of a signed 64-bit number (9,223,372,036,854,775,807) into parts where none of them are too big to fit into a 32-bit number, so that we can
     // generate them each with a random number generator with only 32-bits of precision.
     MAX_64BIT_LEFT_PART: 92233,
diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index 572ae641afd3..ef3b1201c417 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -14,6 +14,7 @@ import compose from '../../../libs/compose';
 import TermsAndLicenses from '../TermsAndLicenses';
 import Socials from '../Socials';
 import Hoverable from '../../../components/Hoverable';
+import CONST from '../../../CONST';
 
 const propTypes = {
     ...windowDimensionsPropTypes,
@@ -25,43 +26,43 @@ const columns = [
         translationPath: 'footer.features',
         rows: [
             {
-                link: 'https://use.expensify.com/expense-management',
+                link: CONST.FOOTER.EXPENSE_MANAGEMENT_URL,
                 translationPath: 'footer.expenseManagement',
             },
             {
-                link: 'https://use.expensify.com/spend-management',
+                link: CONST.FOOTER.SPEND_MANAGEMENT_URL,
                 translationPath: 'footer.spendManagement',
             },
             {
-                link: 'https://use.expensify.com/expense-reports',
+                link: CONST.FOOTER.EXPENSE_REPORTS_URL,
                 translationPath: 'footer.expenseReports',
             },
             {
-                link: 'https://use.expensify.com/company-credit-card',
+                link: CONST.FOOTER.COMPANY_CARD_URL,
                 translationPath: 'footer.companyCreditCard',
             },
             {
-                link: 'https://use.expensify.com/receipt-scanning-app',
+                link: CONST.FOOTER.RECIEPT_SCANNING_URL,
                 translationPath: 'footer.receiptScanningApp',
             },
             {
-                link: 'https://use.expensify.com/bills',
+                link: CONST.FOOTER.BILL_PAY_URL,
                 translationPath: 'footer.billPay',
             },
             {
-                link: 'https://use.expensify.com/invoices',
+                link: CONST.FOOTER.INVOICES_URL,
                 translationPath: 'footer.invoicing',
             },
             {
-                link: 'https://use.expensify.com/cpa-card',
+                link: CONST.FOOTER.CPA_CARD_URL,
                 translationPath: 'footer.CPACard',
             },
             {
-                link: 'https://use.expensify.com/payroll',
+                link: CONST.FOOTER.PAYROLL_URL,
                 translationPath: 'footer.payroll',
             },
             {
-                link: 'https://use.expensify.com/travel',
+                link: CONST.FOOTER.TRAVEL_URL,
                 translationPath: 'footer.travel',
             },
         ],
@@ -70,27 +71,27 @@ const columns = [
         translationPath: 'footer.resources',
         rows: [
             {
-                link: 'https://use.expensify.com/accountants',
+                link: CONST.FOOTER.EXPENSIFY_APPROVED_URL,
                 translationPath: 'footer.expensifyApproved',
             },
             {
-                link: 'https://we.are.expensify.com/press-kit',
+                link: CONST.FOOTER.PRESS_KIT_URL,
                 translationPath: 'footer.pressKit',
             },
             {
-                link: 'https://use.expensify.com/support',
+                link: CONST.FOOTER.SUPPORT_URL,
                 translationPath: 'footer.support',
             },
             {
-                link: 'https://help.expensify.com/',
+                link: CONST.FOOTER.HELP_URL,
                 translationPath: 'footer.expensifyHelp',
             },
             {
-                link: 'https://community.expensify.com/',
+                link: CONST.FOOTER.COMMUNITY_URL,
                 translationPath: 'footer.community',
             },
             {
-                link: 'https://use.expensify.com/privacy',
+                link: CONST.FOOTER.PRIVACY_URL,
                 translationPath: 'footer.privacy',
             },
         ],
@@ -99,23 +100,23 @@ const columns = [
         translationPath: 'footer.learnMore',
         rows: [
             {
-                link: 'https://we.are.expensify.com/',
+                link: CONST.FOOTER.ABOUT_URL,
                 translationPath: 'footer.aboutExpensify',
             },
             {
-                link: 'https://blog.expensify.com/',
+                link: CONST.FOOTER.BLOG_URL,
                 translationPath: 'footer.blog',
             },
             {
-                link: 'https://we.are.expensify.com/apply',
+                link: CONST.FOOTER.JOBS_URL,
                 translationPath: 'footer.jobs',
             },
             {
-                link: 'https://www.expensify.org/',
+                link: CONST.FOOTER.ORG_URL,
                 translationPath: 'footer.expensifyOrg',
             },
             {
-                link: 'https://ir.expensify.com/',
+                link: CONST.FOOTER.INVESTOR_RELATIONS_URL,
                 translationPath: 'footer.investorRelations',
             },
         ],
@@ -124,11 +125,11 @@ const columns = [
         translationPath: 'footer.getStarted',
         rows: [
             {
-                link: 'https://www.new.expensify.com/',
+                link: CONST.NEW_EXPENSIFY_URL,
                 translationPath: 'footer.createAccount',
             },
             {
-                link: 'https://www.new.expensify.com/',
+                link: CONST.NEW_EXPENSIFY_URL,
                 translationPath: 'footer.logIn',
             },
         ],

From fd74100a476d6f184d20b6294b0bdaf98790ec26 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Thu, 16 Feb 2023 12:45:56 -0800
Subject: [PATCH 27/45] Fix terms on IOS

---
 src/pages/signin/SignInPageLayout/SignInPageContent.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
index 17116cf3df9a..1d2965cbb8e9 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageContent.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -73,7 +73,7 @@ const SignInPageContent = props => (
                         {props.children}
                     </SignInPageForm>
                 </View>
-                <View style={[styles.mb8]}>
+                <View style={[props.isSmallScreenWidth ? styles.flex1 : styles.mv5]}>
                     <Terms />
                 </View>
             </KeyboardAvoidingView>

From 72c4eeb8ca631053557b17058136805789ba129d Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Thu, 16 Feb 2023 17:32:59 -0800
Subject: [PATCH 28/45] Fix spacing for terms

---
 src/pages/signin/SignInPageLayout/SignInPageContent.js | 2 +-
 src/styles/styles.js                                   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
index 1d2965cbb8e9..b430d1078b81 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageContent.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -73,7 +73,7 @@ const SignInPageContent = props => (
                         {props.children}
                     </SignInPageForm>
                 </View>
-                <View style={[props.isSmallScreenWidth ? styles.flex1 : styles.mv5]}>
+                <View style={[props.isSmallScreenWidth ? [styles.flex1, styles.justifyContentCenter, styles.mb4] : styles.mv5]}>
                     <Terms />
                 </View>
             </KeyboardAvoidingView>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index c08b44f1d72d..dc761c550dbe 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -958,7 +958,7 @@ const styles = {
 
     signInPageContentTopSpacer: {
         maxHeight: 132,
-        minHeight: 24,
+        minHeight: 12,
     },
 
     signInPageLeftContainer: {

From f1f5ca22300082d13d94ce3ab711a8746996e19d Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Fri, 17 Feb 2023 10:14:42 -0800
Subject: [PATCH 29/45] Use Dot URL in const, remove extra lines/comments

---
 src/CONST.js                                  | 26 +++++++++----------
 src/pages/signin/SignInPageLayout/Footer.js   |  3 ---
 .../SignInPageLayout/SignInPageContent.js     |  1 -
 src/pages/signin/Socials.js                   |  2 --
 src/pages/signin/TermsAndLicenses.js          |  6 +----
 5 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/src/CONST.js b/src/CONST.js
index 9eff2349f299..1541090a5005 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -890,22 +890,22 @@ const CONST = {
     },
 
     FOOTER: {
-        EXPENSE_MANAGEMENT_URL: 'https://use.expensify.com/expense-management',
-        SPEND_MANAGEMENT_URL: 'https://use.expensify.com/spend-management',
-        EXPENSE_REPORTS_URL: 'https://use.expensify.com/expense-reports',
-        COMPANY_CARD_URL: 'https://use.expensify.com/company-credit-card',
-        RECIEPT_SCANNING_URL: 'https://use.expensify.com/receipt-scanning-app',
-        BILL_PAY_URL: 'https://use.expensify.com/bills',
-        INVOICES_URL: 'https://use.expensify.com/invoices',
-        CPA_CARD_URL: 'https://use.expensify.com/cpa-card',
-        PAYROLL_URL: 'https://use.expensify.com/payroll',
-        TRAVEL_URL: 'https://use.expensify.com/travel',
-        EXPENSIFY_APPROVED_URL: 'https://use.expensify.com/accountants',
+        EXPENSE_MANAGEMENT_URL: `${USE_EXPENSIFY_URL}/expense-management`,
+        SPEND_MANAGEMENT_URL: `${USE_EXPENSIFY_URL}/spend-management`,
+        EXPENSE_REPORTS_URL: `${USE_EXPENSIFY_URL}/expense-reports`,
+        COMPANY_CARD_URL: `${USE_EXPENSIFY_URL}/company-credit-card`,
+        RECIEPT_SCANNING_URL: `${USE_EXPENSIFY_URL}/receipt-scanning-app`,
+        BILL_PAY_URL: `${USE_EXPENSIFY_URL}/bills`,
+        INVOICES_URL: `${USE_EXPENSIFY_URL}/invoices`,
+        CPA_CARD_URL: `${USE_EXPENSIFY_URL}/cpa-card`,
+        PAYROLL_URL: `${USE_EXPENSIFY_URL}/payroll`,
+        TRAVEL_URL: `${USE_EXPENSIFY_URL}/travel`,
+        EXPENSIFY_APPROVED_URL: `${USE_EXPENSIFY_URL}/accountants`,
         PRESS_KIT_URL: 'https://we.are.expensify.com/press-kit',
-        SUPPORT_URL: 'https://use.expensify.com/support',
+        SUPPORT_URL: `${USE_EXPENSIFY_URL}/support`,
         HELP_URL: 'https://help.expensify.com/',
         COMMUNITY_URL: 'https://community.expensify.com/',
-        PRIVACY_URL: 'https://use.expensify.com/privacy',
+        PRIVACY_URL: `${USE_EXPENSIFY_URL}/privacy`,
         ABOUT_URL: 'https://we.are.expensify.com/',
         BLOG_URL: 'https://blog.expensify.com/',
         JOBS_URL: 'https://we.are.expensify.com/apply',
diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index ef3b1201c417..98c7817d626e 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import {View} from 'react-native';
 import React from 'react';
 import _ from 'underscore';
@@ -144,7 +143,6 @@ const Footer = (props) => {
     const imageDirection = isVertical ? styles.flexRow : styles.flexColumn;
     const imageStyle = isVertical ? styles.pr0 : styles.alignSelfCenter;
     const columnDirection = isVertical ? styles.flexColumn : styles.flexRow;
-
     const pageFooterWrapper = [styles.footerWrapper, imageDirection, imageStyle];
     const footerColumns = [styles.footerColumnsContainer, columnDirection];
     const footerColumn = isVertical ? [styles.p4] : [styles.p4, props.isMediumScreenWidth ? styles.w50 : styles.w25];
@@ -193,7 +191,6 @@ const Footer = (props) => {
                             </View>
                         ))}
                     </View>
-                    { /** Expensify Wordmark * */ }
                     <View style={[!isVertical && styles.footerBottomLogo]}>
                         {!isVertical ? (
                             <Expensicons.ExpensifyFooterLogo />
diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
index b430d1078b81..ec0d88719610 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageContent.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -13,7 +13,6 @@ import compose from '../../../libs/compose';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView';
 import TouchableDismissKeyboard from '../../../components/TouchableDismissKeyboard';
-
 import * as StyleUtils from '../../../styles/StyleUtils';
 
 const propTypes = {
diff --git a/src/pages/signin/Socials.js b/src/pages/signin/Socials.js
index 3b992aeb9683..90cfbc5ca246 100644
--- a/src/pages/signin/Socials.js
+++ b/src/pages/signin/Socials.js
@@ -1,10 +1,8 @@
 import React from 'react';
 import _ from 'underscore';
 import {Pressable, Linking} from 'react-native';
-
 import Icon from '../../components/Icon';
 import Text from '../../components/Text';
-
 import * as Expensicons from '../../components/Icon/Expensicons';
 import themeColors from '../../styles/themes/default';
 import styles from '../../styles/styles';
diff --git a/src/pages/signin/TermsAndLicenses.js b/src/pages/signin/TermsAndLicenses.js
index df66d08ed059..ed60a49b1637 100644
--- a/src/pages/signin/TermsAndLicenses.js
+++ b/src/pages/signin/TermsAndLicenses.js
@@ -1,17 +1,13 @@
 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 LocalePicker from '../../components/LocalePicker';
 
 const currentYear = new Date().getFullYear();
-const linkStyles = [styles.textExtraSmallSupporting, styles.link];
 
 const TermsAndLicenses = props => (
     <>
@@ -20,7 +16,7 @@ const TermsAndLicenses = props => (
         </Text>
         <Text style={[styles.textExtraSmallSupporting]}>
             {props.translate('termsOfUse.phrase5')}
-            <TextLink style={linkStyles} href={CONST.LICENSES_URL}>
+            <TextLink style={[styles.textExtraSmallSupporting, styles.link]} href={CONST.LICENSES_URL}>
                 {' '}
                 {props.translate('termsOfUse.phrase6')}
             </TextLink>

From da207760aae7c84da922991fc4931ad11af24ca5 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Fri, 17 Feb 2023 10:23:27 -0800
Subject: [PATCH 30/45] Rename TermsAndLicenses to Licenses

---
 src/pages/signin/{TermsAndLicenses.js => Licenses.js} | 8 ++++----
 src/pages/signin/SignInPageLayout/Footer.js           | 4 ++--
 src/pages/signin/Terms.js                             | 1 -
 3 files changed, 6 insertions(+), 7 deletions(-)
 rename src/pages/signin/{TermsAndLicenses.js => Licenses.js} (85%)

diff --git a/src/pages/signin/TermsAndLicenses.js b/src/pages/signin/Licenses.js
similarity index 85%
rename from src/pages/signin/TermsAndLicenses.js
rename to src/pages/signin/Licenses.js
index ed60a49b1637..c860efa93451 100644
--- a/src/pages/signin/TermsAndLicenses.js
+++ b/src/pages/signin/Licenses.js
@@ -9,7 +9,7 @@ import LocalePicker from '../../components/LocalePicker';
 
 const currentYear = new Date().getFullYear();
 
-const TermsAndLicenses = props => (
+const Licenses = props => (
     <>
         <Text style={[styles.textExtraSmallSupporting, styles.mb4]}>
             {`© ${currentYear} Expensify`}
@@ -28,7 +28,7 @@ const TermsAndLicenses = props => (
     </>
 );
 
-TermsAndLicenses.propTypes = {...withLocalizePropTypes};
-TermsAndLicenses.displayName = 'TermsAndLicenses';
+Licenses.propTypes = {...withLocalizePropTypes};
+Licenses.displayName = 'Licenses';
 
-export default withLocalize(TermsAndLicenses);
+export default withLocalize(Licenses);
diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index 98c7817d626e..a195be5a5243 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -10,7 +10,7 @@ import TextLink from '../../../components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import compose from '../../../libs/compose';
-import TermsAndLicenses from '../TermsAndLicenses';
+import Licenses from '../Licenses';
 import Socials from '../Socials';
 import Hoverable from '../../../components/Hoverable';
 import CONST from '../../../CONST';
@@ -184,7 +184,7 @@ const Footer = (props) => {
                                     )}
                                     {(i === 3) && (
                                         <View style={styles.mv4}>
-                                            <TermsAndLicenses />
+                                            <Licenses />
                                         </View>
                                     )}
                                 </View>
diff --git a/src/pages/signin/Terms.js b/src/pages/signin/Terms.js
index bae7a90295d3..81415bc75409 100644
--- a/src/pages/signin/Terms.js
+++ b/src/pages/signin/Terms.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import styles from '../../styles/styles';
-
 import CONST from '../../CONST';
 import Text from '../../components/Text';
 import TextLink from '../../components/TextLink';

From 12c947efea7fdad00bec3466f72139cc360d663d Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Mon, 20 Feb 2023 22:57:33 -0800
Subject: [PATCH 31/45] Use insets when calculating height of signInContent

---
 .../signin/SignInPageLayout/SignInPageContent.js   |  5 ++---
 src/pages/signin/SignInPageLayout/index.js         | 14 ++++++++------
 src/styles/StyleUtils.js                           |  8 ++++----
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
index ec0d88719610..63a7e602e607 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageContent.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -34,8 +34,7 @@ const SignInPageContent = props => (
     <TouchableDismissKeyboard>
         <View
             style={[
-                StyleUtils.getHeight(props.windowHeight),
-                !props.isSmallScreenWidth && styles.flex1,
+                StyleUtils.getHeight(props.windowHeight - props.insets.top - props.insets.bottom),
                 styles.signInPageLeftContainer,
                 !props.isSmallScreenWidth && styles.signInPageLeftContainerWide,
             ]}
@@ -72,7 +71,7 @@ const SignInPageContent = props => (
                         {props.children}
                     </SignInPageForm>
                 </View>
-                <View style={[props.isSmallScreenWidth ? [styles.flex1, styles.justifyContentCenter, styles.mb4] : styles.mv5]}>
+                <View style={[props.isSmallScreenWidth ? [styles.flex1, styles.justifyContentCenter, styles.pt2] : styles.mv5]}>
                     <Terms />
                 </View>
             </KeyboardAvoidingView>
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 6877a99a3b13..4379eeb69723 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -7,6 +7,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../../../componen
 import styles from '../../../styles/styles';
 import SignInPageGraphics from './SignInPageGraphics';
 import * as StyleUtils from '../../../styles/StyleUtils';
+import scrollViewContentContainerStyles from './signInPageStyles';
 
 const propTypes = {
     /** The children to show inside the layout */
@@ -26,6 +27,9 @@ const SignInPageLayout = (props) => {
     let containerStyles = [styles.flex1, styles.signInPageInner];
     let contentContainerStyles = [styles.flex1, styles.flexRow];
 
+    // To scroll on both mobile and web, we need to set the container height manually
+    const containerHeight = StyleUtils.getHeight(props.windowHeight);
+
     if (props.isSmallScreenWidth) {
         containerStyles = [styles.flex1];
         contentContainerStyles = [styles.flex1, styles.flexColumn];
@@ -42,8 +46,8 @@ const SignInPageLayout = (props) => {
                         {props.children}
                     </SignInPageContent>
                     <ScrollView
-                        style={[styles.flex1, StyleUtils.getHeight(1 + props.windowHeight)]}
-                        contentContainerStyle={[styles.flexGrow1]}
+                        style={[styles.flex1, containerHeight]}
+                        contentContainerStyle={[scrollViewContentContainerStyles]}
                     >
                         <SignInPageGraphics />
                         <Footer />
@@ -52,10 +56,8 @@ const SignInPageLayout = (props) => {
             )
                 : (
                     <ScrollView
-
-                        // To scroll on both mobile and web, we need to set the container height manually
-                        style={StyleUtils.getHeight(1 + props.windowHeight)}
-                        contentContainerStyle={[styles.flexGrow1]}
+                        style={containerHeight}
+                        contentContainerStyle={[scrollViewContentContainerStyles]}
                     >
                         <SignInPageContent
                             welcomeText={props.welcomeText}
diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index 04a5339fdecc..9fab299b9426 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -605,13 +605,13 @@ function hasSafeAreas(windowWidth, windowHeight) {
 }
 
 /**
- * Get variable keyboard height as style
- * @param {Number} keyboardHeight
+ * Get height as style
+ * @param {Number} height
  * @returns {Object}
  */
-function getHeight(keyboardHeight) {
+function getHeight(height) {
     return {
-        height: keyboardHeight,
+        height,
     };
 }
 

From 4f9a32c41516eecdfc54d892ae0be8378ea41995 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Mon, 20 Feb 2023 23:11:04 -0800
Subject: [PATCH 32/45] Move constants into CONST/Variables

---
 src/CONST.js                                  |   8 ++
 src/pages/signin/SignInPageLayout/Footer.js   | 101 +++++++++---------
 .../SignInPageLayout/SignInPageContent.js     |   2 +-
 src/pages/signin/SignInPageLayout/index.js    |  35 +++---
 src/pages/signin/Socials.js                   |  11 +-
 src/styles/styles.js                          |   5 +
 src/styles/variables.js                       |   2 +
 7 files changed, 88 insertions(+), 76 deletions(-)

diff --git a/src/CONST.js b/src/CONST.js
index a45d55b8117d..dafa62212bd9 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -916,6 +916,14 @@ const CONST = {
         INVESTOR_RELATIONS_URL: 'https://ir.expensify.com/',
     },
 
+    SOCIALS: {
+        PODCAST: 'https://we.are.expensify.com/podcast',
+        TWITTER: 'https://www.twitter.com/expensify',
+        INSTAGRAM: 'http://www.instagram.com/expensify',
+        FACEBOOK: 'https://www.facebook.com/expensify',
+        LINKEDIN: 'http://www.linkedin.com/company/expensify',
+    },
+
     // These split the maximum decimal value of a signed 64-bit number (9,223,372,036,854,775,807) into parts where none of them are too big to fit into a 32-bit number, so that we can
     // generate them each with a random number generator with only 32-bits of precision.
     MAX_64BIT_LEFT_PART: 92233,
diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index a195be5a5243..d1b55b4ef4d4 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -3,8 +3,7 @@ import React from 'react';
 import _ from 'underscore';
 import Text from '../../../components/Text';
 import styles from '../../../styles/styles';
-import * as StyleUtils from '../../../styles/StyleUtils';
-import themeColors from '../../../styles/themes/default';
+import variables from '../../../styles/variables';
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import TextLink from '../../../components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
@@ -135,9 +134,6 @@ const columns = [
     },
 ];
 
-const verticalLogoHeight = 634;
-const verticalLogoWidth = 111;
-
 const Footer = (props) => {
     const isVertical = props.isSmallScreenWidth;
     const imageDirection = isVertical ? styles.flexRow : styles.flexColumn;
@@ -148,57 +144,56 @@ const Footer = (props) => {
     const footerColumn = isVertical ? [styles.p4] : [styles.p4, props.isMediumScreenWidth ? styles.w50 : styles.w25];
 
     return (
-        <View style={styles.flex1}>
-            <View style={StyleUtils.getBackgroundColorStyle(themeColors.midtone)}>
-                <View style={pageFooterWrapper}>
-                    <View style={footerColumns}>
-                        { /** Columns * */ }
-                        {_.map(columns, (column, i) => (
-                            <View
-                                key={column.translationPath + i}
-                                style={footerColumn}
-                            >
-                                <Text style={[styles.textHeadline, styles.footerTitle]}>
-                                    {props.translate(column.translationPath)}
-                                </Text>
-                                <View style={[styles.footerRow]}>
-                                    { /** Rows * */ }
-                                    {_.map(column.rows, (row, j) => (
-                                        <Hoverable
-                                            key={row.translationPath + j}
-                                        >
-                                            {hovered => (
-                                                <TextLink
-                                                    style={[styles.footerRow, hovered ? styles.textBlue : {}]}
-                                                    href={row.link}
-                                                >
-                                                    {props.translate(row.translationPath)}
-                                                </TextLink>
-                                            )}
-                                        </Hoverable>
-                                    ))}
-                                    {(i === 2) && (
-                                        <View style={styles.mt5}>
-                                            <Socials />
-                                        </View>
-                                    )}
-                                    {(i === 3) && (
-                                        <View style={styles.mv4}>
-                                            <Licenses />
-                                        </View>
-                                    )}
-                                </View>
+        <View style={styles.footer}>
+            <View style={pageFooterWrapper}>
+                <View style={footerColumns}>
+                    { /** Columns * */ }
+                    {_.map(columns, (column, i) => (
+                        <View
+                            key={column.translationPath}
+                            style={footerColumn}
+                        >
+                            <Text style={[styles.textHeadline, styles.footerTitle]}>
+                                {props.translate(column.translationPath)}
+                            </Text>
+                            <View style={[styles.footerRow]}>
+                                { /** Rows * */ }
+                                {_.map(column.rows, row => (
+                                    <Hoverable
+                                        key={row.translationPath}
+                                    >
+                                        {hovered => (
+                                            <TextLink
+                                                style={[styles.footerRow, hovered ? styles.textBlue : {}]}
+                                                href={row.link}
+                                            >
+                                                {props.translate(row.translationPath)}
+                                            </TextLink>
+                                        )}
+                                    </Hoverable>
+                                ))}
+                                {(i === 2) && (
+                                    <View style={styles.mt5}>
+                                        <Socials />
+                                    </View>
+                                )}
+                                {(i === 3) && (
+                                    <View style={styles.mv4}>
+                                        <Licenses />
+                                    </View>
+                                )}
                             </View>
-                        ))}
-                    </View>
-                    <View style={[!isVertical && styles.footerBottomLogo]}>
-                        {!isVertical ? (
+                        </View>
+                    ))}
+                </View>
+                <View style={[!isVertical && styles.footerBottomLogo]}>
+                    {!isVertical
+                        ? (
                             <Expensicons.ExpensifyFooterLogo />
                         )
-                            : (
-                                <Expensicons.ExpensifyFooterLogoVertical height={verticalLogoHeight} width={verticalLogoWidth} />
-                            )}
-                    </View>
+                        : (
+                            <Expensicons.ExpensifyFooterLogoVertical height={variables.verticalLogoHeight} width={variables.verticalLogoWidth} />
+                        )}
                 </View>
             </View>
         </View>
diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
index 63a7e602e607..9b6cb0cb5ec3 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageContent.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -71,7 +71,7 @@ const SignInPageContent = props => (
                         {props.children}
                     </SignInPageForm>
                 </View>
-                <View style={[props.isSmallScreenWidth ? [styles.flex1, styles.justifyContentCenter, styles.pt2] : styles.mv5]}>
+                <View style={props.isSmallScreenWidth ? [styles.flex1, styles.justifyContentCenter, styles.pt2] : styles.mv5}>
                     <Terms />
                 </View>
             </KeyboardAvoidingView>
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 4379eeb69723..af71a971444f 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -37,23 +37,24 @@ const SignInPageLayout = (props) => {
 
     return (
         <View style={containerStyles}>
-            {!props.isSmallScreenWidth ? (
-                <View style={contentContainerStyles}>
-                    <SignInPageContent
-                        welcomeText={props.welcomeText}
-                        shouldShowWelcomeText={props.shouldShowWelcomeText}
-                    >
-                        {props.children}
-                    </SignInPageContent>
-                    <ScrollView
-                        style={[styles.flex1, containerHeight]}
-                        contentContainerStyle={[scrollViewContentContainerStyles]}
-                    >
-                        <SignInPageGraphics />
-                        <Footer />
-                    </ScrollView>
-                </View>
-            )
+            {!props.isSmallScreenWidth
+                ? (
+                    <View style={contentContainerStyles}>
+                        <SignInPageContent
+                            welcomeText={props.welcomeText}
+                            shouldShowWelcomeText={props.shouldShowWelcomeText}
+                        >
+                            {props.children}
+                        </SignInPageContent>
+                        <ScrollView
+                            style={[styles.flex1, containerHeight]}
+                            contentContainerStyle={[scrollViewContentContainerStyles]}
+                        >
+                            <SignInPageGraphics />
+                            <Footer />
+                        </ScrollView>
+                    </View>
+                )
                 : (
                     <ScrollView
                         style={containerHeight}
diff --git a/src/pages/signin/Socials.js b/src/pages/signin/Socials.js
index 90cfbc5ca246..b0317bd861e3 100644
--- a/src/pages/signin/Socials.js
+++ b/src/pages/signin/Socials.js
@@ -7,27 +7,28 @@ import * as Expensicons from '../../components/Icon/Expensicons';
 import themeColors from '../../styles/themes/default';
 import styles from '../../styles/styles';
 import variables from '../../styles/variables';
+import CONST from '../../CONST';
 
 const socialsList = [
     {
         iconURL: Expensicons.Podcast,
-        link: 'https://we.are.expensify.com/podcast',
+        link: CONST.SOCIALS.PODCAST,
     },
     {
         iconURL: Expensicons.Twitter,
-        link: 'https://www.twitter.com/expensify',
+        link: CONST.SOCIALS.TWITTER,
     },
     {
         iconURL: Expensicons.Instagram,
-        link: 'http://www.instagram.com/expensify',
+        link: CONST.SOCIALS.INSTAGRAM,
     },
     {
         iconURL: Expensicons.Facebook,
-        link: 'https://www.facebook.com/expensify',
+        link: CONST.SOCIALS.FACEBOOK,
     },
     {
         iconURL: Expensicons.Linkedin,
-        link: 'http://www.linkedin.com/company/expensify',
+        link: CONST.SOCIALS.LINKEDIN,
     },
 ];
 
diff --git a/src/styles/styles.js b/src/styles/styles.js
index dc761c550dbe..92d2fe386acd 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2918,6 +2918,11 @@ const styles = {
         letterSpacing: 4,
     },
 
+    footer: {
+        flex: 1,
+        backgroundColor: themeColors.midtone,
+    },
+
     footerWrapper: {
         fontSize: variables.fontSizeNormal,
         paddingTop: 64,
diff --git a/src/styles/variables.js b/src/styles/variables.js
index a3710ff435e3..252ef848816f 100644
--- a/src/styles/variables.js
+++ b/src/styles/variables.js
@@ -97,4 +97,6 @@ export default {
     modalTopBigIconHeight: 244,
     modalWordmarkWidth: 154,
     modalWordmarkHeight: 34,
+    verticalLogoHeight: 634,
+    verticalLogoWidth: 111,
 };

From 3105818895a929ea68852f791f9cca90f63b8dae Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Tue, 21 Feb 2023 00:00:15 -0800
Subject: [PATCH 33/45] Revert removing outside view in Footer

---
 src/pages/signin/SignInPageLayout/Footer.js   | 100 +++++++++---------
 .../SignInPageLayout/SignInPageContent.js     |   2 +-
 src/styles/styles.js                          |   1 -
 3 files changed, 52 insertions(+), 51 deletions(-)

diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index d1b55b4ef4d4..f458b6f2b9b2 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -144,56 +144,58 @@ const Footer = (props) => {
     const footerColumn = isVertical ? [styles.p4] : [styles.p4, props.isMediumScreenWidth ? styles.w50 : styles.w25];
 
     return (
-        <View style={styles.footer}>
-            <View style={pageFooterWrapper}>
-                <View style={footerColumns}>
-                    { /** Columns * */ }
-                    {_.map(columns, (column, i) => (
-                        <View
-                            key={column.translationPath}
-                            style={footerColumn}
-                        >
-                            <Text style={[styles.textHeadline, styles.footerTitle]}>
-                                {props.translate(column.translationPath)}
-                            </Text>
-                            <View style={[styles.footerRow]}>
-                                { /** Rows * */ }
-                                {_.map(column.rows, row => (
-                                    <Hoverable
-                                        key={row.translationPath}
-                                    >
-                                        {hovered => (
-                                            <TextLink
-                                                style={[styles.footerRow, hovered ? styles.textBlue : {}]}
-                                                href={row.link}
-                                            >
-                                                {props.translate(row.translationPath)}
-                                            </TextLink>
-                                        )}
-                                    </Hoverable>
-                                ))}
-                                {(i === 2) && (
-                                    <View style={styles.mt5}>
-                                        <Socials />
-                                    </View>
-                                )}
-                                {(i === 3) && (
-                                    <View style={styles.mv4}>
-                                        <Licenses />
-                                    </View>
-                                )}
+        <View style={styles.flex1}>
+            <View style={styles.footer}>
+                <View style={pageFooterWrapper}>
+                    <View style={footerColumns}>
+                        { /** Columns * */ }
+                        {_.map(columns, (column, i) => (
+                            <View
+                                key={column.translationPath}
+                                style={footerColumn}
+                            >
+                                <Text style={[styles.textHeadline, styles.footerTitle]}>
+                                    {props.translate(column.translationPath)}
+                                </Text>
+                                <View style={[styles.footerRow]}>
+                                    { /** Rows * */ }
+                                    {_.map(column.rows, row => (
+                                        <Hoverable
+                                            key={row.translationPath}
+                                        >
+                                            {hovered => (
+                                                <TextLink
+                                                    style={[styles.footerRow, hovered ? styles.textBlue : {}]}
+                                                    href={row.link}
+                                                >
+                                                    {props.translate(row.translationPath)}
+                                                </TextLink>
+                                            )}
+                                        </Hoverable>
+                                    ))}
+                                    {(i === 2) && (
+                                        <View style={styles.mt5}>
+                                            <Socials />
+                                        </View>
+                                    )}
+                                    {(i === 3) && (
+                                        <View style={styles.mv4}>
+                                            <Licenses />
+                                        </View>
+                                    )}
+                                </View>
                             </View>
-                        </View>
-                    ))}
-                </View>
-                <View style={[!isVertical && styles.footerBottomLogo]}>
-                    {!isVertical
-                        ? (
-                            <Expensicons.ExpensifyFooterLogo />
-                        )
-                        : (
-                            <Expensicons.ExpensifyFooterLogoVertical height={variables.verticalLogoHeight} width={variables.verticalLogoWidth} />
-                        )}
+                        ))}
+                    </View>
+                    <View style={[!isVertical && styles.footerBottomLogo]}>
+                        {!isVertical
+                            ? (
+                                <Expensicons.ExpensifyFooterLogo />
+                            )
+                            : (
+                                <Expensicons.ExpensifyFooterLogoVertical height={variables.verticalLogoHeight} width={variables.verticalLogoWidth} />
+                            )}
+                    </View>
                 </View>
             </View>
         </View>
diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
index 9b6cb0cb5ec3..586ffa6b5b8e 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageContent.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -71,7 +71,7 @@ const SignInPageContent = props => (
                         {props.children}
                     </SignInPageForm>
                 </View>
-                <View style={props.isSmallScreenWidth ? [styles.flex1, styles.justifyContentCenter, styles.pt2] : styles.mv5}>
+                <View style={props.isSmallScreenWidth ? [styles.justifyContentCenter, styles.mb5] : styles.mv5}>
                     <Terms />
                 </View>
             </KeyboardAvoidingView>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 92d2fe386acd..35bf5d60ee0d 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2919,7 +2919,6 @@ const styles = {
     },
 
     footer: {
-        flex: 1,
         backgroundColor: themeColors.midtone,
     },
 

From a8af083b7bb83f3a107a06fd09964f68d8ae2276 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Tue, 21 Feb 2023 10:02:34 -0800
Subject: [PATCH 34/45] Simplify bottom terms style

---
 src/pages/signin/SignInPageLayout/SignInPageContent.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
index 586ffa6b5b8e..4ea1aa46a816 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageContent.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -71,7 +71,7 @@ const SignInPageContent = props => (
                         {props.children}
                     </SignInPageForm>
                 </View>
-                <View style={props.isSmallScreenWidth ? [styles.justifyContentCenter, styles.mb5] : styles.mv5}>
+                <View style={styles.mb8}>
                     <Terms />
                 </View>
             </KeyboardAvoidingView>

From 4c0f3070a9a997fb7a16d497d7ccde149e21d679 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Tue, 21 Feb 2023 14:02:52 -0800
Subject: [PATCH 35/45] Ensure works on mobile web and mobile

---
 src/pages/signin/SignInPageLayout/SignInPageContent.js      | 4 ++--
 src/pages/signin/SignInPageLayout/index.js                  | 2 +-
 src/pages/signin/SignInPageLayout/signInPageStyles/index.js | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
index 2170bf8ecd57..661363881356 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageContent.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -31,9 +31,9 @@ const propTypes = {
 
 const SignInPageContent = props => (
     <ScrollView
-        contentContainerStyle={[StyleUtils.getHeight(props.windowHeight - props.insets.top - props.insets.bottom), styles.signInPageLeftContainer]}
+        contentContainerStyle={[styles.flex1, styles.signInPageLeftContainer]}
         keyboardShouldPersistTaps="handled"
-        style={[!props.isSmallScreenWidth && styles.signInPageLeftContainerWide]}
+        style={[StyleUtils.getHeight(props.windowHeight - props.insets.top - props.insets.bottom), !props.isSmallScreenWidth && styles.signInPageLeftContainerWide]}
     >
         <KeyboardAvoidingView
             behavior="padding"
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index af71a971444f..650dd064d4dc 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -58,7 +58,7 @@ const SignInPageLayout = (props) => {
                 : (
                     <ScrollView
                         style={containerHeight}
-                        contentContainerStyle={[scrollViewContentContainerStyles]}
+                        contentContainerStyle={scrollViewContentContainerStyles}
                     >
                         <SignInPageContent
                             welcomeText={props.welcomeText}
diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles/index.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
index 9cb9a43bc197..5067a61f23ca 100644
--- a/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
+++ b/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
@@ -1,5 +1,5 @@
 import styles from '../../../../styles/styles';
 
-const scrollViewContentContainerStyles = styles.mnh100;
+const scrollViewContentContainerStyles = [styles.flex1, styles.mnh100];
 
 export default scrollViewContentContainerStyles;

From e180bb7e11598117b23320e4f151813d2fd155b2 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Tue, 21 Feb 2023 14:20:57 -0800
Subject: [PATCH 36/45] Update scrollViewContentContainerStyles

---
 .../SignInPageLayout/signInPageStyles/index.android.js       | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 src/pages/signin/SignInPageLayout/signInPageStyles/index.android.js

diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles/index.android.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.android.js
new file mode 100644
index 000000000000..9cb9a43bc197
--- /dev/null
+++ b/src/pages/signin/SignInPageLayout/signInPageStyles/index.android.js
@@ -0,0 +1,5 @@
+import styles from '../../../../styles/styles';
+
+const scrollViewContentContainerStyles = styles.mnh100;
+
+export default scrollViewContentContainerStyles;

From 785e3699812b0b52b03b6287daea9075a81e912a Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Tue, 21 Feb 2023 18:08:51 -0800
Subject: [PATCH 37/45] Fix not being able to click continue with keyboard open

---
 src/pages/signin/SignInPageLayout/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 650dd064d4dc..3c9fe2976d2f 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -59,6 +59,8 @@ const SignInPageLayout = (props) => {
                     <ScrollView
                         style={containerHeight}
                         contentContainerStyle={scrollViewContentContainerStyles}
+                        keyboardShouldPersistTaps="handled"
+                        keyboardDismissMode="on-drag"
                     >
                         <SignInPageContent
                             welcomeText={props.welcomeText}

From 01f02c899808130214767972adb1bfcc7efa8871 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Wed, 22 Feb 2023 22:10:19 -0800
Subject: [PATCH 38/45] Test using flex styling

---
 .../AppNavigator/defaultScreenOptions.js      |  2 ++
 src/pages/signin/SignInPageLayout/Footer.js   |  2 +-
 .../SignInPageLayout/SignInPageContent.js     |  5 +++-
 src/pages/signin/SignInPageLayout/index.js    | 26 +++++++++++--------
 .../signInPageStyles/index.js                 |  2 +-
 .../{index.android.js => index.native.js}     |  0
 6 files changed, 23 insertions(+), 14 deletions(-)
 rename src/pages/signin/SignInPageLayout/signInPageStyles/{index.android.js => index.native.js} (100%)

diff --git a/src/libs/Navigation/AppNavigator/defaultScreenOptions.js b/src/libs/Navigation/AppNavigator/defaultScreenOptions.js
index f22e7d905768..db743f651702 100644
--- a/src/libs/Navigation/AppNavigator/defaultScreenOptions.js
+++ b/src/libs/Navigation/AppNavigator/defaultScreenOptions.js
@@ -1,6 +1,8 @@
 const defaultScreenOptions = {
     cardStyle: {
         overflow: 'visible',
+
+        flex: 1,
     },
     headerShown: false,
     animationTypeForReplace: 'pop',
diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index f458b6f2b9b2..7b3da1fa59de 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -144,7 +144,7 @@ const Footer = (props) => {
     const footerColumn = isVertical ? [styles.p4] : [styles.p4, props.isMediumScreenWidth ? styles.w50 : styles.w25];
 
     return (
-        <View style={styles.flex1}>
+        <View style={[styles.flex1]}>
             <View style={styles.footer}>
                 <View style={pageFooterWrapper}>
                     <View style={footerColumns}>
diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
index 661363881356..1ca5f163b026 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageContent.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import React from 'react';
 import {ScrollView, View} from 'react-native';
 import PropTypes from 'prop-types';
@@ -13,6 +14,8 @@ import compose from '../../../libs/compose';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView';
 import * as StyleUtils from '../../../styles/StyleUtils';
+import scrollViewContentContainerStyles from './signInPageStyles';
+import Footer from './Footer';
 
 const propTypes = {
     /** The children to show inside the layout */
@@ -33,7 +36,7 @@ const SignInPageContent = props => (
     <ScrollView
         contentContainerStyle={[styles.flex1, styles.signInPageLeftContainer]}
         keyboardShouldPersistTaps="handled"
-        style={[StyleUtils.getHeight(props.windowHeight - props.insets.top - props.insets.bottom), !props.isSmallScreenWidth && styles.signInPageLeftContainerWide]}
+        style={[!props.isSmallScreenWidth && styles.signInPageLeftContainerWide, styles.flex1]}
     >
         <KeyboardAvoidingView
             behavior="padding"
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 3c9fe2976d2f..6c57aaeebb92 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import React from 'react';
 import {View, ScrollView} from 'react-native';
 import PropTypes from 'prop-types';
@@ -47,8 +48,8 @@ const SignInPageLayout = (props) => {
                             {props.children}
                         </SignInPageContent>
                         <ScrollView
-                            style={[styles.flex1, containerHeight]}
-                            contentContainerStyle={[scrollViewContentContainerStyles]}
+                            style={[styles.flex1]}
+                            contentContainerStyle={[styles.flex1]}
                         >
                             <SignInPageGraphics />
                             <Footer />
@@ -57,18 +58,21 @@ const SignInPageLayout = (props) => {
                 )
                 : (
                     <ScrollView
-                        style={containerHeight}
-                        contentContainerStyle={scrollViewContentContainerStyles}
+                        contentContainerStyle={[styles.flex1]}
                         keyboardShouldPersistTaps="handled"
                         keyboardDismissMode="on-drag"
                     >
-                        <SignInPageContent
-                            welcomeText={props.welcomeText}
-                            shouldShowWelcomeText={props.shouldShowWelcomeText}
-                        >
-                            {props.children}
-                        </SignInPageContent>
-                        <Footer />
+                        <View style={[styles.flex1]}>
+                            <SignInPageContent
+                                welcomeText={props.welcomeText}
+                                shouldShowWelcomeText={props.shouldShowWelcomeText}
+                            >
+                                {props.children}
+                            </SignInPageContent>
+                        </View>
+                        <View style={[styles.flex0]}>
+                            <Footer />
+                        </View>
                     </ScrollView>
                 )}
         </View>
diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles/index.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
index 5067a61f23ca..97eba60aab1a 100644
--- a/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
+++ b/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
@@ -1,5 +1,5 @@
 import styles from '../../../../styles/styles';
 
-const scrollViewContentContainerStyles = [styles.flex1, styles.mnh100];
+const scrollViewContentContainerStyles = styles.flex1;
 
 export default scrollViewContentContainerStyles;
diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles/index.android.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js
similarity index 100%
rename from src/pages/signin/SignInPageLayout/signInPageStyles/index.android.js
rename to src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js

From 7c36de9790d7b3db452992cfc5b88369f93afdf7 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Thu, 23 Feb 2023 11:00:57 -0800
Subject: [PATCH 39/45] Works on IOS, safari, android (-terms pushed up), not
 chrome

---
 src/pages/signin/SignInPageLayout/index.js         | 14 ++++++++++----
 .../SignInPageLayout/signInPageStyles/index.ios.js |  7 ++++++-
 .../SignInPageLayout/signInPageStyles/index.js     |  7 ++++++-
 .../signInPageStyles/index.native.js               |  9 +++++++--
 4 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 6c57aaeebb92..1c92144c3ac3 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -1,14 +1,17 @@
 /* eslint-disable no-unused-vars */
 import React from 'react';
 import {View, ScrollView} from 'react-native';
+import {withSafeAreaInsets} from 'react-native-safe-area-context';
 import PropTypes from 'prop-types';
+import compose from '../../../libs/compose';
 import SignInPageContent from './SignInPageContent';
 import Footer from './Footer';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import styles from '../../../styles/styles';
 import SignInPageGraphics from './SignInPageGraphics';
 import * as StyleUtils from '../../../styles/StyleUtils';
-import scrollViewContentContainerStyles from './signInPageStyles';
+// eslint-disable-next-line rulesdir/prefer-import-module-contents
+import {scrollViewContentContainerStyles, useSignInHeightFlex} from './signInPageStyles';
 
 const propTypes = {
     /** The children to show inside the layout */
@@ -58,11 +61,11 @@ const SignInPageLayout = (props) => {
                 )
                 : (
                     <ScrollView
-                        contentContainerStyle={[styles.flex1]}
+                        contentContainerStyle={scrollViewContentContainerStyles}
                         keyboardShouldPersistTaps="handled"
                         keyboardDismissMode="on-drag"
                     >
-                        <View style={[styles.flex1]}>
+                        <View style={[useSignInHeightFlex && styles.flex1, {minHeight: props.windowHeight - props.insets.bottom - props.insets.top}]}>
                             <SignInPageContent
                                 welcomeText={props.welcomeText}
                                 shouldShowWelcomeText={props.shouldShowWelcomeText}
@@ -82,4 +85,7 @@ const SignInPageLayout = (props) => {
 SignInPageLayout.propTypes = propTypes;
 SignInPageLayout.displayName = 'SignInPageLayout';
 
-export default withWindowDimensions(SignInPageLayout);
+export default compose(
+    withWindowDimensions,
+    withSafeAreaInsets,
+)(SignInPageLayout);
diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles/index.ios.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.ios.js
index ca2d15821960..fcb8146159cc 100644
--- a/src/pages/signin/SignInPageLayout/signInPageStyles/index.ios.js
+++ b/src/pages/signin/SignInPageLayout/signInPageStyles/index.ios.js
@@ -2,4 +2,9 @@ import styles from '../../../../styles/styles';
 
 const scrollViewContentContainerStyles = styles.flexGrow1;
 
-export default scrollViewContentContainerStyles;
+const useSignInHeightFlex = false;
+
+export {
+    scrollViewContentContainerStyles,
+    useSignInHeightFlex,
+};
diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles/index.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
index 97eba60aab1a..14be5d3356f9 100644
--- a/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
+++ b/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
@@ -2,4 +2,9 @@ import styles from '../../../../styles/styles';
 
 const scrollViewContentContainerStyles = styles.flex1;
 
-export default scrollViewContentContainerStyles;
+const useSignInHeightFlex = true;
+
+export {
+    scrollViewContentContainerStyles,
+    useSignInHeightFlex,
+};
diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js
index 9cb9a43bc197..fcb8146159cc 100644
--- a/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js
+++ b/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js
@@ -1,5 +1,10 @@
 import styles from '../../../../styles/styles';
 
-const scrollViewContentContainerStyles = styles.mnh100;
+const scrollViewContentContainerStyles = styles.flexGrow1;
 
-export default scrollViewContentContainerStyles;
+const useSignInHeightFlex = false;
+
+export {
+    scrollViewContentContainerStyles,
+    useSignInHeightFlex,
+};

From 6b5840aa0abf17e0817594f32ca78abdf8c1e58d Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Sat, 25 Feb 2023 00:44:21 -0800
Subject: [PATCH 40/45] Standardize keyboards. Allow drag to dismiss on mobile
 platforms, but not web.

---
 src/pages/signin/SignInPageLayout/SignInPageContent.js   | 9 +++------
 src/pages/signin/SignInPageLayout/index.js               | 6 +++---
 .../SignInPageLayout/signInPageStyles/index.ios.js       | 2 ++
 .../signin/SignInPageLayout/signInPageStyles/index.js    | 3 +++
 .../SignInPageLayout/signInPageStyles/index.native.js    | 2 ++
 5 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
index 1ca5f163b026..9bf5689fa1d7 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageContent.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -13,9 +13,6 @@ import SignInPageForm from '../../../components/SignInPageForm';
 import compose from '../../../libs/compose';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView';
-import * as StyleUtils from '../../../styles/StyleUtils';
-import scrollViewContentContainerStyles from './signInPageStyles';
-import Footer from './Footer';
 
 const propTypes = {
     /** The children to show inside the layout */
@@ -70,10 +67,10 @@ const SignInPageContent = props => (
                     {props.children}
                 </SignInPageForm>
             </View>
-            <View style={styles.mb8}>
-                <Terms />
-            </View>
         </KeyboardAvoidingView>
+        <View style={[styles.mb8, styles.signInPageWelcomeTextContainer, styles.alignSelfCenter]}>
+            <Terms />
+        </View>
     </ScrollView>
 );
 
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 1c92144c3ac3..a7d3c9c258c6 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -11,7 +11,7 @@ import styles from '../../../styles/styles';
 import SignInPageGraphics from './SignInPageGraphics';
 import * as StyleUtils from '../../../styles/StyleUtils';
 // eslint-disable-next-line rulesdir/prefer-import-module-contents
-import {scrollViewContentContainerStyles, useSignInHeightFlex} from './signInPageStyles';
+import {scrollViewContentContainerStyles, useSignInHeightFlex, keyboardDismissProp} from './signInPageStyles';
 
 const propTypes = {
     /** The children to show inside the layout */
@@ -63,9 +63,9 @@ const SignInPageLayout = (props) => {
                     <ScrollView
                         contentContainerStyle={scrollViewContentContainerStyles}
                         keyboardShouldPersistTaps="handled"
-                        keyboardDismissMode="on-drag"
+                        keyboardDismissMode={keyboardDismissProp}
                     >
-                        <View style={[useSignInHeightFlex && styles.flex1, {minHeight: props.windowHeight - props.insets.bottom - props.insets.top}]}>
+                        <View style={[useSignInHeightFlex ? styles.flex1 : {}, {minHeight: props.windowHeight - props.insets.bottom - props.insets.top}]}>
                             <SignInPageContent
                                 welcomeText={props.welcomeText}
                                 shouldShowWelcomeText={props.shouldShowWelcomeText}
diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles/index.ios.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.ios.js
index fcb8146159cc..91db4283faf4 100644
--- a/src/pages/signin/SignInPageLayout/signInPageStyles/index.ios.js
+++ b/src/pages/signin/SignInPageLayout/signInPageStyles/index.ios.js
@@ -3,8 +3,10 @@ import styles from '../../../../styles/styles';
 const scrollViewContentContainerStyles = styles.flexGrow1;
 
 const useSignInHeightFlex = false;
+const keyboardDismissProp = 'on-drag';
 
 export {
     scrollViewContentContainerStyles,
     useSignInHeightFlex,
+    keyboardDismissProp,
 };
diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles/index.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
index 14be5d3356f9..1828076ca2b2 100644
--- a/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
+++ b/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
@@ -4,7 +4,10 @@ const scrollViewContentContainerStyles = styles.flex1;
 
 const useSignInHeightFlex = true;
 
+const keyboardDismissProp = 'none';
+
 export {
     scrollViewContentContainerStyles,
     useSignInHeightFlex,
+    keyboardDismissProp,
 };
diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js
index fcb8146159cc..91db4283faf4 100644
--- a/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js
+++ b/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js
@@ -3,8 +3,10 @@ import styles from '../../../../styles/styles';
 const scrollViewContentContainerStyles = styles.flexGrow1;
 
 const useSignInHeightFlex = false;
+const keyboardDismissProp = 'on-drag';
 
 export {
     scrollViewContentContainerStyles,
     useSignInHeightFlex,
+    keyboardDismissProp,
 };

From 1b5c961e2825cc3d7dd927d5f726d62c5a746877 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Sat, 25 Feb 2023 01:03:36 -0800
Subject: [PATCH 41/45] Code clean up

---
 .../Navigation/AppNavigator/defaultScreenOptions.js  |  1 -
 .../signin/SignInPageLayout/SignInPageContent.js     |  1 -
 src/pages/signin/SignInPageLayout/index.js           | 12 +++++-------
 .../SignInPageLayout/signInPageStyles/index.ios.js   |  3 ---
 .../SignInPageLayout/signInPageStyles/index.js       |  4 ----
 .../signInPageStyles/index.native.js                 |  3 ---
 src/styles/StyleUtils.js                             | 12 ++++++++++++
 7 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/libs/Navigation/AppNavigator/defaultScreenOptions.js b/src/libs/Navigation/AppNavigator/defaultScreenOptions.js
index db743f651702..3a0c0604d901 100644
--- a/src/libs/Navigation/AppNavigator/defaultScreenOptions.js
+++ b/src/libs/Navigation/AppNavigator/defaultScreenOptions.js
@@ -1,7 +1,6 @@
 const defaultScreenOptions = {
     cardStyle: {
         overflow: 'visible',
-
         flex: 1,
     },
     headerShown: false,
diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
index 9bf5689fa1d7..5ba0ea9ec3f0 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageContent.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import React from 'react';
 import {ScrollView, View} from 'react-native';
 import PropTypes from 'prop-types';
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index a7d3c9c258c6..914cb62afbdb 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import React from 'react';
 import {View, ScrollView} from 'react-native';
 import {withSafeAreaInsets} from 'react-native-safe-area-context';
@@ -10,8 +9,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../../../componen
 import styles from '../../../styles/styles';
 import SignInPageGraphics from './SignInPageGraphics';
 import * as StyleUtils from '../../../styles/StyleUtils';
-// eslint-disable-next-line rulesdir/prefer-import-module-contents
-import {scrollViewContentContainerStyles, useSignInHeightFlex, keyboardDismissProp} from './signInPageStyles';
+import * as signInStyles from './signInPageStyles';
 
 const propTypes = {
     /** The children to show inside the layout */
@@ -32,7 +30,7 @@ const SignInPageLayout = (props) => {
     let contentContainerStyles = [styles.flex1, styles.flexRow];
 
     // To scroll on both mobile and web, we need to set the container height manually
-    const containerHeight = StyleUtils.getHeight(props.windowHeight);
+    const containerHeight = props.windowHeight - props.insets.bottom - props.insets.top;
 
     if (props.isSmallScreenWidth) {
         containerStyles = [styles.flex1];
@@ -61,11 +59,11 @@ const SignInPageLayout = (props) => {
                 )
                 : (
                     <ScrollView
-                        contentContainerStyle={scrollViewContentContainerStyles}
+                        contentContainerStyle={signInStyles.scrollViewContentContainerStyles}
                         keyboardShouldPersistTaps="handled"
-                        keyboardDismissMode={keyboardDismissProp}
+                        keyboardDismissMode={signInStyles.keyboardDismissProp}
                     >
-                        <View style={[useSignInHeightFlex ? styles.flex1 : {}, {minHeight: props.windowHeight - props.insets.bottom - props.insets.top}]}>
+                        <View style={[styles.flex1, StyleUtils.getMinHeight(containerHeight)]}>
                             <SignInPageContent
                                 welcomeText={props.welcomeText}
                                 shouldShowWelcomeText={props.shouldShowWelcomeText}
diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles/index.ios.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.ios.js
index 91db4283faf4..d7d6e74e1afa 100644
--- a/src/pages/signin/SignInPageLayout/signInPageStyles/index.ios.js
+++ b/src/pages/signin/SignInPageLayout/signInPageStyles/index.ios.js
@@ -1,12 +1,9 @@
 import styles from '../../../../styles/styles';
 
 const scrollViewContentContainerStyles = styles.flexGrow1;
-
-const useSignInHeightFlex = false;
 const keyboardDismissProp = 'on-drag';
 
 export {
     scrollViewContentContainerStyles,
-    useSignInHeightFlex,
     keyboardDismissProp,
 };
diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles/index.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
index 1828076ca2b2..1273d72b61a0 100644
--- a/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
+++ b/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
@@ -1,13 +1,9 @@
 import styles from '../../../../styles/styles';
 
 const scrollViewContentContainerStyles = styles.flex1;
-
-const useSignInHeightFlex = true;
-
 const keyboardDismissProp = 'none';
 
 export {
     scrollViewContentContainerStyles,
-    useSignInHeightFlex,
     keyboardDismissProp,
 };
diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js
index 91db4283faf4..d7d6e74e1afa 100644
--- a/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js
+++ b/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js
@@ -1,12 +1,9 @@
 import styles from '../../../../styles/styles';
 
 const scrollViewContentContainerStyles = styles.flexGrow1;
-
-const useSignInHeightFlex = false;
 const keyboardDismissProp = 'on-drag';
 
 export {
     scrollViewContentContainerStyles,
-    useSignInHeightFlex,
     keyboardDismissProp,
 };
diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index 9fab299b9426..bdcdbdbde8bb 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -615,6 +615,17 @@ function getHeight(height) {
     };
 }
 
+/**
+ * Get height as style
+ * @param {Number} minHeight
+ * @returns {Object}
+ */
+function getMinHeight(minHeight) {
+    return {
+        minHeight,
+    };
+}
+
 /**
  * Return style for opacity animation.
  *
@@ -768,6 +779,7 @@ export {
     convertToLTR,
     hasSafeAreas,
     getHeight,
+    getMinHeight,
     fade,
     getHorizontalStackedAvatarBorderStyle,
     getReportWelcomeBackgroundImageStyle,

From 23a2b833d8130a0095e23341000ec8961239b9ec Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Sat, 25 Feb 2023 01:10:24 -0800
Subject: [PATCH 42/45] More clean up

---
 src/pages/signin/SignInPageLayout/index.js                  | 5 ++---
 .../signin/SignInPageLayout/signInPageStyles/index.ios.js   | 6 +-----
 src/pages/signin/SignInPageLayout/signInPageStyles/index.js | 6 +-----
 .../SignInPageLayout/signInPageStyles/index.native.js       | 6 +-----
 4 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 914cb62afbdb..d3561ba6df90 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -9,7 +9,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../../../componen
 import styles from '../../../styles/styles';
 import SignInPageGraphics from './SignInPageGraphics';
 import * as StyleUtils from '../../../styles/StyleUtils';
-import * as signInStyles from './signInPageStyles';
+import scrollViewContentContainerStyles from './signInPageStyles';
 
 const propTypes = {
     /** The children to show inside the layout */
@@ -59,9 +59,8 @@ const SignInPageLayout = (props) => {
                 )
                 : (
                     <ScrollView
-                        contentContainerStyle={signInStyles.scrollViewContentContainerStyles}
+                        contentContainerStyle={scrollViewContentContainerStyles}
                         keyboardShouldPersistTaps="handled"
-                        keyboardDismissMode={signInStyles.keyboardDismissProp}
                     >
                         <View style={[styles.flex1, StyleUtils.getMinHeight(containerHeight)]}>
                             <SignInPageContent
diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles/index.ios.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.ios.js
index d7d6e74e1afa..ca2d15821960 100644
--- a/src/pages/signin/SignInPageLayout/signInPageStyles/index.ios.js
+++ b/src/pages/signin/SignInPageLayout/signInPageStyles/index.ios.js
@@ -1,9 +1,5 @@
 import styles from '../../../../styles/styles';
 
 const scrollViewContentContainerStyles = styles.flexGrow1;
-const keyboardDismissProp = 'on-drag';
 
-export {
-    scrollViewContentContainerStyles,
-    keyboardDismissProp,
-};
+export default scrollViewContentContainerStyles;
diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles/index.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
index 1273d72b61a0..97eba60aab1a 100644
--- a/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
+++ b/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
@@ -1,9 +1,5 @@
 import styles from '../../../../styles/styles';
 
 const scrollViewContentContainerStyles = styles.flex1;
-const keyboardDismissProp = 'none';
 
-export {
-    scrollViewContentContainerStyles,
-    keyboardDismissProp,
-};
+export default scrollViewContentContainerStyles;
diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js
index d7d6e74e1afa..ca2d15821960 100644
--- a/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js
+++ b/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js
@@ -1,9 +1,5 @@
 import styles from '../../../../styles/styles';
 
 const scrollViewContentContainerStyles = styles.flexGrow1;
-const keyboardDismissProp = 'on-drag';
 
-export {
-    scrollViewContentContainerStyles,
-    keyboardDismissProp,
-};
+export default scrollViewContentContainerStyles;

From 48eaa744fa27f833c21725477e265af48cc5b5bd Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Mon, 27 Feb 2023 12:03:29 -0800
Subject: [PATCH 43/45] Move terms into login, clean up offline indicator

---
 src/pages/signin/LoginForm.js                          |  2 --
 src/pages/signin/PasswordForm.js                       |  6 ++++--
 src/pages/signin/ResendValidationForm.js               |  2 --
 src/pages/signin/SignInPage.js                         |  4 +---
 src/pages/signin/SignInPageLayout/SignInPageContent.js | 10 ++++++----
 src/pages/signin/SignInPageLayout/index.js             |  2 +-
 .../signin/ValidateCodeForm/BaseValidateCodeForm.js    |  6 ++++--
 src/styles/styles.js                                   |  2 +-
 8 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/pages/signin/LoginForm.js b/src/pages/signin/LoginForm.js
index 07867403d050..97d3593eae34 100755
--- a/src/pages/signin/LoginForm.js
+++ b/src/pages/signin/LoginForm.js
@@ -17,7 +17,6 @@ import * as ValidationUtils from '../../libs/ValidationUtils';
 import * as LoginUtils from '../../libs/LoginUtils';
 import withToggleVisibilityView, {toggleVisibilityViewPropTypes} from '../../components/withToggleVisibilityView';
 import FormAlertWithSubmitButton from '../../components/FormAlertWithSubmitButton';
-import OfflineIndicator from '../../components/OfflineIndicator';
 import {withNetwork} from '../../components/OnyxProvider';
 import networkPropTypes from '../../components/networkPropTypes';
 import * as ErrorUtils from '../../libs/ErrorUtils';
@@ -211,7 +210,6 @@ class LoginForm extends React.Component {
                         </View>
                     )
                 }
-                <OfflineIndicator containerStyles={[styles.mv1]} />
             </>
         );
     }
diff --git a/src/pages/signin/PasswordForm.js b/src/pages/signin/PasswordForm.js
index 7d8813313089..f2f3c88f0c8e 100755
--- a/src/pages/signin/PasswordForm.js
+++ b/src/pages/signin/PasswordForm.js
@@ -23,8 +23,8 @@ import canFocusInputOnScreenFocus from '../../libs/canFocusInputOnScreenFocus';
 import * as ErrorUtils from '../../libs/ErrorUtils';
 import {withNetwork} from '../../components/OnyxProvider';
 import networkPropTypes from '../../components/networkPropTypes';
-import OfflineIndicator from '../../components/OfflineIndicator';
 import FormHelpMessage from '../../components/FormHelpMessage';
+import Terms from './Terms';
 
 const propTypes = {
     /* Onyx Props */
@@ -225,7 +225,9 @@ class PasswordForm extends React.Component {
                     />
                     <ChangeExpensifyLoginLink onPress={this.clearSignInData} />
                 </View>
-                <OfflineIndicator containerStyles={[styles.mv5]} />
+                <View style={[styles.mt5, styles.signInPageWelcomeTextContainer, styles.alignSelfCenter]}>
+                    <Terms />
+                </View>
             </>
         );
     }
diff --git a/src/pages/signin/ResendValidationForm.js b/src/pages/signin/ResendValidationForm.js
index 7753faa65294..c6230e951be6 100755
--- a/src/pages/signin/ResendValidationForm.js
+++ b/src/pages/signin/ResendValidationForm.js
@@ -14,7 +14,6 @@ import compose from '../../libs/compose';
 import redirectToSignIn from '../../libs/actions/SignInRedirect';
 import Avatar from '../../components/Avatar';
 import * as ReportUtils from '../../libs/ReportUtils';
-import OfflineIndicator from '../../components/OfflineIndicator';
 import networkPropTypes from '../../components/networkPropTypes';
 import {withNetwork} from '../../components/OnyxProvider';
 import DotIndicatorMessage from '../../components/DotIndicatorMessage';
@@ -93,7 +92,6 @@ const ResendValidationForm = (props) => {
                     isDisabled={props.network.isOffline}
                 />
             </View>
-            <OfflineIndicator containerStyles={[styles.mv1]} />
         </>
     );
 };
diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js
index d74119c2907e..323c166b3ec4 100644
--- a/src/pages/signin/SignInPage.js
+++ b/src/pages/signin/SignInPage.js
@@ -1,10 +1,8 @@
 import React, {Component} from 'react';
-import {
-    SafeAreaView,
-} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import Str from 'expensify-common/lib/str';
+import {SafeAreaView} from 'react-native-safe-area-context';
 import ONYXKEYS from '../../ONYXKEYS';
 import styles from '../../styles/styles';
 import compose from '../../libs/compose';
diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
index 5ba0ea9ec3f0..38139c362b65 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageContent.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -6,12 +6,12 @@ import styles from '../../../styles/styles';
 import variables from '../../../styles/variables';
 import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo';
 import Text from '../../../components/Text';
-import Terms from '../Terms';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import SignInPageForm from '../../../components/SignInPageForm';
 import compose from '../../../libs/compose';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView';
+import OfflineIndicator from '../../../components/OfflineIndicator';
 
 const propTypes = {
     /** The children to show inside the layout */
@@ -67,9 +67,11 @@ const SignInPageContent = props => (
                 </SignInPageForm>
             </View>
         </KeyboardAvoidingView>
-        <View style={[styles.mb8, styles.signInPageWelcomeTextContainer, styles.alignSelfCenter]}>
-            <Terms />
-        </View>
+        {true && (
+            <View style={[styles.mb5, styles.signInPageWelcomeTextContainer, styles.alignSelfCenter]}>
+                <OfflineIndicator style={[styles.m0, styles.pl0, styles.alignItemsStart]} />
+            </View>
+        )}
     </ScrollView>
 );
 
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index d3561ba6df90..851205cb1841 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -30,7 +30,7 @@ const SignInPageLayout = (props) => {
     let contentContainerStyles = [styles.flex1, styles.flexRow];
 
     // To scroll on both mobile and web, we need to set the container height manually
-    const containerHeight = props.windowHeight - props.insets.bottom - props.insets.top;
+    const containerHeight = props.windowHeight - props.insets.top - props.insets.bottom;
 
     if (props.isSmallScreenWidth) {
         containerStyles = [styles.flex1];
diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
index 9ae596c2fc7c..7227493b6c10 100755
--- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
@@ -22,9 +22,9 @@ import canFocusInputOnScreenFocus from '../../../libs/canFocusInputOnScreenFocus
 import * as ErrorUtils from '../../../libs/ErrorUtils';
 import {withNetwork} from '../../../components/OnyxProvider';
 import networkPropTypes from '../../../components/networkPropTypes';
-import OfflineIndicator from '../../../components/OfflineIndicator';
 import * as User from '../../../libs/actions/User';
 import FormHelpMessage from '../../../components/FormHelpMessage';
+import Terms from '../Terms';
 
 const propTypes = {
     /* Onyx Props */
@@ -239,7 +239,9 @@ class BaseValidateCodeForm extends React.Component {
                     />
                     <ChangeExpensifyLoginLink onPress={this.clearSignInData} />
                 </View>
-                <OfflineIndicator containerStyles={[styles.mv5]} />
+                <View style={[styles.mt5, styles.signInPageWelcomeTextContainer, styles.alignSelfCenter]}>
+                    <Terms />
+                </View>
             </>
         );
     }
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 8ea965aeb600..3aff1bf7bc73 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -958,7 +958,7 @@ const styles = {
 
     signInPageContentTopSpacer: {
         maxHeight: 132,
-        minHeight: 12,
+        minHeight: 24,
     },
 
     signInPageLeftContainer: {

From 4a060287b3755b402b78e54337e36c5a59c002e5 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Mon, 27 Feb 2023 12:21:46 -0800
Subject: [PATCH 44/45] Add comments to explain code

---
 src/pages/signin/SignInPageLayout/Footer.js                | 3 +--
 src/pages/signin/SignInPageLayout/index.js                 | 3 +--
 .../signin/SignInPageLayout/signInPageStyles/index.ios.js  | 2 ++
 .../signin/SignInPageLayout/signInPageStyles/index.js      | 1 +
 .../SignInPageLayout/signInPageStyles/index.native.js      | 2 ++
 src/pages/signin/Socials.js                                | 7 ++++++-
 src/styles/colors.js                                       | 2 ++
 src/styles/styles.js                                       | 2 +-
 8 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index 7b3da1fa59de..c7970277276f 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -191,8 +191,7 @@ const Footer = (props) => {
                         {!isVertical
                             ? (
                                 <Expensicons.ExpensifyFooterLogo />
-                            )
-                            : (
+                            ) : (
                                 <Expensicons.ExpensifyFooterLogoVertical height={variables.verticalLogoHeight} width={variables.verticalLogoWidth} />
                             )}
                     </View>
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 851205cb1841..bd0b4b52b0c5 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -56,8 +56,7 @@ const SignInPageLayout = (props) => {
                             <Footer />
                         </ScrollView>
                     </View>
-                )
-                : (
+                ) : (
                     <ScrollView
                         contentContainerStyle={scrollViewContentContainerStyles}
                         keyboardShouldPersistTaps="handled"
diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles/index.ios.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.ios.js
index ca2d15821960..004534709783 100644
--- a/src/pages/signin/SignInPageLayout/signInPageStyles/index.ios.js
+++ b/src/pages/signin/SignInPageLayout/signInPageStyles/index.ios.js
@@ -1,5 +1,7 @@
 import styles from '../../../../styles/styles';
 
+// Using flexGrow on mobile allows the ScrollView container to grow to fit the content.
+// This is necessary because making the sign-in content fit exactly the viewheight causes the scroll to stop working on mobile.
 const scrollViewContentContainerStyles = styles.flexGrow1;
 
 export default scrollViewContentContainerStyles;
diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles/index.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
index 97eba60aab1a..de3cdcc20c0c 100644
--- a/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
+++ b/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
@@ -1,5 +1,6 @@
 import styles from '../../../../styles/styles';
 
+// On web, we can use flex to fit the content to fit the viewport within a ScrollView.
 const scrollViewContentContainerStyles = styles.flex1;
 
 export default scrollViewContentContainerStyles;
diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js
index ca2d15821960..004534709783 100644
--- a/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js
+++ b/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js
@@ -1,5 +1,7 @@
 import styles from '../../../../styles/styles';
 
+// Using flexGrow on mobile allows the ScrollView container to grow to fit the content.
+// This is necessary because making the sign-in content fit exactly the viewheight causes the scroll to stop working on mobile.
 const scrollViewContentContainerStyles = styles.flexGrow1;
 
 export default scrollViewContentContainerStyles;
diff --git a/src/pages/signin/Socials.js b/src/pages/signin/Socials.js
index b0317bd861e3..a8f81e9e251e 100644
--- a/src/pages/signin/Socials.js
+++ b/src/pages/signin/Socials.js
@@ -43,7 +43,12 @@ const Socials = () => (
                 key={social.link}
             >
                 {({hovered}) => (
-                    <Icon src={social.iconURL} height={variables.iconSizeLarge} width={variables.iconSizeLarge} fill={hovered ? themeColors.link : themeColors.textLight} />
+                    <Icon
+                        src={social.iconURL}
+                        height={variables.iconSizeLarge}
+                        width={variables.iconSizeLarge}
+                        fill={hovered ? themeColors.link : themeColors.textLight}
+                    />
                 )}
             </Pressable>
         ))}
diff --git a/src/styles/colors.js b/src/styles/colors.js
index 996d3f39ccf7..3aee02c73e79 100644
--- a/src/styles/colors.js
+++ b/src/styles/colors.js
@@ -34,6 +34,8 @@ export default {
     greenDefaultButtonPressed: '#467164',
     greenDefaultButtonDisabled: '#8BA69E',
     midnight: '#002140',
+
+    // Brand Colors from Figma
     green700: '#23503B',
 
     // DEPRECATED COLORS. Do not reference these colors. Will be deleted in color switch PR.
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 3aff1bf7bc73..c74b5cd18b11 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2926,7 +2926,7 @@ const styles = {
         fontSize: variables.fontSizeNormal,
         paddingTop: 64,
         paddingHorizontal: 32,
-        maxWidth: 1100,
+        maxWidth: 1100, // Match footer across all Expensify platforms
     },
 
     footerColumnsContainer: {

From 9f1c192dc3027218f7916091e1eab5533230bf55 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Mon, 27 Feb 2023 12:23:11 -0800
Subject: [PATCH 45/45] Remove unnecessary check

---
 src/pages/signin/SignInPageLayout/SignInPageContent.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
index 38139c362b65..76f03ec87715 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageContent.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -67,11 +67,9 @@ const SignInPageContent = props => (
                 </SignInPageForm>
             </View>
         </KeyboardAvoidingView>
-        {true && (
-            <View style={[styles.mb5, styles.signInPageWelcomeTextContainer, styles.alignSelfCenter]}>
-                <OfflineIndicator style={[styles.m0, styles.pl0, styles.alignItemsStart]} />
-            </View>
-        )}
+        <View style={[styles.mb5, styles.signInPageWelcomeTextContainer, styles.alignSelfCenter]}>
+            <OfflineIndicator style={[styles.m0, styles.pl0, styles.alignItemsStart]} />
+        </View>
     </ScrollView>
 );