Fleet UI: Dark mode tweaks 1 - #43422
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #43422 +/- ##
=======================================
Coverage 66.88% 66.88%
=======================================
Files 2590 2590
Lines 207632 207635 +3
Branches 9323 9326 +3
=======================================
+ Hits 138871 138874 +3
Misses 56130 56130
Partials 12631 12631
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
Claude Code Review
This repository is configured for manual code reviews. Comment @claude review to trigger a review and subscribe this PR to future pushes, or @claude review once for a one-time review.
Tip: disable this comment in your organization's Code Review settings.
WalkthroughThis pull request contains multiple styling and component refinements across the Fleet frontend. Changes include: updating CustomLink tooltip styling to use static white colors, replacing hard-coded colors with CSS custom properties in the SQL editor theme, adjusting shadow transition widths in the DataTable component, adding disabled state color handling in the dropdown wrapper, restructuring the GitOps mode indicator's DOM hierarchy with updated styles, removing the background color from the unsupported screen size overlay, and updating the dark-mode shadow color variable. These modifications align with dark mode theme work and standardize color usage across components. 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@frontend/components/SQLEditor/theme.css`:
- Line 188: The editor base text color uses var(--ui-fleet-black-33) which is
too low contrast on the dark-mode editor background; update the CSS rule that
currently sets color: var(--ui-fleet-black-33) to use a higher-contrast token
(e.g., a darker token such as --ui-fleet-black-45 or --ui-fleet-black-60 or
another token that meets WCAG AA for 14px body text) so the editor base text
contrast passes AA; locate the occurrence of var(--ui-fleet-black-33) in
theme.css and replace it with the chosen higher-contrast variable.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 876eb679-31b6-4ef5-887b-bc5ffed846d8
📒 Files selected for processing (8)
frontend/components/CustomLink/_styles.scssfrontend/components/SQLEditor/theme.cssfrontend/components/TableContainer/DataTable/_styles.scssfrontend/components/forms/fields/DropdownWrapper/DropdownWrapper.tsxfrontend/components/top_nav/SiteTopNav/SiteTopNav.tsxfrontend/components/top_nav/SiteTopNav/_styles.scssfrontend/layouts/UnsupportedScreenSize/_styles.scssfrontend/styles/var/colors.scss
💤 Files with no reviewable changes (1)
- frontend/layouts/UnsupportedScreenSize/_styles.scss
|
|
||
| body.dark-mode .ace-fleet .ace_keyword { | ||
| color: #b3b6c1; | ||
| color: var(--ui-fleet-black-33); |
There was a problem hiding this comment.
Increase dark-mode editor base text contrast.
Line 188 uses --ui-fleet-black-33 for default text, which is low contrast on the dark editor background (--core-fleet-white from Line 34 in dark mode). This is roughly ~3.1:1 and can miss WCAG AA for 14px body text.
Proposed fix
body.dark-mode .ace_editor.ace-fleet {
- color: var(--ui-fleet-black-33);
+ color: var(--ui-fleet-black-75);
}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/components/SQLEditor/theme.css` at line 188, The editor base text
color uses var(--ui-fleet-black-33) which is too low contrast on the dark-mode
editor background; update the CSS rule that currently sets color:
var(--ui-fleet-black-33) to use a higher-contrast token (e.g., a darker token
such as --ui-fleet-black-45 or --ui-fleet-black-60 or another token that meets
WCAG AA for 14px body text) so the editor base text contrast passes AA; locate
the occurrence of var(--ui-fleet-black-33) in theme.css and replace it with the
chosen higher-contrast variable.
There was a problem hiding this comment.
Pull request overview
Updates Fleet UI styling to polish dark mode behavior across tooltips, dropdowns, the SQL editor, GitOps mode indicator, table scroll shadows, and the unsupported screen size overlay.
Changes:
- Adjust dark-mode color variables and table scroll-shadow transition widths/colors.
- Refactor GitOps mode indicator markup/styles and improve tooltip link/icon contrast.
- Update SQL editor and dropdown styles to use theme variables and improve disabled states.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| frontend/styles/var/colors.scss | Tweaks dark-mode --ui-shadow to better match dark surfaces. |
| frontend/layouts/UnsupportedScreenSize/_styles.scss | Changes unsupported-screen overlay styling (removes hardcoded white background). |
| frontend/components/top_nav/SiteTopNav/SiteTopNav.tsx | Refactors GitOps mode indicator trigger markup inside tooltip. |
| frontend/components/top_nav/SiteTopNav/_styles.scss | Updates GitOps mode indicator styles to match new markup. |
| frontend/components/TableContainer/DataTable/_styles.scss | Widens scroll-shadow transition and reformats gradients for readability. |
| frontend/components/SQLEditor/theme.css | Converts editor theme colors to CSS custom properties; removes most dark-mode overrides. |
| frontend/components/forms/fields/DropdownWrapper/DropdownWrapper.tsx | Fixes disabled dropdown single-value color in generated react-select styles. |
| frontend/components/CustomLink/_styles.scss | Ensures tooltip/flash links (underline + external icon strokes) stay light on dark tooltip surfaces. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @@ -3,7 +3,6 @@ | |||
| width: 100%; | |||
| height: 100%; | |||
| z-index: 3; | |||
There was a problem hiding this comment.
Removing the background-color from the .unsupported-screen-size overlay makes the small-screen blocker transparent, so the underlying UI will show through (and in light mode may no longer appear as an overlay at all). Instead of removing it, set a themed background color (e.g., using existing CSS custom properties/SCSS aliases like $core-fleet-white / $ui-light-grey) so it remains opaque in both light and dark mode.
| z-index: 3; | |
| z-index: 3; | |
| background-color: $ui-light-grey; |
Issue
Closes #42977
Description
Iterations
Testing
Summary by CodeRabbit