Workflows - Badge outline is not visible when user is selected

[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.3.32-0
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #82210
Email or phone of affected tester (no customers): sjodijsoijosjoidsji@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.2 / Chrome
App Component: Workspace Settings

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace settings > Workflows.
3. Click on the default workflow.
4. Click Approver > Approver.

Expected Result:

Badge outline should be visible when user is selected.

Actual Result:

Badge outline blends with the selection highlight and becomes not visible when user is selected.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

1.mp4

View all open jobs on GitHub

[melvin-bot]

You have been assigned to this deploy blocker because you recently merged this PR: #82210

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[melvin-bot]

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

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[OSBotify]

🔍 Investigation Summary

Classification: Frontend bug
Causing PR: #82210 - "Update badge styles" by @abzokhattab (High confidence)
Related Issues: None

Recommendation: REVERT

PR #82210 introduced a visual regression where the badge outline blends with the selection highlight, making it invisible when a user is selected. This affects user experience in the Workflows > Approver selection screen.

Labels: Keeping DeployBlockerCash (this is a Frontend bug affecting the App), no label changes needed.

📋 Detailed Analysis

Evidence

PR #82210 updated badge styles and introduced new badge theme colors. The issue manifests specifically when:

1. User navigates to Workspace Settings > Workflows > Default workflow > Approver
2. Selects a user from the list
3. The badge (showing "Owner", "Admin", or "Auditor" role) outline becomes invisible against the selection highlight

Verification

Affected files:

• src/styles/theme/themes/light.ts - Introduced badgeDefaultBG: colors.productLight400
• src/components/Badge.tsx - Modified badge styling logic with new isStrong prop
• src/styles/index.ts - Added new badge style definitions

The root cause:
In src/styles/theme/themes/light.ts, PR #82210 set:

• badgeDefaultBG: colors.productLight400 (default badge background)
• activeComponentBG: colors.productLight400 (selected row background)

Both use the same color value, causing the badge border (which uses borderColor: theme.badgeDefaultBG) to have the same color as the selected row background.

The badge is rendered via:

1. WorkspaceWorkflowsApprovalsApproverPage.tsx renders approvers with MemberRightIcon in rightElement
2. MemberRightIcon.tsx renders a Badge component for Owner/Admin/Auditor roles
3. When the row is selected, InviteMemberListItem applies sidebarLinkActive background color
4. The badge outline becomes invisible due to the color match

Root Cause

The Badge component in PR #82210 was updated with new theme colors, but the default badge background color (badgeDefaultBG) was set to the same value as the active/selected component background (activeComponentBG), both using colors.productLight400. This creates a visual accessibility issue where badges with borders are not distinguishable when rendered on selected list items.

Timeline verification:

• PR Update badge styles #82210 merged: 2026-03-04
• Issue reported: 2026-03-06
• Reproducible on staging: Yes (PR is in staging deploy 9.3.32-0)
• Reproducible on production: No (PR not yet in production)