Skip to content

Style fixes: label form, empty-state spacing, registration dark mode #45080

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lukeheath wants to merge 3 commits into
base: main
Choose a base branch
from
+18 −42
Open

Style fixes: label form, empty-state spacing, registration dark mode #45080

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a52c859
Style fixes: label form button order, empty-state spacing, registrati…
lukeheath May 8, 2026
396f8f4
Remove changes file (unreleased bugs)
lukeheath May 8, 2026
0e50cfc
Fix Save/Cancel order on New label page
lukeheath May 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,3 +100,7 @@
}
}
}

body.dark-mode .confirm-user-reg__table tbody tr {
background-color: transparent;
}
Comment on lines +104 to +106
Copy link
Copy Markdown
Member Author

@lukeheath lukeheath May 8, 2026

Choose a reason for hiding this comment

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

This fixes the different color background behind the text on the final step of the setup flow.

6 changes: 0 additions & 6 deletions frontend/components/forms/fields/InputField/_styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,6 @@
color: $ui-fleet-black-50;
}

&:hover:not(.input-field--read-only) {
Copy link
Copy Markdown
Member Author

@lukeheath lukeheath May 8, 2026

Choose a reason for hiding this comment

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

Not tracked in the issue yet, but this is a new bug I noticed where input fields were staying highlighted when tabbing through them.

box-shadow: none;
border: 1px solid $ui-fleet-black-75-over;
}

&:active:not(.input-field--read-only),
&:focus:not(.input-field--read-only),
&:focus-visible:not(.input-field--read-only) {
box-shadow: none;
Expand Down
24 changes: 0 additions & 24 deletions frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,14 +65,6 @@
}

&.registration-breadcrumbs__page--active {
&::before {
background: linear-gradient(
to right,
$ui-fleet-black-75 50%,
$ui-fleet-black-25 50%
);
}

Comment on lines -68 to -75
Copy link
Copy Markdown
Member Author

@lukeheath lukeheath May 8, 2026

Choose a reason for hiding this comment

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

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.

&::after {
background-color: transparent;
outline: 2px solid $ui-fleet-black-75;
Expand Down Expand Up @@ -101,14 +93,6 @@
}

&.registration-breadcrumbs__page--active {
&::before {
background: linear-gradient(
to right,
$ui-fleet-black-75 50%,
$ui-fleet-black-25 50%
);
}

&::after {
background-color: transparent;
outline: 2px solid $ui-fleet-black-75;
Expand Down Expand Up @@ -140,14 +124,6 @@
}

&.registration-breadcrumbs__page--active {
&::before {
background: linear-gradient(
to right,
$ui-fleet-black-75 50%,
$ui-fleet-black-25 50%
);
}

&::after {
background-color: transparent;
outline: 2px solid $ui-fleet-black-75;
Expand Down
18 changes: 9 additions & 9 deletions frontend/pages/labels/NewLabelPage/NewLabelPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -594,15 +594,6 @@ const NewLabelPage = ({
</div>
{renderVariableFields()}
<div className="button-wrap">
<Button
onClick={() => {
router.goBack();
}}
variant="inverse"
disabled={isUpdating}
>
Cancel
</Button>
<GitOpsModeTooltipWrapper
entityType="labels"
renderChildren={(disableChildren) => (
Expand All @@ -615,6 +606,15 @@ const NewLabelPage = ({
</Button>
)}
/>
<Button
onClick={() => {
router.goBack();
}}
variant="inverse"
disabled={isUpdating}
>
Cancel
</Button>
Comment on lines +609 to +617
Copy link
Copy Markdown
Member Author

@lukeheath lukeheath May 8, 2026

Choose a reason for hiding this comment

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

Two places where save button is rendered.

</div>
</form>
);
Expand Down
6 changes: 3 additions & 3 deletions frontend/pages/labels/components/LabelForm/LabelForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,9 +171,6 @@ const LabelForm = ({
{teamName ? <TeamNameField name={teamName} /> : null}
{additionalFields}
<div className="button-wrap">
<Button onClick={onCancel} variant="inverse">
Cancel
</Button>
<GitOpsModeTooltipWrapper
entityType="labels"
renderChildren={(disableChildren) => (
Expand All @@ -186,6 +183,9 @@ const LabelForm = ({
</Button>
)}
/>
<Button onClick={onCancel} variant="inverse">
Cancel
</Button>
Comment on lines +186 to +188
Copy link
Copy Markdown
Member Author

@lukeheath lukeheath May 8, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

Move "Save" button to left on the label form.

</div>
</form>
);
Expand Down
1 change: 1 addition & 0 deletions frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,7 @@ const PoliciesTable = ({
onQueryChange={onQueryChange}
inputPlaceHolder="Search by name"
searchable={searchable}
disableTableHeader={!searchable}
Copy link
Copy Markdown
Member Author

@lukeheath lukeheath May 8, 2026

Choose a reason for hiding this comment

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

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.

customControl={customControl}
/>
</div>
Expand Down
1 change: 1 addition & 0 deletions frontend/pages/queries/ManageQueriesPage/components/QueriesTable/QueriesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,6 +302,7 @@ const QueriesTable = ({
inputPlaceHolder="Search by name"
onQueryChange={onQueryChange}
searchable={searchable}
disableTableHeader={!searchable}
customControl={searchable ? renderPlatformDropdown : undefined}
disableMultiRowSelect={!curTeamScopeQueriesPresent}
onClickRow={handleRowSelect}
Expand Down
Loading