[HOLD for payment 2024-01-04] [HOLD for payment 2024-01-03] [$125] Profile - Zoom icon is black in dark and light mode, it is hardly visible in dark mode

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: v1.4.17-1
Reproducible in staging?: y
Reproducible in production?: n
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 URL https://staging.new.expensify.com/
2. Go to Settings -> Profile -> Click on Avatar -> Upload photo -> Choose an image -> Open
3. Notice that the zoom icon is black in dark and light mode

Expected Result:

The Zoom icon is well visible in dark mode

Actual Result:

Zoom icon is black in dark and light mode, it is hardly visible in dark mode

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

Bug6326167_1703596463724.bandicam_2023-12-26_13-23-31-571.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~011bcc7fd01bf144d6
• Upwork Job ID: 1739772024796622848
• Last Price Increase: 2023-12-26

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

[melvin-bot]

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

[Pujan92]

Proposal

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

What is the root cause of that problem?

Zoom icon isn't visible for the upload image view

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

Seems it comes from this PR where there is a typo for setting the color for fill prop.
https://github.com/Expensify/App/pull/31034/files#diff-f265a5ae9cea30af21ecbd34b52aa47636dd70e948f45c95246a41fc62398580L405

App/src/components/AvatarCropModal/AvatarCropModal.js

Line 409 in de5a943

fill={theme.icons}

It gets noticed after this PR where fallback color for fill has been removed.
https://github.com/Expensify/App/pull/30905/files#diff-a5a68b4de9f3cac867a3129751702510d00054f7714008af2fbf19dca2937d10L67

What alternative solutions did you explore? (Optional)

It should be theme.icon instead theme.icons.

[Tony-MK]

Proposal

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

The Zoom icon is black in dark and light modes, it is hardly visible in dark mode

What is the root cause of that problem?

The root cause of the problem is we are theme.icons to fill the icon color. This prohibits the color of the zoom icon from adapting to the device's theme.

App/src/components/AvatarCropModal/AvatarCropModal.js

Lines 407 to 410 in 92501dc

	<Icon
	src={Expensicons.Zoom}
	fill={theme.icons}
	/>

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

Instead of theme.icons, use theme.inverse to fill the Icon's color as the inverse of the device's theme.

Just like how the rotate button adapts to the device's theme.

Therefore, I think we should replicate its theme.

App/src/components/AvatarCropModal/AvatarCropModal.js

Line 432 in 92501dc

iconFill={theme.inverse}

Result

Light Theme

Dark Theme

[melvin-bot]

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.

[youssef-lr]

@Pujan92 are you available to raise a PR right now? If not, I can assign @Tony-MK if they're available. Otherwise I'll create the PR myself as this is a blocker.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~011bcc7fd01bf144d6

[melvin-bot]

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

[mountiny]

@youssef-lr Will you handle this one? seems like either contributor is out

[youssef-lr]

Yeah I created the PR

[Tony-MK]

@youssef-lr , I can do it.

[youssef-lr]

Can you give it a quick review please? It's straightforward

[melvin-bot]

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

• [CP Staging] Fix typo when setting Zoom icon fill #33631

If no regressions arise, payment will be issued on 2024-01-04. 🎊

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

For reference, here are some details about the assignees on this issue:

• @Pujan92 requires payment (Needs manual offer from BZ)
• @c3024 requires payment (Needs manual offer from BZ)

[c3024]

I haven't done anything with this issue. Unassigning myself.

[melvin-bot]

@youssef-lr, @Pujan92 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[Pujan92]

not sure if I am eligible for any compensation, @youssef-lr can you plz confirm

[Pujan92]

not sure if I am eligible for any compensation, @youssef-lr can you plz confirm

Also tagging @mountiny to confirm.

[mountiny]

@youssef-lr if the solution from @Pujan92 has been reused, we should pay them out partial reward as it was a deploy blocker

[melvin-bot]

@youssef-lr, @Pujan92 Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

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

[youssef-lr]

@sophiepintoraetz can we issue a $125 payment to @Pujan92 please.

[sophiepintoraetz]

hired - offer sent

[Pujan92]

hired - offer sent

Accepted.