Troubleshoot page has blue color status bar

[m-natarajan]

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: 9.0.2-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
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: @ishpaul777
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1719384828744689

Action Performed:

1. Go to staging.new.expensify.com
2. Tap Settings > Trouble shoot

Expected Result:

Status bar should be same color as other pages with animation

Actual Result:

Troubleshoot page has blue color status bar

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

Screen.Recording.2024-06-26.at.12.21.10.PM.mov

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @isabelastisser (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[ishpaul777]

Proposal

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

Troubleshoot page has blue color status bar

What is the root cause of that problem?

Here we pass illustrationBackgroundColor=PAGE_THEMES[SCREENS.SETTINGS.TROUBLESHOOT].backgroundColor

App/src/pages/settings/Troubleshoot/TroubleshootPage.tsx

Line 108 in a19278f

illustrationBackgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.TROUBLESHOOT].backgroundColor}

and in here we have logic to chage status bar color of all pages that has a theme color

App/src/components/CustomStatusBarAndBackground/index.tsx

Lines 82 to 85 in a19278f

	if (currentRoute && 'name' in currentRoute && currentRoute.name in theme.PAGE_THEMES) {
	const pageTheme = theme.PAGE_THEMES[currentRoute.name];
	newStatusBarStyle = pageTheme.statusBarStyle;

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

we need to remove troubleshoot color from here

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

Lines 138 to 141 in a19278f

	[SCREENS.SETTINGS.TROUBLESHOOT]: {
	backgroundColor: colors.blue700,
	statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
	},

and

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

Lines 138 to 141 in a19278f

	[SCREENS.SETTINGS.TROUBLESHOOT]: {
	backgroundColor: colors.blue700,
	statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
	},

and add backgroundColor: colors.blue700 here:

App/src/components/LottieAnimations/index.tsx

Lines 70 to 73 in a19278f

	Desk: {
	file: require('@assets/animations/Desk.lottie'),
	w: 200,
	h: 120,

[isabelastisser]

I cannot recreate this issue in staging or prod. Closing.

[ishpaul777]

image

@isabelastisser this is consistently reproducible on mweb Safari, Mind rechecking please ?

[isabelastisser]

I can't reproduce this on Safari either:

[ishpaul777]

Theme coloring statusbar is a feature exclusive to mobile safari only, its not supported on other platforms.

[isabelastisser]

I see, I'm not sure if this should be considered a bug. I don't think we should change it. @shawnborton, what's your opinion here? The blue bar actually calls to switch to the New Expensify mobile app on Safari, I like it.

[shawnborton]

We're already taking care of this one here: #44048

So we can just keep this one closed!