From f76ae1e984944089db0480a38f818229b32ede1d Mon Sep 17 00:00:00 2001
From: Danut Gavrus <danut.gavrus@gmail.com>
Date: Fri, 16 Jun 2023 16:02:58 +0300
Subject: [PATCH 1/5] [FIX 20678] Some values were cropped in On Terms and Fees
 page.

---
 src/pages/EnablePayments/TermsPage/ShortTermsForm.js | 10 +++++-----
 src/styles/styles.js                                 |  5 +++++
 src/styles/variables.js                              |  1 +
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
index cce62414d743..4e99286a9bb0 100644
--- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
+++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
@@ -18,7 +18,7 @@ function ShortTermsForm() {
                             <Text style={styles.textLarge}>{Localize.translateLocal('termsStep.monthlyFee')}</Text>
                         </View>
                         <View style={styles.flexRow}>
-                            <Text style={[styles.textHeadline, styles.textXXXLarge]}>{Localize.translateLocal('termsStep.feeAmountZero')}</Text>
+                            <Text style={[styles.textHeadline, styles.textXXXLargeWLineHeight]}>{Localize.translateLocal('termsStep.feeAmountZero')}</Text>
                         </View>
                     </View>
                     <View style={[styles.flex2]}>
@@ -27,7 +27,7 @@ function ShortTermsForm() {
                                 <Text style={styles.textLarge}>{Localize.translateLocal('termsStep.shortTermsForm.perPurchase')}</Text>
                             </View>
                             <View style={styles.flexRow}>
-                                <Text style={[styles.textHeadline, styles.textXXXLarge]}>{Localize.translateLocal('termsStep.feeAmountZero')}</Text>
+                                <Text style={[styles.textHeadline, styles.textXXXLargeWLineHeight]}>{Localize.translateLocal('termsStep.feeAmountZero')}</Text>
                             </View>
                         </View>
                     </View>
@@ -39,13 +39,13 @@ function ShortTermsForm() {
                             <Text style={styles.textLarge}>{Localize.translateLocal('termsStep.shortTermsForm.atmWithdrawal')}</Text>
                         </View>
                         <View style={styles.flexRow}>
-                            <Text style={[styles.textHeadline, styles.textXXXLarge]}>{Localize.translateLocal('common.na')}</Text>
+                            <Text style={[styles.textHeadline, styles.textXXXLargeWLineHeight]}>{Localize.translateLocal('common.na')}</Text>
                         </View>
                         <View style={styles.flexRow}>
                             <Text style={styles.textLabelSupporting}>{Localize.translateLocal('termsStep.shortTermsForm.inNetwork')}</Text>
                         </View>
                         <View style={[styles.flexRow, styles.mt1]}>
-                            <Text style={[styles.textHeadline, styles.textXXXLarge]}>{Localize.translateLocal('common.na')}</Text>
+                            <Text style={[styles.textHeadline, styles.textXXXLargeWLineHeight]}>{Localize.translateLocal('common.na')}</Text>
                         </View>
                         <View style={styles.flexRow}>
                             <Text style={styles.textLabelSupporting}>{Localize.translateLocal('termsStep.shortTermsForm.outOfNetwork')}</Text>
@@ -57,7 +57,7 @@ function ShortTermsForm() {
                                 <Text style={styles.textLarge}>{Localize.translateLocal('termsStep.shortTermsForm.cashReload')}</Text>
                             </View>
                             <View style={styles.flexRow}>
-                                <Text style={[styles.textHeadline, styles.textXXXLarge]}>{Localize.translateLocal('common.na')}</Text>
+                                <Text style={[styles.textHeadline, styles.textXXXLargeWLineHeight]}>{Localize.translateLocal('common.na')}</Text>
                             </View>
                         </View>
                     </View>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index c42c1a77c07f..1a3c6360859e 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -344,6 +344,11 @@ const styles = {
         fontSize: variables.fontSizeXXXLarge,
     },
 
+    textXXXLargeWLineHeight: {
+        fontSize: variables.fontSizeXXXLarge,
+        lineHeight: variables.lineHeightXXXLarge,
+    },
+
     textHero: {
         fontSize: variables.fontSizeHero,
         fontFamily: fontFamily.EXP_NEW_KANSAS_MEDIUM,
diff --git a/src/styles/variables.js b/src/styles/variables.js
index 89897b7c1817..48f6797cd7f8 100644
--- a/src/styles/variables.js
+++ b/src/styles/variables.js
@@ -93,6 +93,7 @@ export default {
     lineHeightLarge: getValueUsingPixelRatio(18, 24),
     lineHeightXLarge: getValueUsingPixelRatio(20, 24),
     lineHeightXXLarge: getValueUsingPixelRatio(27, 32),
+    lineHeightXXXLarge: getValueUsingPixelRatio(32, 37),
     lineHeightSizeh1: getValueUsingPixelRatio(23, 28),
     lineHeightSignInHeroXSmall: getValueUsingPixelRatio(32, 37),
     inputHeight: getValueUsingPixelRatio(52, 72),

From 873ee7835debc4caf70b760e0c170c433b01790b Mon Sep 17 00:00:00 2001
From: Danut Gavrus <danut.gavrus@gmail.com>
Date: Fri, 16 Jun 2023 16:38:57 +0300
Subject: [PATCH 2/5] Removed custom style and used StyleUtils.

---
 src/pages/EnablePayments/TermsPage/ShortTermsForm.js | 12 +++++++-----
 src/styles/styles.js                                 |  5 -----
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
index 4e99286a9bb0..2ba830b4cc8d 100644
--- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
+++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
@@ -5,6 +5,8 @@ import Text from '../../../components/Text';
 import * as Localize from '../../../libs/Localize';
 import CONST from '../../../CONST';
 import TextLink from '../../../components/TextLink';
+import * as StyleUtils from '../../../styles/StyleUtils';
+import variables from '../../../styles/variables';
 
 function ShortTermsForm() {
     return (
@@ -18,7 +20,7 @@ function ShortTermsForm() {
                             <Text style={styles.textLarge}>{Localize.translateLocal('termsStep.monthlyFee')}</Text>
                         </View>
                         <View style={styles.flexRow}>
-                            <Text style={[styles.textHeadline, styles.textXXXLargeWLineHeight]}>{Localize.translateLocal('termsStep.feeAmountZero')}</Text>
+                            <Text style={[styles.textHeadline, styles.textXXXLarge, StyleUtils.getLineHeightStyle(variables.lineHeightXXXLarge)]}>{Localize.translateLocal('termsStep.feeAmountZero')}</Text>
                         </View>
                     </View>
                     <View style={[styles.flex2]}>
@@ -27,7 +29,7 @@ function ShortTermsForm() {
                                 <Text style={styles.textLarge}>{Localize.translateLocal('termsStep.shortTermsForm.perPurchase')}</Text>
                             </View>
                             <View style={styles.flexRow}>
-                                <Text style={[styles.textHeadline, styles.textXXXLargeWLineHeight]}>{Localize.translateLocal('termsStep.feeAmountZero')}</Text>
+                                <Text style={[styles.textHeadline, styles.textXXXLarge, StyleUtils.getLineHeightStyle(variables.lineHeightXXXLarge)]}>{Localize.translateLocal('termsStep.feeAmountZero')}</Text>
                             </View>
                         </View>
                     </View>
@@ -39,13 +41,13 @@ function ShortTermsForm() {
                             <Text style={styles.textLarge}>{Localize.translateLocal('termsStep.shortTermsForm.atmWithdrawal')}</Text>
                         </View>
                         <View style={styles.flexRow}>
-                            <Text style={[styles.textHeadline, styles.textXXXLargeWLineHeight]}>{Localize.translateLocal('common.na')}</Text>
+                            <Text style={[styles.textHeadline, styles.textXXXLarge, StyleUtils.getLineHeightStyle(variables.lineHeightXXXLarge)]}>{Localize.translateLocal('common.na')}</Text>
                         </View>
                         <View style={styles.flexRow}>
                             <Text style={styles.textLabelSupporting}>{Localize.translateLocal('termsStep.shortTermsForm.inNetwork')}</Text>
                         </View>
                         <View style={[styles.flexRow, styles.mt1]}>
-                            <Text style={[styles.textHeadline, styles.textXXXLargeWLineHeight]}>{Localize.translateLocal('common.na')}</Text>
+                            <Text style={[styles.textHeadline, styles.textXXXLarge, StyleUtils.getLineHeightStyle(variables.lineHeightXXXLarge)]}>{Localize.translateLocal('common.na')}</Text>
                         </View>
                         <View style={styles.flexRow}>
                             <Text style={styles.textLabelSupporting}>{Localize.translateLocal('termsStep.shortTermsForm.outOfNetwork')}</Text>
@@ -57,7 +59,7 @@ function ShortTermsForm() {
                                 <Text style={styles.textLarge}>{Localize.translateLocal('termsStep.shortTermsForm.cashReload')}</Text>
                             </View>
                             <View style={styles.flexRow}>
-                                <Text style={[styles.textHeadline, styles.textXXXLargeWLineHeight]}>{Localize.translateLocal('common.na')}</Text>
+                                <Text style={[styles.textHeadline, styles.textXXXLarge, StyleUtils.getLineHeightStyle(variables.lineHeightXXXLarge)]}>{Localize.translateLocal('common.na')}</Text>
                             </View>
                         </View>
                     </View>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 1a3c6360859e..c42c1a77c07f 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -344,11 +344,6 @@ const styles = {
         fontSize: variables.fontSizeXXXLarge,
     },
 
-    textXXXLargeWLineHeight: {
-        fontSize: variables.fontSizeXXXLarge,
-        lineHeight: variables.lineHeightXXXLarge,
-    },
-
     textHero: {
         fontSize: variables.fontSizeHero,
         fontFamily: fontFamily.EXP_NEW_KANSAS_MEDIUM,

From 7e53f66c37f787f3b913e11f9b2541eeea984128 Mon Sep 17 00:00:00 2001
From: Danut Gavrus <danut.gavrus@gmail.com>
Date: Mon, 19 Jun 2023 11:27:40 +0300
Subject: [PATCH 3/5] Run prettier.

---
 .../TermsPage/ShortTermsForm.js               | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
index 2ba830b4cc8d..152684f152de 100644
--- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
+++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
@@ -20,7 +20,9 @@ function ShortTermsForm() {
                             <Text style={styles.textLarge}>{Localize.translateLocal('termsStep.monthlyFee')}</Text>
                         </View>
                         <View style={styles.flexRow}>
-                            <Text style={[styles.textHeadline, styles.textXXXLarge, StyleUtils.getLineHeightStyle(variables.lineHeightXXXLarge)]}>{Localize.translateLocal('termsStep.feeAmountZero')}</Text>
+                            <Text style={[styles.textHeadline, styles.textXXXLarge, StyleUtils.getLineHeightStyle(variables.lineHeightXXXLarge)]}>
+                                {Localize.translateLocal('termsStep.feeAmountZero')}
+                            </Text>
                         </View>
                     </View>
                     <View style={[styles.flex2]}>
@@ -29,7 +31,9 @@ function ShortTermsForm() {
                                 <Text style={styles.textLarge}>{Localize.translateLocal('termsStep.shortTermsForm.perPurchase')}</Text>
                             </View>
                             <View style={styles.flexRow}>
-                                <Text style={[styles.textHeadline, styles.textXXXLarge, StyleUtils.getLineHeightStyle(variables.lineHeightXXXLarge)]}>{Localize.translateLocal('termsStep.feeAmountZero')}</Text>
+                                <Text style={[styles.textHeadline, styles.textXXXLarge, StyleUtils.getLineHeightStyle(variables.lineHeightXXXLarge)]}>
+                                    {Localize.translateLocal('termsStep.feeAmountZero')}
+                                </Text>
                             </View>
                         </View>
                     </View>
@@ -41,13 +45,17 @@ function ShortTermsForm() {
                             <Text style={styles.textLarge}>{Localize.translateLocal('termsStep.shortTermsForm.atmWithdrawal')}</Text>
                         </View>
                         <View style={styles.flexRow}>
-                            <Text style={[styles.textHeadline, styles.textXXXLarge, StyleUtils.getLineHeightStyle(variables.lineHeightXXXLarge)]}>{Localize.translateLocal('common.na')}</Text>
+                            <Text style={[styles.textHeadline, styles.textXXXLarge, StyleUtils.getLineHeightStyle(variables.lineHeightXXXLarge)]}>
+                                {Localize.translateLocal('common.na')}
+                            </Text>
                         </View>
                         <View style={styles.flexRow}>
                             <Text style={styles.textLabelSupporting}>{Localize.translateLocal('termsStep.shortTermsForm.inNetwork')}</Text>
                         </View>
                         <View style={[styles.flexRow, styles.mt1]}>
-                            <Text style={[styles.textHeadline, styles.textXXXLarge, StyleUtils.getLineHeightStyle(variables.lineHeightXXXLarge)]}>{Localize.translateLocal('common.na')}</Text>
+                            <Text style={[styles.textHeadline, styles.textXXXLarge, StyleUtils.getLineHeightStyle(variables.lineHeightXXXLarge)]}>
+                                {Localize.translateLocal('common.na')}
+                            </Text>
                         </View>
                         <View style={styles.flexRow}>
                             <Text style={styles.textLabelSupporting}>{Localize.translateLocal('termsStep.shortTermsForm.outOfNetwork')}</Text>
@@ -59,7 +67,9 @@ function ShortTermsForm() {
                                 <Text style={styles.textLarge}>{Localize.translateLocal('termsStep.shortTermsForm.cashReload')}</Text>
                             </View>
                             <View style={styles.flexRow}>
-                                <Text style={[styles.textHeadline, styles.textXXXLarge, StyleUtils.getLineHeightStyle(variables.lineHeightXXXLarge)]}>{Localize.translateLocal('common.na')}</Text>
+                                <Text style={[styles.textHeadline, styles.textXXXLarge, StyleUtils.getLineHeightStyle(variables.lineHeightXXXLarge)]}>
+                                    {Localize.translateLocal('common.na')}
+                                </Text>
                             </View>
                         </View>
                     </View>

From be08629f4f468a5485cae6fa538039f783cf8877 Mon Sep 17 00:00:00 2001
From: Danut Gavrus <danut.gavrus@gmail.com>
Date: Tue, 20 Jun 2023 00:14:13 +0300
Subject: [PATCH 4/5] Replaced with custom style.

---
 .../TermsPage/ShortTermsForm.js               | 22 +++++--------------
 src/styles/styles.js                          |  8 +++++++
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
index 152684f152de..4ec2ee1b9731 100644
--- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
+++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
@@ -5,8 +5,6 @@ import Text from '../../../components/Text';
 import * as Localize from '../../../libs/Localize';
 import CONST from '../../../CONST';
 import TextLink from '../../../components/TextLink';
-import * as StyleUtils from '../../../styles/StyleUtils';
-import variables from '../../../styles/variables';
 
 function ShortTermsForm() {
     return (
@@ -20,9 +18,7 @@ function ShortTermsForm() {
                             <Text style={styles.textLarge}>{Localize.translateLocal('termsStep.monthlyFee')}</Text>
                         </View>
                         <View style={styles.flexRow}>
-                            <Text style={[styles.textHeadline, styles.textXXXLarge, StyleUtils.getLineHeightStyle(variables.lineHeightXXXLarge)]}>
-                                {Localize.translateLocal('termsStep.feeAmountZero')}
-                            </Text>
+                            <Text style={styles.shortTermsHeadline}>{Localize.translateLocal('termsStep.feeAmountZero')}</Text>
                         </View>
                     </View>
                     <View style={[styles.flex2]}>
@@ -31,9 +27,7 @@ function ShortTermsForm() {
                                 <Text style={styles.textLarge}>{Localize.translateLocal('termsStep.shortTermsForm.perPurchase')}</Text>
                             </View>
                             <View style={styles.flexRow}>
-                                <Text style={[styles.textHeadline, styles.textXXXLarge, StyleUtils.getLineHeightStyle(variables.lineHeightXXXLarge)]}>
-                                    {Localize.translateLocal('termsStep.feeAmountZero')}
-                                </Text>
+                                <Text style={styles.shortTermsHeadline}>{Localize.translateLocal('termsStep.feeAmountZero')}</Text>
                             </View>
                         </View>
                     </View>
@@ -45,17 +39,13 @@ function ShortTermsForm() {
                             <Text style={styles.textLarge}>{Localize.translateLocal('termsStep.shortTermsForm.atmWithdrawal')}</Text>
                         </View>
                         <View style={styles.flexRow}>
-                            <Text style={[styles.textHeadline, styles.textXXXLarge, StyleUtils.getLineHeightStyle(variables.lineHeightXXXLarge)]}>
-                                {Localize.translateLocal('common.na')}
-                            </Text>
+                            <Text style={styles.shortTermsHeadline}>{Localize.translateLocal('common.na')}</Text>
                         </View>
                         <View style={styles.flexRow}>
                             <Text style={styles.textLabelSupporting}>{Localize.translateLocal('termsStep.shortTermsForm.inNetwork')}</Text>
                         </View>
                         <View style={[styles.flexRow, styles.mt1]}>
-                            <Text style={[styles.textHeadline, styles.textXXXLarge, StyleUtils.getLineHeightStyle(variables.lineHeightXXXLarge)]}>
-                                {Localize.translateLocal('common.na')}
-                            </Text>
+                            <Text style={styles.shortTermsHeadline}>{Localize.translateLocal('common.na')}</Text>
                         </View>
                         <View style={styles.flexRow}>
                             <Text style={styles.textLabelSupporting}>{Localize.translateLocal('termsStep.shortTermsForm.outOfNetwork')}</Text>
@@ -67,9 +57,7 @@ function ShortTermsForm() {
                                 <Text style={styles.textLarge}>{Localize.translateLocal('termsStep.shortTermsForm.cashReload')}</Text>
                             </View>
                             <View style={styles.flexRow}>
-                                <Text style={[styles.textHeadline, styles.textXXXLarge, StyleUtils.getLineHeightStyle(variables.lineHeightXXXLarge)]}>
-                                    {Localize.translateLocal('common.na')}
-                                </Text>
+                                <Text style={styles.shortTermsHeadline}>{Localize.translateLocal('common.na')}</Text>
                             </View>
                         </View>
                     </View>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index c42c1a77c07f..7ce431346e35 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2898,6 +2898,14 @@ const styles = {
         marginTop: 12,
     },
 
+    shortTermsHeadline: {
+        ...headlineFont,
+        ...whiteSpace.preWrap,
+        color: themeColors.heading,
+        fontSize: variables.fontSizeXXXLarge,
+        lineHeight: variables.lineHeightXXXLarge,
+    },
+
     longTermsRow: {
         flexDirection: 'row',
         marginTop: 20,

From 5273039f903c96267c7fcdacd6affd50d7ccc1a0 Mon Sep 17 00:00:00 2001
From: Danut Gavrus <danut.gavrus@gmail.com>
Date: Tue, 20 Jun 2023 16:43:55 +0300
Subject: [PATCH 5/5] Increased margin top to 16px for outOfNetwork.

---
 src/pages/EnablePayments/TermsPage/ShortTermsForm.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
index 4ec2ee1b9731..a6f685fcb562 100644
--- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
+++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
@@ -44,7 +44,7 @@ function ShortTermsForm() {
                         <View style={styles.flexRow}>
                             <Text style={styles.textLabelSupporting}>{Localize.translateLocal('termsStep.shortTermsForm.inNetwork')}</Text>
                         </View>
-                        <View style={[styles.flexRow, styles.mt1]}>
+                        <View style={[styles.flexRow, styles.mt4]}>
                             <Text style={styles.shortTermsHeadline}>{Localize.translateLocal('common.na')}</Text>
                         </View>
                         <View style={styles.flexRow}>