fix: Styling fixes (#15)

* fix: Styling fixes * fix: cleanup * fix: pass styles as prop * fix: change last form
staszekscp · Jan 31, 2024 · b4b6927 · b4b6927
1 parent eb343d2
commit b4b6927
Show file tree

Hide file tree

Showing 36 changed files with 80 additions and 91 deletions.
diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
@@ -279,9 +279,9 @@ function AddPlaidBankAccount({
     if (isDisplayedInNewVBBA) {
         return (
             <FullPageOfflineBlockingView>
-                <Text style={[styles.mb5, styles.textHeadline]}>{translate('bankAccount.chooseAnAccount')}</Text>
-                {!_.isEmpty(text) && <Text style={[styles.mb5]}>{text}</Text>}
-                <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb5]}>
+                <Text style={[styles.mt5, styles.mb3, styles.textHeadline]}>{translate('bankAccount.chooseAnAccount')}</Text>
+                {!_.isEmpty(text) && <Text style={[styles.mb6, styles.textLabel, styles.textSupporting]}>{text}</Text>}
+                <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb6]}>
                     <Icon
                         src={icon}
                         height={iconSize}
@@ -299,6 +299,7 @@ function AddPlaidBankAccount({
                     items={options}
                     defaultCheckedValue={defaultSelectedPlaidAccountID}
                     onPress={handleSelectingPlaidAccount}
+                    radioButtonStyle={[styles.mb6]}
                 />
                 <FormHelpMessage message={errorText} />
             </FullPageOfflineBlockingView>

diff --git a/src/components/InteractiveStepSubHeader.tsx b/src/components/InteractiveStepSubHeader.tsx
@@ -92,7 +92,7 @@ function InteractiveStepSubHeader({stepNames, startStepIndex = 0, onStepSelected
                                     fill={colors.white}
                                 />
                             ) : (
-                                <Text style={styles.interactiveStepHeaderStepText}>{index + 1}</Text>
+                                <Text style={[styles.interactiveStepHeaderStepText, isLockedStep && styles.textSupporting]}>{index + 1}</Text>
                             )}
                         </PressableWithFeedback>
                         {hasUnion ? <View style={[styles.interactiveStepHeaderStepLine, isLockedLine && styles.interactiveStepHeaderLockedStepLine]} /> : null}

diff --git a/src/components/RadioButtons.tsx b/src/components/RadioButtons.tsx
@@ -1,4 +1,5 @@
 import React, {useState} from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
 import RadioButtonWithLabel from './RadioButtonWithLabel';
@@ -17,19 +18,22 @@ type RadioButtonsProps = {
 
     /** Callback to fire when selecting a radio button */
     onPress: (value: string) => void;
+
+    /** Style for radio button */
+    radioButtonStyle?: StyleProp<ViewStyle>;
 };
 
-function RadioButtons({items, onPress, defaultCheckedValue = ''}: RadioButtonsProps) {
+function RadioButtons({items, onPress, defaultCheckedValue = '', radioButtonStyle}: RadioButtonsProps) {
     const styles = useThemeStyles();
     const [checkedValue, setCheckedValue] = useState(defaultCheckedValue);
 
     return (
-        <View style={styles.mb3}>
+        <View style={styles.mt6}>
             {items.map((item) => (
                 <RadioButtonWithLabel
                     key={item.value}
                     isChecked={item.value === checkedValue}
-                    style={styles.mt4}
+                    style={[styles.mb4, radioButtonStyle]}
                     onPress={() => {
                         setCheckedValue(item.value);
                         return onPress(item.value);

diff --git a/src/pages/ReimbursementAccount/AddressForm.js b/src/pages/ReimbursementAccount/AddressForm.js
@@ -102,12 +102,11 @@ function AddressForm(props) {
                     inputID={props.inputKeys.street}
                     shouldSaveDraft={props.shouldSaveDraft}
                     label={props.translate(props.streetTranslationKey)}
-                    containerStyles={[styles.mt4]}
+                    containerStyles={[styles.mt6]}
                     value={props.values.street}
                     defaultValue={props.defaultValues.street}
                     onInputChange={props.onFieldChange}
                     errorText={props.errors.street ? props.translate('bankAccount.error.addressStreet') : ''}
-                    hint={props.translate('common.noPO')}
                     renamedInputKeys={props.inputKeys}
                     maxInputLength={CONST.FORM_CHARACTER_LIMIT}
                     isLimitedToUSA
@@ -124,10 +123,10 @@ function AddressForm(props) {
                 defaultValue={props.defaultValues.city}
                 onChangeText={(value) => props.onFieldChange({city: value})}
                 errorText={props.errors.city ? props.translate('bankAccount.error.addressCity') : ''}
-                containerStyles={[styles.mt4]}
+                containerStyles={[styles.mt6]}
             />
 
-            <View style={[styles.mt4, styles.mhn5]}>
+            <View style={[styles.mt6, styles.mhn5]}>
                 <InputWrapper
                     InputComponent={StatePicker}
                     inputID={props.inputKeys.state}
@@ -151,7 +150,7 @@ function AddressForm(props) {
                 onChangeText={(value) => props.onFieldChange({zipCode: value})}
                 errorText={props.errors.zipCode ? props.translate('bankAccount.error.zipCode') : ''}
                 maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE}
-                containerStyles={[styles.mt2]}
+                containerStyles={[styles.mt5]}
             />
         </>
     );

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.mv3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
+            <View style={[styles.ph5, 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
@@ -51,7 +51,8 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext,
             style={[styles.pt0]}
         >
             <ScrollView contentContainerStyle={styles.flexGrow1}>
-                <Text style={[styles.textHeadline, styles.ph5, styles.mb6]}>{translate('bankAccount.letsDoubleCheck')}</Text>
+                <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>
                 {setupType === CONST.BANK_ACCOUNT.SUBSTEP.MANUAL && (
                     <View style={[styles.mb5]}>
                         <MenuItemWithTopDescription
@@ -77,7 +78,6 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext,
                         onPress={handleModifyAccountNumbers}
                     />
                 )}
-                <Text style={[styles.mt3, styles.ph5, styles.textMicroSupporting]}>{translate('bankAccount.thisBankAccount')}</Text>
                 <View style={[styles.ph5, styles.mtAuto]}>
                     {error.length > 0 && (
                         <DotIndicatorMessage

diff --git 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]}>{translate('bankAccount.manuallyAdd')}</Text>
-            <Text style={[styles.mb5, styles.textLabel]}>{translate('bankAccount.checkHelpLine')}</Text>
+            <Text style={[styles.textHeadline, styles.mb3, styles.mt5]}>{translate('bankAccount.manuallyAdd')}</Text>
+            <Text style={[styles.mb5, styles.textLabel, styles.textSupporting]}>{translate('bankAccount.checkHelpLine')}</Text>
             <ExampleCheckImage />
             <InputWrapper
                 InputComponent={TextInput}
@@ -91,7 +91,7 @@ function Manual({reimbursementAccount, onNext}: ManualProps) {
             <InputWrapper
                 InputComponent={TextInput}
                 inputID={BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER}
-                containerStyles={[styles.mt4]}
+                containerStyles={[styles.mt6]}
                 label={translate('bankAccount.accountNumber')}
                 aria-label={translate('bankAccount.accountNumber')}
                 role={CONST.ROLE.PRESENTATION}

diff --git a/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx b/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx
@@ -99,7 +99,6 @@ function Plaid({reimbursementAccount, reimbursementAccountDraft, onNext, plaidDa
                 selectedPlaidAccountID={selectedPlaidAccountID}
                 isDisplayedInNewVBBA
                 inputID="selectedPlaidAccountID"
-                containerStyles={[styles.mb1]}
                 inputMode={CONST.INPUT_MODE.TEXT}
                 style={[styles.mt5]}
                 defaultValue={selectedPlaidAccountID}

diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerCheckUBO.tsx b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerCheckUBO.tsx
@@ -54,12 +54,13 @@ function BeneficialOwnerCheckUBO({title, onSelectedValue, defaultValue}: Benefic
                 style={[styles.mh5, styles.flexGrow1]}
                 submitButtonStyles={[styles.pb5, styles.mb0]}
             >
-                <Text style={styles.textHeadline}>{title}</Text>
-                <Text style={styles.pv5}>{translate('beneficialOwnerInfoStep.regulationRequiresUsToVerifyTheIdentity')}</Text>
+                <Text style={[styles.textHeadline, styles.mt5]}>{title}</Text>
+                <Text style={[styles.pv3, styles.textLabel, styles.textSupporting]}>{translate('beneficialOwnerInfoStep.regulationRequiresUsToVerifyTheIdentity')}</Text>
                 <RadioButtons
                     items={options}
                     onPress={handleSelectUBOValue}
                     defaultCheckedValue={defaultValue.toString()}
+                    radioButtonStyle={[styles.mb6]}
                 />
             </FormProvider>
         </ScreenWrapper>

diff --git a/...entAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/AddressUBO.tsx b/...entAccount/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]}>{translate('beneficialOwnerInfoStep.enterTheOwnersAddress')}</Text>
-            <Text>{translate('common.noPO')}</Text>
+            <Text style={[styles.textHeadline, styles.mt5, styles.mb3]}>{translate('beneficialOwnerInfoStep.enterTheOwnersAddress')}</Text>
+            <Text style={[styles.textLabel, styles.textSupporting]}>{translate('common.noPO')}</Text>
             <AddressForm
                 inputKeys={inputKeys}
                 shouldSaveDraft={!isEditing}

diff --git a/...count/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx b/...count/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.mb8]}>{translate('beneficialOwnerInfoStep.letsDoubleCheck')}</Text>
+                <Text style={[styles.textHeadline, styles.ph5, styles.mt5, 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.textHeadline, styles.mb3]}>{translate('beneficialOwnerInfoStep.enterTheDateOfBirthOfTheOwner')}</Text>
+            <Text style={[styles.textHeadline, 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/...tAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/LegalNameUBO.tsx b/...tAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/LegalNameUBO.tsx
@@ -52,14 +52,14 @@ function LegalNameUBO({reimbursementAccountDraft, onNext, isEditing, beneficialO
             style={[styles.mh5, styles.flexGrow1]}
             submitButtonStyles={[styles.pb5, styles.mb0]}
         >
-            <Text style={styles.textHeadline}>{translate('beneficialOwnerInfoStep.enterLegalFirstAndLastName')}</Text>
+            <Text style={[styles.textHeadline, styles.mt5]}>{translate('beneficialOwnerInfoStep.enterLegalFirstAndLastName')}</Text>
             <InputWrapper
                 InputComponent={TextInput}
                 label={translate('beneficialOwnerInfoStep.legalFirstName')}
                 aria-label={translate('beneficialOwnerInfoStep.legalFirstName')}
                 role={CONST.ROLE.PRESENTATION}
                 inputID={firstNameInputID}
-                containerStyles={[styles.mt4]}
+                containerStyles={[styles.mt6]}
                 defaultValue={defaultFirstName}
                 shouldSaveDraft={!isEditing}
             />
@@ -69,7 +69,7 @@ function LegalNameUBO({reimbursementAccountDraft, onNext, isEditing, beneficialO
                 aria-label={translate('beneficialOwnerInfoStep.legalLastName')}
                 role={CONST.ROLE.PRESENTATION}
                 inputID={lastNameInputID}
-                containerStyles={[styles.mt4]}
+                containerStyles={[styles.mt6]}
                 defaultValue={defaultLastName}
                 shouldSaveDraft={!isEditing}
             />

diff --git a/...neficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/SocialSecurityNumberUBO.tsx b/...neficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/SocialSecurityNumberUBO.tsx
@@ -58,16 +58,16 @@ function SocialSecurityNumberUBO({reimbursementAccountDraft, onNext, isEditing,
             submitButtonStyles={[styles.pb5, styles.mb0]}
         >
             <View>
-                <Text style={[styles.textHeadline]}>{translate('beneficialOwnerInfoStep.enterTheLast4')}</Text>
-                <Text style={[styles.mb3]}>{translate('beneficialOwnerInfoStep.dontWorry')}</Text>
+                <Text style={[styles.textHeadline, styles.mt5, styles.mb3]}>{translate('beneficialOwnerInfoStep.enterTheLast4')}</Text>
+                <Text style={[styles.textLabel, styles.textSupporting]}>{translate('beneficialOwnerInfoStep.dontWorry')}</Text>
                 <View style={[styles.flex1]}>
                     <InputWrapper
                         InputComponent={TextInput}
                         inputID={ssnLast4InputID}
                         label={translate('beneficialOwnerInfoStep.last4SSN')}
                         aria-label={translate('beneficialOwnerInfoStep.last4SSN')}
                         role={CONST.ROLE.PRESENTATION}
-                        containerStyles={[styles.mt4]}
+                        containerStyles={[styles.mt6]}
                         inputMode={CONST.INPUT_MODE.NUMERIC}
                         defaultValue={defaultSsnLast4}
                         maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.SSN}

diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/CompanyOwnersListUBO.tsx b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/CompanyOwnersListUBO.tsx
@@ -102,8 +102,8 @@ function CompanyOwnersListUBO({
             style={[styles.pt0]}
         >
             <ScrollView contentContainerStyle={[styles.flexGrow1, styles.ph0]}>
-                <Text style={[styles.textHeadline, styles.ph5]}>{translate('beneficialOwnerInfoStep.letsDoubleCheck')}</Text>
-                <Text style={styles.p5}>{translate('beneficialOwnerInfoStep.regulationRequiresUsToVerifyTheIdentity')}</Text>
+                <Text style={[styles.textHeadline, 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>
                     {isUserUBO && (

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.mv3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
+            <View style={[styles.ph5, 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.mv3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
+            <View style={[styles.ph5, 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.textHeadline]}>{translate('businessInfoStep.enterYourCompanysAddress')}</Text>
+            <Text style={[styles.textHeadline, styles.mt5]}>{translate('businessInfoStep.enterYourCompanysAddress')}</Text>
             <Text>{translate('common.noPO')}</Text>
             <AddressForm
                 inputKeys={INPUT_KEYS}