[HOLD for payment 2023-10-02] [$500] Dev: Web - Linear Gradient on Lounge Access Page header is broken

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

Action Performed:

1. Make sure you have access to lounge access page.
2. Navigate to Lounge Access Page.

Expected Result:

Header Animation should have a animation overlay

Actual Result:

Header Animation don't have a animation overlay

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: Dev 1.3.70.5
Reproducible in staging?: n
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
Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:
Issue reported by: @ishpaul777
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1694797951259709

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01d60a245e73bb23c0
• Upwork Job ID: 1703133462496907264
• Last Price Increase: 2023-09-16

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[ishpaul777]

Proposal

Problem

Linear Gradient on Lounge Access Page header is broken

Root cause

themeColors.dark Color used in in gradient is undefined.

https://github.com/Expensify/App/blob/main/src/pages/settings/Profile/LoungeAccessPage.js#L69

Changes

we need to use color colors.blue800 instead of themeColors.dark which is not defined, we can define a new variable loungeAccessOverlay in default.js and light.js with colors.blue800

Demo

[Pujan92]

@grgia This seems to persist after theme PR gets merged as dark variable removed from the colors.js file.

[grgia]

I'll take this internally in that case. @Pujan92

[melvin-bot]

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