[HOLD for payment 2024-02-19] [$500] [Wave 8] [Ideal Nav] The color of Status Bar (top part of the background) is not consistent

[hayata-suenaga]

Action Performed:

1. Open the app on a mobile browser
2. Go to Chat page (Chat icon on the bottom tab)
3. Go to Settings page (🔧 icon on the bottom tab)
4. Go to Settings page > Workspaces

Expected Result:

The color should be consistent

Actual Result:

The colors are different across different pages

Workaround:

N/A

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

screenshots -> #33280 (comment)

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f7200068e359bb73
• Upwork Job ID: 1753450480673206272
• Last Price Increase: 2024-02-02

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[hayata-suenaga]

Please hold a little bit before posting proposals until I confirm that this issue is handled independently (there is a possibility that this issue is combined with this issue)

[bernhardoj]

Posting a proposal before going offline in case we want to handle it separately.

Proposal

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

The status bar color doesn't match the page on the chat and workspace list page.

What is the root cause of that problem?

The status bar color is defined by the PAGE_THEMES here.

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

Lines 94 to 98 in 8fa0994

	PAGE_THEMES: {
	[SCREENS.HOME]: {
	backgroundColor: colors.productDark200,
	statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
	},

The chat/HOME page uses productDark200 (for dark mode) as the color, but the page color uses appBG, which is productDark100. It goes the same for the workspace list which uses pink color.

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

Lines 111 to 114 in 8fa0994

	[SCREENS.SETTINGS.WORKSPACES]: {
	backgroundColor: colors.pink800,
	statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
	},

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

We can update the color to productDark100 to match the page color or just remove it from the list because the default value is productDark100 (appBG).

App/src/components/CustomStatusBarAndBackground/index.tsx

Lines 74 to 75 in 8fa0994

	let currentScreenBackgroundColor = theme.appBG;
	if (currentRoute && 'name' in currentRoute && currentRoute.name in theme.PAGE_THEMES) {

we need to update the light mode color too

[rushatgabhane]

defering to @hayata-suenaga's comment to hold #35632 (comment)

[hayata-suenaga]

still waiting for an answer to this

[kosmydel]

This one was fixed in this PR.

However, there are other problems with StatusBar:

• android insets are broken sometimes: [Update Account Settings] Header: icons, height, and font changes #35564 (comment),
• the status bar is not updating after theme change: [Update Account Settings] Preferences, About, Security #35672 (comment)

[bernhardoj]

The home status bar isn't fixed yet.

android insets are broken sometimes:

It's a known issue here: #34050 #36010

[hayata-suenaga]

Because the issue is fixed in @kosmydel's PR, I'll close this issue.

the status bar is not updating after theme change

@kosmydel, could you handle this issue in your PR?

[bernhardoj]

@hayata-suenaga It's not fixed yet for the home page #35632 (comment)

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[hayata-suenaga]

@hayata-suenaga It's not fixed yet for the home page #35632 (comment)

checking here

[hayata-suenaga]

@kosmydel could you check this comment when you have time please? 🙇

[kosmydel]

@kosmydel could you check this comment when you have time please? 🙇

Changing this in config broke the android insets. That's why I haven't changed it. Here is more details:
#35564 (comment)

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

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

• [Update Account Settings] Header: icons, height, and font changes #35564

If no regressions arise, payment will be issued on 2024-02-19. 🎊

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

• @rushatgabhane requires payment through NewDot Manual Requests

[melvin-bot]

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:

• [@rushatgabhane] The PR that introduced the bug has been identified. Link to the PR:
• [@rushatgabhane] 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:
• [@rushatgabhane] 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:
• [@rushatgabhane] Determine if we should create a regression test for this bug.
• [@rushatgabhane] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@abekkala] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[hayata-suenaga]

@kosmydel could you check #35632 (comment) when you have time please? 🙇

Changing this in config broke the android insets. That's why I haven't changed it. Here is more details:
#35564 (comment)

@kosmydel Thank you for reminding me of that. Are you working on this in a separate issue or should I create a new issue for you?

[kosmydel]

@kosmydel Thank you for reminding me of that. Are you working on this in a separate issue or should I create a new issue for you?

I can have a look at this, but I found a PR (#34409) that addresses a mWeb status bar issue. The author of the PR suggests that he found a solution for that. In case this doesn't solve our problem, I can surely investigate it.

[hayata-suenaga]

okay let's see if the PR will solve the issue 👍

[ishpaul777]

Unfortunately there was other PR on which my suggested changes depends #34637 to fully solve the problem and that PR had some blockers (might have been resolved now) so i decided not to include the suggested change in my PR