Skip to content

Commit b4b6927

Browse files
MrMuzykMrMuzyk
authored
fix: Styling fixes (#15)
* fix: Styling fixes * fix: cleanup * fix: pass styles as prop * fix: change last form
1 parent eb343d2 commit b4b6927

36 files changed

+80
-91
lines changed

‎src/components/AddPlaidBankAccount.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -279,9 +279,9 @@ function AddPlaidBankAccount({
279279
if (isDisplayedInNewVBBA) {
280280
return (
281281
<FullPageOfflineBlockingView>
282-
<Text style={[styles.mb5, styles.textHeadline]}>{translate('bankAccount.chooseAnAccount')}</Text>
283-
{!_.isEmpty(text) && <Text style={[styles.mb5]}>{text}</Text>}
284-
<View style={[styles.flexRow, styles.alignItemsCenter, styles.mb5]}>
282+
<Text style={[styles.mt5, styles.mb3, styles.textHeadline]}>{translate('bankAccount.chooseAnAccount')}</Text>
283+
{!_.isEmpty(text) && <Text style={[styles.mb6, styles.textLabel, styles.textSupporting]}>{text}</Text>}
284+
<View style={[styles.flexRow, styles.alignItemsCenter, styles.mb6]}>
285285
<Icon
286286
src={icon}
287287
height={iconSize}
@@ -299,6 +299,7 @@ function AddPlaidBankAccount({
299299
items={options}
300300
defaultCheckedValue={defaultSelectedPlaidAccountID}
301301
onPress={handleSelectingPlaidAccount}
302+
radioButtonStyle={[styles.mb6]}
302303
/>
303304
<FormHelpMessage message={errorText} />
304305
</FullPageOfflineBlockingView>

‎src/components/InteractiveStepSubHeader.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ function InteractiveStepSubHeader({stepNames, startStepIndex = 0, onStepSelected
9292
fill={colors.white}
9393
/>
9494
) : (
95-
<Text style={styles.interactiveStepHeaderStepText}>{index + 1}</Text>
95+
<Text style={[styles.interactiveStepHeaderStepText, isLockedStep && styles.textSupporting]}>{index + 1}</Text>
9696
)}
9797
</PressableWithFeedback>
9898
{hasUnion ? <View style={[styles.interactiveStepHeaderStepLine, isLockedLine && styles.interactiveStepHeaderLockedStepLine]} /> : null}

‎src/components/RadioButtons.tsx

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, {useState} from 'react';
2+
import type {StyleProp, ViewStyle} from 'react-native';
23
import {View} from 'react-native';
34
import useThemeStyles from '@hooks/useThemeStyles';
45
import RadioButtonWithLabel from './RadioButtonWithLabel';
@@ -17,19 +18,22 @@ type RadioButtonsProps = {
1718

1819
/** Callback to fire when selecting a radio button */
1920
onPress: (value: string) => void;
21+
22+
/** Style for radio button */
23+
radioButtonStyle?: StyleProp<ViewStyle>;
2024
};
2125

22-
function RadioButtons({items, onPress, defaultCheckedValue = ''}: RadioButtonsProps) {
26+
function RadioButtons({items, onPress, defaultCheckedValue = '', radioButtonStyle}: RadioButtonsProps) {
2327
const styles = useThemeStyles();
2428
const [checkedValue, setCheckedValue] = useState(defaultCheckedValue);
2529

2630
return (
27-
<View style={styles.mb3}>
31+
<View style={styles.mt6}>
2832
{items.map((item) => (
2933
<RadioButtonWithLabel
3034
key={item.value}
3135
isChecked={item.value === checkedValue}
32-
style={styles.mt4}
36+
style={[styles.mb4, radioButtonStyle]}
3337
onPress={() => {
3438
setCheckedValue(item.value);
3539
return onPress(item.value);

‎src/pages/ReimbursementAccount/AddressForm.js

+4-5
Original file line numberDiff line numberDiff line change
@@ -102,12 +102,11 @@ function AddressForm(props) {
102102
inputID={props.inputKeys.street}
103103
shouldSaveDraft={props.shouldSaveDraft}
104104
label={props.translate(props.streetTranslationKey)}
105-
containerStyles={[styles.mt4]}
105+
containerStyles={[styles.mt6]}
106106
value={props.values.street}
107107
defaultValue={props.defaultValues.street}
108108
onInputChange={props.onFieldChange}
109109
errorText={props.errors.street ? props.translate('bankAccount.error.addressStreet') : ''}
110-
hint={props.translate('common.noPO')}
111110
renamedInputKeys={props.inputKeys}
112111
maxInputLength={CONST.FORM_CHARACTER_LIMIT}
113112
isLimitedToUSA
@@ -124,10 +123,10 @@ function AddressForm(props) {
124123
defaultValue={props.defaultValues.city}
125124
onChangeText={(value) => props.onFieldChange({city: value})}
126125
errorText={props.errors.city ? props.translate('bankAccount.error.addressCity') : ''}
127-
containerStyles={[styles.mt4]}
126+
containerStyles={[styles.mt6]}
128127
/>
129128

130-
<View style={[styles.mt4, styles.mhn5]}>
129+
<View style={[styles.mt6, styles.mhn5]}>
131130
<InputWrapper
132131
InputComponent={StatePicker}
133132
inputID={props.inputKeys.state}
@@ -151,7 +150,7 @@ function AddressForm(props) {
151150
onChangeText={(value) => props.onFieldChange({zipCode: value})}
152151
errorText={props.errors.zipCode ? props.translate('bankAccount.error.zipCode') : ''}
153152
maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE}
154-
containerStyles={[styles.mt2]}
153+
containerStyles={[styles.mt5]}
155154
/>
156155
</>
157156
);

‎src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ function BankInfo({reimbursementAccount, reimbursementAccountDraft, plaidLinkTok
127127
onBackButtonPress={handleBackButtonPress}
128128
title={translate('bankAccount.bankInfo')}
129129
/>
130-
<View style={[styles.ph5, styles.mv3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
130+
<View style={[styles.ph5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
131131
<InteractiveStepSubHeader
132132
startStepIndex={0}
133133
stepNames={CONST.BANK_ACCOUNT.STEP_NAMES}

‎src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,8 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext,
5151
style={[styles.pt0]}
5252
>
5353
<ScrollView contentContainerStyle={styles.flexGrow1}>
54-
<Text style={[styles.textHeadline, styles.ph5, styles.mb6]}>{translate('bankAccount.letsDoubleCheck')}</Text>
54+
<Text style={[styles.textHeadline, styles.ph5, styles.mt5]}>{translate('bankAccount.letsDoubleCheck')}</Text>
55+
<Text style={[styles.mt3, styles.mb3, styles.ph5, styles.textLabel, styles.textSupporting]}>{translate('bankAccount.thisBankAccount')}</Text>
5556
{setupType === CONST.BANK_ACCOUNT.SUBSTEP.MANUAL && (
5657
<View style={[styles.mb5]}>
5758
<MenuItemWithTopDescription
@@ -77,7 +78,6 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext,
7778
onPress={handleModifyAccountNumbers}
7879
/>
7980
)}
80-
<Text style={[styles.mt3, styles.ph5, styles.textMicroSupporting]}>{translate('bankAccount.thisBankAccount')}</Text>
8181
<View style={[styles.ph5, styles.mtAuto]}>
8282
{error.length > 0 && (
8383
<DotIndicatorMessage

‎src/pages/ReimbursementAccount/BankInfo/substeps/Manual.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,8 @@ function Manual({reimbursementAccount, onNext}: ManualProps) {
7373
submitButtonText={translate('common.next')}
7474
style={[styles.mh5, styles.flexGrow1]}
7575
>
76-
<Text style={[styles.textHeadline, styles.mb3]}>{translate('bankAccount.manuallyAdd')}</Text>
77-
<Text style={[styles.mb5, styles.textLabel]}>{translate('bankAccount.checkHelpLine')}</Text>
76+
<Text style={[styles.textHeadline, styles.mb3, styles.mt5]}>{translate('bankAccount.manuallyAdd')}</Text>
77+
<Text style={[styles.mb5, styles.textLabel, styles.textSupporting]}>{translate('bankAccount.checkHelpLine')}</Text>
7878
<ExampleCheckImage />
7979
<InputWrapper
8080
InputComponent={TextInput}
@@ -91,7 +91,7 @@ function Manual({reimbursementAccount, onNext}: ManualProps) {
9191
<InputWrapper
9292
InputComponent={TextInput}
9393
inputID={BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER}
94-
containerStyles={[styles.mt4]}
94+
containerStyles={[styles.mt6]}
9595
label={translate('bankAccount.accountNumber')}
9696
aria-label={translate('bankAccount.accountNumber')}
9797
role={CONST.ROLE.PRESENTATION}

‎src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,6 @@ function Plaid({reimbursementAccount, reimbursementAccountDraft, onNext, plaidDa
9999
selectedPlaidAccountID={selectedPlaidAccountID}
100100
isDisplayedInNewVBBA
101101
inputID="selectedPlaidAccountID"
102-
containerStyles={[styles.mb1]}
103102
inputMode={CONST.INPUT_MODE.TEXT}
104103
style={[styles.mt5]}
105104
defaultValue={selectedPlaidAccountID}

‎src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerCheckUBO.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -54,12 +54,13 @@ function BeneficialOwnerCheckUBO({title, onSelectedValue, defaultValue}: Benefic
5454
style={[styles.mh5, styles.flexGrow1]}
5555
submitButtonStyles={[styles.pb5, styles.mb0]}
5656
>
57-
<Text style={styles.textHeadline}>{title}</Text>
58-
<Text style={styles.pv5}>{translate('beneficialOwnerInfoStep.regulationRequiresUsToVerifyTheIdentity')}</Text>
57+
<Text style={[styles.textHeadline, styles.mt5]}>{title}</Text>
58+
<Text style={[styles.pv3, styles.textLabel, styles.textSupporting]}>{translate('beneficialOwnerInfoStep.regulationRequiresUsToVerifyTheIdentity')}</Text>
5959
<RadioButtons
6060
items={options}
6161
onPress={handleSelectUBOValue}
6262
defaultCheckedValue={defaultValue.toString()}
63+
radioButtonStyle={[styles.mb6]}
6364
/>
6465
</FormProvider>
6566
</ScreenWrapper>

‎src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/AddressUBO.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,8 @@ function AddressUBO({reimbursementAccountDraft, onNext, isEditing, beneficialOwn
7373
submitButtonStyles={[styles.mb0, styles.pb5]}
7474
style={[styles.mh5, styles.flexGrow1]}
7575
>
76-
<Text style={[styles.textHeadline]}>{translate('beneficialOwnerInfoStep.enterTheOwnersAddress')}</Text>
77-
<Text>{translate('common.noPO')}</Text>
76+
<Text style={[styles.textHeadline, styles.mt5, styles.mb3]}>{translate('beneficialOwnerInfoStep.enterTheOwnersAddress')}</Text>
77+
<Text style={[styles.textLabel, styles.textSupporting]}>{translate('common.noPO')}</Text>
7878
<AddressForm
7979
inputKeys={inputKeys}
8080
shouldSaveDraft={!isEditing}

‎src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ function ConfirmationUBO({reimbursementAccount, reimbursementAccountDraft, onNex
3939
style={[styles.pt0]}
4040
>
4141
<ScrollView contentContainerStyle={styles.flexGrow1}>
42-
<Text style={[styles.textHeadline, styles.ph5, styles.mb8]}>{translate('beneficialOwnerInfoStep.letsDoubleCheck')}</Text>
42+
<Text style={[styles.textHeadline, styles.ph5, styles.mt5, styles.mb3]}>{translate('beneficialOwnerInfoStep.letsDoubleCheck')}</Text>
4343
<MenuItemWithTopDescription
4444
description={translate('beneficialOwnerInfoStep.legalName')}
4545
title={`${values.firstName} ${values.lastName}`}

‎src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/DateOfBirthUBO.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ function DateOfBirthUBO({reimbursementAccountDraft, onNext, isEditing, beneficia
6767
style={[styles.mh5, styles.flexGrow2, styles.justifyContentBetween]}
6868
submitButtonStyles={[styles.pb5, styles.mb0]}
6969
>
70-
<Text style={[styles.textHeadline, styles.mb3]}>{translate('beneficialOwnerInfoStep.enterTheDateOfBirthOfTheOwner')}</Text>
70+
<Text style={[styles.textHeadline, styles.mt5]}>{translate('beneficialOwnerInfoStep.enterTheDateOfBirthOfTheOwner')}</Text>
7171
{/* @ts-expect-error TODO: Remove this once DatePicker (https://github.com/Expensify/App/issues/25148) is migrated to TypeScript. */}
7272
<InputWrapper<unknown>
7373
InputComponent={DatePicker}

‎src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/LegalNameUBO.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -52,14 +52,14 @@ function LegalNameUBO({reimbursementAccountDraft, onNext, isEditing, beneficialO
5252
style={[styles.mh5, styles.flexGrow1]}
5353
submitButtonStyles={[styles.pb5, styles.mb0]}
5454
>
55-
<Text style={styles.textHeadline}>{translate('beneficialOwnerInfoStep.enterLegalFirstAndLastName')}</Text>
55+
<Text style={[styles.textHeadline, styles.mt5]}>{translate('beneficialOwnerInfoStep.enterLegalFirstAndLastName')}</Text>
5656
<InputWrapper
5757
InputComponent={TextInput}
5858
label={translate('beneficialOwnerInfoStep.legalFirstName')}
5959
aria-label={translate('beneficialOwnerInfoStep.legalFirstName')}
6060
role={CONST.ROLE.PRESENTATION}
6161
inputID={firstNameInputID}
62-
containerStyles={[styles.mt4]}
62+
containerStyles={[styles.mt6]}
6363
defaultValue={defaultFirstName}
6464
shouldSaveDraft={!isEditing}
6565
/>
@@ -69,7 +69,7 @@ function LegalNameUBO({reimbursementAccountDraft, onNext, isEditing, beneficialO
6969
aria-label={translate('beneficialOwnerInfoStep.legalLastName')}
7070
role={CONST.ROLE.PRESENTATION}
7171
inputID={lastNameInputID}
72-
containerStyles={[styles.mt4]}
72+
containerStyles={[styles.mt6]}
7373
defaultValue={defaultLastName}
7474
shouldSaveDraft={!isEditing}
7575
/>

‎src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/SocialSecurityNumberUBO.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -58,16 +58,16 @@ function SocialSecurityNumberUBO({reimbursementAccountDraft, onNext, isEditing,
5858
submitButtonStyles={[styles.pb5, styles.mb0]}
5959
>
6060
<View>
61-
<Text style={[styles.textHeadline]}>{translate('beneficialOwnerInfoStep.enterTheLast4')}</Text>
62-
<Text style={[styles.mb3]}>{translate('beneficialOwnerInfoStep.dontWorry')}</Text>
61+
<Text style={[styles.textHeadline, styles.mt5, styles.mb3]}>{translate('beneficialOwnerInfoStep.enterTheLast4')}</Text>
62+
<Text style={[styles.textLabel, styles.textSupporting]}>{translate('beneficialOwnerInfoStep.dontWorry')}</Text>
6363
<View style={[styles.flex1]}>
6464
<InputWrapper
6565
InputComponent={TextInput}
6666
inputID={ssnLast4InputID}
6767
label={translate('beneficialOwnerInfoStep.last4SSN')}
6868
aria-label={translate('beneficialOwnerInfoStep.last4SSN')}
6969
role={CONST.ROLE.PRESENTATION}
70-
containerStyles={[styles.mt4]}
70+
containerStyles={[styles.mt6]}
7171
inputMode={CONST.INPUT_MODE.NUMERIC}
7272
defaultValue={defaultSsnLast4}
7373
maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.SSN}

‎src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/CompanyOwnersListUBO.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -102,8 +102,8 @@ function CompanyOwnersListUBO({
102102
style={[styles.pt0]}
103103
>
104104
<ScrollView contentContainerStyle={[styles.flexGrow1, styles.ph0]}>
105-
<Text style={[styles.textHeadline, styles.ph5]}>{translate('beneficialOwnerInfoStep.letsDoubleCheck')}</Text>
106-
<Text style={styles.p5}>{translate('beneficialOwnerInfoStep.regulationRequiresUsToVerifyTheIdentity')}</Text>
105+
<Text style={[styles.textHeadline, styles.ph5, styles.mt5]}>{translate('beneficialOwnerInfoStep.letsDoubleCheck')}</Text>
106+
<Text style={[styles.p5, styles.textSupporting]}>{translate('beneficialOwnerInfoStep.regulationRequiresUsToVerifyTheIdentity')}</Text>
107107
<View>
108108
<Text style={[styles.textLabelSupporting, styles.pv1, styles.ph5]}>{`${translate('beneficialOwnerInfoStep.owners')}:`}</Text>
109109
{isUserUBO && (

‎src/pages/ReimbursementAccount/BeneficialOwnersStep.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,7 @@ function BeneficialOwnersStep({reimbursementAccount, reimbursementAccountDraft,
223223
title={translate('beneficialOwnerInfoStep.companyOwner')}
224224
onBackButtonPress={handleBackButtonPress}
225225
/>
226-
<View style={[styles.ph5, styles.mv3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
226+
<View style={[styles.ph5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
227227
<InteractiveStepSubHeader
228228
startStepIndex={4}
229229
stepNames={CONST.BANK_ACCOUNT.STEP_NAMES}

‎src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ function BusinessInfo({reimbursementAccount, reimbursementAccountDraft, onBackBu
106106
guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
107107
onBackButtonPress={handleBackButtonPress}
108108
/>
109-
<View style={[styles.ph5, styles.mv3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
109+
<View style={[styles.ph5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
110110
<InteractiveStepSubHeader
111111
startStepIndex={3}
112112
stepNames={CONST.BANK_ACCOUNT.STEP_NAMES}

‎src/pages/ReimbursementAccount/BusinessInfo/substeps/AddressBusiness.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ function AddressBusiness({reimbursementAccount, onNext, isEditing}: AddressBusin
7777
submitButtonStyles={[styles.mb0, styles.pb5]}
7878
style={[styles.mh5, styles.flexGrow1]}
7979
>
80-
<Text style={[styles.textHeadline]}>{translate('businessInfoStep.enterYourCompanysAddress')}</Text>
80+
<Text style={[styles.textHeadline, styles.mt5]}>{translate('businessInfoStep.enterYourCompanysAddress')}</Text>
8181
<Text>{translate('common.noPO')}</Text>
8282
<AddressForm
8383
inputKeys={INPUT_KEYS}

0 commit comments

Comments
 (0)