[due for payment] Workspaces page - Domain control banner uses wrong background color

[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!

---

Version Number: 9.3.11-17
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @shawnborton
Slack conversation (hyperlinked to channel name): expensify_bugs

Action Performed:

1. Go https://staging.new.expensify.com/
2. Navigate to Workspaces tab

Expected Result:

It should match the standard cardBG color.

Actual Result:

Domain control banner uses wrong background color.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @ZhenjaHorbach

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @joekaufmanexpensify (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]

Proposal

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

Actual Result: Domain control banner uses wrong background color.

What is the root cause of that problem?

In DomainsEmptyStateComponent.tsx, the banner is using styles.hoveredComponentBG which applies theme.hoverComponentBG color. However, it should use theme.cardBG to match the standard card background color.

App/src/components/DomainsEmptyStateComponent.tsx

Line 24 in bfc6781

style={[styles.borderRadiusComponentLarge, styles.hoveredComponentBG]}

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

Update DomainsEmptyStateComponent.tsx to use theme.cardBG instead of styles.hoveredComponentBG:

 import React from 'react';
+import useTheme from '@hooks/useTheme';
 import {loadIllustration} from './Icon/IllustrationLoader';
...

 function DomainsEmptyStateComponent() {
     const {asset: BlueShield} = useMemoizedLazyAsset(() => loadIllustration('BlueShield'));
     const styles = useThemeStyles();
+    const theme = useTheme();
     const {translate} = useLocalize();

     return (
         <View style={styles.ph5}>
             <BillingBanner
-                style={[styles.borderRadiusComponentLarge, styles.hoveredComponentBG]}
+                style={[styles.borderRadiusComponentLarge, {backgroundColor: theme.cardBG}]} // or we can use other background here
                 ...
             />
         </View>
     );
 }

What alternative solutions did you explore? (Optional)

N/A

[MobileMage]

🚨 Edited by proposal-police: This proposal was edited at 2026-02-02 14:41:59 UTC.

Proposal

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

On the Workspaces page, the domain control banner (the "Enhanced Security" empty state banner shown when no domains are configured) uses a background color that does not match the standard cardBG color. The banner appears darker than it should, creating a visual inconsistency with the rest of the page.

What is the root cause of that problem?

The DomainsEmptyStateComponent renders a BillingBanner and passes styles.hoveredComponentBG as part of the style override on line 24.

App/src/components/DomainsEmptyStateComponent.tsx

Lines 19 to 33 in 6c1a24c

	<BillingBanner
	icon={BlueShield}
	title={translate('domain.enhancedSecurity.title')}
	subtitle={translate('domain.enhancedSecurity.subtitle')}
	subtitleStyle={[styles.textLabelSupporting, styles.pt1]}
	style={[styles.borderRadiusComponentLarge, styles.hoveredComponentBG]}
	rightComponent={
	<Button
	text={translate('domain.enhancedSecurity.enable')}
	success
	onPress={() => Navigation.navigate(ROUTES.WORKSPACES_ADD_DOMAIN)}
	/>
	}
	/>
	</View>

The hoveredComponentBG style sets backgroundColor to theme.hoverComponentBG, which maps to colors.productLight300 (#F2EDE7) in the light theme and colors.productDark300 (#0A2E25) in the dark theme.

App/src/styles/index.ts

Lines 942 to 944 in 6c1a24c

	hoveredComponentBG: {
	backgroundColor: theme.hoverComponentBG,
	},

However, the expected cardBG color maps to colors.productLight200 (#F8F4F0) in the light theme and colors.productDark200 (#072419) in the dark theme. The productLight300/productDark300 values are one shade darker than the correct productLight200/productDark200, which is why the banner background appears noticeably different from the standard card background.

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

In src/components/DomainsEmptyStateComponent.tsx, we should replace styles.hoveredComponentBG with styles.highlightBG on line 24. The highlightBG style applies backgroundColor: theme.highlightBG, and theme.highlightBG maps to the same color values as theme.cardBG (productLight200 / productDark200) in both light and dark themes.

App/src/styles/index.ts

Lines 380 to 382 in 6c1a24c

	highlightBG: {
	backgroundColor: theme.highlightBG,
	},

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

Line 10 in 6c1a24c

highlightBG: colors.productLight200,

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

Line 65 in 6c1a24c

cardBG: colors.productLight200,

This is a single-word change on one line: styles.hoveredComponentBG becomes styles.highlightBG. The BillingBanner default background (trialBannerBackgroundColor, a green shade) is already overridden by the style prop, so this swap correctly applies the lighter cardBG-equivalent background. The borderRadiusComponentLarge style on the same line remains unchanged.

What alternative solutions did you explore? (Optional)

N/A

[twinkle-react]

Proposal

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

The Workspaces page “Domains” / “Enhanced security” banner renders with the wrong background color, which creates a visual mismatch compared to the standard card background used elsewhere.

What is the root cause of that problem?

In this implementation, the DomainsEmptyStateComponent uses the shared BillingBanner but assumes that styles.hoveredComponentBG is the correct background style, while the banner is expected to match the standard card background; this incorrect assumption is made in src/components/DomainsEmptyStateComponent.tsx inside the DomainsEmptyStateComponent function, and because the caller controls the style prop passed into BillingBanner, this choice directly causes the banner background to diverge from theme.cardBG.

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

The invariant being enforced is that the Domain control banner background must equal the standard card background color, which is theme.cardBG.
Ownership stays in the domain empty-state UI, since it decides how the banner should look.
The smallest and lowest-risk change is to update the caller to explicitly request the card background using existing style utilities, without changing BillingBanner.

File(s) changed:
src/components/DomainsEmptyStateComponent.tsx

Function / component being modified:
DomainsEmptyStateComponent

Scope size:
One file, with a small import addition and a single style change in the component body.

Proposed change (verbatim patch for that file):

// File: src/components/DomainsEmptyStateComponent.tsx
// Add the following imports near the top of the file
import useTheme from '@hooks/useTheme';
import useStyleUtils from '@hooks/useStyleUtils';

// Inside the DomainsEmptyStateComponent function, replace the existing style usage with StyleUtils/theme:
// (showing the function body with the minimal edits)
function DomainsEmptyStateComponent() {
    const {asset: BlueShield} = useMemoizedLazyAsset(() => loadIllustration('BlueShield'));
    const styles = useThemeStyles();
    const {translate} = useLocalize();

    // NEW: use the style utils and theme to get cardBG background style
    const StyleUtils = useStyleUtils();
    const theme = useTheme();

    return (
        <View style={styles.ph5}>
            <BillingBanner
                icon={BlueShield}
                title={translate('domain.enhancedSecurity.title')}
                subtitle={translate('domain.enhancedSecurity.subtitle')}
                subtitleStyle={[styles.textLabelSupporting, styles.pt1]}
                // CHANGED: use cardBG explicitly instead of hoveredComponentBG
                style={[styles.borderRadiusComponentLarge, StyleUtils.getBackgroundColorStyle(theme.cardBG)]}
                rightComponent={
                    <Button
                        text={translate('domain.enhancedSecurity.enable')}
                        success
                        onPress={() => Navigation.navigate(ROUTES.WORKSPACES_ADD_DOMAIN)}
                    />
                }
            />
        </View>
    );
}

This change is localized to the domain empty-state UI.
BillingBanner remains unchanged, so other banners keep their current behavior.
Regression risk is minimal because only one component and one visual style are affected.

What alternative solutions did you explore? (Optional)

Modifying BillingBanner defaults or adding new variant props was explored but rejected because it would affect many other banners and increase risk.
Changing theme tokens globally was also rejected because it could cause unintended visual changes across the app.

[github-actions]

⚠️ @twinkle-react Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.

[samranahm]

Proposal

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

On the Workspaces tab, the Domain control banner (the “enhanced security” / Domains empty-state banner) uses the wrong background color. It should match the standard cardBG color used elsewhere for cards and banners.

What is the root cause of that problem?

The banner is rendered by DomainsEmptyStateComponent, which uses BillingBanner with a style that includes hoveredComponentBG. That gives the banner a different background than the standard cardBG, so it does not match other cards on the page.

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

In DomainsEmptyStateComponent, change the BillingBanner container style from hoveredComponentBG to getBackgroundColorStyle(theme.cardBG) so the Domain control banner uses the standard card background color. Keep borderRadiusComponentLarge as is.

style={[styles.borderRadiusComponentLarge, StyleUtils.getBackgroundColorStyle(theme.cardBG)]}

here

App/src/components/DomainsEmptyStateComponent.tsx

Line 24 in cd96f78

style={[styles.borderRadiusComponentLarge, styles.hoveredComponentBG]}

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.

Results

[github-actions]

⚠️ @samranahm Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.