Troubleshoot page has blue color status bar

@ishpaul777

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

Go to staging.new.expensify.com
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?

Screenshots/Videos

Add any screenshot/video evidence

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

View all open jobs on GitHub

@isabelastisser

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.

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,

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

@isabelastisser

image

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

I can't reproduce this on Safari either:

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

@shawnborton

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.

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

So we can just keep this one closed!

Navigation Menu

Repository navigation

Troubleshoot page has blue color status bar #44484

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

	newStatusBarStyle = pageTheme.statusBarStyle;

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

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

Troubleshoot page has blue color status bar #44484

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Jun 26, 2024

ishpaul777 commented on Jun 26, 2024

Proposal

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

What is the root cause of that problem?

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

isabelastisser commented on Jun 27, 2024

ishpaul777 commented on Jun 27, 2024

isabelastisser commented on Jun 27, 2024

ishpaul777 commented on Jun 27, 2024

isabelastisser commented on Jun 27, 2024

shawnborton commented on Jun 27, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions