[Hold for payment Sep 10 if no regressions] Improve spacing between routing/account number fields in VBA flow

[kevinksullivan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Add account to freePlan beta
2. Login to new.expensify.com
3. Create a workspace
4. Select Get Started in Expensify Card tab of workspace
5. Choose "Connect Manually" option

Expected Result:

There should be some space between the two field outlines for routing/account number.

Actual Result:

The two field outlines are basically overlapping with each other.

Notes/Photos/Videos: Any additional supporting documentation

@shawnborton curious for your thoughts here, but I would expect some spacing between these two fields, similar to how we space out all other fields in subsequent steps of this flow. For example, in the Company Information Step:

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @zanyrenney (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[Santhosh-Sellavel]

Proposal

Simple & straightforward!
For these inputs, we need to pass containerStyles with margin spacing

App/src/pages/ReimbursementAccount/BankAccountStep.js

Lines 210 to 226 in 170ec90

	<ExpensiTextInput
	placeholder={this.props.translate('bankAccount.routingNumber')}
	keyboardType="number-pad"
	value={this.state.routingNumber}
	onChangeText={(routingNumber) => {
	if (error === this.props.translate('bankAccount.error.routingNumber')) {
	hideBankAccountErrors();
	}
	this.setState({routingNumber});
	}}
	disabled={shouldDisableInputs}
	errorText={error === this.props.translate('bankAccount.error.routingNumber')
	? error : ''}
	/>
	<ExpensiTextInput
	placeholder={this.props.translate('bankAccount.accountNumber')}
	keyboardType="number-pad"

Like we do here

App/src/pages/ReimbursementAccount/ValidationStep.js

Lines 123 to 150 in 170ec90

	<View style={[styles.m5, styles.flex1]}>
	<ExpensiTextInput
	containerStyles={[styles.mb1]}
	placeholder="1.52"
	keyboardType="number-pad"
	value={this.state.amount1}
	onChangeText={amount1 => this.setState({amount1})}
	/>
	<ExpensiTextInput
	containerStyles={[styles.mb1]}
	placeholder="1.53"
	keyboardType="number-pad"
	value={this.state.amount2}
	onChangeText={amount2 => this.setState({amount2})}
	/>
	<ExpensiTextInput
	containerStyles={[styles.mb1]}
	placeholder="1.54"
	keyboardType="number-pad"
	value={this.state.amount3}
	onChangeText={amount3 => this.setState({amount3})}
	/>
	{errorMessage && (
	<Text style={[styles.mb5, styles.textDanger]}>
	{errorMessage}
	</Text>
	)}
	</View>

Let me know what spacing, I'll do it!

Fixed Demo:

(This is a demo with containerStyles={[styles.mb3]})

[kevinksullivan]

Will defer to @Expensify/design on the spacing specifics, otherwise looks good!

[shawnborton]

Let's just reuse the same spacing that we're using in this form:

[MelvinBot]

Triggered auto assignment to @robertjchen (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[Santhosh-Sellavel]

Let's just reuse the same spacing that we're using in this form:

There we styles.mt4 let reuse the same here too