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

Lines changed: 4 additions & 3 deletions
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 7 additions & 3 deletions
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

Lines changed: 4 additions & 5 deletions
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 2 additions & 2 deletions
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

Lines changed: 3 additions & 3 deletions
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

Lines changed: 0 additions & 1 deletion
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

Lines changed: 3 additions & 2 deletions
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

Lines changed: 2 additions & 2 deletions
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}

0 commit comments

Comments
 (0)