[$500] Chat - Address bar color does not match dark theme when using deeplink

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Found when validating PR : #34409

Version Number: 1.4.44-0
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal Team

Action Performed:

1. Go to ND and log in
2. Open any report and copy the report link
3. Paste the report link in a new tab
4. Reload the page

Expected Result:

The address bar color matches the dark theme.

Actual Result:

The address bar color is the default one and does not match the dark theme.

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

Bug6393660_1709015261691.video_2024-02-27_01-26-11.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014b2a30780568c7e7
• Upwork Job ID: 1767254668467286016
• Last Price Increase: 2024-03-11
• Automatic offers:
• alitoshmatov | Reviewer | 0
• tienifr | Contributor | 0

[melvin-bot]

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

[izarutskaya]

@CortneyOfstad I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

[izarutskaya]

We think that this bug might be related to #vip-vsb
CC @quinthar

[CortneyOfstad]

I waas able to recreate this myself 👍 Going to post in the room in Slack

[CortneyOfstad]

Asked here

[melvin-bot]

@CortneyOfstad Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

@CortneyOfstad 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

@CortneyOfstad Still overdue 6 days?! Let's take care of this!

[melvin-bot]

@CortneyOfstad Now this issue is 8 days overdue. Are you sure this should be a Daily? Feel free to change it!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~014b2a30780568c7e7

[melvin-bot]

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

[CortneyOfstad]

Was OoO — but working to get eyes on this 👍

If we do not have any proposals before EOW, will reach out to CS or SM to keep this rolling 👍

[tienifr]

Proposal

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

The address bar color is the default one and does not match the dark theme.

What is the root cause of that problem?

We're not currently setting the backgroundColor of app (aka the StatusBar color) when we deeplink into the page.

We're assuming the initial status bar background color is splashBG here, then it will change to appBG here in the first render. The problem is in dark mode the splashBG will be the same color as the appBG, so we detect no change and never set the status bar background color.

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

If this is false (does not meet the condition for changing to appBG), in the else, we'll check that it's the first render that updateStatusBarStyle is called (using similar approach as this), if yes, we'll update the backgroundColor to theme.appBG, to make sure the app's background color is correct in the first render.

updateStatusBarAppearance({backgroundColor: theme.appBG});

Alternatively, in here, we can just add an useEffect to set background color when deeplinking to the page (first render)

useEffect(() => {
    updateStatusBarAppearance({backgroundColor: theme.appBG});
}, []);

(Or use theme.splashBG)

We can isolate this logic to only on web if we want to.

What alternative solutions did you explore? (Optional)

We can make the currentBackgroundColor a state, similar to statusBarStyle here, it will be undefined initially so when comparing here, it will be different and the initial backgroundColor will be set.

[melvin-bot]

@CortneyOfstad @alitoshmatov this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[CortneyOfstad]

@alitoshmatov thoughts on the proposal here? If you can provide feedback by EOD that would be great 👍

[alitoshmatov]

Thank you @tienifr for your proposal. Your RCA is correct.

Alternatively, in here, we can just add an useEffect to set background color when deeplinking to the page (first render)

I think this would be the best approach here. But can you make sure that it won't cause any flashing and change current behavior. As far as my research it is working as intended.

We can go with @tienifr 's proposal. Specifically 2nd solution
C+ reviewed 🎀 👀 🎀

[melvin-bot]

Triggered auto assignment to @francoisl, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @alitoshmatov 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @tienifr 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer 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 📖

[tienifr]

PR ready for review #38460.

[CortneyOfstad]

PR was merged yesterday but has not gone to production, so going to keep an eye on this 👍

[tienifr]

@CortneyOfstad PR hit production 5 days ago. Payment due should be on April 03.

[CortneyOfstad]

@tienifr — sorry for the delay here! Payments have been completed!

Payment Summary

• @tienifr — paid $500 via Upwork
• @alitoshmatov — paid $500 via Upwork