[Theme Switching] Chat - All tooltips are dark in light theme

[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.4.13-0
**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. Login with any account
3. Go to Settings -> Preferences -> Theme -> Light
4. Check tooltips view

Expected Result:

All tooltips are light

Actual Result:

All tooltips are dark

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

View all open jobs on GitHub

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

[robertjchen]

Not a deploy blocker per se, but should be addressed 👍

[melvin-bot]

Triggered auto assignment to @trjExpensify (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

[ZhenjaHorbach]

Proposal

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

Chat - All tooltips are dark in light theme

What is the root cause of that problem?

For tooltip, we use backgroundColor: theme.heading,

App/src/styles/utils/generators/TooltipStyleUtils.ts

Line 258 in b14b27f

backgroundColor: theme.heading,

Which one is green

App/src/styles/theme/colors.ts

Line 41 in b14b27f

productLight900: '#002E22',

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

We can use another theme withproductLight100 color (For example)

App/src/styles/utils/generators/TooltipStyleUtils.ts

Line 258 in b14b27f

backgroundColor: theme.heading,

Or make more global changes and update heading color

App/src/styles/theme/themes/light.ts

Line 49 in b14b27f

heading: colors.productLight900,

What alternative solutions did you explore? (Optional)

NA

[situchan]

I think this is known and will be fixed as follow-up of light theme live.
cc: @grgia @chrispader

[trjExpensify]

Asking in the #deployers thread about light theme issues: https://expensify.slack.com/archives/C07J32337/p1702596738786639?thread_ts=1702578131.769549&cid=C07J32337

[grgia]

Not a bug, this is the design!