From 534d70e884b449dfae15e3c69da54eaf4a1dd916 Mon Sep 17 00:00:00 2001 From: Luke Heath Date: Wed, 13 May 2026 15:24:16 -0500 Subject: [PATCH 1/6] Fix dark-mode 'Various' and 'Undetermined' label color (#45117) Per design clarification in https://github.com/fleetdm/fleet/issues/45117#issuecomment-4444518025, only "Not supported" copy should be greyed out. Hoverable tooltip-bearing labels keep the default text color and use italics as the cue. In dark mode the previous grey rendered with low contrast. - Users page Role column: "Various" no longer applies the grey class. - Performance impact cell: "Undetermined" pill no longer overrides text color to grey; italics retained. Co-Authored-By: Claude Opus 4.7 (1M context) --- changes/45117-dark-mode-various-label-color | 1 + .../DataTable/PerformanceImpactCell/_styles.scss | 4 +++- .../components/UsersTable/UsersTableConfig.tsx | 7 +++++++ 3 files changed, 11 insertions(+), 1 deletion(-) create mode 100644 changes/45117-dark-mode-various-label-color diff --git a/changes/45117-dark-mode-various-label-color b/changes/45117-dark-mode-various-label-color new file mode 100644 index 00000000000..6fac1578047 --- /dev/null +++ b/changes/45117-dark-mode-various-label-color @@ -0,0 +1 @@ +- Fixed dark-mode contrast for hoverable tooltip labels: the "Various" role label on the Users page and the "Undetermined" performance impact label now render in the default text color with italics instead of grey. diff --git a/frontend/components/TableContainer/DataTable/PerformanceImpactCell/_styles.scss b/frontend/components/TableContainer/DataTable/PerformanceImpactCell/_styles.scss index d670a8a397c..7f22cb42b2e 100644 --- a/frontend/components/TableContainer/DataTable/PerformanceImpactCell/_styles.scss +++ b/frontend/components/TableContainer/DataTable/PerformanceImpactCell/_styles.scss @@ -7,8 +7,10 @@ .data-table__pill { color: $core-fleet-black; + // "Undetermined" is hoverable for more info — italics are the cue. Per + // design, only "Not supported" copy is greyed out; tooltip-bearing labels + // keep the default text color (so they stay readable in dark mode). &--undetermined { - color: $ui-fleet-black-50; font-style: italic; } } diff --git a/frontend/pages/admin/ManageUsersPage/components/UsersTable/UsersTableConfig.tsx b/frontend/pages/admin/ManageUsersPage/components/UsersTable/UsersTableConfig.tsx index 2326e9bbf24..615cfa6e330 100644 --- a/frontend/pages/admin/ManageUsersPage/components/UsersTable/UsersTableConfig.tsx +++ b/frontend/pages/admin/ManageUsersPage/components/UsersTable/UsersTableConfig.tsx @@ -132,6 +132,13 @@ const generateTableHeaders = ( ); } + // "Various" indicates a user has different roles across fleets and is + // hoverable for more info — italics are the cue. Per design, only + // "Not supported" copy is greyed out; tooltip-bearing labels keep the + // default text color (so they stay readable in dark mode). + if (cellProps.cell.value === "Various") { + return ; + } return ( Date: Wed, 13 May 2026 16:49:21 -0500 Subject: [PATCH 2/6] Revert: un-greying "Various" on Users page (already fixed in main) The "Various" label in the Users page Role column was already correctly styled in main (no grey class applied). The earlier change in this PR added a redundant special-case branch in UsersTableConfig.tsx. Reverting to restore the file to match origin/main. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../components/UsersTable/UsersTableConfig.tsx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/frontend/pages/admin/ManageUsersPage/components/UsersTable/UsersTableConfig.tsx b/frontend/pages/admin/ManageUsersPage/components/UsersTable/UsersTableConfig.tsx index 615cfa6e330..2326e9bbf24 100644 --- a/frontend/pages/admin/ManageUsersPage/components/UsersTable/UsersTableConfig.tsx +++ b/frontend/pages/admin/ManageUsersPage/components/UsersTable/UsersTableConfig.tsx @@ -132,13 +132,6 @@ const generateTableHeaders = ( ); } - // "Various" indicates a user has different roles across fleets and is - // hoverable for more info — italics are the cue. Per design, only - // "Not supported" copy is greyed out; tooltip-bearing labels keep the - // default text color (so they stay readable in dark mode). - if (cellProps.cell.value === "Various") { - return ; - } return ( Date: Wed, 13 May 2026 16:53:51 -0500 Subject: [PATCH 3/6] Rename and rewrite changes/ entry to reflect corrected scope Audit of greyed labels paired with hover tooltips found the "Undetermined" performance impact label in the reports table as the only in-scope case; the prior "Various" reference was redundant (already correct in main) and has been removed. Updated the entry filename and description accordingly. Co-Authored-By: Claude Opus 4.7 (1M context) --- changes/45117-dark-mode-undetermined-label-color | 1 + changes/45117-dark-mode-various-label-color | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 changes/45117-dark-mode-undetermined-label-color delete mode 100644 changes/45117-dark-mode-various-label-color diff --git a/changes/45117-dark-mode-undetermined-label-color b/changes/45117-dark-mode-undetermined-label-color new file mode 100644 index 00000000000..cd090339ba4 --- /dev/null +++ b/changes/45117-dark-mode-undetermined-label-color @@ -0,0 +1 @@ +- Fixed dark-mode contrast for the "Undetermined" performance impact label in the reports table; it now renders in the default text color with italics instead of low-contrast grey. The tooltip on hover is unchanged. diff --git a/changes/45117-dark-mode-various-label-color b/changes/45117-dark-mode-various-label-color deleted file mode 100644 index 6fac1578047..00000000000 --- a/changes/45117-dark-mode-various-label-color +++ /dev/null @@ -1 +0,0 @@ -- Fixed dark-mode contrast for hoverable tooltip labels: the "Various" role label on the Users page and the "Undetermined" performance impact label now render in the default text color with italics instead of grey. From 767396952be927697fd3cf9c89e7823b708def2b Mon Sep 17 00:00:00 2001 From: Luke Heath Date: Wed, 13 May 2026 17:02:29 -0500 Subject: [PATCH 4/6] Drop verbose comment on .data-table__pill--undetermined Co-Authored-By: Claude Opus 4.7 (1M context) --- .../DataTable/PerformanceImpactCell/_styles.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/frontend/components/TableContainer/DataTable/PerformanceImpactCell/_styles.scss b/frontend/components/TableContainer/DataTable/PerformanceImpactCell/_styles.scss index 7f22cb42b2e..1f0ae2e8fa7 100644 --- a/frontend/components/TableContainer/DataTable/PerformanceImpactCell/_styles.scss +++ b/frontend/components/TableContainer/DataTable/PerformanceImpactCell/_styles.scss @@ -7,9 +7,6 @@ .data-table__pill { color: $core-fleet-black; - // "Undetermined" is hoverable for more info — italics are the cue. Per - // design, only "Not supported" copy is greyed out; tooltip-bearing labels - // keep the default text color (so they stay readable in dark mode). &--undetermined { font-style: italic; } From eb63763544dee101a1825da1146946e3792606a5 Mon Sep 17 00:00:00 2001 From: Luke Heath Date: Wed, 13 May 2026 17:05:29 -0500 Subject: [PATCH 5/6] Drop changes/ entry; release notes handled separately Co-Authored-By: Claude Opus 4.7 (1M context) --- changes/45117-dark-mode-undetermined-label-color | 1 - 1 file changed, 1 deletion(-) delete mode 100644 changes/45117-dark-mode-undetermined-label-color diff --git a/changes/45117-dark-mode-undetermined-label-color b/changes/45117-dark-mode-undetermined-label-color deleted file mode 100644 index cd090339ba4..00000000000 --- a/changes/45117-dark-mode-undetermined-label-color +++ /dev/null @@ -1 +0,0 @@ -- Fixed dark-mode contrast for the "Undetermined" performance impact label in the reports table; it now renders in the default text color with italics instead of low-contrast grey. The tooltip on hover is unchanged. From c325d6c5144d058510222c02d1195c50a3d1c0f6 Mon Sep 17 00:00:00 2001 From: Luke Heath Date: Wed, 13 May 2026 18:26:34 -0500 Subject: [PATCH 6/6] Dropdown: clear darker rectangle inside open control in dark mode In dark mode, body.dark-mode .Select .Select-control paints the control $ui-fleet-black-5, but .Select-input:focus painted the focused combobox wrapper $core-fleet-white, producing a ~21x34 darker rectangle inside the control whenever the menu was open. The :focus override only needs to defeat react-select v1's hardcoded background: #fff; transparent does that and lets the control color show through in both themes. Co-Authored-By: Claude Opus 4.7 (1M context) --- frontend/components/forms/fields/Dropdown/_styles.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/frontend/components/forms/fields/Dropdown/_styles.scss b/frontend/components/forms/fields/Dropdown/_styles.scss index a3120cf5a85..f24c524dc6b 100644 --- a/frontend/components/forms/fields/Dropdown/_styles.scss +++ b/frontend/components/forms/fields/Dropdown/_styles.scss @@ -297,10 +297,8 @@ box-sizing: border-box; height: 34px; - // Override react-select's hardcoded `.Select-control .Select-input:focus - // { background: #fff; }` so the input stays themed when the menu is open. &:focus { - background: $core-fleet-white; + background: transparent; } > input {