[HOLD for regression test steps, maybe] [Dark Mode] Use same overlay color for all modals, action sheets, etc

[shawnborton]

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:

Currently we have mismatched styles when opening things like rightDocked modals or bottom action sheets:

Expected Result:

Let's standardize on the overlay color used for all modals (both web and mobile).

Let's use our brand dark green (#002E22) at 60% opacity.

Actual Result:

Styles are mismatched and not using the right colors.

Workaround:

This doesn't block user actions.

Platform:

Where is this issue occurring? All platforms

Version Number:
Reproducible in staging?:
Reproducible in production?:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:
Issue reported by:
Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a2fe253f63b94c3c
• Upwork Job ID: 1606452536036261888
• Last Price Increase: 2022-12-24

[melvin-bot]

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

[grgia]

This will make a big difference, I'm gonna take this on internally this week

[shawnborton]

Woo, thank you Georgia!

[shawnborton]

Noting that @dhairyasenjaliya reported that we missed the overlay color here too:

Same applies for starting a group chat:

To fix this, I would just use the same overlay color that we’re using for modals, etc but keep the text color as it is

[sonialiap]

Since Georgia is picking it up, I'll skip the triage and unassign myself 👋

[melvin-bot]

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

[grgia]

Looking at this today!

[grgia]

Screen.Recording.2022-12-06.at.7.35.34.PM.mov

Right now, the overlay colors overlap- what's the ideal solution for this modal? (PS I made it pink for visibility 😄 )

[grgia]

Here's what it looks like with the 60% opacity green:

Screen.Recording.2022-12-06.at.7.40.51.PM.mov

[grgia]

For the workspace overlay, should we use this pattern instead?

Avatar overlay:

[shawnborton]

Whoa, didn't realize we were doing the double overlay there. That being said, I think the 60% green works just fine though - thoughts?

For the workspace/avatar overlay, are the screenshots above using 60% green? Maybe we can use the same color from the little +5 screenshot you shared, but use it at something like 88% opacity so you can slightly see the avatar behind? I wouldn't necessarily refactor the small chat row stack for this, but we could try it for the workspace row and chat empty state?

[grgia]

I agree, once I switched it to green I thought the double overlay looked fine. I'll test the workspace with the '+5' color overlay now!

[grgia]

[shawnborton]

Hmm yeah, I'm not loving that as much as a darker shade (like the overlay color). What do you think?

[grgia]

I agree, it somewhat works for the workspaces, but I prefer the green overlay for the 4 avatars.

Here's a few more options

AppBG at 70%

Icons color at 100%

Borders color at 100% (works when workspace icons are all green, not sure how this will look when we add in the new colored ones)

[shawnborton]

I think I am leaning towards just using the same color we use for modal overlays for consistency's sake?

[melvin-bot]

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

• [Dark Mode] Standardize Overlay Colors #13408

If no regressions arise, payment will be issued on 2022-12-22. 🎊

After the hold period, please check if any of the following need payment for this issue, and if so check them off after paying:

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

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[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:

• [@grgia] The PR that introduced the bug has been identified. Link to the PR:
• [@grgia] 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:
• [@grgia] 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:
• [] A regression test has been added or updated so that the same bug will not reach production again. Link to the GH issue for creating the test here:

[grgia]

Checking off as this was more of a feature/color update than a bug. Regression tests will be bundled with dark mode TestRail tests https://github.com/Expensify/Expensify/issues/247948

[mollfpr]

@grgia Could you pull someone from BZ to create the Upwork job for the PR review? Thank you!

[melvin-bot]

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

[melvin-bot]

Current assignee @mollfpr is eligible for the Internal assigner, not assigning anyone new.

[mallenexpensify]

@mollfpr can you please apply to the job and reply here once you have?
https://www.upwork.com/jobs/~01a2fe253f63b94c3c

[mollfpr]

@mallenexpensify Can’t access the job

[dhairyasenjaliya]

@mallenexpensify I have reported a bug on slack https://expensify.slack.com/archives/C049HHMV9SM/p1669898961401989 which we are addressing here as per this comment #13208 (comment) do I need to apply for reporting here?

[mollfpr]

Bump @mallenexpensify

[mallenexpensify]

Hired @mollfpr for $1000 for PR review
Hired @dhairyasenjaliya for $250 for bug reporting (thanks for the ping, I would have missed it cuz it wasn't in the OP)
Both, can you please accept the job and reply here once you have?
https://www.upwork.com/jobs/~01a2fe253f63b94c3c

[mollfpr]

Accepted, thanks @mallenexpensify

[dhairyasenjaliya]

accepted, thank you @mallenexpensify

[mallenexpensify]

Paid @mollfpr and @dhairyasenjaliya , leaving open and weekly cuz I want to double check the regression steps before closing

[melvin-bot]

This issue has not been updated in over 15 days. @mallenexpensify, @mollfpr, @grgia eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[mallenexpensify]

I know I'd be responsible for one of these issues that needed regression test steps that wasn't going overdue cuz of the Reviewing label, thanks for the reminder Mel. 🤖

OH.. actually, this is just a dark mode update and I think we're not creating/updating TestRail steps for this, at least not yet. Closing!