From 4517b50aedcdb2eb9ddd243aa9584339587e31c5 Mon Sep 17 00:00:00 2001
From: Thiago Brezinski <thiagobrez@gmail.com>
Date: Fri, 9 Jun 2023 16:10:20 +0100
Subject: [PATCH 1/5] fix: CodesPage buttons overlapping

---
 .../Security/TwoFactorAuth/CodesPage.js       | 20 +++++++++----------
 src/styles/styles.js                          |  6 +++---
 src/styles/utilities/spacing.js               |  4 ++++
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/CodesPage.js b/src/pages/settings/Security/TwoFactorAuth/CodesPage.js
index 02911676d430..65309624404d 100644
--- a/src/pages/settings/Security/TwoFactorAuth/CodesPage.js
+++ b/src/pages/settings/Security/TwoFactorAuth/CodesPage.js
@@ -67,7 +67,7 @@ function CodesPage(props) {
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_SECURITY)}
             />
             <FullPageOfflineBlockingView>
-                <ScrollView contentContainerStyle={styles.flex1}>
+                <ScrollView>
                     <Section
                         title={props.translate('twoFactorAuth.keepCodesSafe')}
                         icon={Illustrations.ShieldYellow}
@@ -95,7 +95,7 @@ function CodesPage(props) {
                                                 </Text>
                                             ))}
                                     </View>
-                                    <View style={styles.twoFactorAuthCodesButtonsContainer}>
+                                    <View style={styles.twoFactorAuthCodesButtonsContainer(props.isExtraSmallScreenWidth)}>
                                         <PressableWithDelayToggle
                                             text={props.translate('twoFactorAuth.copyCodes')}
                                             icon={Expensicons.Copy}
@@ -123,15 +123,15 @@ function CodesPage(props) {
                             )}
                         </View>
                     </Section>
-                    <FixedFooter style={[styles.twoFactorAuthFooter]}>
-                        <Button
-                            success
-                            text={props.translate('common.next')}
-                            onPress={() => Navigation.navigate(ROUTES.SETTINGS_2FA_VERIFY)}
-                            isDisabled={isNextButtonDisabled}
-                        />
-                    </FixedFooter>
                 </ScrollView>
+                <FixedFooter style={[styles.mtAuto, styles.pt2]}>
+                    <Button
+                        success
+                        text={props.translate('common.next')}
+                        onPress={() => Navigation.navigate(ROUTES.SETTINGS_2FA_VERIFY)}
+                        isDisabled={isNextButtonDisabled}
+                    />
+                </FixedFooter>
             </FullPageOfflineBlockingView>
         </ScreenWrapper>
     );
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 70cfac3de847..9798a76a0385 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2217,12 +2217,12 @@ const styles = {
         textAlign: 'center',
     },
 
-    twoFactorAuthCodesButtonsContainer: {
-        flexDirection: 'row',
+    twoFactorAuthCodesButtonsContainer: (isExtraSmallScreenWidth) => ({
+        flexDirection: isExtraSmallScreenWidth ? 'column' : 'row',
         justifyContent: 'center',
         gap: 12,
         marginTop: 20,
-    },
+    }),
 
     twoFactorAuthCodesButton: {
         minWidth: 100,
diff --git a/src/styles/utilities/spacing.js b/src/styles/utilities/spacing.js
index e1cbb7e42469..e6823e43e921 100644
--- a/src/styles/utilities/spacing.js
+++ b/src/styles/utilities/spacing.js
@@ -189,6 +189,10 @@ export default {
         marginTop: 44,
     },
 
+    mtAuto: {
+        marginTop: 'auto',
+    },
+
     mb0: {
         marginBottom: 0,
     },

From 9e176182a46cee617cc6d0db57844100f79555f9 Mon Sep 17 00:00:00 2001
From: Thiago Brezinski <thiagobrez@gmail.com>
Date: Tue, 13 Jun 2023 09:26:51 +0100
Subject: [PATCH 2/5] style: switch to flexWrap, remove unused style

---
 src/pages/settings/Security/TwoFactorAuth/VerifyPage.js | 2 +-
 src/styles/styles.js                                    | 7 ++-----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/VerifyPage.js b/src/pages/settings/Security/TwoFactorAuth/VerifyPage.js
index d3a53a0a03be..ec7435e292fc 100644
--- a/src/pages/settings/Security/TwoFactorAuth/VerifyPage.js
+++ b/src/pages/settings/Security/TwoFactorAuth/VerifyPage.js
@@ -138,7 +138,7 @@ function VerifyPage(props) {
                         <TwoFactorAuthForm />
                     </View>
                 </ScrollView>
-                <FixedFooter style={[styles.twoFactorAuthFooter]}>
+                <FixedFooter style={[styles.mtAuto, styles.pt2]}>
                     <Button
                         success
                         text={props.translate('common.next')}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 9798a76a0385..47a5ea223f9c 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2218,7 +2218,8 @@ const styles = {
     },
 
     twoFactorAuthCodesButtonsContainer: (isExtraSmallScreenWidth) => ({
-        flexDirection: isExtraSmallScreenWidth ? 'column' : 'row',
+        flexDirection: 'row',
+        flexWrap: isExtraSmallScreenWidth ? 'wrap' : 'nowrap',
         justifyContent: 'center',
         gap: 12,
         marginTop: 20,
@@ -2228,10 +2229,6 @@ const styles = {
         minWidth: 100,
     },
 
-    twoFactorAuthFooter: {
-        marginTop: 'auto',
-    },
-
     anonymousRoomFooter: {
         flexDirection: 'row',
         alignItems: 'center',

From bda8613d62cdeb058b812b2bfba3f0234c0fb8de Mon Sep 17 00:00:00 2001
From: Thiago Brezinski <thiagobrez@gmail.com>
Date: Wed, 14 Jun 2023 16:38:41 +0100
Subject: [PATCH 3/5] chore: move wrapping style to StyleUtils

---
 src/pages/settings/Security/TwoFactorAuth/CodesPage.js | 3 ++-
 src/styles/StyleUtils.js                               | 7 +++++++
 src/styles/styles.js                                   | 5 ++---
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/CodesPage.js b/src/pages/settings/Security/TwoFactorAuth/CodesPage.js
index 65309624404d..dce6946eb249 100644
--- a/src/pages/settings/Security/TwoFactorAuth/CodesPage.js
+++ b/src/pages/settings/Security/TwoFactorAuth/CodesPage.js
@@ -25,6 +25,7 @@ import Clipboard from '../../../../libs/Clipboard';
 import themeColors from '../../../../styles/themes/default';
 import localFileDownload from '../../../../libs/localFileDownload';
 import * as TwoFactorAuthActions from '../../../../libs/actions/TwoFactorAuthActions';
+import * as StyleUtils from '../../../../styles/StyleUtils';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -95,7 +96,7 @@ function CodesPage(props) {
                                                 </Text>
                                             ))}
                                     </View>
-                                    <View style={styles.twoFactorAuthCodesButtonsContainer(props.isExtraSmallScreenWidth)}>
+                                    <View style={[styles.twoFactorAuthCodesButtonsContainer, StyleUtils.getExtraSmallWrappingStyle(props.isExtraSmallScreenWidth)]}>
                                         <PressableWithDelayToggle
                                             text={props.translate('twoFactorAuth.copyCodes')}
                                             icon={Expensicons.Copy}
diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index b7b81488d71f..edbd20c517c8 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -1184,6 +1184,12 @@ function getOuterModalStyle(windowHeight, viewportOffsetTop) {
     return Browser.isMobile() ? {maxHeight: windowHeight, marginTop: viewportOffsetTop} : {};
 }
 
+function getExtraSmallWrappingStyle(isExtraSmallScreenWidth) {
+    return {
+        flexWrap: isExtraSmallScreenWidth ? 'wrap' : 'nowrap',
+    };
+}
+
 export {
     getAvatarSize,
     getAvatarStyle,
@@ -1250,4 +1256,5 @@ export {
     getMentionTextColor,
     getHeightOfMagicCodeInput,
     getOuterModalStyle,
+    getExtraSmallWrappingStyle,
 };
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 47a5ea223f9c..69ec36e3f667 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2217,13 +2217,12 @@ const styles = {
         textAlign: 'center',
     },
 
-    twoFactorAuthCodesButtonsContainer: (isExtraSmallScreenWidth) => ({
+    twoFactorAuthCodesButtonsContainer: {
         flexDirection: 'row',
-        flexWrap: isExtraSmallScreenWidth ? 'wrap' : 'nowrap',
         justifyContent: 'center',
         gap: 12,
         marginTop: 20,
-    }),
+    },
 
     twoFactorAuthCodesButton: {
         minWidth: 100,

From 67d37db5570b6d693f012a60f667f196378082a0 Mon Sep 17 00:00:00 2001
From: Thiago Brezinski <thiagobrez@gmail.com>
Date: Thu, 15 Jun 2023 13:07:35 +0100
Subject: [PATCH 4/5] chore: rename getWrappingStyle

---
 src/pages/settings/Security/TwoFactorAuth/CodesPage.js | 2 +-
 src/styles/StyleUtils.js                               | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/settings/Security/TwoFactorAuth/CodesPage.js b/src/pages/settings/Security/TwoFactorAuth/CodesPage.js
index dce6946eb249..003bdbe6a968 100644
--- a/src/pages/settings/Security/TwoFactorAuth/CodesPage.js
+++ b/src/pages/settings/Security/TwoFactorAuth/CodesPage.js
@@ -96,7 +96,7 @@ function CodesPage(props) {
                                                 </Text>
                                             ))}
                                     </View>
-                                    <View style={[styles.twoFactorAuthCodesButtonsContainer, StyleUtils.getExtraSmallWrappingStyle(props.isExtraSmallScreenWidth)]}>
+                                    <View style={[styles.twoFactorAuthCodesButtonsContainer, StyleUtils.getWrappingStyle(props.isExtraSmallScreenWidth)]}>
                                         <PressableWithDelayToggle
                                             text={props.translate('twoFactorAuth.copyCodes')}
                                             icon={Expensicons.Copy}
diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index edbd20c517c8..f2f8ec5de11b 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -1184,7 +1184,7 @@ function getOuterModalStyle(windowHeight, viewportOffsetTop) {
     return Browser.isMobile() ? {maxHeight: windowHeight, marginTop: viewportOffsetTop} : {};
 }
 
-function getExtraSmallWrappingStyle(isExtraSmallScreenWidth) {
+function getWrappingStyle(isExtraSmallScreenWidth) {
     return {
         flexWrap: isExtraSmallScreenWidth ? 'wrap' : 'nowrap',
     };
@@ -1256,5 +1256,5 @@ export {
     getMentionTextColor,
     getHeightOfMagicCodeInput,
     getOuterModalStyle,
-    getExtraSmallWrappingStyle,
+    getWrappingStyle,
 };

From ef1ce039fde3f41ed6d72e9ae403e52e9140feb8 Mon Sep 17 00:00:00 2001
From: Thiago Brezinski <thiagobrez@gmail.com>
Date: Fri, 16 Jun 2023 08:42:26 +0100
Subject: [PATCH 5/5] chore: add JSDoc

---
 src/styles/StyleUtils.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index f2f8ec5de11b..c9ff8e300fde 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -1184,6 +1184,11 @@ function getOuterModalStyle(windowHeight, viewportOffsetTop) {
     return Browser.isMobile() ? {maxHeight: windowHeight, marginTop: viewportOffsetTop} : {};
 }
 
+/**
+ * Returns style object for flexWrap depending on the screen size
+ * @param {Boolean} isExtraSmallScreenWidth
+ * @return {Object}
+ */
 function getWrappingStyle(isExtraSmallScreenWidth) {
     return {
         flexWrap: isExtraSmallScreenWidth ? 'wrap' : 'nowrap',