From d20ba5e9f036d9b3f58fbdfee137f0e01ae6dfea Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Thu, 17 Aug 2023 11:30:08 -0500
Subject: [PATCH 01/20] Add Mobile Banner Component, Styled (not functional)

---
 assets/images/expensify-app-icon.svg |  18 +++++
 src/Expensify.js                     |   2 +
 src/components/MobileBanner/index.js | 108 +++++++++++++++++++++++++++
 src/styles/styles.js                 |   5 ++
 src/styles/utilities/spacing.js      |  16 ++++
 src/styles/variables.js              |   1 +
 6 files changed, 150 insertions(+)
 create mode 100644 assets/images/expensify-app-icon.svg
 create mode 100644 src/components/MobileBanner/index.js

diff --git a/assets/images/expensify-app-icon.svg b/assets/images/expensify-app-icon.svg
new file mode 100644
index 000000000000..a0adfe7dd952
--- /dev/null
+++ b/assets/images/expensify-app-icon.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.3.1, 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 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#03D47C;}
+	.st1{fill:#002E22;}
+</style>
+<rect class="st0" width="48" height="48"/>
+<path class="st1" d="M30.6,18.5v-3.9H17.4v18.9h13.2v-3.9h-8.4v-3.6H29v-4h-6.7v-3.4H30.6z"/>
+<path class="st1" d="M24,8.3C24,8.3,24,8.3,24,8.3c3.3,0,6.4,1,9,2.8c0.6,0.4,1.5,0.4,2.1-0.1c0.6-0.6,0.6-1.7-0.1-2.2
+	C31.9,6.6,28.1,5.3,24,5.3C13.7,5.3,5.3,13.7,5.3,24c0,4.1,1.3,7.9,3.5,10.9c0.5,0.7,1.6,0.8,2.2,0.1c0.6-0.6,0.6-1.4,0.1-2.1
+	c-1.8-2.6-2.8-5.6-2.8-9C8.3,15.4,15.4,8.3,24,8.3C24,8.3,24,8.3,24,8.3z"/>
+<path class="st1" d="M39.5,13.4c-0.5-0.7-1.6-0.8-2.2-0.2c-0.6,0.6-0.6,1.4-0.2,2.1c1.6,2.5,2.6,5.5,2.6,8.7c0,3.2-1,6.3-2.7,8.8
+	c-0.4,0.7-0.4,1.5,0.2,2.1c0.6,0.6,1.7,0.6,2.2-0.1c2.1-3,3.4-6.8,3.4-10.8C42.8,20,41.6,16.4,39.5,13.4z"/>
+<path class="st1" d="M24,39.7c-3.2,0-6.2-1-8.7-2.6c-0.7-0.4-1.5-0.4-2.1,0.2c-0.6,0.6-0.6,1.7,0.2,2.2c3,2.1,6.7,3.3,10.6,3.3
+	c3.9,0,7.7-1.3,10.8-3.4c0.7-0.5,0.8-1.6,0.1-2.2c-0.6-0.6-1.4-0.6-2.1-0.2C30.3,38.7,27.3,39.7,24,39.7z"/>
+</svg>
diff --git a/src/Expensify.js b/src/Expensify.js
index c85c2862e96e..ecdb1a809152 100644
--- a/src/Expensify.js
+++ b/src/Expensify.js
@@ -31,6 +31,7 @@ import SplashScreenHider from './components/SplashScreenHider';
 import KeyboardShortcutsModal from './components/KeyboardShortcutsModal';
 import EmojiPicker from './components/EmojiPicker/EmojiPicker';
 import * as EmojiPickerAction from './libs/actions/EmojiPickerAction';
+import MobileBanner from './components/MobileBanner';
 
 // This lib needs to be imported, but it has nothing to export since all it contains is an Onyx connection
 // eslint-disable-next-line no-unused-vars
@@ -191,6 +192,7 @@ function Expensify(props) {
                     <PopoverReportActionContextMenu ref={ReportActionContextMenu.contextMenuRef} />
                     <EmojiPicker ref={EmojiPickerAction.emojiPickerRef} />
                     {/* We include the modal for showing a new update at the top level so the option is always present. */}
+                    {true ? <MobileBanner /> : null}
                     {props.updateAvailable ? <UpdateAppModal /> : null}
                     {props.screenShareRequest ? (
                         <ConfirmModal
diff --git a/src/components/MobileBanner/index.js b/src/components/MobileBanner/index.js
new file mode 100644
index 000000000000..8b5f3277dac8
--- /dev/null
+++ b/src/components/MobileBanner/index.js
@@ -0,0 +1,108 @@
+import React, {memo} from 'react';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import Banner from '../Banner';
+import styles from '../../styles/styles';
+import compose from '../../libs/compose';
+import Hoverable from '../Hoverable';
+import Icon from '../Icon';
+import * as Expensicons from '../Icon/Expensicons';
+import RenderHTML from '../RenderHTML';
+import Text from '../Text';
+import * as StyleUtils from '../../styles/StyleUtils';
+import getButtonState from '../../libs/getButtonState';
+import Tooltip from '../Tooltip';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import PressableWithFeedback from '../Pressable/PressableWithFeedback';
+import CONST from '../../CONST';
+import AppIcon from '../../../assets/images/expensify-app-icon.svg';
+import Button from '../Button';
+import variables from '../../styles/variables';
+
+const propTypes = {
+    /** Text to display in the banner. */
+    text: PropTypes.string.isRequired,
+
+    /** Should this component render the left-aligned exclamation icon? */
+    shouldShowIcon: PropTypes.bool,
+
+    /** Should this component render a close button? */
+    shouldShowCloseButton: PropTypes.bool,
+
+    /** Should this component render the text as HTML? */
+    shouldRenderHTML: PropTypes.bool,
+
+    /** Callback called when the close button is pressed */
+    onClose: PropTypes.func,
+
+    /** Callback called when the message is pressed */
+    onPress: PropTypes.func,
+
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    shouldRenderHTML: false,
+    shouldShowIcon: false,
+    shouldShowCloseButton: false,
+    onClose: undefined,
+    onPress: undefined,
+};
+
+function MobileBanner(props) {
+    return (
+        <View
+            style={[
+                styles.flexRow,
+                styles.alignItemsCenter,
+                styles.pv4,
+                styles.ph5,
+                styles.gap4,
+                styles.activeComponentBG,
+                styles.mw100,
+            ]}
+        >
+            <View style={[styles.flex1, styles.flexRow, styles.flexGrow1, styles.alignItemsCenter]}>
+                <View style={[styles.alignItemsCenter, styles.gap3, styles.flexRow, styles.flex1]}>
+                    <Icon
+                        src={AppIcon}
+                        width={variables.mobileBannerAppIconSize}
+                        height={variables.mobileBannerAppIconSize}
+                        additionalStyles={[styles.appIconBorderRadius]}
+                    />
+                    <View style={[styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStart, styles.flex1]}>
+                        <Text
+                            style={[styles.alignSelfStretch, styles.textLabel, styles.textStrong]}
+                            suppressHighlighting
+                        >
+                            {"Download the app"}
+                        </Text>
+                        <Text
+                            style={[styles.alignSelfStretch, styles.textLabel]}
+                            suppressHighlighting
+
+                        >
+                            {"Keep the conversation going in New Expensify."}
+                        </Text>
+                    </View>
+                </View>
+            </View>
+            <Button small success text="Download" onPress={()=>{}} />
+            <Tooltip text={props.translate('common.close')}>
+                <PressableWithFeedback
+                    onPress={props.onClose}
+                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                    accessibilityLabel={props.translate('common.close')}
+                >
+                    <Icon src={Expensicons.Close} />
+                </PressableWithFeedback>
+            </Tooltip>
+        </View>
+    );
+}
+
+MobileBanner.displayName = 'MobileBanner';
+MobileBanner.propTypes = propTypes;
+MobileBanner.defaultProps = defaultProps;
+
+export default compose(withLocalize, memo)(MobileBanner);
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 0bef42f3edc2..fda88f78af8e 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -230,6 +230,11 @@ const styles = {
         color: themeColors.textSupporting,
     },
 
+    appIconBorderRadius: {
+        overflow: 'hidden', 
+        borderRadius: 12,
+    },
+
     unitCol: {
         margin: 0,
         padding: 0,
diff --git a/src/styles/utilities/spacing.js b/src/styles/utilities/spacing.js
index 4adb7e79a9ff..f3d7746eb312 100644
--- a/src/styles/utilities/spacing.js
+++ b/src/styles/utilities/spacing.js
@@ -483,6 +483,22 @@ export default {
         gap: 4,
     },
 
+    gap2: {
+        gap: 8,
+    },
+
+    gap3: {
+        gap: 12,
+    },
+
+    gap4: {
+        gap: 16,
+    },
+
+    gap5: {
+        gap: 20,
+    },
+
     gap7: {
         gap: 28,
     },
diff --git a/src/styles/variables.js b/src/styles/variables.js
index af4d81c93c79..4b0436ff6ed3 100644
--- a/src/styles/variables.js
+++ b/src/styles/variables.js
@@ -28,6 +28,7 @@ export default {
     componentBorderRadiusLarge: 16,
     componentBorderRadiusCard: 12,
     componentBorderRadiusRounded: 24,
+    mobileBannerAppIconSize: 48,
     buttonBorderRadius: 100,
     avatarSizeLargeBordered: 88,
     avatarSizeLarge: 80,

From ecd7d397caedcf16cfbb499aed8e2f18db91f3c7 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Thu, 17 Aug 2023 12:11:21 -0500
Subject: [PATCH 02/20] Clean up and add functionality

---
 src/components/MobileBanner/index.js | 143 ++++++++++++---------------
 src/styles/styles.js                 |   2 +-
 2 files changed, 62 insertions(+), 83 deletions(-)

diff --git a/src/components/MobileBanner/index.js b/src/components/MobileBanner/index.js
index 8b5f3277dac8..6a03d1ea3c08 100644
--- a/src/components/MobileBanner/index.js
+++ b/src/components/MobileBanner/index.js
@@ -1,108 +1,87 @@
-import React, {memo} from 'react';
+import React, {useState} from 'react';
 import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import Banner from '../Banner';
 import styles from '../../styles/styles';
-import compose from '../../libs/compose';
-import Hoverable from '../Hoverable';
 import Icon from '../Icon';
 import * as Expensicons from '../Icon/Expensicons';
-import RenderHTML from '../RenderHTML';
 import Text from '../Text';
-import * as StyleUtils from '../../styles/StyleUtils';
-import getButtonState from '../../libs/getButtonState';
 import Tooltip from '../Tooltip';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import PressableWithFeedback from '../Pressable/PressableWithFeedback';
 import CONST from '../../CONST';
 import AppIcon from '../../../assets/images/expensify-app-icon.svg';
 import Button from '../Button';
 import variables from '../../styles/variables';
+import useLocalize from '../../hooks/useLocalize';
+import * as Link from '../../libs/actions/Link';
+import * as Browser from '../../libs/Browser';
+import getOperatingSystem from '../../libs/getOperatingSystem';
 
-const propTypes = {
-    /** Text to display in the banner. */
-    text: PropTypes.string.isRequired,
+function MobileBanner() {
+    const [shouldShowBanner, setshouldShowBanner] = useState(Browser.isMobile());
+    const {translate} = useLocalize();
 
-    /** Should this component render the left-aligned exclamation icon? */
-    shouldShowIcon: PropTypes.bool,
+    const handleCloseBanner = () => {
+        setshouldShowBanner(false);
+    };
 
-    /** Should this component render a close button? */
-    shouldShowCloseButton: PropTypes.bool,
+    let link = '';
 
-    /** Should this component render the text as HTML? */
-    shouldRenderHTML: PropTypes.bool,
+    if (getOperatingSystem() === CONST.OS.IOS) {
+        link = CONST.APP_DOWNLOAD_LINKS.IOS;
+    } else if (getOperatingSystem() === CONST.OS.ANDROID) {
+        link = CONST.APP_DOWNLOAD_LINKS.ANDROID;
+    }
 
-    /** Callback called when the close button is pressed */
-    onClose: PropTypes.func,
+    const handleOpenAppStore = () => {
+        Link.openExternalLink(link, true);
+    };
 
-    /** Callback called when the message is pressed */
-    onPress: PropTypes.func,
-
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    shouldRenderHTML: false,
-    shouldShowIcon: false,
-    shouldShowCloseButton: false,
-    onClose: undefined,
-    onPress: undefined,
-};
-
-function MobileBanner(props) {
     return (
-        <View
-            style={[
-                styles.flexRow,
-                styles.alignItemsCenter,
-                styles.pv4,
-                styles.ph5,
-                styles.gap4,
-                styles.activeComponentBG,
-                styles.mw100,
-            ]}
-        >
-            <View style={[styles.flex1, styles.flexRow, styles.flexGrow1, styles.alignItemsCenter]}>
-                <View style={[styles.alignItemsCenter, styles.gap3, styles.flexRow, styles.flex1]}>
-                    <Icon
-                        src={AppIcon}
-                        width={variables.mobileBannerAppIconSize}
-                        height={variables.mobileBannerAppIconSize}
-                        additionalStyles={[styles.appIconBorderRadius]}
-                    />
-                    <View style={[styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStart, styles.flex1]}>
-                        <Text
-                            style={[styles.alignSelfStretch, styles.textLabel, styles.textStrong]}
-                            suppressHighlighting
-                        >
-                            {"Download the app"}
-                        </Text>
-                        <Text
-                            style={[styles.alignSelfStretch, styles.textLabel]}
-                            suppressHighlighting
-
-                        >
-                            {"Keep the conversation going in New Expensify."}
-                        </Text>
+        shouldShowBanner && (
+            <View style={[styles.flexRow, styles.alignItemsCenter, styles.pv4, styles.ph5, styles.gap4, styles.activeComponentBG, styles.mw100]}>
+                <View style={[styles.flex1, styles.flexRow, styles.flexGrow1, styles.alignItemsCenter]}>
+                    <View style={[styles.alignItemsCenter, styles.gap3, styles.flexRow, styles.flex1]}>
+                        <Icon
+                            src={AppIcon}
+                            width={variables.mobileBannerAppIconSize}
+                            height={variables.mobileBannerAppIconSize}
+                            additionalStyles={[styles.appIconBorderRadius]}
+                        />
+                        <View style={[styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStart, styles.flex1]}>
+                            <Text
+                                style={[styles.alignSelfStretch, styles.textLabel, styles.textStrong]}
+                                suppressHighlighting
+                            >
+                                {'Download the app'}
+                            </Text>
+                            <Text
+                                style={[styles.alignSelfStretch, styles.textLabel]}
+                                suppressHighlighting
+                            >
+                                {'Keep the conversation going in New Expensify.'}
+                            </Text>
+                        </View>
                     </View>
                 </View>
+                <Button
+                    small
+                    success
+                    text="Download"
+                    onPress={handleOpenAppStore}
+                />
+                <Tooltip text={translate('common.close')}>
+                    <PressableWithFeedback
+                        onPress={handleCloseBanner}
+                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                        accessibilityLabel={translate('common.close')}
+                    >
+                        <Icon src={Expensicons.Close} />
+                    </PressableWithFeedback>
+                </Tooltip>
             </View>
-            <Button small success text="Download" onPress={()=>{}} />
-            <Tooltip text={props.translate('common.close')}>
-                <PressableWithFeedback
-                    onPress={props.onClose}
-                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
-                    accessibilityLabel={props.translate('common.close')}
-                >
-                    <Icon src={Expensicons.Close} />
-                </PressableWithFeedback>
-            </Tooltip>
-        </View>
+        )
     );
 }
 
 MobileBanner.displayName = 'MobileBanner';
-MobileBanner.propTypes = propTypes;
-MobileBanner.defaultProps = defaultProps;
 
-export default compose(withLocalize, memo)(MobileBanner);
+export default MobileBanner;
diff --git a/src/styles/styles.js b/src/styles/styles.js
index fda88f78af8e..5a0a92ad609b 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -231,7 +231,7 @@ const styles = {
     },
 
     appIconBorderRadius: {
-        overflow: 'hidden', 
+        overflow: 'hidden',
         borderRadius: 12,
     },
 

From 0c24cfa07cc182ccf9962fd55d5fa21cc00fb5c6 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Thu, 17 Aug 2023 12:15:48 -0500
Subject: [PATCH 03/20] Move out of folder

---
 .../index.js => MobileBanner.js}              | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)
 rename src/components/{MobileBanner/index.js => MobileBanner.js} (83%)

diff --git a/src/components/MobileBanner/index.js b/src/components/MobileBanner.js
similarity index 83%
rename from src/components/MobileBanner/index.js
rename to src/components/MobileBanner.js
index 6a03d1ea3c08..ac1e408fa3e2 100644
--- a/src/components/MobileBanner/index.js
+++ b/src/components/MobileBanner.js
@@ -1,19 +1,19 @@
 import React, {useState} from 'react';
 import {View} from 'react-native';
-import styles from '../../styles/styles';
-import Icon from '../Icon';
-import * as Expensicons from '../Icon/Expensicons';
-import Text from '../Text';
-import Tooltip from '../Tooltip';
-import PressableWithFeedback from '../Pressable/PressableWithFeedback';
-import CONST from '../../CONST';
+import styles from '../styles/styles';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
+import Text from './Text';
+import Tooltip from './Tooltip';
+import PressableWithFeedback from './Pressable/PressableWithFeedback';
+import CONST from '../CONST';
 import AppIcon from '../../../assets/images/expensify-app-icon.svg';
-import Button from '../Button';
-import variables from '../../styles/variables';
-import useLocalize from '../../hooks/useLocalize';
-import * as Link from '../../libs/actions/Link';
-import * as Browser from '../../libs/Browser';
-import getOperatingSystem from '../../libs/getOperatingSystem';
+import Button from './Button';
+import variables from '../styles/variables';
+import useLocalize from '../hooks/useLocalize';
+import * as Link from '../libs/actions/Link';
+import * as Browser from '../libs/Browser';
+import getOperatingSystem from '../libs/getOperatingSystem';
 
 function MobileBanner() {
     const [shouldShowBanner, setshouldShowBanner] = useState(Browser.isMobile());

From aefdaeb1b6d8b92e793e45dc1b7d4214dc44099f Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Thu, 17 Aug 2023 12:20:04 -0500
Subject: [PATCH 04/20] fix asset path

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

diff --git a/src/components/MobileBanner.js b/src/components/MobileBanner.js
index ac1e408fa3e2..8e641a3d6447 100644
--- a/src/components/MobileBanner.js
+++ b/src/components/MobileBanner.js
@@ -7,7 +7,7 @@ import Text from './Text';
 import Tooltip from './Tooltip';
 import PressableWithFeedback from './Pressable/PressableWithFeedback';
 import CONST from '../CONST';
-import AppIcon from '../../../assets/images/expensify-app-icon.svg';
+import AppIcon from '../../assets/images/expensify-app-icon.svg';
 import Button from './Button';
 import variables from '../styles/variables';
 import useLocalize from '../hooks/useLocalize';

From 8d14fa3b427ab096a6dabc34f3cf27324e9a1df7 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Thu, 17 Aug 2023 12:29:21 -0500
Subject: [PATCH 05/20] Add copy to en/es

---
 src/components/MobileBanner.js | 6 +++---
 src/languages/en.js            | 4 ++++
 src/languages/es.js            | 4 ++++
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/MobileBanner.js b/src/components/MobileBanner.js
index 8e641a3d6447..56aa3ab3a741 100644
--- a/src/components/MobileBanner.js
+++ b/src/components/MobileBanner.js
@@ -51,13 +51,13 @@ function MobileBanner() {
                                 style={[styles.alignSelfStretch, styles.textLabel, styles.textStrong]}
                                 suppressHighlighting
                             >
-                                {'Download the app'}
+                                {translate('mobileBanner.downloadTheApp')}
                             </Text>
                             <Text
                                 style={[styles.alignSelfStretch, styles.textLabel]}
                                 suppressHighlighting
                             >
-                                {'Keep the conversation going in New Expensify.'}
+                                {translate('mobileBanner.keepTheConversationGoing')}
                             </Text>
                         </View>
                     </View>
@@ -65,7 +65,7 @@ function MobileBanner() {
                 <Button
                     small
                     success
-                    text="Download"
+                    text={translate('common.download')}
                     onPress={handleOpenAppStore}
                 />
                 <Tooltip text={translate('common.close')}>
diff --git a/src/languages/en.js b/src/languages/en.js
index 4ce07f7e00ca..2c7f60f5adfc 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -235,6 +235,10 @@ export default {
         newFaceEnterMagicCode: ({login}) => `It's always great to see a new face around here! Please enter the magic code sent to ${login}. It should arrive within a minute or two.`,
         welcomeEnterMagicCode: ({login}) => `Please enter the magic code sent to ${login}. It should arrive within a minute or two.`,
     },
+    mobileBanner: {
+        downloadTheApp: 'Download the App.',
+        keepTheConversationGoing: 'Keep the conversation going in New Expensify.',
+    },
     login: {
         hero: {
             header: 'Split bills, request payments, and chat with friends.',
diff --git a/src/languages/es.js b/src/languages/es.js
index 7cee163470f3..014e81077bb3 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -234,6 +234,10 @@ export default {
         newFaceEnterMagicCode: ({login}) => `¡Siempre es genial ver una cara nueva por aquí! Por favor ingresa el código mágico enviado a ${login}. Debería llegar en un par de minutos.`,
         welcomeEnterMagicCode: ({login}) => `Por favor, introduce el código mágico enviado a ${login}. Debería llegar en un par de minutos.`,
     },
+    mobileBanner: {
+        downloadTheApp: 'Descarga la App.',
+        keepTheConversationGoing: 'Mantén la conversación en New Expensify.',
+    },
     login: {
         hero: {
             header: 'Divida las facturas, solicite pagos y chatee con sus amigos.',

From fde38d55fd9ae56fec946320202a1b43c759d8ae Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Thu, 17 Aug 2023 12:45:21 -0500
Subject: [PATCH 06/20] modify spanish translation from slack feedback

---
 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 014e81077bb3..4f2ad4a93704 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -235,7 +235,7 @@ export default {
         welcomeEnterMagicCode: ({login}) => `Por favor, introduce el código mágico enviado a ${login}. Debería llegar en un par de minutos.`,
     },
     mobileBanner: {
-        downloadTheApp: 'Descarga la App.',
+        downloadTheApp: 'Descarga la aplicación.',
         keepTheConversationGoing: 'Mantén la conversación en New Expensify.',
     },
     login: {

From e61e3f02ba4fa3bf07f350ec286ac64a7bb5685b Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Thu, 17 Aug 2023 12:55:16 -0500
Subject: [PATCH 07/20] Fix lint

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

diff --git a/src/Expensify.js b/src/Expensify.js
index ecdb1a809152..931190645109 100644
--- a/src/Expensify.js
+++ b/src/Expensify.js
@@ -189,10 +189,10 @@ function Expensify(props) {
                 <>
                     <KeyboardShortcutsModal />
                     <GrowlNotification ref={Growl.growlRef} />
+                    <MobileBanner />
                     <PopoverReportActionContextMenu ref={ReportActionContextMenu.contextMenuRef} />
                     <EmojiPicker ref={EmojiPickerAction.emojiPickerRef} />
                     {/* We include the modal for showing a new update at the top level so the option is always present. */}
-                    {true ? <MobileBanner /> : null}
                     {props.updateAvailable ? <UpdateAppModal /> : null}
                     {props.screenShareRequest ? (
                         <ConfirmModal

From 81f1536ffd7f41080b2ea505c9d3b838ca52c821 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Thu, 17 Aug 2023 17:14:45 -0500
Subject: [PATCH 08/20] Design comments- remove period, fix line height in
 second line

---
 src/components/MobileBanner.js | 2 +-
 src/languages/en.js            | 2 +-
 src/languages/es.js            | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/MobileBanner.js b/src/components/MobileBanner.js
index 56aa3ab3a741..14073be4ddc2 100644
--- a/src/components/MobileBanner.js
+++ b/src/components/MobileBanner.js
@@ -54,7 +54,7 @@ function MobileBanner() {
                                 {translate('mobileBanner.downloadTheApp')}
                             </Text>
                             <Text
-                                style={[styles.alignSelfStretch, styles.textLabel]}
+                                style={[styles.alignSelfStretch, styles.textLabel, styles.lh16]}
                                 suppressHighlighting
                             >
                                 {translate('mobileBanner.keepTheConversationGoing')}
diff --git a/src/languages/en.js b/src/languages/en.js
index 2c7f60f5adfc..c607d1193f12 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -236,7 +236,7 @@ export default {
         welcomeEnterMagicCode: ({login}) => `Please enter the magic code sent to ${login}. It should arrive within a minute or two.`,
     },
     mobileBanner: {
-        downloadTheApp: 'Download the App.',
+        downloadTheApp: 'Download the App',
         keepTheConversationGoing: 'Keep the conversation going in New Expensify.',
     },
     login: {
diff --git a/src/languages/es.js b/src/languages/es.js
index 4f2ad4a93704..961d7676f338 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -235,7 +235,7 @@ export default {
         welcomeEnterMagicCode: ({login}) => `Por favor, introduce el código mágico enviado a ${login}. Debería llegar en un par de minutos.`,
     },
     mobileBanner: {
-        downloadTheApp: 'Descarga la aplicación.',
+        downloadTheApp: 'Descarga la aplicación',
         keepTheConversationGoing: 'Mantén la conversación en New Expensify.',
     },
     login: {

From b415c224a7aee3601ee683fdb2d5f3c37ab986f1 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Fri, 18 Aug 2023 09:48:08 -0500
Subject: [PATCH 09/20] Fix Capitalization of 'Download the App' to 'Download
 the app'

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

diff --git a/src/languages/en.js b/src/languages/en.js
index 7134970d546e..f66aa09e8a22 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -244,7 +244,7 @@ export default {
         welcomeEnterMagicCode: ({login}) => `Please enter the magic code sent to ${login}. It should arrive within a minute or two.`,
     },
     mobileBanner: {
-        downloadTheApp: 'Download the App',
+        downloadTheApp: 'Download the app',
         keepTheConversationGoing: 'Keep the conversation going in New Expensify.',
     },
     login: {

From ae8c7e708a058f731607dd9d3ef59dcb8d96cb27 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Fri, 18 Aug 2023 11:08:59 -0500
Subject: [PATCH 10/20] Remember if user has dismissed the banner

---
 src/ONYXKEYS.js                       |  3 +++
 src/components/MobileBanner.js        | 25 ++++++++++++++++++++++---
 src/libs/actions/DownloadAppBanner.js | 11 +++++++++++
 3 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 src/libs/actions/DownloadAppBanner.js

diff --git a/src/ONYXKEYS.js b/src/ONYXKEYS.js
index 7ef5c68c3850..991ee572f01f 100755
--- a/src/ONYXKEYS.js
+++ b/src/ONYXKEYS.js
@@ -242,6 +242,9 @@ export default {
     // This can be either "light", "dark" or "system"
     PREFERRED_THEME: 'preferredTheme',
 
+    // Denotes if the Download App Banner has been dismissed
+    SHOW_DOWNLOAD_APP_BANNER: 'showDownloadAppBanner',
+
     // Whether we're checking if the room is public or not
     IS_CHECKING_PUBLIC_ROOM: 'isCheckingPublicRoom',
 
diff --git a/src/components/MobileBanner.js b/src/components/MobileBanner.js
index 14073be4ddc2..1fc3415597bb 100644
--- a/src/components/MobileBanner.js
+++ b/src/components/MobileBanner.js
@@ -1,5 +1,8 @@
 import React, {useState} from 'react';
 import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import {withOnyx} from 'react-native-onyx';
+import ONYXKEYS from '../ONYXKEYS';
 import styles from '../styles/styles';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
@@ -14,12 +17,23 @@ import useLocalize from '../hooks/useLocalize';
 import * as Link from '../libs/actions/Link';
 import * as Browser from '../libs/Browser';
 import getOperatingSystem from '../libs/getOperatingSystem';
+import setShowDownloadAppBanner from '../libs/actions/DownloadAppBanner';
 
-function MobileBanner() {
-    const [shouldShowBanner, setshouldShowBanner] = useState(Browser.isMobile());
+
+const propTypes = {
+    showDownloadAppBanner: PropTypes.bool,
+}
+
+const defaultProps = {
+    showDownloadAppBanner: true,
+}
+
+function MobileBanner({showDownloadAppBanner}) {
+    const [shouldShowBanner, setshouldShowBanner] = useState(Browser.isMobile() && showDownloadAppBanner);
     const {translate} = useLocalize();
 
     const handleCloseBanner = () => {
+        setShowDownloadAppBanner(false);
         setshouldShowBanner(false);
     };
 
@@ -83,5 +97,10 @@ function MobileBanner() {
 }
 
 MobileBanner.displayName = 'MobileBanner';
+MobileBanner.propTypes = propTypes;
+MobileBanner.defaultProps = defaultProps;
 
-export default MobileBanner;
+export default withOnyx({
+    showDownloadAppBanner: {
+        key: ONYXKEYS.SHOW_DOWNLOAD_APP_BANNER,
+}})(MobileBanner);
diff --git a/src/libs/actions/DownloadAppBanner.js b/src/libs/actions/DownloadAppBanner.js
new file mode 100644
index 000000000000..d138a4cf67c9
--- /dev/null
+++ b/src/libs/actions/DownloadAppBanner.js
@@ -0,0 +1,11 @@
+import Onyx from 'react-native-onyx';
+import ONYXKEYS from '../../ONYXKEYS';
+
+/**
+ * @param {Boolean} shouldShowBanner
+ */
+function setShowDownloadAppBanner(shouldShowBanner) {
+    Onyx.set(ONYXKEYS.SHOW_DOWNLOAD_APP_BANNER, shouldShowBanner);
+}
+
+export default setShowDownloadAppBanner;

From ec791de19d02cc2b6785b8c773a660e33ed88592 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Fri, 18 Aug 2023 11:09:55 -0500
Subject: [PATCH 11/20] prettier

---
 src/components/MobileBanner.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/MobileBanner.js b/src/components/MobileBanner.js
index 1fc3415597bb..fe78ee8b110d 100644
--- a/src/components/MobileBanner.js
+++ b/src/components/MobileBanner.js
@@ -19,14 +19,13 @@ import * as Browser from '../libs/Browser';
 import getOperatingSystem from '../libs/getOperatingSystem';
 import setShowDownloadAppBanner from '../libs/actions/DownloadAppBanner';
 
-
 const propTypes = {
     showDownloadAppBanner: PropTypes.bool,
-}
+};
 
 const defaultProps = {
     showDownloadAppBanner: true,
-}
+};
 
 function MobileBanner({showDownloadAppBanner}) {
     const [shouldShowBanner, setshouldShowBanner] = useState(Browser.isMobile() && showDownloadAppBanner);
@@ -103,4 +102,5 @@ MobileBanner.defaultProps = defaultProps;
 export default withOnyx({
     showDownloadAppBanner: {
         key: ONYXKEYS.SHOW_DOWNLOAD_APP_BANNER,
-}})(MobileBanner);
+    },
+})(MobileBanner);

From 586c22a6c1410ae624793822272ba8385f84ac6e Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Sat, 19 Aug 2023 09:08:31 -0500
Subject: [PATCH 12/20] Move MobileBanner down in tree

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

diff --git a/src/Expensify.js b/src/Expensify.js
index 0dd8f1c45da0..497f5c8563a2 100644
--- a/src/Expensify.js
+++ b/src/Expensify.js
@@ -189,8 +189,8 @@ function Expensify(props) {
                 <>
                     <KeyboardShortcutsModal />
                     <GrowlNotification ref={Growl.growlRef} />
-                    <MobileBanner />
                     <PopoverReportActionContextMenu ref={ReportActionContextMenu.contextMenuRef} />
+                    <MobileBanner />
                     <EmojiPicker ref={EmojiPickerAction.emojiPickerRef} />
                     {/* We include the modal for showing a new update at the top level so the option is always present. */}
                     {props.updateAvailable ? <UpdateAppModal /> : null}

From f485cae348e60dbaf105a41aa400a4a773b0f197 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Tue, 22 Aug 2023 17:55:13 +0100
Subject: [PATCH 13/20] Initial Bottom Banner Styling

---
 src/components/ConfirmContent.js | 110 +++++++++++++++++++++++++------
 src/components/ConfirmModal.js   |  22 +++++++
 src/components/MobileBanner.js   | 103 ++++++++++++++++-------------
 src/languages/en.js              |   3 +-
 src/languages/es.js              |   1 +
 5 files changed, 173 insertions(+), 66 deletions(-)

diff --git a/src/components/ConfirmContent.js b/src/components/ConfirmContent.js
index 6981fd451309..94c215090393 100644
--- a/src/components/ConfirmContent.js
+++ b/src/components/ConfirmContent.js
@@ -8,6 +8,9 @@ import Button from './Button';
 import useLocalize from '../hooks/useLocalize';
 import useNetwork from '../hooks/useNetwork';
 import Text from './Text';
+import variables from '../styles/variables';
+import AppIcon from '../../assets/images/expensify-app-icon.svg';
+import Icon from './Icon';
 
 const propTypes = {
     /** Title of the modal */
@@ -40,9 +43,28 @@ const propTypes = {
     /** Whether we should show the cancel button */
     shouldShowCancelButton: PropTypes.bool,
 
+    iconSource: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+
+    shouldCenterContent: PropTypes.bool,
+
+    /** Styles for title */
+    // eslint-disable-next-line react/forbid-prop-types
+    titleStyles: PropTypes.arrayOf(PropTypes.object),
+
+
+    /** Styles for prompt */
+    // eslint-disable-next-line react/forbid-prop-types
+    promptStyles: PropTypes.arrayOf(PropTypes.object),
+
+
     /** Styles for view */
     // eslint-disable-next-line react/forbid-prop-types
     contentStyles: PropTypes.arrayOf(PropTypes.object),
+
+
+    /** Styles for icon */
+    // eslint-disable-next-line react/forbid-prop-types
+    iconStyles: PropTypes.arrayOf(PropTypes.object),
 };
 
 const defaultProps = {
@@ -55,6 +77,12 @@ const defaultProps = {
     shouldDisableConfirmButtonWhenOffline: false,
     shouldShowCancelButton: true,
     contentStyles: [],
+    iconSource: null,
+    shouldCenterContent: false,
+    titleStyles: [],
+    promptStyles: [],
+    iconStyles: [],
+
 };
 
 function ConfirmContent(props) {
@@ -63,29 +91,69 @@ function ConfirmContent(props) {
 
     return (
         <View style={[styles.m5, ...props.contentStyles]}>
-            <View style={[styles.flexRow, styles.mb4]}>
-                <Header title={props.title} />
+            <View style={props.shouldCenterContent ? [styles.alignItemsCenter, styles.mb6] : []}>
+                {!_.isEmpty(props.iconSource) || _.isFunction(props.iconSource) && (
+                    <View style={[styles.flexRow, styles.mb3]}>
+                        <Icon
+                            src={props.iconSource}
+                            width={variables.mobileBannerAppIconSize}
+                            height={variables.mobileBannerAppIconSize}
+                            additionalStyles={[[...props.iconStyles]]}
+                        />
+                    </View>
+                )}
+
+                <View style={[styles.flexRow, props.shouldCenterContent  ? {} : styles.mb4]}>
+                    <Header title={props.title} textStyles={[...props.titleStyles]}/>
+                </View>
+
+                {_.isString(props.prompt) ? <Text style={[...props.promptStyles, props.shouldCenterContent ? styles.textAlignCenter : {}]}>{props.prompt}</Text> : props.prompt}
             </View>
 
-            {_.isString(props.prompt) ? <Text>{props.prompt}</Text> : props.prompt}
-
-            <Button
-                success={props.success}
-                danger={props.danger}
-                style={[styles.mt4]}
-                onPress={props.onConfirm}
-                pressOnEnter
-                text={props.confirmText || translate('common.yes')}
-                isDisabled={isOffline && props.shouldDisableConfirmButtonWhenOffline}
-            />
-            {props.shouldShowCancelButton && (
-                <Button
-                    style={[styles.mt3, styles.noSelect]}
-                    onPress={props.onCancel}
-                    text={props.cancelText || translate('common.no')}
-                    shouldUseDefaultHover
-                />
-            )}
+            {props.shouldCenterContent ? (
+                <View style={[styles.flexRow, styles.gap4]}>
+                    {props.shouldShowCancelButton && (
+                        <Button
+                            style={[styles.noSelect, styles.flex1]}
+                            onPress={props.onCancel}
+                            text={props.cancelText || translate('common.no')}
+                            shouldUseDefaultHover
+                            medium
+                        />
+                    )}
+                    <Button
+                        success={props.success}
+                        danger={props.danger}
+                        style={[styles.flex1]}
+                        onPress={props.onConfirm}
+                        pressOnEnter
+                        text={props.confirmText || translate('common.yes')}
+                        isDisabled={isOffline && props.shouldDisableConfirmButtonWhenOffline}
+                        medium
+                    />
+                </View>
+            ) : (
+                <>
+                    <Button
+                        success={props.success}
+                        danger={props.danger}
+                        style={[styles.mt4]}
+                        onPress={props.onConfirm}
+                        pressOnEnter
+                        text={props.confirmText || translate('common.yes')}
+                        isDisabled={isOffline && props.shouldDisableConfirmButtonWhenOffline}
+                    />
+                    {props.shouldShowCancelButton && (
+                        <Button
+                            style={[styles.mt3, styles.noSelect]}
+                            onPress={props.onCancel}
+                            text={props.cancelText || translate('common.no')}
+                            shouldUseDefaultHover
+                        />
+                    ) }
+                </>
+            )
+        }
         </View>
     );
 }
diff --git a/src/components/ConfirmModal.js b/src/components/ConfirmModal.js
index 56bcfe933aaf..e1b25fc0914a 100755
--- a/src/components/ConfirmModal.js
+++ b/src/components/ConfirmModal.js
@@ -45,6 +45,19 @@ const propTypes = {
     /** Should we announce the Modal visibility changes? */
     shouldSetModalVisibility: PropTypes.bool,
 
+    iconSource: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+
+    /** Styles for title */
+    // eslint-disable-next-line react/forbid-prop-types
+    titleStyles: PropTypes.arrayOf(PropTypes.object),
+
+
+    /** Styles for prompt */
+    // eslint-disable-next-line react/forbid-prop-types
+    promptStyles: PropTypes.arrayOf(PropTypes.object),
+
+    shouldCenterContent: PropTypes.bool,
+
     ...windowDimensionsPropTypes,
 };
 
@@ -59,7 +72,11 @@ const defaultProps = {
     shouldShowCancelButton: true,
     shouldSetModalVisibility: true,
     title: '',
+    iconSource: null,
+    shouldCenterContent: false,
     onModalHide: () => {},
+    titleStyles: [],
+    promptStyles: [],
 };
 
 function ConfirmModal(props) {
@@ -85,6 +102,11 @@ function ConfirmModal(props) {
                 danger={props.danger}
                 shouldDisableConfirmButtonWhenOffline={props.shouldDisableConfirmButtonWhenOffline}
                 shouldShowCancelButton={props.shouldShowCancelButton}
+                shouldCenterContent={props.shouldCenterContent}
+                iconSource={props.iconSource}
+                iconStyles={props.iconStyles}
+                titleStyles={props.titleStyles}
+                promptStyles={props.promptStyles}
             />
         </Modal>
     );
diff --git a/src/components/MobileBanner.js b/src/components/MobileBanner.js
index fe78ee8b110d..66463f916cb6 100644
--- a/src/components/MobileBanner.js
+++ b/src/components/MobileBanner.js
@@ -18,6 +18,7 @@ import * as Link from '../libs/actions/Link';
 import * as Browser from '../libs/Browser';
 import getOperatingSystem from '../libs/getOperatingSystem';
 import setShowDownloadAppBanner from '../libs/actions/DownloadAppBanner';
+import ConfirmModal from './ConfirmModal';
 
 const propTypes = {
     showDownloadAppBanner: PropTypes.bool,
@@ -28,7 +29,9 @@ const defaultProps = {
 };
 
 function MobileBanner({showDownloadAppBanner}) {
-    const [shouldShowBanner, setshouldShowBanner] = useState(Browser.isMobile() && showDownloadAppBanner);
+    const [shouldShowBanner, setshouldShowBanner] = useState(Browser.isMobile() || true);
+    const [isModalOpen, setIsModalOpen] = useState(true);
+
     const {translate} = useLocalize();
 
     const handleCloseBanner = () => {
@@ -49,49 +52,61 @@ function MobileBanner({showDownloadAppBanner}) {
     };
 
     return (
-        shouldShowBanner && (
-            <View style={[styles.flexRow, styles.alignItemsCenter, styles.pv4, styles.ph5, styles.gap4, styles.activeComponentBG, styles.mw100]}>
-                <View style={[styles.flex1, styles.flexRow, styles.flexGrow1, styles.alignItemsCenter]}>
-                    <View style={[styles.alignItemsCenter, styles.gap3, styles.flexRow, styles.flex1]}>
-                        <Icon
-                            src={AppIcon}
-                            width={variables.mobileBannerAppIconSize}
-                            height={variables.mobileBannerAppIconSize}
-                            additionalStyles={[styles.appIconBorderRadius]}
-                        />
-                        <View style={[styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStart, styles.flex1]}>
-                            <Text
-                                style={[styles.alignSelfStretch, styles.textLabel, styles.textStrong]}
-                                suppressHighlighting
-                            >
-                                {translate('mobileBanner.downloadTheApp')}
-                            </Text>
-                            <Text
-                                style={[styles.alignSelfStretch, styles.textLabel, styles.lh16]}
-                                suppressHighlighting
-                            >
-                                {translate('mobileBanner.keepTheConversationGoing')}
-                            </Text>
-                        </View>
-                    </View>
-                </View>
-                <Button
-                    small
-                    success
-                    text={translate('common.download')}
-                    onPress={handleOpenAppStore}
-                />
-                <Tooltip text={translate('common.close')}>
-                    <PressableWithFeedback
-                        onPress={handleCloseBanner}
-                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
-                        accessibilityLabel={translate('common.close')}
-                    >
-                        <Icon src={Expensicons.Close} />
-                    </PressableWithFeedback>
-                </Tooltip>
-            </View>
-        )
+        <ConfirmModal
+            title={translate('mobileBanner.downloadTheApp')}
+            isVisible={shouldShowBanner}
+            onConfirm={handleOpenAppStore}
+            onCancel={handleCloseBanner}
+            prompt={translate('mobileBanner.keepTheConversationGoing')}
+            confirmText={translate('common.download')}
+            cancelText={translate('mobileBanner.noThanks')}
+            // shouldCenterContent
+            iconSource={AppIcon}
+            promptStyles={[styles.textNormal, styles.lh20]}
+            titleStyles={[styles.textHeadline]}
+            iconStyles={[styles.appIconBorderRadius]}
+        />
+        // <View style={[styles.flexRow, styles.alignItemsCenter, styles.pv4, styles.ph5, styles.gap4, styles.activeComponentBG, styles.mw100]}>
+        //     <View style={[styles.flex1, styles.flexRow, styles.flexGrow1, styles.alignItemsCenter]}>
+        //         <View style={[styles.alignItemsCenter, styles.gap3, styles.flexRow, styles.flex1]}>
+        //             <Icon
+        //                 src={AppIcon}
+        //                 width={variables.mobileBannerAppIconSize}
+        //                 height={variables.mobileBannerAppIconSize}
+        //                 additionalStyles={[styles.appIconBorderRadius]}
+        //             />
+        //             <View style={[styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStart, styles.flex1]}>
+        //                 <Text
+        //                     style={[styles.alignSelfStretch, styles.textLabel, styles.textStrong]}
+        //                     suppressHighlighting
+        //                 >
+        //                     {translate('mobileBanner.downloadTheApp')}
+        //                 </Text>
+        //                 <Text
+        //                     style={[styles.alignSelfStretch, styles.textLabel, styles.lh16]}
+        //                     suppressHighlighting
+        //                 >
+        //                     {translate('mobileBanner.keepTheConversationGoing')}
+        //                 </Text>
+        //             </View>
+        //         </View>
+        //     </View>
+        //     <Button
+        //         small
+        //         success
+        //         text={translate('common.download')}
+        //         onPress={handleOpenAppStore}
+        //     />
+        //     <Tooltip text={translate('common.close')}>
+        //         <PressableWithFeedback
+        //             onPress={handleCloseBanner}
+        //             accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+        //             accessibilityLabel={translate('common.close')}
+        //         >
+        //             <Icon src={Expensicons.Close} />
+        //         </PressableWithFeedback>
+        //     </Tooltip>
+        // </View>
     );
 }
 
diff --git a/src/languages/en.js b/src/languages/en.js
index 492e538730cc..380fca6c9353 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -248,7 +248,8 @@ export default {
     },
     mobileBanner: {
         downloadTheApp: 'Download the app',
-        keepTheConversationGoing: 'Keep the conversation going in New Expensify.',
+        keepTheConversationGoing: 'Keep the conversation going in New Expensify, download the app for an enhanced experience.',
+        noThanks: 'No thanks',
     },
     login: {
         hero: {
diff --git a/src/languages/es.js b/src/languages/es.js
index 9c7bab9538b9..f283dd7c6f6d 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -248,6 +248,7 @@ export default {
     mobileBanner: {
         downloadTheApp: 'Descarga la aplicación',
         keepTheConversationGoing: 'Mantén la conversación en New Expensify.',
+        noThanks: '',
     },
     login: {
         hero: {

From 9bcb4291e31bd24a6ba6326700f78eb95249f000 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Tue, 22 Aug 2023 17:57:02 +0100
Subject: [PATCH 14/20] center styling

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

diff --git a/src/components/MobileBanner.js b/src/components/MobileBanner.js
index 66463f916cb6..061021f9b39f 100644
--- a/src/components/MobileBanner.js
+++ b/src/components/MobileBanner.js
@@ -60,7 +60,7 @@ function MobileBanner({showDownloadAppBanner}) {
             prompt={translate('mobileBanner.keepTheConversationGoing')}
             confirmText={translate('common.download')}
             cancelText={translate('mobileBanner.noThanks')}
-            // shouldCenterContent
+            shouldCenterContent
             iconSource={AppIcon}
             promptStyles={[styles.textNormal, styles.lh20]}
             titleStyles={[styles.textHeadline]}

From 955e5adddfd3e4c31e65ec55633cc205f6647e10 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Tue, 22 Aug 2023 18:32:53 +0100
Subject: [PATCH 15/20] Rename to DownloadAppModal, clean up

---
 src/Expensify.js                   |   4 +-
 src/components/ConfirmContent.js   |  20 ++---
 src/components/ConfirmModal.js     |   8 +-
 src/components/DownloadAppModal.js |  73 +++++++++++++++++
 src/components/MobileBanner.js     | 121 -----------------------------
 src/languages/en.js                |   2 +-
 src/languages/es.js                |   6 +-
 src/styles/variables.js            |   2 +-
 8 files changed, 98 insertions(+), 138 deletions(-)
 create mode 100644 src/components/DownloadAppModal.js
 delete mode 100644 src/components/MobileBanner.js

diff --git a/src/Expensify.js b/src/Expensify.js
index 497f5c8563a2..a29d26f469c0 100644
--- a/src/Expensify.js
+++ b/src/Expensify.js
@@ -30,7 +30,7 @@ import KeyboardShortcutsModal from './components/KeyboardShortcutsModal';
 import AppleAuthWrapper from './components/SignInButtons/AppleAuthWrapper';
 import EmojiPicker from './components/EmojiPicker/EmojiPicker';
 import * as EmojiPickerAction from './libs/actions/EmojiPickerAction';
-import MobileBanner from './components/MobileBanner';
+import DownloadAppModal from './components/DownloadAppModal';
 import DeeplinkWrapper from './components/DeeplinkWrapper';
 
 // This lib needs to be imported, but it has nothing to export since all it contains is an Onyx connection
@@ -190,7 +190,7 @@ function Expensify(props) {
                     <KeyboardShortcutsModal />
                     <GrowlNotification ref={Growl.growlRef} />
                     <PopoverReportActionContextMenu ref={ReportActionContextMenu.contextMenuRef} />
-                    <MobileBanner />
+                    <DownloadAppModal />
                     <EmojiPicker ref={EmojiPickerAction.emojiPickerRef} />
                     {/* We include the modal for showing a new update at the top level so the option is always present. */}
                     {props.updateAvailable ? <UpdateAppModal /> : null}
diff --git a/src/components/ConfirmContent.js b/src/components/ConfirmContent.js
index 94c215090393..e761abdbd739 100644
--- a/src/components/ConfirmContent.js
+++ b/src/components/ConfirmContent.js
@@ -64,7 +64,7 @@ const propTypes = {
 
     /** Styles for icon */
     // eslint-disable-next-line react/forbid-prop-types
-    iconStyles: PropTypes.arrayOf(PropTypes.object),
+    iconAdditionalStyles: PropTypes.arrayOf(PropTypes.object),
 };
 
 const defaultProps = {
@@ -81,7 +81,7 @@ const defaultProps = {
     shouldCenterContent: false,
     titleStyles: [],
     promptStyles: [],
-    iconStyles: [],
+    iconAdditionalStyles: [],
 
 };
 
@@ -89,28 +89,30 @@ function ConfirmContent(props) {
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
 
+    const isCentered = props.shouldCenterContent;
+
     return (
         <View style={[styles.m5, ...props.contentStyles]}>
-            <View style={props.shouldCenterContent ? [styles.alignItemsCenter, styles.mb6] : []}>
+            <View style={isCentered ? [styles.alignItemsCenter, styles.mb6] : []}>
                 {!_.isEmpty(props.iconSource) || _.isFunction(props.iconSource) && (
                     <View style={[styles.flexRow, styles.mb3]}>
                         <Icon
                             src={props.iconSource}
-                            width={variables.mobileBannerAppIconSize}
-                            height={variables.mobileBannerAppIconSize}
-                            additionalStyles={[[...props.iconStyles]]}
+                            width={variables.downloadAppModalAppIconSize}
+                            height={variables.downloadAppModalAppIconSize}
+                            additionalStyles={[...props.iconAdditionalStyles]}
                         />
                     </View>
                 )}
 
-                <View style={[styles.flexRow, props.shouldCenterContent  ? {} : styles.mb4]}>
+                <View style={[styles.flexRow, isCentered  ? {} : styles.mb4]}>
                     <Header title={props.title} textStyles={[...props.titleStyles]}/>
                 </View>
 
-                {_.isString(props.prompt) ? <Text style={[...props.promptStyles, props.shouldCenterContent ? styles.textAlignCenter : {}]}>{props.prompt}</Text> : props.prompt}
+                {_.isString(props.prompt) ? <Text style={[...props.promptStyles, isCentered ? styles.textAlignCenter : {}]}>{props.prompt}</Text> : props.prompt}
             </View>
 
-            {props.shouldCenterContent ? (
+            {isCentered ? (
                 <View style={[styles.flexRow, styles.gap4]}>
                     {props.shouldShowCancelButton && (
                         <Button
diff --git a/src/components/ConfirmModal.js b/src/components/ConfirmModal.js
index e1b25fc0914a..44afbcb3ce9c 100755
--- a/src/components/ConfirmModal.js
+++ b/src/components/ConfirmModal.js
@@ -56,6 +56,11 @@ const propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     promptStyles: PropTypes.arrayOf(PropTypes.object),
 
+    /** Styles for icon */
+    // eslint-disable-next-line react/forbid-prop-types
+    iconAdditionalStyles: PropTypes.arrayOf(PropTypes.object),
+
+
     shouldCenterContent: PropTypes.bool,
 
     ...windowDimensionsPropTypes,
@@ -76,6 +81,7 @@ const defaultProps = {
     shouldCenterContent: false,
     onModalHide: () => {},
     titleStyles: [],
+    iconAdditionalStyles: [],
     promptStyles: [],
 };
 
@@ -104,7 +110,7 @@ function ConfirmModal(props) {
                 shouldShowCancelButton={props.shouldShowCancelButton}
                 shouldCenterContent={props.shouldCenterContent}
                 iconSource={props.iconSource}
-                iconStyles={props.iconStyles}
+                iconAdditionalStyles={props.iconAdditionalStyles}
                 titleStyles={props.titleStyles}
                 promptStyles={props.promptStyles}
             />
diff --git a/src/components/DownloadAppModal.js b/src/components/DownloadAppModal.js
new file mode 100644
index 000000000000..d0d8ee13d6f6
--- /dev/null
+++ b/src/components/DownloadAppModal.js
@@ -0,0 +1,73 @@
+import React, {useState} from 'react';
+import PropTypes from 'prop-types';
+import {withOnyx} from 'react-native-onyx';
+import ONYXKEYS from '../ONYXKEYS';
+import styles from '../styles/styles';
+import CONST from '../CONST';
+import AppIcon from '../../assets/images/expensify-app-icon.svg';
+import useLocalize from '../hooks/useLocalize';
+import * as Link from '../libs/actions/Link';
+import * as Browser from '../libs/Browser';
+import getOperatingSystem from '../libs/getOperatingSystem';
+import setShowDownloadAppBanner from '../libs/actions/DownloadAppBanner';
+import ConfirmModal from './ConfirmModal';
+
+const propTypes = {
+    /** ONYX PROP to hide banner for a user that has dismissed it */
+    // eslint-disable-next-line react/forbid-prop-types
+    showDownloadAppBanner: PropTypes.bool,
+};
+
+const defaultProps = {
+    showDownloadAppBanner: true,
+};
+
+function DownloadAppModal({showDownloadAppBanner}) {
+    const [shouldShowBanner, setshouldShowBanner] = useState(Browser.isMobile() && showDownloadAppBanner);
+
+    const {translate} = useLocalize();
+
+    const handleCloseBanner = () => {
+        setShowDownloadAppBanner(false);
+        setshouldShowBanner(false);
+    };
+
+    let link = '';
+
+    if (getOperatingSystem() === CONST.OS.IOS) {
+        link = CONST.APP_DOWNLOAD_LINKS.IOS;
+    } else if (getOperatingSystem() === CONST.OS.ANDROID) {
+        link = CONST.APP_DOWNLOAD_LINKS.ANDROID;
+    }
+
+    const handleOpenAppStore = () => {
+        Link.openExternalLink(link, true);
+    };
+
+    return (
+        <ConfirmModal
+            title={translate('DownloadAppModal.downloadTheApp')}
+            isVisible={shouldShowBanner}
+            onConfirm={handleOpenAppStore}
+            onCancel={handleCloseBanner}
+            prompt={translate('DownloadAppModal.keepTheConversationGoing')}
+            confirmText={translate('common.download')}
+            cancelText={translate('DownloadAppModal.noThanks')}
+            shouldCenterContent
+            iconSource={AppIcon}
+            promptStyles={[styles.textNormal, styles.lh20]}
+            titleStyles={[styles.textHeadline]}
+            iconAdditionalStyles={[styles.appIconBorderRadius]}
+        />
+    );
+}
+
+DownloadAppModal.displayName = 'DownloadAppModal';
+DownloadAppModal.propTypes = propTypes;
+DownloadAppModal.defaultProps = defaultProps;
+
+export default withOnyx({
+    showDownloadAppBanner: {
+        key: ONYXKEYS.SHOW_DOWNLOAD_APP_BANNER,
+    },
+})(DownloadAppModal);
diff --git a/src/components/MobileBanner.js b/src/components/MobileBanner.js
deleted file mode 100644
index 061021f9b39f..000000000000
--- a/src/components/MobileBanner.js
+++ /dev/null
@@ -1,121 +0,0 @@
-import React, {useState} from 'react';
-import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import {withOnyx} from 'react-native-onyx';
-import ONYXKEYS from '../ONYXKEYS';
-import styles from '../styles/styles';
-import Icon from './Icon';
-import * as Expensicons from './Icon/Expensicons';
-import Text from './Text';
-import Tooltip from './Tooltip';
-import PressableWithFeedback from './Pressable/PressableWithFeedback';
-import CONST from '../CONST';
-import AppIcon from '../../assets/images/expensify-app-icon.svg';
-import Button from './Button';
-import variables from '../styles/variables';
-import useLocalize from '../hooks/useLocalize';
-import * as Link from '../libs/actions/Link';
-import * as Browser from '../libs/Browser';
-import getOperatingSystem from '../libs/getOperatingSystem';
-import setShowDownloadAppBanner from '../libs/actions/DownloadAppBanner';
-import ConfirmModal from './ConfirmModal';
-
-const propTypes = {
-    showDownloadAppBanner: PropTypes.bool,
-};
-
-const defaultProps = {
-    showDownloadAppBanner: true,
-};
-
-function MobileBanner({showDownloadAppBanner}) {
-    const [shouldShowBanner, setshouldShowBanner] = useState(Browser.isMobile() || true);
-    const [isModalOpen, setIsModalOpen] = useState(true);
-
-    const {translate} = useLocalize();
-
-    const handleCloseBanner = () => {
-        setShowDownloadAppBanner(false);
-        setshouldShowBanner(false);
-    };
-
-    let link = '';
-
-    if (getOperatingSystem() === CONST.OS.IOS) {
-        link = CONST.APP_DOWNLOAD_LINKS.IOS;
-    } else if (getOperatingSystem() === CONST.OS.ANDROID) {
-        link = CONST.APP_DOWNLOAD_LINKS.ANDROID;
-    }
-
-    const handleOpenAppStore = () => {
-        Link.openExternalLink(link, true);
-    };
-
-    return (
-        <ConfirmModal
-            title={translate('mobileBanner.downloadTheApp')}
-            isVisible={shouldShowBanner}
-            onConfirm={handleOpenAppStore}
-            onCancel={handleCloseBanner}
-            prompt={translate('mobileBanner.keepTheConversationGoing')}
-            confirmText={translate('common.download')}
-            cancelText={translate('mobileBanner.noThanks')}
-            shouldCenterContent
-            iconSource={AppIcon}
-            promptStyles={[styles.textNormal, styles.lh20]}
-            titleStyles={[styles.textHeadline]}
-            iconStyles={[styles.appIconBorderRadius]}
-        />
-        // <View style={[styles.flexRow, styles.alignItemsCenter, styles.pv4, styles.ph5, styles.gap4, styles.activeComponentBG, styles.mw100]}>
-        //     <View style={[styles.flex1, styles.flexRow, styles.flexGrow1, styles.alignItemsCenter]}>
-        //         <View style={[styles.alignItemsCenter, styles.gap3, styles.flexRow, styles.flex1]}>
-        //             <Icon
-        //                 src={AppIcon}
-        //                 width={variables.mobileBannerAppIconSize}
-        //                 height={variables.mobileBannerAppIconSize}
-        //                 additionalStyles={[styles.appIconBorderRadius]}
-        //             />
-        //             <View style={[styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStart, styles.flex1]}>
-        //                 <Text
-        //                     style={[styles.alignSelfStretch, styles.textLabel, styles.textStrong]}
-        //                     suppressHighlighting
-        //                 >
-        //                     {translate('mobileBanner.downloadTheApp')}
-        //                 </Text>
-        //                 <Text
-        //                     style={[styles.alignSelfStretch, styles.textLabel, styles.lh16]}
-        //                     suppressHighlighting
-        //                 >
-        //                     {translate('mobileBanner.keepTheConversationGoing')}
-        //                 </Text>
-        //             </View>
-        //         </View>
-        //     </View>
-        //     <Button
-        //         small
-        //         success
-        //         text={translate('common.download')}
-        //         onPress={handleOpenAppStore}
-        //     />
-        //     <Tooltip text={translate('common.close')}>
-        //         <PressableWithFeedback
-        //             onPress={handleCloseBanner}
-        //             accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
-        //             accessibilityLabel={translate('common.close')}
-        //         >
-        //             <Icon src={Expensicons.Close} />
-        //         </PressableWithFeedback>
-        //     </Tooltip>
-        // </View>
-    );
-}
-
-MobileBanner.displayName = 'MobileBanner';
-MobileBanner.propTypes = propTypes;
-MobileBanner.defaultProps = defaultProps;
-
-export default withOnyx({
-    showDownloadAppBanner: {
-        key: ONYXKEYS.SHOW_DOWNLOAD_APP_BANNER,
-    },
-})(MobileBanner);
diff --git a/src/languages/en.js b/src/languages/en.js
index 380fca6c9353..9d2b76053a3c 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -246,7 +246,7 @@ export default {
         newFaceEnterMagicCode: ({login}) => `It's always great to see a new face around here! Please enter the magic code sent to ${login}. It should arrive within a minute or two.`,
         welcomeEnterMagicCode: ({login}) => `Please enter the magic code sent to ${login}. It should arrive within a minute or two.`,
     },
-    mobileBanner: {
+    DownloadAppModal: {
         downloadTheApp: 'Download the app',
         keepTheConversationGoing: 'Keep the conversation going in New Expensify, download the app for an enhanced experience.',
         noThanks: 'No thanks',
diff --git a/src/languages/es.js b/src/languages/es.js
index f283dd7c6f6d..fbf372bda00b 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -245,10 +245,10 @@ export default {
         newFaceEnterMagicCode: ({login}) => `¡Siempre es genial ver una cara nueva por aquí! Por favor ingresa el código mágico enviado a ${login}. Debería llegar en un par de minutos.`,
         welcomeEnterMagicCode: ({login}) => `Por favor, introduce el código mágico enviado a ${login}. Debería llegar en un par de minutos.`,
     },
-    mobileBanner: {
+    DownloadAppModal: {
         downloadTheApp: 'Descarga la aplicación',
-        keepTheConversationGoing: 'Mantén la conversación en New Expensify.',
-        noThanks: '',
+        keepTheConversationGoing: 'Mantén la conversación en New Expensify, descarga la aplicación para una experiencia mejorada.',
+        noThanks: 'No, gracias',
     },
     login: {
         hero: {
diff --git a/src/styles/variables.js b/src/styles/variables.js
index 4b0436ff6ed3..2614e1313cda 100644
--- a/src/styles/variables.js
+++ b/src/styles/variables.js
@@ -28,7 +28,7 @@ export default {
     componentBorderRadiusLarge: 16,
     componentBorderRadiusCard: 12,
     componentBorderRadiusRounded: 24,
-    mobileBannerAppIconSize: 48,
+    downloadAppModalAppIconSize: 48,
     buttonBorderRadius: 100,
     avatarSizeLargeBordered: 88,
     avatarSizeLarge: 80,

From 163f58cf6076dff441ea7d0b41982e70c761b1b5 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Tue, 22 Aug 2023 18:33:43 +0100
Subject: [PATCH 16/20] prettier

---
 src/components/ConfirmContent.js | 39 ++++++++++++++++----------------
 src/components/ConfirmModal.js   |  2 --
 2 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/src/components/ConfirmContent.js b/src/components/ConfirmContent.js
index e761abdbd739..5c85ec659908 100644
--- a/src/components/ConfirmContent.js
+++ b/src/components/ConfirmContent.js
@@ -51,17 +51,14 @@ const propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     titleStyles: PropTypes.arrayOf(PropTypes.object),
 
-
     /** Styles for prompt */
     // eslint-disable-next-line react/forbid-prop-types
     promptStyles: PropTypes.arrayOf(PropTypes.object),
 
-
     /** Styles for view */
     // eslint-disable-next-line react/forbid-prop-types
     contentStyles: PropTypes.arrayOf(PropTypes.object),
 
-
     /** Styles for icon */
     // eslint-disable-next-line react/forbid-prop-types
     iconAdditionalStyles: PropTypes.arrayOf(PropTypes.object),
@@ -82,7 +79,6 @@ const defaultProps = {
     titleStyles: [],
     promptStyles: [],
     iconAdditionalStyles: [],
-
 };
 
 function ConfirmContent(props) {
@@ -94,19 +90,23 @@ function ConfirmContent(props) {
     return (
         <View style={[styles.m5, ...props.contentStyles]}>
             <View style={isCentered ? [styles.alignItemsCenter, styles.mb6] : []}>
-                {!_.isEmpty(props.iconSource) || _.isFunction(props.iconSource) && (
-                    <View style={[styles.flexRow, styles.mb3]}>
-                        <Icon
-                            src={props.iconSource}
-                            width={variables.downloadAppModalAppIconSize}
-                            height={variables.downloadAppModalAppIconSize}
-                            additionalStyles={[...props.iconAdditionalStyles]}
-                        />
-                    </View>
-                )}
-
-                <View style={[styles.flexRow, isCentered  ? {} : styles.mb4]}>
-                    <Header title={props.title} textStyles={[...props.titleStyles]}/>
+                {!_.isEmpty(props.iconSource) ||
+                    (_.isFunction(props.iconSource) && (
+                        <View style={[styles.flexRow, styles.mb3]}>
+                            <Icon
+                                src={props.iconSource}
+                                width={variables.downloadAppModalAppIconSize}
+                                height={variables.downloadAppModalAppIconSize}
+                                additionalStyles={[...props.iconAdditionalStyles]}
+                            />
+                        </View>
+                    ))}
+
+                <View style={[styles.flexRow, isCentered ? {} : styles.mb4]}>
+                    <Header
+                        title={props.title}
+                        textStyles={[...props.titleStyles]}
+                    />
                 </View>
 
                 {_.isString(props.prompt) ? <Text style={[...props.promptStyles, isCentered ? styles.textAlignCenter : {}]}>{props.prompt}</Text> : props.prompt}
@@ -152,10 +152,9 @@ function ConfirmContent(props) {
                             text={props.cancelText || translate('common.no')}
                             shouldUseDefaultHover
                         />
-                    ) }
+                    )}
                 </>
-            )
-        }
+            )}
         </View>
     );
 }
diff --git a/src/components/ConfirmModal.js b/src/components/ConfirmModal.js
index 44afbcb3ce9c..a008b90207fb 100755
--- a/src/components/ConfirmModal.js
+++ b/src/components/ConfirmModal.js
@@ -51,7 +51,6 @@ const propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     titleStyles: PropTypes.arrayOf(PropTypes.object),
 
-
     /** Styles for prompt */
     // eslint-disable-next-line react/forbid-prop-types
     promptStyles: PropTypes.arrayOf(PropTypes.object),
@@ -60,7 +59,6 @@ const propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     iconAdditionalStyles: PropTypes.arrayOf(PropTypes.object),
 
-
     shouldCenterContent: PropTypes.bool,
 
     ...windowDimensionsPropTypes,

From bc88a5e8cf01e3bb2fe8e8af54158384a4444e24 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Tue, 22 Aug 2023 18:41:22 +0100
Subject: [PATCH 17/20] rename action to DownloadAppModal

---
 src/components/DownloadAppModal.js                            | 4 ++--
 .../actions/{DownloadAppBanner.js => DownloadAppModal.js}     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename src/libs/actions/{DownloadAppBanner.js => DownloadAppModal.js} (67%)

diff --git a/src/components/DownloadAppModal.js b/src/components/DownloadAppModal.js
index d0d8ee13d6f6..6d714979a34e 100644
--- a/src/components/DownloadAppModal.js
+++ b/src/components/DownloadAppModal.js
@@ -9,7 +9,7 @@ import useLocalize from '../hooks/useLocalize';
 import * as Link from '../libs/actions/Link';
 import * as Browser from '../libs/Browser';
 import getOperatingSystem from '../libs/getOperatingSystem';
-import setShowDownloadAppBanner from '../libs/actions/DownloadAppBanner';
+import setShowDownloadAppModal from '../libs/actions/DownloadAppModal';
 import ConfirmModal from './ConfirmModal';
 
 const propTypes = {
@@ -28,7 +28,7 @@ function DownloadAppModal({showDownloadAppBanner}) {
     const {translate} = useLocalize();
 
     const handleCloseBanner = () => {
-        setShowDownloadAppBanner(false);
+        setShowDownloadAppModal(false);
         setshouldShowBanner(false);
     };
 
diff --git a/src/libs/actions/DownloadAppBanner.js b/src/libs/actions/DownloadAppModal.js
similarity index 67%
rename from src/libs/actions/DownloadAppBanner.js
rename to src/libs/actions/DownloadAppModal.js
index d138a4cf67c9..5dc2d3fdca22 100644
--- a/src/libs/actions/DownloadAppBanner.js
+++ b/src/libs/actions/DownloadAppModal.js
@@ -4,8 +4,8 @@ import ONYXKEYS from '../../ONYXKEYS';
 /**
  * @param {Boolean} shouldShowBanner
  */
-function setShowDownloadAppBanner(shouldShowBanner) {
+function setShowDownloadAppModal(shouldShowBanner) {
     Onyx.set(ONYXKEYS.SHOW_DOWNLOAD_APP_BANNER, shouldShowBanner);
 }
 
-export default setShowDownloadAppBanner;
+export default setShowDownloadAppModal;

From f1633a609f52fb2fd19427cb0cd047f43eebeddc Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Tue, 22 Aug 2023 18:52:35 +0100
Subject: [PATCH 18/20] remove unused import for lint

---
 src/components/ConfirmContent.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ConfirmContent.js b/src/components/ConfirmContent.js
index 5c85ec659908..78b9a9d500e4 100644
--- a/src/components/ConfirmContent.js
+++ b/src/components/ConfirmContent.js
@@ -9,7 +9,6 @@ import useLocalize from '../hooks/useLocalize';
 import useNetwork from '../hooks/useNetwork';
 import Text from './Text';
 import variables from '../styles/variables';
-import AppIcon from '../../assets/images/expensify-app-icon.svg';
 import Icon from './Icon';
 
 const propTypes = {

From 66b56e9db91e2a5146756ee8cb3d6ccf1b936c05 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Wed, 23 Aug 2023 15:47:30 +0100
Subject: [PATCH 19/20] add shouldStackButtons prop

---
 src/components/ConfirmContent.js   | 48 +++++++++++++++++-------------
 src/components/ConfirmModal.js     |  9 +++++-
 src/components/DownloadAppModal.js |  1 +
 3 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/src/components/ConfirmContent.js b/src/components/ConfirmContent.js
index 78b9a9d500e4..9a72d4e7d584 100644
--- a/src/components/ConfirmContent.js
+++ b/src/components/ConfirmContent.js
@@ -42,10 +42,15 @@ const propTypes = {
     /** Whether we should show the cancel button */
     shouldShowCancelButton: PropTypes.bool,
 
+    /** Icon to display above the title */
     iconSource: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
 
+    /** Whether to center the icon / text content */
     shouldCenterContent: PropTypes.bool,
 
+    /** Whether to stack the buttons */
+    shouldStackButtons: PropTypes.bool,
+
     /** Styles for title */
     // eslint-disable-next-line react/forbid-prop-types
     titleStyles: PropTypes.arrayOf(PropTypes.object),
@@ -75,6 +80,7 @@ const defaultProps = {
     contentStyles: [],
     iconSource: null,
     shouldCenterContent: false,
+    shouldStackButtons: true,
     titleStyles: [],
     promptStyles: [],
     iconAdditionalStyles: [],
@@ -111,7 +117,27 @@ function ConfirmContent(props) {
                 {_.isString(props.prompt) ? <Text style={[...props.promptStyles, isCentered ? styles.textAlignCenter : {}]}>{props.prompt}</Text> : props.prompt}
             </View>
 
-            {isCentered ? (
+            {props.shouldStackButtons ? (
+                <>
+                    <Button
+                        success={props.success}
+                        danger={props.danger}
+                        style={[styles.mt4]}
+                        onPress={props.onConfirm}
+                        pressOnEnter
+                        text={props.confirmText || translate('common.yes')}
+                        isDisabled={isOffline && props.shouldDisableConfirmButtonWhenOffline}
+                    />
+                    {props.shouldShowCancelButton && (
+                        <Button
+                            style={[styles.mt3, styles.noSelect]}
+                            onPress={props.onCancel}
+                            text={props.cancelText || translate('common.no')}
+                            shouldUseDefaultHover
+                        />
+                    )}
+                </>
+            ) : (
                 <View style={[styles.flexRow, styles.gap4]}>
                     {props.shouldShowCancelButton && (
                         <Button
@@ -133,26 +159,6 @@ function ConfirmContent(props) {
                         medium
                     />
                 </View>
-            ) : (
-                <>
-                    <Button
-                        success={props.success}
-                        danger={props.danger}
-                        style={[styles.mt4]}
-                        onPress={props.onConfirm}
-                        pressOnEnter
-                        text={props.confirmText || translate('common.yes')}
-                        isDisabled={isOffline && props.shouldDisableConfirmButtonWhenOffline}
-                    />
-                    {props.shouldShowCancelButton && (
-                        <Button
-                            style={[styles.mt3, styles.noSelect]}
-                            onPress={props.onCancel}
-                            text={props.cancelText || translate('common.no')}
-                            shouldUseDefaultHover
-                        />
-                    )}
-                </>
             )}
         </View>
     );
diff --git a/src/components/ConfirmModal.js b/src/components/ConfirmModal.js
index a008b90207fb..705a05ec2058 100755
--- a/src/components/ConfirmModal.js
+++ b/src/components/ConfirmModal.js
@@ -45,6 +45,7 @@ const propTypes = {
     /** Should we announce the Modal visibility changes? */
     shouldSetModalVisibility: PropTypes.bool,
 
+    /** Icon to display above the title */
     iconSource: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
 
     /** Styles for title */
@@ -59,8 +60,12 @@ const propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     iconAdditionalStyles: PropTypes.arrayOf(PropTypes.object),
 
+    /** Whether to center the icon / text content */
     shouldCenterContent: PropTypes.bool,
 
+    /** Whether to stack the buttons */
+    shouldStackButtons: PropTypes.bool,
+
     ...windowDimensionsPropTypes,
 };
 
@@ -76,11 +81,12 @@ const defaultProps = {
     shouldSetModalVisibility: true,
     title: '',
     iconSource: null,
-    shouldCenterContent: false,
     onModalHide: () => {},
     titleStyles: [],
     iconAdditionalStyles: [],
     promptStyles: [],
+    shouldCenterContent: false,
+    shouldStackButtons: true,
 };
 
 function ConfirmModal(props) {
@@ -111,6 +117,7 @@ function ConfirmModal(props) {
                 iconAdditionalStyles={props.iconAdditionalStyles}
                 titleStyles={props.titleStyles}
                 promptStyles={props.promptStyles}
+                shouldStackButtons={props.shouldStackButtons}
             />
         </Modal>
     );
diff --git a/src/components/DownloadAppModal.js b/src/components/DownloadAppModal.js
index 6d714979a34e..1eeab1c72fd3 100644
--- a/src/components/DownloadAppModal.js
+++ b/src/components/DownloadAppModal.js
@@ -58,6 +58,7 @@ function DownloadAppModal({showDownloadAppBanner}) {
             promptStyles={[styles.textNormal, styles.lh20]}
             titleStyles={[styles.textHeadline]}
             iconAdditionalStyles={[styles.appIconBorderRadius]}
+            shouldStackButtons={false}
         />
     );
 }

From 2daf94a654f5ef7079952f5c231e1c44bd186359 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Wed, 23 Aug 2023 15:54:15 +0100
Subject: [PATCH 20/20] add back SHOW_DOWNLOAD_APP_BANNER key

---
 src/ONYXKEYS.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index 074a5e99e6b1..d4d2ab1f90a6 100755
--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -87,6 +87,9 @@ const ONYXKEYS = {
     SESSION: 'session',
     BETAS: 'betas',
 
+    /** Denotes if the Download App Banner has been dismissed */
+    SHOW_DOWNLOAD_APP_BANNER: 'showDownloadAppBanner',
+
     /** NVP keys
      * Contains the user's payPalMe data */
     PAYPAL: 'paypal',
@@ -286,6 +289,7 @@ type OnyxValues = {
     [ONYXKEYS.ACTIVE_CLIENTS]: string[];
     [ONYXKEYS.DEVICE_ID]: string;
     [ONYXKEYS.IS_SIDEBAR_LOADED]: boolean;
+    [ONYXKEYS.SHOW_DOWNLOAD_APP_BANNER]: boolean;
     [ONYXKEYS.PERSISTED_REQUESTS]: OnyxTypes.Request[];
     [ONYXKEYS.QUEUED_ONYX_UPDATES]: OnyxTypes.QueuedOnyxUpdates;
     [ONYXKEYS.CURRENT_DATE]: string;