upstreamable: frontend: GlobalSearch: Fix visibility on dark navbar#418
upstreamable: frontend: GlobalSearch: Fix visibility on dark navbar#418skoeva wants to merge 2 commits intoAzure:headlamp-downstreamfrom
Conversation
There was a problem hiding this comment.
Pull request overview
Improves GlobalSearch styling so the search affordance remains visible/consistent on dark/colored navbars (including at high zoom) by aligning icon/button/textfield colors and backgrounds with the active theme.
Changes:
- Adds background/hover/border/font styling to the collapsed
IconButtonplaceholder so it isn’t transparent on dark navbars. - Makes the search
TextFieldbackground solid (background.default) and sets search icon color explicitly totext.primary. - Styles the lazy-load
searchFallbackTextFieldwith a matching background to prevent a brief navbar-color flash.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 1 out of 1 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
illume
left a comment
illume
left a comment
There was a problem hiding this comment.
left a note about aria-hidden for the decoration
skoeva
force-pushed
the
search-bg
branch
3 times, most recently
from
97c570c to
726829e
Compare
|
I don't think the frontend test failure is related |
skoeva
force-pushed
the
search-bg
branch
2 times, most recently
from
4f63ad9 to
b5e244d
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 6 out of 6 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
skoeva
force-pushed
the
search-bg
branch
2 times, most recently
from
fa46a69 to
4270448
Compare
Signed-off-by: Evangelos Skopelitis <eskopelitis@microsoft.com>
Signed-off-by: Evangelos Skopelitis <eskopelitis@microsoft.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 45 out of 45 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
skoeva
left a comment
skoeva
left a comment
There was a problem hiding this comment.
merged in the main repo, will get pulled in at some point
This change ensures the search bar remains visible and consistent across all zoom levels and themes with colored or dark navbars.
Fixes: #417
Summary
TextFieldandIconButton(small/zoomed breakpoint) lacked explicit backgrounds, making them invisible on colored navbars (e.g. Azure blue, dark themes). Both now usetheme.palette.background.default.IconButtonhover now usesbackground.mutedinstead of inheriting the navbar color.text.primary/text.secondarypalette tokens. The standalone icon-only button (isIconButton) now setscolor="inherit"on theIconButton, so it inherits the navbar's contrast color instead of MUI's defaultaction.nativegrey.searchFallback(shown whileGlobalSearchContentlazy-loads) had no background, causing a flash of navbar color on click. Fixed withbackground.default.navbar.backgroundinstead ofbackground.default.aria-labelto the icon-onlyIconButtonvariant; marked the decorativeTextFieldsearch iconaria-hidden. Replacedalpha(text.primary, 0.42)magic value with semantictext.secondaryfor WCAG-consistent contrast.Note: Also includes snapshot updates to account for the changes introduced to SimpleTable in a prior commit.
Screenshots
On load
On click
On load (zoomed in)
On click (zoomed in)