[HOLD for payment 2023-06-21] [$1000] Inconsistency of the [Yes] button color between “Contact method” & “Security” modal

[kbecciv]

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. Open your profile.
2. Click on " Contact methods".
3. Click on " New contact method".
4. Click on " Delete" to remove the existing contact.
5. Notice the modal, “Yes” button is highlighted in red.
6. Now go back and click on "Security".
7. Click on " Close account".
8. Enter default contact method
9. Click on " Close account" button.
10. Notice the modal, “Yes” button is highlighted in green.

Expected Result:

In both cases, the “Yes” button should be highlighted in red (and it should be this way across all UI elements in newDot).

Actual Result:

In this case, the “Yes” button is highlighted in different color (i.e. green vs red)

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.23.6

Reproducible in staging?: yes

Reproducible in production?: yes

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

Notes/Photos/Videos: Any additional supporting documentation

20230531_144448.mp4

Recording.2966.mp4

Expensify/Expensify Issue URL:

Issue reported by: @usmantariq96

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1685527140262479

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01dad0214cbc98129a
• Upwork Job ID: 1666465549069123584
• Last Price Increase: 2023-06-07

[melvin-bot]

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

[melvin-bot]

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

[dhairyasenjaliya]

Proposal

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

• Inconsistency between “Contact method” & “Security” modal “yes” button color.

What is the root cause of that problem?

• More sort of UI enhancement to make consistency across the app

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

• In order to make consistency styling we need to change in closeAccountPage.js

• We need to change 2 things first is button colour and 2nd is confirmText

• For colour we just need to pass danger props to <ConfirmModal> which inside the closeAccountPage.js

• For confirmText props we can add same text which we added on contactDetailPage.js which is this.props.translate('common.yesContinue’) and inside confirmText props to closeAccountPage.js

• Edited: as per the latest requirement we can also add same text to cancelText it can be cancel/no depends upon what we select to add

What alternative solutions did you explore? (Optional)

• We can change confimText and colour to ContactMethodDetailsPage to match with closeAccountPage.js same as above suggestion to ContactMethodDetailsPage.js

[melvin-bot]

@michaelhaxhiu Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[michaelhaxhiu]

Yup, let's fix it.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01dad0214cbc98129a

[melvin-bot]

Current assignee @michaelhaxhiu is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @0xmiroslav (External)