[$1000] Icons in VBA flow are very hard to see or white in dark mode

[kavimuru]

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. Access staging.new.expensify.com (Web)
2. Sign into a valid account
3. Click on Profile > Workspace > Connect bank > Connect manually (First issue here on Routing page)
4. Enter routing information and proceed to the next page
5. Scroll down to the "Incorporation date" section and locate the calendar icon on the right of the input field (Second issue here)

Expected Result:

1. The background of the routing image should match the dark theme
2. The calendar icon should be a color that is easily seen in the dark theme
3. When the user taps the dropdown, all text should be clear and readable

Actual Result:

1. The background of the routing image is white and does not match the current theme
2. The calendar icon is black and very hard to see, an average user may miss this entirely if they do not know its there
3. When the user taps the dropdown, all text is black on a dark background and hard to understand

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.2.33-1
Reproducible in staging?: y
Reproducible in production?: n
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Expensify/Expensify Issue URL:
Issue reported by: Applause internal team
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1669696874240429

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01bad5604e9c4055b5
• Upwork Job ID: 1597651373329428480

[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 @MariaHCD (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[dhairyasenjaliya]

**Proposal **

Proposal slack link - https://expensify.slack.com/archives/C049HHMV9SM/p1669731061170839?thread_ts=1669696874.240429&cid=C049HHMV9SM

Solution 1

• We need to color-scheme to .expensify-datepicker::-webkit-calendar-picker-indicator CSS

.expensify-datepicker::-webkit-calendar-picker-indicator {
+   color-scheme: dark; 
}

Solution 2

• We can also add to filter to .expensify-datepicker::-webkit-calendar-picker-indicator CSS

Note : We should add dark/light based on current theme once we have it we can make conditional to that

 .expensify-datepicker::-webkit-calendar-picker-indicator {
+   filter: invert(1);
} 

Result

[luacmartins]

Gonna reassign to myself since Maria might be out for the day.

[luacmartins]

@dhairyasenjaliya solution one looks good! Can you get a PR up soon since this is a deploy blocker?

[dhairyasenjaliya]

Hey @luacmartins sure creating PR now

[luacmartins]

Cool, I'll assign you to this issue and get the process started! Thanks!

[melvin-bot]

Triggered auto assignment to @tjferriss (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

📣 @dhairyasenjaliya You have been assigned to this job by @luacmartins!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[luacmartins]

Going to speed this one up since it's a deploy blocker

[mvtglobally]

@luacmartins the dates are still hard to see on phone. Should we log a separate one?

[dhairyasenjaliya]

@mvtglobally both are separate issue I logged here https://expensify.slack.com/archives/C049HHMV9SM/p1669787031782639?thread_ts=1669787031.782639&cid=C049HHMV9SM

[mvtglobally]

@dhairyasenjaliya i saw it. Out team logged this collective issue earlier as multiple themes were not working yesterday. As we were clubbing multiple similar issues together. I am clarifying if now each should be separated

[luacmartins]

@mvtglobally please log another issue for #13132 (comment)

[luacmartins]

I'll remove the blockeer label from this one, since we fixed the calendar icon issue.

[tjferriss]

@mollfpr and @dhairyasenjaliya remember to apply to the Upworks job: https://www.upwork.com/jobs/~01bad5604e9c4055b5.

[mollfpr]

@tjferriss Im haven't reviewed anything, so I’m not eligible for compensation

[dhairyasenjaliya]

@tjferriss Is this eligible for a 50% bonus since PR merged within an hour

[tjferriss]

@mollfpr my mistake.

@dhairyasenjaliya yes, you are eligible for the bonus. Can you please apply to the Upworks job?: https://www.upwork.com/jobs/~01bad5604e9c4055b5

[tjferriss]

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:

• @luacmartins The PR that introduced the bug has been identified. Link to the PR: Make the Switch to Dark Mode  #12944
• @luacmartins 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: Make the Switch to Dark Mode  #12944 (comment)
• @luacmartins 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: Bug was caught in staging and promptly fixed. Due to the large scope of the PR it was hard to test every possible scenario.
• @tjferriss 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: https://github.com/Expensify/Expensify/issues/247679

[dhairyasenjaliya]

@tjferriss applie along with bug reporting bonus as well

[tjferriss]

@dhairyasenjaliya you've been hired.

[luacmartins]

@tjferriss checklist is done on my end.

[tjferriss]

I've created the regression test issue and paid out @dhairyasenjaliya. I'll close this out once the regression test has been added.

[melvin-bot]

@tjferriss, @luacmartins, @dhairyasenjaliya Whoops! This issue is 2 days overdue. Let's get this updated quick!

[tjferriss]

Applause confirmed we don't need an additional regression test for this issue so we're good to close this out. Thanks everybody.