[READY FOR PAYMENT][$250] Workspace - The offline indicator is semi transparent in WS settings

[jponikarchuk]

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.1.29-3
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: n/a
Email or phone of affected tester (no customers): n/a
Issue reported by: Applause Internal Team
Device used: iPhone 13/18.3.2/safari
App Component: Workspace Settings

Action Performed:

1. Navigate to https://staging.new.expensify.com
2. Navigate to a Workspace settings
   3.Disable the internet connection in the device
3. Navigate through workspace settings

Expected Result:

The offline indicator has a white background in WS settings

Actual Result:

Only in workspace settings it is semi transparent, in others sections it has white background. (e.g. in Wallet, in Profile settings etc)

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

2.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021912946313016210178
• Upwork Job ID: 1912946313016210178
• Last Price Increase: 2025-04-17
• Automatic offers:
• QichenZhu | Reviewer | 107019153
• huult | Contributor | 107019157

Issue Owner

Current Issue Owner: @NicMendonca

[melvin-bot]

Triggered auto assignment to @NicMendonca (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.

[daledah]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-17 06:25:33 UTC.

Proposal

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

Workspace - The offline indicator is semi transparent in WS settings

What is the root cause of that problem?

We added the background here

App/src/components/ScreenWrapper.tsx

Line 373 in 96c2585

return isOfflineIndicatorTranslucent ? styles.navigationBarBG : styles.appBG;

With styles.navigationBarBG has opacity is 0.8

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

Line 157 in 96c2585

navigationBarBackgroundColor: `${colors.productLight100}CD`, // CD is 80% opacity (80% of 0xFF)

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

We should add the isOfflineIndicatorTranslucent=false props to the ScreepWrapper to use the styles.appBG

App/src/pages/workspace/WorkspacePageWithSections.tsx

Lines 189 to 196 in 96c2585

	<ScreenWrapper
	enableEdgeToEdgeBottomSafeAreaPadding
	shouldEnablePickerAvoiding={false}
	shouldEnableMaxHeight
	testID={testID ?? WorkspacePageWithSections.displayName}
	shouldShowOfflineIndicator={!shouldShow}
	shouldShowOfflineIndicatorInWideScreen={shouldShowOfflineIndicatorInWideScreen && !shouldShow}
	>

We can check and fix the other page if it has the same issue

Note: some components use OfflineIndicator to show the offline indicator, we can check it and add the isTranslucent props

App/src/components/OfflineIndicator.tsx

Line 45 in 96c2585

<View style={[containerStyles, isTranslucent && styles.navigationBarBG, styles.flexRow, styles.alignItemsCenter, style]}>

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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

[huult]

Proposal

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

The offline indicator is semi transparent in WS settings

What is the root cause of that problem?

To decide the background style of the mobile offline indicator based on the prop of the component.

App/src/components/ScreenWrapper.tsx

Lines 362 to 368 in 6e94a10

	const mobileOfflineIndicatorBackgroundStyle = useMemo(() => {
	const showOfflineIndicatorBackground = !extraContent && (isSoftKeyNavigation || isOffline);
	if (!showOfflineIndicatorBackground) {
	return undefined;
	}
	return isOfflineIndicatorTranslucent ? styles.navigationBarBG : styles.appBG;
	}, [extraContent, isOffline, isOfflineIndicatorTranslucent, isSoftKeyNavigation, styles.appBG, styles.navigationBarBG]);

The offline indicator has a white background in case:

1. Has extra content, like NavigationTabBar, so that Wallet, Profile settings, etc., do not have the same issue as in this ticket.

App/src/pages/workspace/WorkspacesListPage.tsx

Line 500 in c679fbb

extraContent={shouldUseNarrowLayout && <NavigationTabBar selectedTab={NAVIGATION_TABS.SETTINGS} />}

App/src/components/ScreenWrapper.tsx

Line 363 in 6e94a10

const showOfflineIndicatorBackground = !extraContent && (isSoftKeyNavigation || isOffline);

2. Doesn't have extra content, hasn't set isOfflineIndicatorTranslucent, and isn't using Edge-to-Edge mode.

App/src/components/ScreenWrapper.tsx

Line 367 in 6e94a10

return isOfflineIndicatorTranslucent ? styles.navigationBarBG : styles.appBG;

App/src/components/ScreenWrapper.tsx

Line 209 in 6e94a10

const isOfflineIndicatorTranslucent = isOfflineIndicatorTranslucentProp ?? isUsingEdgeToEdgeMode;

Regarding this issue in the ticket, we are using Edge-to-Edge mode, there is no extra content, and isOfflineIndicatorTranslucent is not set. In this case, the offline indicator will apply the translucent background style

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

I think this issue should be fixed to be consistent with the same case. Specifically, if we are using Edge-to-Edge mode, there is no extra content, and isOfflineIndicatorTranslucent is not set, we should explicitly set the background for the offline indicator.

App/src/components/ScreenWrapper.tsx

Line 367 in 6e94a10

return isOfflineIndicatorTranslucent ? styles.navigationBarBG : styles.appBG;

add above:

    if (isOfflineIndicatorTranslucentProp === undefined && isUsingEdgeToEdgeMode) {
        return styles.appBG;
    }

Note: I will refactor the logic in PR phrase.

Screen.Recording.2025-04-18.at.11.42.35.mov

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.