From b22dc12af5dad598ff6ca60df13826511bb3bf5f Mon Sep 17 00:00:00 2001 From: Brad Groux <3053586+BradGroux@users.noreply.github.com> Date: Thu, 3 Sep 2026 03:07:58 -0500 Subject: [PATCH] fix: unify page action and navigation styling (#1369) --- .../evidence-timeline-mantine.test.tsx | 3 +++ .../final-surface-wrapper-cleanup.test.tsx | 3 +++ .../__tests__/layout-chrome-mantine.test.tsx | 24 +++++++++++++++++++ .../operations-digest-mantine.test.tsx | 4 ++++ .../__tests__/time-breakdown-mantine.test.tsx | 4 ++++ .../digest/OperationsDigestPage.tsx | 6 ++++- web/src/components/drift/DriftMonitor.tsx | 3 +++ .../evidence/EvidenceTimelinePanel.tsx | 3 ++- .../components/layout/DesktopLeftSidebar.tsx | 2 +- web/src/components/policies/PolicyManager.tsx | 2 +- .../components/templates/TemplatesPage.tsx | 2 +- web/src/components/time/TimeBreakdownPage.tsx | 5 +++- .../components/workflows/WorkflowsPage.tsx | 3 +++ web/src/globals.css | 10 ++++---- 14 files changed, 63 insertions(+), 11 deletions(-) diff --git a/web/src/__tests__/evidence-timeline-mantine.test.tsx b/web/src/__tests__/evidence-timeline-mantine.test.tsx index 70e718e4..40d7d0b1 100644 --- a/web/src/__tests__/evidence-timeline-mantine.test.tsx +++ b/web/src/__tests__/evidence-timeline-mantine.test.tsx @@ -120,6 +120,9 @@ describe('EvidenceTimelinePanel', () => { expect(screen.getByText(/Evidence recap for task task_a/i)).toBeDefined(); expect(screen.getByText('Task created')).toBeDefined(); expect(screen.getByText('Agent run completed by codex')).toBeDefined(); + expect( + screen.getByRole('button', { name: /Generate Recap/i }).getAttribute('data-variant') + ).toBe('filled'); await user.click(screen.getByRole('button', { name: /Open task/i })); expect(onTaskClick).toHaveBeenCalledWith('task_a'); diff --git a/web/src/__tests__/final-surface-wrapper-cleanup.test.tsx b/web/src/__tests__/final-surface-wrapper-cleanup.test.tsx index 32fb1680..1a26a778 100644 --- a/web/src/__tests__/final-surface-wrapper-cleanup.test.tsx +++ b/web/src/__tests__/final-surface-wrapper-cleanup.test.tsx @@ -151,6 +151,9 @@ describe('final Mantine feature surface cleanup', () => { expect(container.querySelector('.mantine-Select-root')).toBeDefined(); expect(container.querySelectorAll('.mantine-Button-root').length).toBeGreaterThanOrEqual(3); expect(container.querySelectorAll('.mantine-Badge-root').length).toBeGreaterThanOrEqual(3); + const newTemplate = screen.getByRole('button', { name: 'New Template' }); + expect(newTemplate.getAttribute('data-variant')).toBe('filled'); + expect(newTemplate.getAttribute('data-size')).toBe('sm'); expect(baseElement.querySelector('[data-slot="button"]')).toBeNull(); expect(baseElement.querySelector('[data-slot="input"]')).toBeNull(); expect(baseElement.querySelector('[data-slot="select-trigger"]')).toBeNull(); diff --git a/web/src/__tests__/layout-chrome-mantine.test.tsx b/web/src/__tests__/layout-chrome-mantine.test.tsx index af20b609..dd2f6cd3 100644 --- a/web/src/__tests__/layout-chrome-mantine.test.tsx +++ b/web/src/__tests__/layout-chrome-mantine.test.tsx @@ -6,6 +6,7 @@ import { ViewProvider } from '@/contexts/ViewContext'; import { KeyboardProvider } from '@/hooks/useKeyboard'; import { Header } from '@/components/layout/Header'; import { DesktopBottomPanel } from '@/components/layout/DesktopBottomPanel'; +import { DesktopLeftSidebar } from '@/components/layout/DesktopLeftSidebar'; import { DesktopShellProvider } from '@/components/layout/DesktopShellContext'; import { UserMenu } from '@/components/layout/UserMenu'; import { WorkspaceSwitcher } from '@/components/layout/WorkspaceSwitcher'; @@ -283,6 +284,29 @@ describe('layout chrome Mantine migration', () => { expect(brandIcon).toBeDefined(); }); + it('uses the filled brand treatment with white text for the active desktop navigation item', () => { + Object.defineProperty(window, 'veritasDesktop', { + configurable: true, + value: { toggleWindowMaximize: vi.fn() }, + }); + document.documentElement.dataset.client = 'desktop'; + window.history.replaceState({}, '', '/drift'); + + renderWithProviders( + + + + + + ); + + const activeItem = screen.getByRole('button', { name: 'Drift Monitor' }); + expect(activeItem.getAttribute('aria-current')).toBe('page'); + expect(activeItem.className).toContain('bg-primary'); + expect(activeItem.className).toContain('text-white'); + expect(activeItem.className).not.toContain('bg-primary/15'); + }); + it.each(['right', 'bottom'] as const)( 'toggles and switches the header chat controls with the %s dock', async (dockPosition) => { diff --git a/web/src/__tests__/operations-digest-mantine.test.tsx b/web/src/__tests__/operations-digest-mantine.test.tsx index d9e6b44e..5899a9a9 100644 --- a/web/src/__tests__/operations-digest-mantine.test.tsx +++ b/web/src/__tests__/operations-digest-mantine.test.tsx @@ -333,6 +333,10 @@ describe('OperationsDigestPage', () => { expect(screen.getByTestId('markdown').textContent).toContain('Agent Operations Digest'); expect(container.querySelectorAll('.mantine-Button-root').length).toBeGreaterThan(4); expect(container.querySelector('[data-slot="button"]')).toBeNull(); + expect(screen.getByRole('button', { name: 'Refresh' }).getAttribute('data-variant')).toBe( + 'filled' + ); + expect(screen.getByRole('button', { name: 'Copy' }).getAttribute('data-variant')).toBe('light'); await user.click(screen.getByRole('button', { name: /Active: 1/i })); diff --git a/web/src/__tests__/time-breakdown-mantine.test.tsx b/web/src/__tests__/time-breakdown-mantine.test.tsx index 37dd6036..0c096603 100644 --- a/web/src/__tests__/time-breakdown-mantine.test.tsx +++ b/web/src/__tests__/time-breakdown-mantine.test.tsx @@ -163,6 +163,10 @@ describe('TimeBreakdownPage', () => { renderWithProviders(); expect(screen.getByRole('heading', { name: 'Time Breakdowns' })).toBeDefined(); + expect(screen.getByRole('button', { name: 'Generate' }).getAttribute('data-variant')).toBe( + 'filled' + ); + expect(screen.getByRole('button', { name: 'CSV' }).getAttribute('data-variant')).toBe('light'); expect(screen.getAllByText('Explicit').length).toBeGreaterThan(0); expect(screen.getAllByText('Inferred').length).toBeGreaterThan(0); expect(screen.getAllByText('Ambiguous').length).toBeGreaterThan(0); diff --git a/web/src/components/digest/OperationsDigestPage.tsx b/web/src/components/digest/OperationsDigestPage.tsx index f810abff..2672594a 100644 --- a/web/src/components/digest/OperationsDigestPage.tsx +++ b/web/src/components/digest/OperationsDigestPage.tsx @@ -221,7 +221,8 @@ export function OperationsDigestPage({ diff --git a/web/src/components/templates/TemplatesPage.tsx b/web/src/components/templates/TemplatesPage.tsx index f3a7d87d..7c55005b 100644 --- a/web/src/components/templates/TemplatesPage.tsx +++ b/web/src/components/templates/TemplatesPage.tsx @@ -129,7 +129,7 @@ export function TemplatesPage({ onBack }: TemplatesPageProps) {

- diff --git a/web/src/components/time/TimeBreakdownPage.tsx b/web/src/components/time/TimeBreakdownPage.tsx index 35addaf5..8a633fd3 100644 --- a/web/src/components/time/TimeBreakdownPage.tsx +++ b/web/src/components/time/TimeBreakdownPage.tsx @@ -189,7 +189,8 @@ export function TimeBreakdownPage({ onBack, onTaskClick }: TimeBreakdownPageProp