From 806eaa8c4699075895123a48a6266fd89236ea6a Mon Sep 17 00:00:00 2001 From: hannahwestra25 Date: Mon, 8 Jun 2026 12:00:06 -0400 Subject: [PATCH 1/2] Improve sidebar active tab contrast in dark theme Add a left accent border and branded icon color to the active navigation button so the selected tab is clearly distinguishable. Add test verifying the data-active attribute is set correctly. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- frontend/src/components/Sidebar/Navigation.styles.ts | 4 ++++ frontend/src/components/Sidebar/Navigation.test.tsx | 11 +++++++++++ 2 files changed, 15 insertions(+) diff --git a/frontend/src/components/Sidebar/Navigation.styles.ts b/frontend/src/components/Sidebar/Navigation.styles.ts index a0710db9a2..0ed526030f 100644 --- a/frontend/src/components/Sidebar/Navigation.styles.ts +++ b/frontend/src/components/Sidebar/Navigation.styles.ts @@ -20,6 +20,10 @@ export const useNavigationStyles = makeStyles({ '&[data-active="true"]': { backgroundColor: tokens.colorBrandBackground2, borderRadius: tokens.borderRadiusMedium, + color: tokens.colorBrandForeground1, + borderLeftWidth: '3px', + borderLeftStyle: 'solid', + borderLeftColor: tokens.colorBrandForeground1, }, }, spacer: { diff --git a/frontend/src/components/Sidebar/Navigation.test.tsx b/frontend/src/components/Sidebar/Navigation.test.tsx index aa4c46a5b6..d0fdbb36eb 100644 --- a/frontend/src/components/Sidebar/Navigation.test.tsx +++ b/frontend/src/components/Sidebar/Navigation.test.tsx @@ -23,6 +23,17 @@ describe("Navigation", () => { jest.clearAllMocks(); }); + it("marks only the current view button as active", () => { + renderWithProvider( + + ); + + expect(screen.getByTitle("Configuration")).toHaveAttribute("data-active", "true"); + expect(screen.getByTitle("Home")).toHaveAttribute("data-active", "false"); + expect(screen.getByTitle("Chat")).toHaveAttribute("data-active", "false"); + expect(screen.getByTitle("Attack History")).toHaveAttribute("data-active", "false"); + }); + it("renders the home button", () => { renderWithProvider(); From f7478340bbd852297aa8e616c67b9026758a7ce1 Mon Sep 17 00:00:00 2001 From: hannahwestra25 Date: Mon, 8 Jun 2026 12:03:44 -0400 Subject: [PATCH 2/2] Remove unnecessary test addition Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- frontend/src/components/Sidebar/Navigation.test.tsx | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/frontend/src/components/Sidebar/Navigation.test.tsx b/frontend/src/components/Sidebar/Navigation.test.tsx index d0fdbb36eb..aa4c46a5b6 100644 --- a/frontend/src/components/Sidebar/Navigation.test.tsx +++ b/frontend/src/components/Sidebar/Navigation.test.tsx @@ -23,17 +23,6 @@ describe("Navigation", () => { jest.clearAllMocks(); }); - it("marks only the current view button as active", () => { - renderWithProvider( - - ); - - expect(screen.getByTitle("Configuration")).toHaveAttribute("data-active", "true"); - expect(screen.getByTitle("Home")).toHaveAttribute("data-active", "false"); - expect(screen.getByTitle("Chat")).toHaveAttribute("data-active", "false"); - expect(screen.getByTitle("Attack History")).toHaveAttribute("data-active", "false"); - }); - it("renders the home button", () => { renderWithProvider();