Dashboard: recolor the interim omnibar orange in support user sessions#112364
Merged
Conversation
Jetpack Cloud Live (direct link)
Automattic for Agencies Live (direct link)
Dashboard Live (dotcom) (direct link)
|
0f1bc44 to
2ca5c44
Compare
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>
2ca5c44 to
a4200b1
Compare
StevenDufresne
approved these changes
Jul 8, 2026
StevenDufresne
left a comment
Contributor
There was a problem hiding this comment.
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Proposed Changes
is-support-user-sessionclass to the#wpcom-omnibarmount inclient/dashboard/app/interim-omnibar/index.tsxwhenisSupportUserSession()istrue.--color-masterbar-background,--color-masterbar-border,--color-masterbar-item-hover-background,--color-masterbar-item-active-background) to Color Studio orange shades ininterim-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 existingcomponents/header-bardecision, 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 incomponents/segmented-bar), keeping the real palette when present and a correct fallback otherwise.Testing Instructions
yarn start) and open the Multi-site Dashboard (http://my.localhost:3000/sites).sessionStorage.boot_support_useris set at boot).document.getElementById('wpcom-omnibar').classList.add('is-support-user-session')in the console and confirm the bar turns orange.Pre-merge Checklist
🤖 Generated with Claude Code
Screenshot
Masterbar during a support "user" session (orange, matching Calypso):