[HOLD for payment 2024-06-13] [$250] Connect Bank account - Background is slightly touching "Numbers" in Onfido Flow

[lanitochka17]

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

---

Version Number: 1.4.71-4
Reproducible in staging?: Y
Reproducible in production?: Unable to check
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): applausetester+emilio@applause.expensifail.com
Issue reported by: Applause - Internal Team

Issue found when executing PR #41234

Action Performed:

1. Open the New Expensify app or go to staging.new.expensify.com
2. Sign into a valid account
3. Go to Workspace > Enable Workflow > Connect Bank account
4. Select "Connect manually" and use the testing routing number and account number
5. On Personal info page, enter "First" and "Last" for first name and last name
6. Enter any other information on the rest of the Personal info pages and confirm
7. Observe the page when the user is redirected to the "Terms" page

Expected Result:

User expects correct distancing in between elements

Actual Result:

The Terms "Frame" is slightly touching with the "numbers" in the header

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6474960_1715182296616.Border_is_touching_the_numbered_steps_in_Onfido_flow_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01fc1107f6a76f2e7b
• Upwork Job ID: 1788283293391118336
• Last Price Increase: 2024-05-15
• Automatic offers:
• ShridharGoel | Contributor | 0

Issue Owner

Current Issue Owner: @thesahindia

[melvin-bot]

Triggered auto assignment to @carlosmiceli (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open Staging deploy checklist to see the list of PRs included in this release, then work quickly on the following:

1. If you find which PR caused the issue/bug, you can reassign it to the person responsible for it.
   • If the author is OOO or won’t get online before the daily deploy is due, you are responsible for finding the best fix/path forward. Don’t hesitate to ask for help!
2. Try to reproduce the issue, if the bug is on production, remove the DeployBlocker label but stay assigned to fix it (or find out which PR broke it to get help from the author).
   • You can adjust the urgency of the issue to better represent the gravity of the bug.
   • If the issue is super low priority, feel free to un-assign yourself.
   • Be careful with PHP warnings, sometimes it is more complex than just adding a null coalescing operator as they might be uncovering some bigger bug.
   • If it was a one-off issue that requires no action (for example, Bedrock was down or it is a duplicated issue), you can close it.

Remember rule #2: Never un-assign yourself from a real DeployBlocker unless you are 100% sure someone else is assigned and will take care of it.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[lanitochka17]

@carlosmiceli FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[ShridharGoel]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Bottom margin is missing under the step numbers.

What is the root cause of that problem?

Bottom margin is missing here:

App/src/pages/ReimbursementAccount/VerifyIdentity/VerifyIdentity.tsx

Lines 69 to 74 in e0b6a06

	<View style={[styles.ph5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
	<InteractiveStepSubHeader
	startStepIndex={2}
	stepNames={CONST.BANK_ACCOUNT.STEP_NAMES}
	/>
	</View>

What changes do you think we should make in order to solve the problem?

Add styles.mb5.

<View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
    <InteractiveStepSubHeader
        startStepIndex={2}
        stepNames={CONST.BANK_ACCOUNT.STEP_NAMES}
    />
</View>

This would be same as it is being done below and in other pages in this flow:

App/src/pages/EnablePayments/PersonalInfo/PersonalInfo.tsx

Lines 107 to 112 in e0b6a06

	<View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
	<InteractiveStepSubHeader
	startStepIndex={1}
	stepNames={CONST.WALLET.STEP_NAMES}
	/>
	</View>

[carlosmiceli]

Looking at it @lanitochka17, will let you know asap!