From dbe0e2f4e317b8673fce6ac45d6a7944b4162809 Mon Sep 17 00:00:00 2001 From: gorkem-bwl Date: Thu, 3 Sep 2026 01:30:02 -0400 Subject: [PATCH] fix(client): sidebar selection ordering, and clear second review pass The sidebar regression is the real fix here. NavItem paints the selected item with action.selected but hovers unselected items with MUI's default action.hover. Once the sidebar moved onto `paper`, selected composited to rgb(31,38,41) - darker than the ground - while hover came out lighter at rgb(46,46,51), so hovering any other item made it read as more selected than the actual selection. Both states now come from the same family (selectedHover / rowHover), so selected always reads stronger. Also from review: - Dropped "Inter" from the status page SANS_STACK. Its webfont went with the Google Fonts import, so on Windows and Linux the stack was silently falling through to Segoe UI / Roboto on pages users publish. - Button focus rings now use the same dark-mode green as input focus rings. They were still on primary.main at 2.86:1, which is the exact problem primary.light was added to solve. - Removed 13 size={16} props made redundant by the Icon default change. The load-bearing pins stay: size={20} on the public status page, and the header pins that were relying on the old default. - Documented that alpha() replaces rather than multiplies the alpha channel in StatusBox, so the grid is coupled to `divider` being opaque. - Noted on the isRowSelected JSDoc that the small-screen card branch does not style selection, same limitation getRowSx already had. Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd --- .../Components/design-elements/StatusBox.tsx | 5 +- .../src/Components/design-elements/Table.tsx | 6 +- .../monitors/HeaderMonitorControls.tsx | 56 ++----------------- client/src/Components/sidebar/Authfooter.tsx | 5 +- client/src/Components/sidebar/NavItem.tsx | 7 ++- .../Incidents/Components/CardSummary.tsx | 22 +------- .../Status/themes/shared/fontStacks.ts | 5 +- client/src/Utils/Theme/Theme.ts | 9 ++- 8 files changed, 36 insertions(+), 79 deletions(-) diff --git a/client/src/Components/design-elements/StatusBox.tsx b/client/src/Components/design-elements/StatusBox.tsx index 191ed21d6..a22af3406 100644 --- a/client/src/Components/design-elements/StatusBox.tsx +++ b/client/src/Components/design-elements/StatusBox.tsx @@ -35,7 +35,10 @@ export const BGBox = ({ children, sx }: StatusBoxProps) => { pointerEvents: "none", // Deliberately far fainter than `divider` - this is texture // behind the number, not a rule, and it must never compete - // with the box's own border. + // with the box's own border. Note alpha() *replaces* the + // alpha channel, so this relies on `divider` being an opaque + // hex; if it ever goes translucent this gets stronger, not + // weaker. backgroundImage: ` linear-gradient(${alpha(theme.palette.divider, 0.4)} 1px, transparent 1px), linear-gradient(90deg, ${alpha(theme.palette.divider, 0.4)} 1px, transparent 1px) diff --git a/client/src/Components/design-elements/Table.tsx b/client/src/Components/design-elements/Table.tsx index 44eab9424..0389f4fef 100644 --- a/client/src/Components/design-elements/Table.tsx +++ b/client/src/Components/design-elements/Table.tsx @@ -52,7 +52,11 @@ type DataTableProps = emptyViewText?: string; emptyViewPositive?: boolean; getRowSx?: (row: T) => SxProps; - /** Marks a row selected so it gets the shared selected + hover treatment. */ + /** + * Marks a row selected so it gets the shared selected + hover treatment. + * Desktop table only - the small-screen card branch does not style + * selection yet, same as `getRowSx`. + */ isRowSelected?: (row: T) => boolean; }; diff --git a/client/src/Components/monitors/HeaderMonitorControls.tsx b/client/src/Components/monitors/HeaderMonitorControls.tsx index a32a33298..7f6968f0b 100644 --- a/client/src/Components/monitors/HeaderMonitorControls.tsx +++ b/client/src/Components/monitors/HeaderMonitorControls.tsx @@ -64,12 +64,7 @@ export const HeaderMonitorControls = ({ variant="contained" color="secondary" loading={isPosting} - startIcon={ - - } + startIcon={} onClick={async () => { await post(`/notifications/test/all`, { monitorId: monitor.id }); }} @@ -82,12 +77,7 @@ export const HeaderMonitorControls = ({