Style fixes: label form, empty-state spacing, registration dark mode#45080
Style fixes: label form, empty-state spacing, registration dark mode#45080
Conversation
…on dark mode Resolves #44923
![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.
| body.dark-mode .confirm-user-reg__table tbody tr { | ||
| background-color: transparent; | ||
| } |
There was a problem hiding this comment.
This fixes the different color background behind the text on the final step of the setup flow.
WalkthroughThis PR implements style fixes across the Fleet UI by reordering buttons on the label form so the Save button appears first, conditionally hiding table headers when tables are not searchable, removing decorative breadcrumb gradient connectors, removing input field hover and active styling overrides, and making confirmation table rows transparent in dark mode. Possibly related PRs
🚥 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 |
| color: $ui-fleet-black-50; | ||
| } | ||
|
|
||
| &:hover:not(.input-field--read-only) { |
There was a problem hiding this comment.
Not tracked in the issue yet, but this is a new bug I noticed where input fields were staying highlighted when tabbing through them.
There was a problem hiding this comment.
Pull request overview
UI styling tweaks to improve consistency across label management, empty-state spacing on Reports/Policies tables, and dark-mode visuals during initial Fleet setup/registration (per #44923).
Changes:
- Reordered Add/edit label form actions so “Save” precedes “Cancel”.
- Removed the empty table header row above empty states on Reports and Policies by conditionally disabling the
TableContainerheader. - Adjusted registration dark-mode styling (breadcrumbs + confirmation table) and updated shared InputField interaction styles.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss | Removes active breadcrumb connector gradient styling to improve registration dark-mode appearance. |
| frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx | Disables TableContainer header when the Reports table is not searchable (tightens empty-state spacing). |
| frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTable.tsx | Disables TableContainer header when the Policies table is not searchable (tightens empty-state spacing). |
| frontend/pages/labels/components/LabelForm/LabelForm.tsx | Reorders buttons so “Save” appears before “Cancel”. |
| frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss | Makes confirmation table rows transparent in dark mode. |
| frontend/components/forms/fields/InputField/_styles.scss | Removes global hover/active input border styling (leaving focus styles). |
| changes/44923-style-fixes | Adds changelog entry for the UI style fixes. |
Comments suppressed due to low confidence (1)
frontend/components/forms/fields/InputField/_styles.scss:23
- Removing the hover/active border styles from the shared
.input-fieldaffects InputField visuals across the entire UI (not just the registration flow in dark mode). If the goal is to address dark-mode styling on the initial setup pages, consider scoping this change tobody.dark-modeand/or the registration page container, or updating the hover/active colors for dark mode rather than removing the interaction states globally.
&:focus:not(.input-field--read-only),
&:focus-visible:not(.input-field--read-only) {
box-shadow: none;
outline: 0;
border: 1px solid $ui-fleet-black-75-down;
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <Button onClick={onCancel} variant="inverse"> | ||
| Cancel | ||
| </Button> |
There was a problem hiding this comment.
Move "Save" button to left on the label form.
| <Button | ||
| onClick={() => { | ||
| router.goBack(); | ||
| }} | ||
| variant="inverse" | ||
| disabled={isUpdating} | ||
| > | ||
| Cancel | ||
| </Button> |
There was a problem hiding this comment.
Two places where save button is rendered.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #45080 +/- ##
==========================================
+ Coverage 66.77% 66.78% +0.01%
==========================================
Files 2718 2718
Lines 218795 218781 -14
Branches 10588 10583 -5
==========================================
+ Hits 146100 146114 +14
+ Misses 59532 59504 -28
Partials 13163 13163
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:
|
| onQueryChange={onQueryChange} | ||
| inputPlaceHolder="Search by name" | ||
| searchable={searchable} | ||
| disableTableHeader={!searchable} |
There was a problem hiding this comment.
This is an existing prop on the TableContainer component that hides and shows the area that was causing the extra space when empty. searchable is TRUE when there are results, so we can take the opposite of that to determine when to hide/show the header area.
| &::before { | ||
| background: linear-gradient( | ||
| to right, | ||
| $ui-fleet-black-75 50%, | ||
| $ui-fleet-black-25 50% | ||
| ); | ||
| } | ||
|
|
There was a problem hiding this comment.
I noticed that the progress indicator at the top was filling halfway during the steps, which looked weird. I updated it so that the entire line area is filled. Will add to isuse.
For #44923
Summary
disableTableHeader={!searchable}when there are no results, no search, and no active filters. The empty state now sits closer to the page header.Test plan
Summary by CodeRabbit
Release Notes
Style
Updates