From 6144d331c097a943a841ec93378115d7c9d47321 Mon Sep 17 00:00:00 2001
From: MrMuzyk <mimuzyk@gmail.com>
Date: Mon, 5 Feb 2024 09:40:02 +0100
Subject: [PATCH] fix: more styling fixes (#16)

* fix: more styling fixes

* fix: styling fixes

* fix: change headline line height and change questionmark icon size
---
 src/components/AddPlaidBankAccount.js                 |  3 ++-
 .../BankInfo/substeps/Confirmation.tsx                |  4 ++--
 .../ReimbursementAccount/BankInfo/substeps/Manual.tsx |  4 ++--
 .../substeps/BeneficialOwnerCheckUBO.tsx              |  4 ++--
 .../BeneficialOwnerDetailsFormSubsteps/AddressUBO.tsx |  4 ++--
 .../ConfirmationUBO.tsx                               |  2 +-
 .../DateOfBirthUBO.tsx                                |  2 +-
 .../LegalNameUBO.tsx                                  |  2 +-
 .../SocialSecurityNumberUBO.tsx                       |  4 ++--
 .../substeps/CompanyOwnersListUBO.tsx                 |  4 ++--
 .../BusinessInfo/substeps/AddressBusiness.tsx         |  2 +-
 .../BusinessInfo/substeps/ConfirmationBusiness.tsx    |  2 +-
 .../substeps/IncorporationDateBusiness.tsx            |  2 +-
 .../substeps/IncorporationStateBusiness.tsx           |  3 ++-
 .../BusinessInfo/substeps/NameBusiness.tsx            |  2 +-
 .../BusinessInfo/substeps/PhoneNumberBusiness.tsx     |  2 +-
 .../BusinessInfo/substeps/TaxIdBusiness.tsx           |  2 +-
 .../substeps/TypeBusiness/TypeBusiness.tsx            |  2 +-
 .../BusinessInfo/substeps/WebsiteBusiness.tsx         |  2 +-
 .../substeps/ConfirmAgreements.tsx                    |  2 +-
 .../ConnectBankAccount/ConnectBankAccount.tsx         |  1 -
 .../ConnectBankAccount/components/Enable2FACard.tsx   |  1 +
 .../ConnectBankAccount/components/FinishChatCard.tsx  |  2 +-
 .../ReimbursementAccount/PersonalInfo/HelpLinks.tsx   |  2 ++
 .../PersonalInfo/substeps/Address.tsx                 |  4 ++--
 .../PersonalInfo/substeps/Confirmation.tsx            |  2 +-
 .../PersonalInfo/substeps/DateOfBirth.tsx             |  2 +-
 .../PersonalInfo/substeps/FullName.tsx                |  2 +-
 .../PersonalInfo/substeps/SocialSecurityNumber.tsx    |  4 ++--
 src/styles/index.ts                                   | 11 ++++++++++-
 30 files changed, 49 insertions(+), 36 deletions(-)

diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
index 1f726e409bb2..00cefa17277c 100644
--- a/src/components/AddPlaidBankAccount.js
+++ b/src/components/AddPlaidBankAccount.js
@@ -280,12 +280,13 @@ function AddPlaidBankAccount({
         return (
             <FullPageOfflineBlockingView>
                 <Text style={[styles.mt5, styles.mb3, styles.textHeadline]}>{translate('bankAccount.chooseAnAccount')}</Text>
-                {!_.isEmpty(text) && <Text style={[styles.mb6, styles.textLabel, styles.textSupporting]}>{text}</Text>}
+                {!_.isEmpty(text) && <Text style={[styles.mb6, styles.textSupporting]}>{text}</Text>}
                 <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb6]}>
                     <Icon
                         src={icon}
                         height={iconSize}
                         width={iconSize}
+                        additionalStyles={iconStyles}
                     />
                     <View>
                         <Text style={[styles.ml3, styles.textStrong]}>{bankName}</Text>
diff --git a/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx
index 0f05428d5ed9..e9edc9329eec 100644
--- a/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx
+++ b/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx
@@ -51,8 +51,8 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext,
             style={[styles.pt0]}
         >
             <ScrollView contentContainerStyle={styles.flexGrow1}>
-                <Text style={[styles.textHeadline, styles.ph5, styles.mt5]}>{translate('bankAccount.letsDoubleCheck')}</Text>
-                <Text style={[styles.mt3, styles.mb3, styles.ph5, styles.textLabel, styles.textSupporting]}>{translate('bankAccount.thisBankAccount')}</Text>
+                <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mt5]}>{translate('bankAccount.letsDoubleCheck')}</Text>
+                <Text style={[styles.mt3, styles.mb3, styles.ph5, styles.textSupporting]}>{translate('bankAccount.thisBankAccount')}</Text>
                 {setupType === CONST.BANK_ACCOUNT.SUBSTEP.MANUAL && (
                     <View style={[styles.mb5]}>
                         <MenuItemWithTopDescription
diff --git a/src/pages/ReimbursementAccount/BankInfo/substeps/Manual.tsx b/src/pages/ReimbursementAccount/BankInfo/substeps/Manual.tsx
index c9851676747d..713add3fd3d5 100644
--- a/src/pages/ReimbursementAccount/BankInfo/substeps/Manual.tsx
+++ b/src/pages/ReimbursementAccount/BankInfo/substeps/Manual.tsx
@@ -73,8 +73,8 @@ function Manual({reimbursementAccount, onNext}: ManualProps) {
             submitButtonText={translate('common.next')}
             style={[styles.mh5, styles.flexGrow1]}
         >
-            <Text style={[styles.textHeadline, styles.mb3, styles.mt5]}>{translate('bankAccount.manuallyAdd')}</Text>
-            <Text style={[styles.mb5, styles.textLabel, styles.textSupporting]}>{translate('bankAccount.checkHelpLine')}</Text>
+            <Text style={[styles.textHeadlineLineHeightXXL, styles.mb3, styles.mt5]}>{translate('bankAccount.manuallyAdd')}</Text>
+            <Text style={[styles.mb5, styles.textSupporting]}>{translate('bankAccount.checkHelpLine')}</Text>
             <ExampleCheckImage />
             <InputWrapper
                 InputComponent={TextInput}
diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerCheckUBO.tsx b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerCheckUBO.tsx
index 135a6ec5fd74..325991bc87a4 100644
--- a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerCheckUBO.tsx
+++ b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerCheckUBO.tsx
@@ -54,8 +54,8 @@ function BeneficialOwnerCheckUBO({title, onSelectedValue, defaultValue}: Benefic
                 style={[styles.mh5, styles.flexGrow1]}
                 submitButtonStyles={[styles.pb5, styles.mb0]}
             >
-                <Text style={[styles.textHeadline, styles.mt5]}>{title}</Text>
-                <Text style={[styles.pv3, styles.textLabel, styles.textSupporting]}>{translate('beneficialOwnerInfoStep.regulationRequiresUsToVerifyTheIdentity')}</Text>
+                <Text style={[styles.textHeadlineLineHeightXXL, styles.mt5]}>{title}</Text>
+                <Text style={[styles.pv3, styles.textSupporting]}>{translate('beneficialOwnerInfoStep.regulationRequiresUsToVerifyTheIdentity')}</Text>
                 <RadioButtons
                     items={options}
                     onPress={handleSelectUBOValue}
diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/AddressUBO.tsx b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/AddressUBO.tsx
index ef6a616ad063..518fc0e3418f 100644
--- a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/AddressUBO.tsx
+++ b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/AddressUBO.tsx
@@ -73,8 +73,8 @@ function AddressUBO({reimbursementAccountDraft, onNext, isEditing, beneficialOwn
             submitButtonStyles={[styles.mb0, styles.pb5]}
             style={[styles.mh5, styles.flexGrow1]}
         >
-            <Text style={[styles.textHeadline, styles.mt5, styles.mb3]}>{translate('beneficialOwnerInfoStep.enterTheOwnersAddress')}</Text>
-            <Text style={[styles.textLabel, styles.textSupporting]}>{translate('common.noPO')}</Text>
+            <Text style={[styles.textHeadlineLineHeightXXL, styles.mt5, styles.mb3]}>{translate('beneficialOwnerInfoStep.enterTheOwnersAddress')}</Text>
+            <Text style={[styles.textSupporting]}>{translate('common.noPO')}</Text>
             <AddressForm
                 inputKeys={inputKeys}
                 shouldSaveDraft={!isEditing}
diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx
index cc927f71f83d..fc5c1496d80a 100644
--- a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx
+++ b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx
@@ -39,7 +39,7 @@ function ConfirmationUBO({reimbursementAccount, reimbursementAccountDraft, onNex
             style={[styles.pt0]}
         >
             <ScrollView contentContainerStyle={styles.flexGrow1}>
-                <Text style={[styles.textHeadline, styles.ph5, styles.mt5, styles.mb3]}>{translate('beneficialOwnerInfoStep.letsDoubleCheck')}</Text>
+                <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mt5, styles.mb3]}>{translate('beneficialOwnerInfoStep.letsDoubleCheck')}</Text>
                 <MenuItemWithTopDescription
                     description={translate('beneficialOwnerInfoStep.legalName')}
                     title={`${values.firstName} ${values.lastName}`}
diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/DateOfBirthUBO.tsx b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/DateOfBirthUBO.tsx
index 49c91a9fd68e..880cfba31260 100644
--- a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/DateOfBirthUBO.tsx
+++ b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/DateOfBirthUBO.tsx
@@ -67,7 +67,7 @@ function DateOfBirthUBO({reimbursementAccountDraft, onNext, isEditing, beneficia
             style={[styles.mh5, styles.flexGrow2, styles.justifyContentBetween]}
             submitButtonStyles={[styles.pb5, styles.mb0]}
         >
-            <Text style={[styles.textHeadline, styles.mt5]}>{translate('beneficialOwnerInfoStep.enterTheDateOfBirthOfTheOwner')}</Text>
+            <Text style={[styles.textHeadlineLineHeightXXL, styles.mt5]}>{translate('beneficialOwnerInfoStep.enterTheDateOfBirthOfTheOwner')}</Text>
             {/* @ts-expect-error TODO: Remove this once DatePicker (https://github.com/Expensify/App/issues/25148) is migrated to TypeScript. */}
             <InputWrapper<unknown>
                 InputComponent={DatePicker}
diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/LegalNameUBO.tsx b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/LegalNameUBO.tsx
index 8f562fd71d4c..2aae8d8d19f5 100644
--- a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/LegalNameUBO.tsx
+++ b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/LegalNameUBO.tsx
@@ -52,7 +52,7 @@ function LegalNameUBO({reimbursementAccountDraft, onNext, isEditing, beneficialO
             style={[styles.mh5, styles.flexGrow1]}
             submitButtonStyles={[styles.pb5, styles.mb0]}
         >
-            <Text style={[styles.textHeadline, styles.mt5]}>{translate('beneficialOwnerInfoStep.enterLegalFirstAndLastName')}</Text>
+            <Text style={[styles.textHeadlineLineHeightXXL, styles.mt5]}>{translate('beneficialOwnerInfoStep.enterLegalFirstAndLastName')}</Text>
             <InputWrapper
                 InputComponent={TextInput}
                 label={translate('beneficialOwnerInfoStep.legalFirstName')}
diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/SocialSecurityNumberUBO.tsx b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/SocialSecurityNumberUBO.tsx
index 14e9b83d733c..aa3fc24395cb 100644
--- a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/SocialSecurityNumberUBO.tsx
+++ b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/SocialSecurityNumberUBO.tsx
@@ -58,8 +58,8 @@ function SocialSecurityNumberUBO({reimbursementAccountDraft, onNext, isEditing,
             submitButtonStyles={[styles.pb5, styles.mb0]}
         >
             <View>
-                <Text style={[styles.textHeadline, styles.mt5, styles.mb3]}>{translate('beneficialOwnerInfoStep.enterTheLast4')}</Text>
-                <Text style={[styles.textLabel, styles.textSupporting]}>{translate('beneficialOwnerInfoStep.dontWorry')}</Text>
+                <Text style={[styles.textHeadlineLineHeightXXL, styles.mt5, styles.mb3]}>{translate('beneficialOwnerInfoStep.enterTheLast4')}</Text>
+                <Text style={[styles.textSupporting]}>{translate('beneficialOwnerInfoStep.dontWorry')}</Text>
                 <View style={[styles.flex1]}>
                     <InputWrapper
                         InputComponent={TextInput}
diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/CompanyOwnersListUBO.tsx b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/CompanyOwnersListUBO.tsx
index f9aa626fe958..aae20e0cf3ed 100644
--- a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/CompanyOwnersListUBO.tsx
+++ b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/CompanyOwnersListUBO.tsx
@@ -102,10 +102,10 @@ function CompanyOwnersListUBO({
             style={[styles.pt0]}
         >
             <ScrollView contentContainerStyle={[styles.flexGrow1, styles.ph0]}>
-                <Text style={[styles.textHeadline, styles.ph5, styles.mt5]}>{translate('beneficialOwnerInfoStep.letsDoubleCheck')}</Text>
+                <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mt5]}>{translate('beneficialOwnerInfoStep.letsDoubleCheck')}</Text>
                 <Text style={[styles.p5, styles.textSupporting]}>{translate('beneficialOwnerInfoStep.regulationRequiresUsToVerifyTheIdentity')}</Text>
                 <View>
-                    <Text style={[styles.textLabelSupporting, styles.pv1, styles.ph5]}>{`${translate('beneficialOwnerInfoStep.owners')}:`}</Text>
+                    <Text style={[styles.textSupporting, styles.pv1, styles.ph5]}>{`${translate('beneficialOwnerInfoStep.owners')}:`}</Text>
                     {isUserUBO && (
                         <MenuItem
                             title={`${requestorData.firstName} ${requestorData.lastName}`}
diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/AddressBusiness.tsx b/src/pages/ReimbursementAccount/BusinessInfo/substeps/AddressBusiness.tsx
index 94fcbffb6159..62437077a480 100644
--- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/AddressBusiness.tsx
+++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/AddressBusiness.tsx
@@ -77,7 +77,7 @@ function AddressBusiness({reimbursementAccount, onNext, isEditing}: AddressBusin
             submitButtonStyles={[styles.mb0, styles.pb5]}
             style={[styles.mh5, styles.flexGrow1]}
         >
-            <Text style={[styles.textHeadline, styles.mt5]}>{translate('businessInfoStep.enterYourCompanysAddress')}</Text>
+            <Text style={[styles.textHeadlineLineHeightXXL, styles.mt5]}>{translate('businessInfoStep.enterYourCompanysAddress')}</Text>
             <Text>{translate('common.noPO')}</Text>
             <AddressForm
                 inputKeys={INPUT_KEYS}
diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/ConfirmationBusiness.tsx b/src/pages/ReimbursementAccount/BusinessInfo/substeps/ConfirmationBusiness.tsx
index 5c22a5e2a1ca..82db2086f721 100644
--- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/ConfirmationBusiness.tsx
+++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/ConfirmationBusiness.tsx
@@ -59,7 +59,7 @@ function ConfirmationBusiness({reimbursementAccount, reimbursementAccountDraft,
             style={[styles.pt0]}
         >
             <ScrollView contentContainerStyle={styles.flexGrow1}>
-                <Text style={[styles.textHeadline, styles.ph5, styles.mt5, styles.mb3]}>{translate('businessInfoStep.letsDoubleCheck')}</Text>
+                <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mt5, styles.mb3]}>{translate('businessInfoStep.letsDoubleCheck')}</Text>
                 <MenuItemWithTopDescription
                     description={translate('businessInfoStep.businessName')}
                     title={values[BUSINESS_INFO_STEP_KEYS.COMPANY_NAME]}
diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationDateBusiness.tsx b/src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationDateBusiness.tsx
index dbb6ed8761e5..613ba85e2850 100644
--- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationDateBusiness.tsx
+++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationDateBusiness.tsx
@@ -62,7 +62,7 @@ function IncorporationDateBusiness({reimbursementAccount, reimbursementAccountDr
             style={[styles.mh5, styles.flexGrow1]}
             submitButtonStyles={[styles.pb5, styles.mb0]}
         >
-            <Text style={[styles.textHeadline, styles.mt5]}>{translate('businessInfoStep.selectYourCompanysIncorporationDate')}</Text>
+            <Text style={[styles.textHeadlineLineHeightXXL, styles.mt5]}>{translate('businessInfoStep.selectYourCompanysIncorporationDate')}</Text>
             {/* @ts-expect-error TODO: Remove this once DatePicker (https://github.com/Expensify/App/issues/25148) is migrated to TypeScript. */}
             <InputWrapper<unknown>
                 InputComponent={DatePicker}
diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationStateBusiness.tsx b/src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationStateBusiness.tsx
index 7934934f086e..e2ef3a5a69e4 100644
--- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationStateBusiness.tsx
+++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationStateBusiness.tsx
@@ -46,8 +46,9 @@ function IncorporationStateBusiness({reimbursementAccount, onNext, isEditing}: I
             validate={validate}
             onSubmit={handleSubmit}
             style={[styles.mh0, styles.flexGrow1]}
+            submitButtonStyles={[styles.p5, styles.mb0]}
         >
-            <Text style={[styles.textHeadline, styles.ph5, styles.mt5]}>{translate('businessInfoStep.pleaseSelectTheStateYourCompanyWasIncorporatedIn')}</Text>
+            <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mt5]}>{translate('businessInfoStep.pleaseSelectTheStateYourCompanyWasIncorporatedIn')}</Text>
             <InputWrapper
                 InputComponent={StatePicker}
                 inputID={COMPANY_INCORPORATION_STATE_KEY}
diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/NameBusiness.tsx b/src/pages/ReimbursementAccount/BusinessInfo/substeps/NameBusiness.tsx
index 1441dfbf545a..9f0903ad01b4 100644
--- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/NameBusiness.tsx
+++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/NameBusiness.tsx
@@ -60,7 +60,7 @@ function NameBusiness({reimbursementAccount, onNext, isEditing}: NameBusinessPro
             style={[styles.mh5, styles.flexGrow1]}
             submitButtonStyles={[styles.pb5, styles.mb0]}
         >
-            <Text style={[styles.textHeadline, styles.mt5]}>{translate('businessInfoStep.enterTheNameOfYourBusiness')}</Text>
+            <Text style={[styles.textHeadlineLineHeightXXL, styles.mt5]}>{translate('businessInfoStep.enterTheNameOfYourBusiness')}</Text>
             <InputWrapper
                 InputComponent={TextInput}
                 label={translate('businessInfoStep.businessName')}
diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/PhoneNumberBusiness.tsx b/src/pages/ReimbursementAccount/BusinessInfo/substeps/PhoneNumberBusiness.tsx
index b3669ea2f428..8cd3c05dd83a 100644
--- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/PhoneNumberBusiness.tsx
+++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/PhoneNumberBusiness.tsx
@@ -56,7 +56,7 @@ function PhoneNumberBusiness({reimbursementAccount, onNext, isEditing}: PhoneNum
             style={[styles.mh5, styles.flexGrow1]}
             submitButtonStyles={[styles.pb5, styles.mb0]}
         >
-            <Text style={[styles.textHeadline, styles.mt5]}>{translate('businessInfoStep.enterYourCompanysPhoneNumber')}</Text>
+            <Text style={[styles.textHeadlineLineHeightXXL, styles.mt5]}>{translate('businessInfoStep.enterYourCompanysPhoneNumber')}</Text>
             <InputWrapper
                 InputComponent={TextInput}
                 inputID={COMPANY_PHONE_NUMBER_KEY}
diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/TaxIdBusiness.tsx b/src/pages/ReimbursementAccount/BusinessInfo/substeps/TaxIdBusiness.tsx
index 79bec78b53e6..689d223da23c 100644
--- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/TaxIdBusiness.tsx
+++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/TaxIdBusiness.tsx
@@ -58,7 +58,7 @@ function TaxIdBusiness({reimbursementAccount, onNext, isEditing}: TaxIdBusinessP
             style={[styles.mh5, styles.flexGrow1]}
             submitButtonStyles={[styles.pb5, styles.mb0]}
         >
-            <Text style={[styles.textHeadline, styles.mt5]}>{translate('businessInfoStep.enterYourCompanysTaxIdNumber')}</Text>
+            <Text style={[styles.textHeadlineLineHeightXXL, styles.mt5]}>{translate('businessInfoStep.enterYourCompanysTaxIdNumber')}</Text>
             <InputWrapper
                 InputComponent={TextInput}
                 inputID={COMPANY_TAX_ID_KEY}
diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness/TypeBusiness.tsx b/src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness/TypeBusiness.tsx
index 0f33a53358f3..6a525ab08c06 100644
--- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness/TypeBusiness.tsx
+++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness/TypeBusiness.tsx
@@ -48,7 +48,7 @@ function TypeBusiness({reimbursementAccount, onNext, isEditing}: TypeBusinessPro
             style={[styles.flexGrow1]}
             submitButtonStyles={[styles.p5, styles.mb0]}
         >
-            <Text style={[styles.textHeadline, styles.mt5, styles.ph5]}>{translate('businessInfoStep.selectYourCompanysType')}</Text>
+            <Text style={[styles.textHeadlineLineHeightXXL, styles.mt5, styles.ph5]}>{translate('businessInfoStep.selectYourCompanysType')}</Text>
             <InputWrapper
                 InputComponent={BusinessTypePicker}
                 inputID={COMPANY_INCORPORATION_TYPE_KEY}
diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/WebsiteBusiness.tsx b/src/pages/ReimbursementAccount/BusinessInfo/substeps/WebsiteBusiness.tsx
index 1b68d7e67090..56d594542f75 100644
--- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/WebsiteBusiness.tsx
+++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/WebsiteBusiness.tsx
@@ -73,7 +73,7 @@ function WebsiteBusiness({reimbursementAccount, user, session, onNext, isEditing
             style={[styles.mh5, styles.flexGrow1]}
             submitButtonStyles={[styles.pb5, styles.mb0]}
         >
-            <Text style={[styles.textHeadline, styles.mt5]}>{translate('businessInfoStep.enterYourCompanysWebsite')}</Text>
+            <Text style={[styles.textHeadlineLineHeightXXL, styles.mt5]}>{translate('businessInfoStep.enterYourCompanysWebsite')}</Text>
             <Text style={[styles.label, styles.textSupporting]}>{translate('common.websiteExample')}</Text>
             <InputWrapper
                 InputComponent={TextInput}
diff --git a/src/pages/ReimbursementAccount/CompleteVerification/substeps/ConfirmAgreements.tsx b/src/pages/ReimbursementAccount/CompleteVerification/substeps/ConfirmAgreements.tsx
index d2a7679471ad..5c13c2ade86d 100644
--- a/src/pages/ReimbursementAccount/CompleteVerification/substeps/ConfirmAgreements.tsx
+++ b/src/pages/ReimbursementAccount/CompleteVerification/substeps/ConfirmAgreements.tsx
@@ -62,7 +62,7 @@ function ConfirmAgreements({onNext, reimbursementAccount}: ConfirmAgreementsProp
             testID={ConfirmAgreements.displayName}
             style={[styles.pt5]}
         >
-            <Text style={[styles.textHeadline, styles.ph5]}>{translate('completeVerificationStep.confirmAgreements')}</Text>
+            <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5]}>{translate('completeVerificationStep.confirmAgreements')}</Text>
             <FormProvider
                 formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
                 validate={validate}
diff --git a/src/pages/ReimbursementAccount/ConnectBankAccount/ConnectBankAccount.tsx b/src/pages/ReimbursementAccount/ConnectBankAccount/ConnectBankAccount.tsx
index 8e13ee29affd..f82e47809d08 100644
--- a/src/pages/ReimbursementAccount/ConnectBankAccount/ConnectBankAccount.tsx
+++ b/src/pages/ReimbursementAccount/ConnectBankAccount/ConnectBankAccount.tsx
@@ -57,7 +57,6 @@ function ConnectBankAccount({reimbursementAccount, onBackButtonPress, account}:
             includeSafeAreaPaddingBottom={false}
             shouldEnablePickerAvoiding={false}
             shouldEnableMaxHeight
-            style={[styles.mh2]}
         >
             <HeaderWithBackButton
                 title={isBankAccountPending ? translate('connectBankAccountStep.validateYourBankAccount') : translate('connectBankAccountStep.connectBankAccount')}
diff --git a/src/pages/ReimbursementAccount/ConnectBankAccount/components/Enable2FACard.tsx b/src/pages/ReimbursementAccount/ConnectBankAccount/components/Enable2FACard.tsx
index 0d5b158c557c..8d35f485474f 100644
--- a/src/pages/ReimbursementAccount/ConnectBankAccount/components/Enable2FACard.tsx
+++ b/src/pages/ReimbursementAccount/ConnectBankAccount/components/Enable2FACard.tsx
@@ -22,6 +22,7 @@ function Enable2FACard({policyID}: Enable2FACardProps) {
             title={translate('validationStep.enable2FATitle')}
             icon={Illustrations.ShieldYellow}
             titleStyles={[styles.mb4]}
+            containerStyles={[styles.mh5]}
             menuItems={[
                 {
                     title: translate('validationStep.secureYourAccount'),
diff --git a/src/pages/ReimbursementAccount/ConnectBankAccount/components/FinishChatCard.tsx b/src/pages/ReimbursementAccount/ConnectBankAccount/components/FinishChatCard.tsx
index d9473a2b4ba5..2bf76d714cf5 100644
--- a/src/pages/ReimbursementAccount/ConnectBankAccount/components/FinishChatCard.tsx
+++ b/src/pages/ReimbursementAccount/ConnectBankAccount/components/FinishChatCard.tsx
@@ -34,7 +34,7 @@ function FinishChatCard({requiresTwoFactorAuth, reimbursementAccount}: FinishCha
             <Section
                 title={translate('workspace.bankAccount.letsFinishInChat')}
                 icon={Illustrations.ConciergeBubble}
-                containerStyles={[styles.mb8]}
+                containerStyles={[styles.mb8, styles.mh5]}
                 titleStyles={[styles.mb3]}
             >
                 <Text style={styles.mb6}>{translate('connectBankAccountStep.letsChatText')}</Text>
diff --git a/src/pages/ReimbursementAccount/PersonalInfo/HelpLinks.tsx b/src/pages/ReimbursementAccount/PersonalInfo/HelpLinks.tsx
index 252e35584a96..e5737996d7d6 100644
--- a/src/pages/ReimbursementAccount/PersonalInfo/HelpLinks.tsx
+++ b/src/pages/ReimbursementAccount/PersonalInfo/HelpLinks.tsx
@@ -24,6 +24,8 @@ function HelpLinks({containerStyles}: HelpLinkProps) {
         <View style={[styles.flexRow, styles.alignItemsCenter, containerStyles]}>
             <Icon
                 src={Expensicons.QuestionMark}
+                width={12}
+                height={12}
                 fill={theme.icon}
             />
             <View style={[styles.ml2, styles.dFlex, styles.flexRow]}>
diff --git a/src/pages/ReimbursementAccount/PersonalInfo/substeps/Address.tsx b/src/pages/ReimbursementAccount/PersonalInfo/substeps/Address.tsx
index a5346da27184..6af6786eccc9 100644
--- a/src/pages/ReimbursementAccount/PersonalInfo/substeps/Address.tsx
+++ b/src/pages/ReimbursementAccount/PersonalInfo/substeps/Address.tsx
@@ -76,8 +76,8 @@ function Address({reimbursementAccount, onNext, isEditing}: AddressProps) {
             style={[styles.mh5, styles.flexGrow1]}
         >
             <View>
-                <Text style={[styles.textHeadline, styles.mt5, styles.mb3]}>{translate('personalInfoStep.enterYourAddress')}</Text>
-                <Text style={[styles.textLabel, styles.textSupporting]}>{translate('common.noPO')}</Text>
+                <Text style={[styles.textHeadlineLineHeightXXL, styles.mt5, styles.mb3]}>{translate('personalInfoStep.enterYourAddress')}</Text>
+                <Text style={[styles.textSupporting]}>{translate('common.noPO')}</Text>
                 <AddressForm
                     inputKeys={INPUT_KEYS}
                     translate={translate}
diff --git a/src/pages/ReimbursementAccount/PersonalInfo/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/PersonalInfo/substeps/Confirmation.tsx
index de8ef0d5833f..043c51a981c6 100644
--- a/src/pages/ReimbursementAccount/PersonalInfo/substeps/Confirmation.tsx
+++ b/src/pages/ReimbursementAccount/PersonalInfo/substeps/Confirmation.tsx
@@ -43,7 +43,7 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext,
             style={[styles.pt5]}
         >
             <ScrollView contentContainerStyle={styles.flexGrow1}>
-                <Text style={[styles.textHeadline, styles.ph5, styles.mb3]}>{translate('personalInfoStep.letsDoubleCheck')}</Text>
+                <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mb3]}>{translate('personalInfoStep.letsDoubleCheck')}</Text>
                 <MenuItemWithTopDescription
                     description={translate('personalInfoStep.legalName')}
                     title={`${values[PERSONAL_INFO_STEP_KEYS.FIRST_NAME]} ${values[PERSONAL_INFO_STEP_KEYS.LAST_NAME]}`}
diff --git a/src/pages/ReimbursementAccount/PersonalInfo/substeps/DateOfBirth.tsx b/src/pages/ReimbursementAccount/PersonalInfo/substeps/DateOfBirth.tsx
index 7e32465dc374..26019880b33a 100644
--- a/src/pages/ReimbursementAccount/PersonalInfo/substeps/DateOfBirth.tsx
+++ b/src/pages/ReimbursementAccount/PersonalInfo/substeps/DateOfBirth.tsx
@@ -69,7 +69,7 @@ function DateOfBirth({reimbursementAccount, reimbursementAccountDraft, onNext, i
             style={[styles.mh5, styles.flexGrow2, styles.justifyContentBetween]}
             submitButtonStyles={[styles.pb5, styles.mb0]}
         >
-            <Text style={[styles.textHeadline, styles.mv5]}>{translate('personalInfoStep.enterYourDateOfBirth')}</Text>
+            <Text style={[styles.textHeadlineLineHeightXXL, styles.mv5]}>{translate('personalInfoStep.enterYourDateOfBirth')}</Text>
             {/* @ts-expect-error TODO: Remove this once DatePicker (https://github.com/Expensify/App/issues/25148) is migrated to TypeScript. */}
             <InputWrapper<unknown>
                 InputComponent={DatePicker}
diff --git a/src/pages/ReimbursementAccount/PersonalInfo/substeps/FullName.tsx b/src/pages/ReimbursementAccount/PersonalInfo/substeps/FullName.tsx
index 62218f7e2774..62ec4ea9b9eb 100644
--- a/src/pages/ReimbursementAccount/PersonalInfo/substeps/FullName.tsx
+++ b/src/pages/ReimbursementAccount/PersonalInfo/substeps/FullName.tsx
@@ -65,7 +65,7 @@ function FullName({reimbursementAccount, onNext, isEditing}: FullNameProps) {
             submitButtonStyles={[styles.pb5, styles.mb0]}
         >
             <View>
-                <Text style={[styles.textHeadline, styles.mt5, styles.mb6]}>{translate('personalInfoStep.enterYourLegalFirstAndLast')}</Text>
+                <Text style={[styles.textHeadlineLineHeightXXL, styles.mt5, styles.mb6]}>{translate('personalInfoStep.enterYourLegalFirstAndLast')}</Text>
                 <View style={[styles.flex2, styles.mb6]}>
                     <InputWrapper
                         InputComponent={TextInput}
diff --git a/src/pages/ReimbursementAccount/PersonalInfo/substeps/SocialSecurityNumber.tsx b/src/pages/ReimbursementAccount/PersonalInfo/substeps/SocialSecurityNumber.tsx
index 3286f705050f..769bbc5d7d86 100644
--- a/src/pages/ReimbursementAccount/PersonalInfo/substeps/SocialSecurityNumber.tsx
+++ b/src/pages/ReimbursementAccount/PersonalInfo/substeps/SocialSecurityNumber.tsx
@@ -59,8 +59,8 @@ function SocialSecurityNumber({reimbursementAccount, onNext, isEditing}: SocialS
             submitButtonStyles={[styles.pb5, styles.mb0]}
         >
             <View>
-                <Text style={[styles.textHeadline, styles.mt5, styles.mb3]}>{translate('personalInfoStep.enterTheLast4')}</Text>
-                <Text style={[styles.textLabel, styles.textSupporting]}>{translate('personalInfoStep.dontWorry')}</Text>
+                <Text style={[styles.textHeadlineLineHeightXXL, styles.mt5, styles.mb3]}>{translate('personalInfoStep.enterTheLast4')}</Text>
+                <Text style={[styles.textSupporting]}>{translate('personalInfoStep.dontWorry')}</Text>
                 <View style={[styles.flex1]}>
                     <InputWrapper
                         InputComponent={TextInput}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 49285a584174..a2cf748813ca 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4304,7 +4304,7 @@ const styles = (theme: ThemeColors) =>
         interactiveStepHeaderStepButton: {
             width: 40,
             height: 40,
-            borderWidth: 1,
+            borderWidth: 2,
             borderRadius: 20,
             borderColor: theme.borderFocus,
             justifyContent: 'center',
@@ -4369,6 +4369,15 @@ const styles = (theme: ThemeColors) =>
             color: theme.text,
             textAlignVertical: 'center',
         },
+
+        textHeadlineLineHeightXXL: {
+            ...headlineFont,
+            ...whiteSpace.preWrap,
+            color: theme.heading,
+            fontSize: variables.fontSizeXLarge,
+            lineHeight: variables.lineHeightXXLarge,
+        },
+
         colorSchemeStyle: (colorScheme: ColorScheme) => ({colorScheme}),
 
         updateAnimation: {