Skip to content

Dashboard: recolor the interim omnibar orange in support user sessions#112364

Merged
arthur791004 merged 1 commit into
trunkfrom
add/dashboard-omnibar-support-session-bg
Jul 8, 2026
Merged

Dashboard: recolor the interim omnibar orange in support user sessions#112364
arthur791004 merged 1 commit into
trunkfrom
add/dashboard-omnibar-support-session-bg

Conversation

@arthur791004

@arthur791004 arthur791004 commented Jul 7, 2026

Copy link
Copy Markdown
Contributor

Proposed Changes

  • Recolor the Multi-site Dashboard's interim omnibar (Calypso's masterbar) orange while a support user session is active, mirroring Calypso's support-session masterbar indicator.
  • Adds an is-support-user-session class to the #wpcom-omnibar mount in client/dashboard/app/interim-omnibar/index.tsx when isSupportUserSession() is true.
  • Overrides the masterbar color custom properties (--color-masterbar-background, --color-masterbar-border, --color-masterbar-item-hover-background, --color-masterbar-item-active-background) to Color Studio orange shades in interim-omnibar/style.scss. The dashboard already themes the masterbar entirely through these properties, so overriding them is sufficient — no new selectors fight the masterbar stylesheet.

Why are these changes being made?

Support agents need an unmistakable visual cue that they're operating inside a customer's session. Calypso's classic masterbar turns orange during support sessions; the dashboard's interim omnibar had no equivalent indicator. This brings parity.

The indicator is gated on support "user" sessions only (isSupportUserSession()), not "next" sessions — matching the existing components/header-bar decision, whose comment notes that "next" sessions already have a floating toolbar acting as their visual indicator.

The Color Studio custom properties aren't loaded globally in the dashboard, so each value uses a var(--studio-orange*, <hex fallback>) form (the same pattern already used in components/segmented-bar), keeping the real palette when present and a correct fallback otherwise.

Testing Instructions

  • Start Calypso (yarn start) and open the Multi-site Dashboard (http://my.localhost:3000/sites).
  • Enter a support user session (impersonate a user via the support tooling so sessionStorage.boot_support_user is set at boot).
  • Confirm the top omnibar/masterbar renders orange instead of the default dark toolbar, and that item hover/active states use darker orange shades.
  • Confirm a normal (non-support) session, and a support "next" session, are unaffected (dark toolbar as before).
  • Quick CSS-only check without a real session: on the dashboard, run document.getElementById('wpcom-omnibar').classList.add('is-support-user-session') in the console and confirm the bar turns orange.

Pre-merge Checklist

  • Has the general commit checklist been followed? (PCYsg-hS-p2)
  • Have you written new tests for your changes?
  • Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
  • Have you checked for TypeScript, React or other console errors?
  • For UI changes, have you tested the affected components in dark mode?
  • Have you tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
  • Have you used memoizing on expensive computations?
  • Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)? (No new strings.)
  • For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

🤖 Generated with Claude Code

Screenshot

Masterbar during a support "user" session (orange, matching Calypso):

support session masterbar

@arthur791004 arthur791004 force-pushed the add/dashboard-omnibar-support-session-bg branch from 0f1bc44 to 2ca5c44 Compare July 7, 2026 15:00
Add an `is-support-user-session` class to the `#wpcom-omnibar` mount when
`isSupportUserSession()` is true, and override the masterbar color custom
properties to Color Studio orange shades. This mirrors Calypso's
support-session masterbar indicator so support agents get a clear visual cue.

Gated on support "user" sessions only (not "next" sessions), matching the
existing header bar, whose floating toolbar already indicates "next" sessions.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@arthur791004 arthur791004 force-pushed the add/dashboard-omnibar-support-session-bg branch from 2ca5c44 to a4200b1 Compare July 7, 2026 15:14
@arthur791004 arthur791004 self-assigned this Jul 7, 2026
@arthur791004 arthur791004 marked this pull request as ready for review July 7, 2026 15:19
@arthur791004 arthur791004 requested a review from a team as a code owner July 7, 2026 15:19
@matticbot matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jul 7, 2026
Comment thread client/dashboard/app/interim-omnibar/style.scss

@StevenDufresne StevenDufresne left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. I think the hard coded variables are fine. Ideally we wouldn't need to ship them with the main app but they are minor.

@fushar fushar left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code changes look good.

@arthur791004 arthur791004 added this pull request to the merge queue Jul 8, 2026
@github-merge-queue github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Jul 8, 2026
@arthur791004 arthur791004 added this pull request to the merge queue Jul 8, 2026
Merged via the queue into trunk with commit 3e99dac Jul 8, 2026
30 checks passed
@arthur791004 arthur791004 deleted the add/dashboard-omnibar-support-session-bg branch July 8, 2026 06:00
@github-actions github-actions Bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jul 8, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants