Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Styling fixes #15

Merged
merged 5 commits into from
Jan 31, 2024
Merged

fix: Styling fixes #15

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
767c0f3
fix: Styling fixes
MrMuzyk Jan 30, 2024
44e3afe
Merge branch 'vit-tieredBankAccountFlow' of github.com:barttom/App-ex…
MrMuzyk Jan 30, 2024
62293c1
fix: cleanup
MrMuzyk Jan 30, 2024
a388696
fix: pass styles as prop
MrMuzyk Jan 31, 2024
9ff11cc
fix: change last form
MrMuzyk Jan 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/components/AddPlaidBankAccount.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion src/components/InteractiveStepSubHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions src/components/RadioButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,12 @@ function RadioButtons({items, onPress, defaultCheckedValue = ''}: RadioButtonsPr
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.mb6}
MrMuzyk marked this conversation as resolved.
Show resolved Hide resolved
onPress={() => {
setCheckedValue(item.value);
return onPress(item.value);
Expand Down
9 changes: 4 additions & 5 deletions src/pages/ReimbursementAccount/AddressForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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}
Expand All @@ -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]}
/>
</>
);
Expand Down
2 changes: 1 addition & 1 deletion src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
6 changes: 3 additions & 3 deletions src/pages/ReimbursementAccount/BankInfo/substeps/Manual.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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}
Expand Down
1 change: 0 additions & 1 deletion src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerCheckUBO.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@ 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}
Expand Down
4 changes: 2 additions & 2 deletions ...entAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/AddressUBO.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion ...count/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}`}
Expand Down
2 changes: 1 addition & 1 deletion ...ccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/DateOfBirthUBO.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
6 changes: 3 additions & 3 deletions ...tAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/LegalNameUBO.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
Expand All @@ -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}
/>
Expand Down
6 changes: 3 additions & 3 deletions ...neficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/SocialSecurityNumberUBO.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/CompanyOwnersListUBO.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 && (
Expand Down
2 changes: 1 addition & 1 deletion src/pages/ReimbursementAccount/BeneficialOwnersStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/ReimbursementAccount/BusinessInfo/substeps/AddressBusiness.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
19 changes: 3 additions & 16 deletions src/pages/ReimbursementAccount/BusinessInfo/substeps/ConfirmationBusiness.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import type {CONST as COMMON_CONST} from 'expensify-common/lib/CONST';
import React, {useMemo} from 'react';
import {ScrollView, View} from 'react-native';
import {ScrollView} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';
import {withOnyx} from 'react-native-onyx';
import CheckboxWithLabel from '@components/CheckboxWithLabel';
import DotIndicatorMessage from '@components/DotIndicatorMessage';
import FormProvider from '@components/Form/FormProvider';
import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
import ScreenWrapper from '@components/ScreenWrapper';
Expand All @@ -13,7 +12,6 @@ import TextLink from '@components/TextLink';
import useLocalize from '@hooks/useLocalize';
import type {SubStepProps} from '@hooks/useSubStep/types';
import useThemeStyles from '@hooks/useThemeStyles';
import * as ErrorUtils from '@libs/ErrorUtils';
import * as ValidationUtils from '@libs/ValidationUtils';
import getSubstepValues from '@pages/ReimbursementAccount/utils/getSubstepValues';
import CONST from '@src/CONST';
Expand Down Expand Up @@ -53,8 +51,6 @@ function ConfirmationBusiness({reimbursementAccount, reimbursementAccountDraft,

const values = useMemo(() => getSubstepValues(BUSINESS_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]);

const error = ErrorUtils.getLatestErrorMessage(reimbursementAccount ?? {});

const defaultCheckboxState = reimbursementAccountDraft?.[BUSINESS_INFO_STEP_KEYS.HAS_NO_CONNECTION_TO_CANNABIS] ?? false;

return (
Expand All @@ -63,7 +59,7 @@ function ConfirmationBusiness({reimbursementAccount, reimbursementAccountDraft,
style={[styles.pt0]}
>
<ScrollView contentContainerStyle={styles.flexGrow1}>
<Text style={[styles.textHeadline, styles.ph5, styles.mb0]}>{translate('businessInfoStep.letsDoubleCheck')}</Text>
<Text style={[styles.textHeadline, styles.ph5, styles.mt5, styles.mb3]}>{translate('businessInfoStep.letsDoubleCheck')}</Text>
<MenuItemWithTopDescription
description={translate('businessInfoStep.businessName')}
title={values[BUSINESS_INFO_STEP_KEYS.COMPANY_NAME]}
Expand Down Expand Up @@ -148,19 +144,10 @@ function ConfirmationBusiness({reimbursementAccount, reimbursementAccountDraft,
<TextLink href={CONST.LIST_OF_RESTRICTED_BUSINESSES}>{`${translate('businessInfoStep.listOfRestrictedBusinesses')}.`}</TextLink>
</Text>
)}
style={[styles.mt4]}
style={[styles.mt3]}
shouldSaveDraft
/>
</FormProvider>
<View style={[styles.ph5, styles.mtAuto]}>
{error.length > 0 && (
<DotIndicatorMessage
textStyles={[styles.formError]}
type="error"
messages={{error}}
/>
)}
</View>
</ScrollView>
</ScreenWrapper>
);
Expand Down
Loading
Loading