Merge pull request Expensify#21 from MrMuzyk/fix/header-styling

fix: header and form spacing
MrMuzyk · Feb 9, 2024 · 6da20e2 · 6da20e2
2 parents cfc51cf + 0312396
commit 6da20e2
Show file tree

Hide file tree

Showing 31 changed files with 33 additions and 39 deletions.
diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
@@ -279,7 +279,7 @@ function AddPlaidBankAccount({
     if (isDisplayedInNewVBBA) {
         return (
             <FullPageOfflineBlockingView>
-                <Text style={[styles.mt5, styles.mb3, styles.textHeadline]}>{translate('bankAccount.chooseAnAccount')}</Text>
+                <Text style={[styles.mb3, styles.textHeadline]}>{translate('bankAccount.chooseAnAccount')}</Text>
                 {!_.isEmpty(text) && <Text style={[styles.mb6, styles.textSupporting]}>{text}</Text>}
                 <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb6]}>
                     <Icon

diff --git a/src/pages/ReimbursementAccount/AddressForm.js b/src/pages/ReimbursementAccount/AddressForm.js
@@ -127,7 +127,7 @@ function AddressForm(props) {
                 containerStyles={[styles.mt6]}
             />
 
-            <View style={[styles.mt6, styles.mhn5]}>
+            <View style={[styles.mt3, styles.mhn5]}>
                 <InputWrapper
                     InputComponent={StatePicker}
                     inputID={props.inputKeys.state}
@@ -152,7 +152,7 @@ function AddressForm(props) {
                 errorText={props.errors.zipCode ? 'bankAccount.error.zipCode' : ''}
                 maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE}
                 hint={['common.zipCodeExampleFormat', {zipSampleFormat: CONST.COUNTRY_ZIP_REGEX_DATA.US.samples}]}
-                containerStyles={[styles.mt2]}
+                containerStyles={[styles.mt3]}
             />
         </>
     );

diff --git a/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx
@@ -127,7 +127,7 @@ function BankInfo({reimbursementAccount, reimbursementAccountDraft, plaidLinkTok
                 onBackButtonPress={handleBackButtonPress}
                 title={translate('bankAccount.bankInfo')}
             />
-            <View style={[styles.ph5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
+            <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
                 <InteractiveStepSubHeader
                     startStepIndex={0}
                     stepNames={CONST.BANK_ACCOUNT.STEP_NAMES}

diff --git a/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx
@@ -49,7 +49,7 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext,
             style={[styles.pt0]}
         >
             <ScrollView contentContainerStyle={styles.flexGrow1}>
-                <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mt5]}>{translate('bankAccount.letsDoubleCheck')}</Text>
+                <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5]}>{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]}>

diff --git a/src/pages/ReimbursementAccount/BankInfo/substeps/Manual.tsx b/src/pages/ReimbursementAccount/BankInfo/substeps/Manual.tsx
@@ -73,7 +73,7 @@ function Manual({reimbursementAccount, onNext}: ManualProps) {
             submitButtonText={translate('common.next')}
             style={[styles.mh5, styles.flexGrow1]}
         >
-            <Text style={[styles.textHeadlineLineHeightXXL, styles.mb3, styles.mt5]}>{translate('bankAccount.manuallyAdd')}</Text>
+            <Text style={[styles.textHeadlineLineHeightXXL, styles.mb3]}>{translate('bankAccount.manuallyAdd')}</Text>
             <Text style={[styles.mb5, styles.textSupporting]}>{translate('bankAccount.checkHelpLine')}</Text>
             <ExampleCheckImage />
             <InputWrapper

diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerCheckUBO.tsx b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerCheckUBO.tsx
@@ -54,7 +54,7 @@ function BeneficialOwnerCheckUBO({title, onSelectedValue, defaultValue}: Benefic
                 style={[styles.mh5, styles.flexGrow1]}
                 submitButtonStyles={[styles.pb5, styles.mb0]}
             >
-                <Text style={[styles.textHeadlineLineHeightXXL, styles.mt5]}>{title}</Text>
+                <Text style={[styles.textHeadlineLineHeightXXL]}>{title}</Text>
                 <Text style={[styles.pv3, styles.textSupporting]}>{translate('beneficialOwnerInfoStep.regulationRequiresUsToVerifyTheIdentity')}</Text>
                 <RadioButtons
                     items={options}

diff --git a/...entAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/AddressUBO.tsx b/...entAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/AddressUBO.tsx
@@ -73,7 +73,7 @@ function AddressUBO({reimbursementAccountDraft, onNext, isEditing, beneficialOwn
             submitButtonStyles={[styles.mb0, styles.pb5]}
             style={[styles.mh5, styles.flexGrow1]}
         >
-            <Text style={[styles.textHeadlineLineHeightXXL, styles.mt5, styles.mb3]}>{translate('beneficialOwnerInfoStep.enterTheOwnersAddress')}</Text>
+            <Text style={[styles.textHeadlineLineHeightXXL, styles.mb3]}>{translate('beneficialOwnerInfoStep.enterTheOwnersAddress')}</Text>
             <Text style={[styles.textSupporting]}>{translate('common.noPO')}</Text>
             <AddressForm
                 inputKeys={inputKeys}

diff --git a/...count/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx b/...count/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx
@@ -41,7 +41,7 @@ function ConfirmationUBO({reimbursementAccount, reimbursementAccountDraft, onNex
             style={[styles.pt0]}
         >
             <ScrollView contentContainerStyle={styles.flexGrow1}>
-                <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mt5, styles.mb3]}>{translate('beneficialOwnerInfoStep.letsDoubleCheck')}</Text>
+                <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mb3]}>{translate('beneficialOwnerInfoStep.letsDoubleCheck')}</Text>
                 <MenuItemWithTopDescription
                     description={translate('beneficialOwnerInfoStep.legalName')}
                     title={`${values.firstName} ${values.lastName}`}

diff --git a/...ccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/DateOfBirthUBO.tsx b/...ccount/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.textHeadlineLineHeightXXL, styles.mt5]}>{translate('beneficialOwnerInfoStep.enterTheDateOfBirthOfTheOwner')}</Text>
+            <Text style={[styles.textHeadlineLineHeightXXL]}>{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/...tAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/LegalNameUBO.tsx b/...tAccount/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.textHeadlineLineHeightXXL, styles.mt5]}>{translate('beneficialOwnerInfoStep.enterLegalFirstAndLastName')}</Text>
+            <Text style={[styles.textHeadlineLineHeightXXL]}>{translate('beneficialOwnerInfoStep.enterLegalFirstAndLastName')}</Text>
             <InputWrapper
                 InputComponent={TextInput}
                 label={translate('beneficialOwnerInfoStep.legalFirstName')}

diff --git a/...neficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/SocialSecurityNumberUBO.tsx b/...neficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/SocialSecurityNumberUBO.tsx
@@ -58,7 +58,7 @@ function SocialSecurityNumberUBO({reimbursementAccountDraft, onNext, isEditing,
             submitButtonStyles={[styles.pb5, styles.mb0]}
         >
             <View>
-                <Text style={[styles.textHeadlineLineHeightXXL, styles.mt5, styles.mb3]}>{translate('beneficialOwnerInfoStep.enterTheLast4')}</Text>
+                <Text style={[styles.textHeadlineLineHeightXXL, styles.mb3]}>{translate('beneficialOwnerInfoStep.enterTheLast4')}</Text>
                 <Text style={[styles.textSupporting]}>{translate('beneficialOwnerInfoStep.dontWorry')}</Text>
                 <View style={[styles.flex1]}>
                     <InputWrapper

diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/CompanyOwnersListUBO.tsx b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/CompanyOwnersListUBO.tsx
@@ -102,7 +102,7 @@ function CompanyOwnersListUBO({
             style={[styles.pt0]}
         >
             <ScrollView contentContainerStyle={[styles.flexGrow1, styles.ph0]}>
-                <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mt5]}>{translate('beneficialOwnerInfoStep.letsDoubleCheck')}</Text>
+                <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5]}>{translate('beneficialOwnerInfoStep.letsDoubleCheck')}</Text>
                 <Text style={[styles.p5, styles.textSupporting]}>{translate('beneficialOwnerInfoStep.regulationRequiresUsToVerifyTheIdentity')}</Text>
                 <View>
                     <Text style={[styles.textSupporting, styles.pv1, styles.ph5]}>{`${translate('beneficialOwnerInfoStep.owners')}:`}</Text>

diff --git a/src/pages/ReimbursementAccount/BeneficialOwnersStep.tsx b/src/pages/ReimbursementAccount/BeneficialOwnersStep.tsx
@@ -223,7 +223,7 @@ function BeneficialOwnersStep({reimbursementAccount, reimbursementAccountDraft,
                 title={translate('beneficialOwnerInfoStep.companyOwner')}
                 onBackButtonPress={handleBackButtonPress}
             />
-            <View style={[styles.ph5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
+            <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
                 <InteractiveStepSubHeader
                     startStepIndex={4}
                     stepNames={CONST.BANK_ACCOUNT.STEP_NAMES}

diff --git a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx
@@ -106,7 +106,7 @@ function BusinessInfo({reimbursementAccount, reimbursementAccountDraft, onBackBu
                 guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
                 onBackButtonPress={handleBackButtonPress}
             />
-            <View style={[styles.ph5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
+            <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
                 <InteractiveStepSubHeader
                     startStepIndex={3}
                     stepNames={CONST.BANK_ACCOUNT.STEP_NAMES}

diff --git 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.textHeadlineLineHeightXXL, styles.mt5]}>{translate('businessInfoStep.enterYourCompanysAddress')}</Text>
+            <Text style={[styles.textHeadlineLineHeightXXL]}>{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
@@ -61,7 +61,7 @@ function ConfirmationBusiness({reimbursementAccount, reimbursementAccountDraft,
             style={[styles.pt0]}
         >
             <ScrollView contentContainerStyle={styles.flexGrow1}>
-                <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mt5, styles.mb3]}>{translate('businessInfoStep.letsDoubleCheck')}</Text>
+                <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, 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
@@ -62,7 +62,7 @@ function IncorporationDateBusiness({reimbursementAccount, reimbursementAccountDr
             style={[styles.mh5, styles.flexGrow1]}
             submitButtonStyles={[styles.pb5, styles.mb0]}
         >
-            <Text style={[styles.textHeadlineLineHeightXXL, styles.mt5]}>{translate('businessInfoStep.selectYourCompanysIncorporationDate')}</Text>
+            <Text style={[styles.textHeadlineLineHeightXXL]}>{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
@@ -48,7 +48,7 @@ function IncorporationStateBusiness({reimbursementAccount, onNext, isEditing}: I
             style={[styles.mh0, styles.flexGrow1]}
             submitButtonStyles={[styles.p5, styles.mb0]}
         >
-            <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mt5]}>{translate('businessInfoStep.pleaseSelectTheStateYourCompanyWasIncorporatedIn')}</Text>
+            <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5]}>{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
@@ -60,7 +60,7 @@ function NameBusiness({reimbursementAccount, onNext, isEditing}: NameBusinessPro
             style={[styles.mh5, styles.flexGrow1]}
             submitButtonStyles={[styles.pb5, styles.mb0]}
         >
-            <Text style={[styles.textHeadlineLineHeightXXL, styles.mt5]}>{translate('businessInfoStep.enterTheNameOfYourBusiness')}</Text>
+            <Text style={[styles.textHeadlineLineHeightXXL]}>{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
@@ -56,7 +56,7 @@ function PhoneNumberBusiness({reimbursementAccount, onNext, isEditing}: PhoneNum
             style={[styles.mh5, styles.flexGrow1]}
             submitButtonStyles={[styles.pb5, styles.mb0]}
         >
-            <Text style={[styles.textHeadlineLineHeightXXL, styles.mt5]}>{translate('businessInfoStep.enterYourCompanysPhoneNumber')}</Text>
+            <Text style={[styles.textHeadlineLineHeightXXL]}>{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
@@ -58,7 +58,7 @@ function TaxIdBusiness({reimbursementAccount, onNext, isEditing}: TaxIdBusinessP
             style={[styles.mh5, styles.flexGrow1]}
             submitButtonStyles={[styles.pb5, styles.mb0]}
         >
-            <Text style={[styles.textHeadlineLineHeightXXL, styles.mt5]}>{translate('businessInfoStep.enterYourCompanysTaxIdNumber')}</Text>
+            <Text style={[styles.textHeadlineLineHeightXXL]}>{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
@@ -48,7 +48,7 @@ function TypeBusiness({reimbursementAccount, onNext, isEditing}: TypeBusinessPro
             style={[styles.flexGrow1]}
             submitButtonStyles={[styles.p5, styles.mb0]}
         >
-            <Text style={[styles.textHeadlineLineHeightXXL, styles.mt5, styles.ph5]}>{translate('businessInfoStep.selectYourCompanysType')}</Text>
+            <Text style={[styles.textHeadlineLineHeightXXL, 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
@@ -73,7 +73,7 @@ function WebsiteBusiness({reimbursementAccount, user, session, onNext, isEditing
             style={[styles.mh5, styles.flexGrow1]}
             submitButtonStyles={[styles.pb5, styles.mb0]}
         >
-            <Text style={[styles.textHeadlineLineHeightXXL, styles.mt5]}>{translate('businessInfoStep.enterYourCompanysWebsite')}</Text>
+            <Text style={[styles.textHeadlineLineHeightXXL]}>{translate('businessInfoStep.enterYourCompanysWebsite')}</Text>
             <Text style={[styles.label, styles.textSupporting]}>{translate('common.websiteExample')}</Text>
             <InputWrapper
                 InputComponent={TextInput}

diff --git a/src/pages/ReimbursementAccount/CompleteVerification/CompleteVerification.tsx b/src/pages/ReimbursementAccount/CompleteVerification/CompleteVerification.tsx
@@ -73,7 +73,7 @@ function CompleteVerification({reimbursementAccount, reimbursementAccountDraft,
                 onBackButtonPress={handleBackButtonPress}
                 title={translate('completeVerificationStep.completeVerification')}
             />
-            <View style={[styles.ph5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
+            <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
                 <InteractiveStepSubHeader
                     startStepIndex={5}
                     stepNames={CONST.BANK_ACCOUNT.STEP_NAMES}

diff --git a/src/pages/ReimbursementAccount/CompleteVerification/substeps/ConfirmAgreements.tsx b/src/pages/ReimbursementAccount/CompleteVerification/substeps/ConfirmAgreements.tsx
@@ -58,18 +58,15 @@ function ConfirmAgreements({onNext, reimbursementAccount}: ConfirmAgreementsProp
     };
 
     return (
-        <ScreenWrapper
-            testID={ConfirmAgreements.displayName}
-            style={[styles.pt5]}
-        >
-            <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5]}>{translate('completeVerificationStep.confirmAgreements')}</Text>
+        <ScreenWrapper testID={ConfirmAgreements.displayName}>
             <FormProvider
                 formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
                 validate={validate}
                 onSubmit={onNext}
                 submitButtonText={translate('common.saveAndContinue')}
                 style={[styles.mh5, styles.flexGrow1]}
             >
+                <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5]}>{translate('completeVerificationStep.confirmAgreements')}</Text>
                 <InputWrapper
                     InputComponent={CheckboxWithLabel}
                     accessibilityLabel={translate('completeVerificationStep.isAuthorizedToUseBankAccount')}

diff --git a/src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.tsx b/src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.tsx
@@ -75,7 +75,7 @@ function PersonalInfo({reimbursementAccount, reimbursementAccountDraft, onBackBu
                 title={translate('personalInfoStep.personalInfo')}
                 onBackButtonPress={handleBackButtonPress}
             />
-            <View style={[styles.ph5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
+            <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
                 <InteractiveStepSubHeader
                     startStepIndex={1}
                     stepNames={CONST.BANK_ACCOUNT.STEP_NAMES}

diff --git a/src/pages/ReimbursementAccount/PersonalInfo/substeps/Address.tsx b/src/pages/ReimbursementAccount/PersonalInfo/substeps/Address.tsx
@@ -76,7 +76,7 @@ function Address({reimbursementAccount, onNext, isEditing}: AddressProps) {
             style={[styles.mh5, styles.flexGrow1]}
         >
             <View>
-                <Text style={[styles.textHeadlineLineHeightXXL, styles.mt5, styles.mb3]}>{translate('personalInfoStep.enterYourAddress')}</Text>
+                <Text style={[styles.textHeadlineLineHeightXXL, styles.mb3]}>{translate('personalInfoStep.enterYourAddress')}</Text>
                 <Text style={[styles.textSupporting]}>{translate('common.noPO')}</Text>
                 <AddressForm
                     inputKeys={INPUT_KEYS}

diff --git a/src/pages/ReimbursementAccount/PersonalInfo/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/PersonalInfo/substeps/Confirmation.tsx
@@ -39,10 +39,7 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext,
     const error = ErrorUtils.getLatestErrorMessage(reimbursementAccount ?? {});
 
     return (
-        <ScreenWrapper
-            testID={Confirmation.displayName}
-            style={[styles.pt5]}
-        >
+        <ScreenWrapper testID={Confirmation.displayName}>
             <ScrollView contentContainerStyle={styles.flexGrow1}>
                 <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mb3]}>{translate('personalInfoStep.letsDoubleCheck')}</Text>
                 <MenuItemWithTopDescription

diff --git 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.textHeadlineLineHeightXXL, styles.mv5]}>{translate('personalInfoStep.enterYourDateOfBirth')}</Text>
+            <Text style={[styles.textHeadlineLineHeightXXL, styles.mb5]}>{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
@@ -65,7 +65,7 @@ function FullName({reimbursementAccount, onNext, isEditing}: FullNameProps) {
             submitButtonStyles={[styles.pb5, styles.mb0]}
         >
             <View>
-                <Text style={[styles.textHeadlineLineHeightXXL, styles.mt5, styles.mb6]}>{translate('personalInfoStep.enterYourLegalFirstAndLast')}</Text>
+                <Text style={[styles.textHeadlineLineHeightXXL, styles.mb6]}>{translate('personalInfoStep.enterYourLegalFirstAndLast')}</Text>
                 <View style={[styles.flex2, styles.mb6]}>
                     <InputWrapper
                         InputComponent={TextInput}