[PAID] BA - Icons and text on “Connect online with Plaid” button is offset relative other buttons

[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.3.91-1

Reproducible in staging?: Yes

Reproducible in production?: No

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

Action Performed:

1. Go to staging.new.expensify.com or open Expensify app and login with any account
2. Go to existing workspace or create new one
3. Go to Settings > Workspace > Bank Account
4. Check the placement of icons and text on the buttons

Expected Result:

Icons and text on all buttons have the same location and alignment

Actual Result:

Icons and text on “Connect online with Plaid” button is offset relative other buttons

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

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @strepanier03 (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[OSBotify]

👋 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.

[melvin-bot]

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

[strepanier03]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[strepanier03]

On Mac/Chrome staging.new.expensify.com.

Confirmed they don't line up.

[c3024]

PR #30192 added this

App/src/styles/styles.ts

Line 485 in 062c25d

alignItems: 'center',

Now the button has all its info centered.
cc: @s-alves10

[dummy-1111]

Yeah. we need to take these cases into account
I'll create a PR for this in a few hours

[dummy-1111]

PR is ready for review #30417

[marcaaron]

Looks fixed now

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.91-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: update style if icon is in button #30417

If no regressions arise, payment will be issued on 2023-11-02. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@chiragsalian] The PR that introduced the bug has been identified. Link to the PR:
• [@chiragsalian] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@chiragsalian] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@chiragsalian] Determine if we should create a regression test for this bug.
• [@chiragsalian] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@strepanier03] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.92-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: update style if icon is in button #30417

If no regressions arise, payment will be issued on 2023-11-06. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter - N/A
• Contributor that fixed the issue - N/A
• Contributor+ that helped on the issue and/or PR - @getusha - $500 via Upwork

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@chiragsalian] The PR that introduced the bug has been identified. Link to the PR: fix: vertical centering button text without padding #30192
• [@chiragsalian] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: https://github.com/Expensify/App/pull/30192/files#r1379223554
• [@chiragsalian] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: N/A small style bug
• [@chiragsalian] Determine if we should create a regression test for this bug. N/A its a small styling issue.
• [@chiragsalian] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again. N/A
• [@strepanier03] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: N/A

[strepanier03]

@chiragsalian is anyone eligible for payment for this one?

[strepanier03]

Chatted with Chirag 1:1 and we're going to pay the C+ for reviewing the PR. I'm working on that now.

[strepanier03]

#30400 (comment)

[strepanier03]

@getusha - I've hired you to a job in Upwork. I'll check tomorrow to see if you accepted so I can pay it out.

[getusha]

@getusha - I've hired you to a job in Upwork. I'll check tomorrow to see if you accepted so I can pay it out.

Accepted, thanks!

[strepanier03]

All right, this has been paid. Thank you @getusha for being a part of the community and for your hard work. Cheers!

Closing this out now.