scriptoriumadmin/veritas-kanban
1
0
Fork 0
mirror of https://github.com/BradGroux/veritas-kanban.git synced 2026-10-06 11:47:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix: unify page action and navigation styling (#1369)

Browse source
This commit is contained in:
Brad Groux 2026-09-03 03:07:58 -05:00 • committed by GitHub
parent 10b94e8f11
commit b22dc12af5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 63 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
web/src/__tests__/evidence-timeline-mantine.test.tsx
View file

@ -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');

3
web/src/__tests__/final-surface-wrapper-cleanup.test.tsx
View file

@ -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();

24
web/src/__tests__/layout-chrome-mantine.test.tsx
View file

@ -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(
<ViewProvider>
<DesktopShellProvider>
<DesktopLeftSidebar />
</DesktopShellProvider>
</ViewProvider>
);
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) => {

4
web/src/__tests__/operations-digest-mantine.test.tsx
View file

@ -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 }));

4
web/src/__tests__/time-breakdown-mantine.test.tsx
View file

@ -163,6 +163,10 @@ describe('TimeBreakdownPage', () => {
renderWithProviders(<TimeBreakdownPage onBack={vi.fn()} onTaskClick={onTaskClick} />);
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);

6
web/src/components/digest/OperationsDigestPage.tsx
View file

@ -221,7 +221,8 @@ export function OperationsDigestPage({
<Group gap="xs" wrap="wrap">
<Button
variant="light"
variant="filled"
color="veritas"
size="sm"
onClick={() => void refresh()}
leftSection={<RefreshCw className={cn('h-4 w-4', isRefreshing && 'animate-spin')} />}
@ -230,6 +231,7 @@ export function OperationsDigestPage({
</Button>
<Button
variant="light"
color="veritas"
size="sm"
onClick={() => void copyMarkdown()}
disabled={!markdown}
@ -239,6 +241,7 @@ export function OperationsDigestPage({
</Button>
<Button
variant="light"
color="veritas"
size="sm"
onClick={exportMarkdown}
disabled={!markdown}
@ -248,6 +251,7 @@ export function OperationsDigestPage({
</Button>
<Button
variant="light"
color="veritas"
size="sm"
onClick={exportJson}
disabled={!digest}

3
web/src/components/drift/DriftMonitor.tsx
View file

@ -381,6 +381,9 @@ export function DriftMonitor({ onBack }: DriftMonitorProps) {
))}
</div>
<Button
variant="filled"
color="veritas"
size="sm"
onClick={() => {
if (!agentId.trim()) {
toast({

3
web/src/components/evidence/EvidenceTimelinePanel.tsx
View file

@ -256,7 +256,8 @@ export function EvidenceTimelinePanel({
<Group gap="xs" wrap="wrap">
<Button
variant="light"
variant="filled"
color="veritas"
size="sm"
onClick={() => void query.refetch()}
leftSection={

2
web/src/components/layout/DesktopLeftSidebar.tsx
View file

@ -72,7 +72,7 @@ export function DesktopLeftSidebar() {
className={cn(
'desktop-no-drag flex min-h-9 items-center gap-2 rounded-md px-2 text-left text-sm transition-colors',
active
? 'bg-primary/15 text-primary'
? 'bg-primary text-white shadow-sm hover:bg-primary/90'
: 'text-muted-foreground hover:bg-muted/60 hover:text-foreground',
!leftRailOpen && 'justify-center px-0'
)}

2
web/src/components/policies/PolicyManager.tsx
View file

@ -519,7 +519,7 @@ export function PolicyManager({ onBack }: PolicyManagerProps) {
</p>
</div>
</div>
<Button onClick={openCreateDialog}>
<Button variant="filled" color="veritas" size="sm" onClick={openCreateDialog}>
<Plus className="mr-2 h-4 w-4" />
New Policy
</Button>

2
web/src/components/templates/TemplatesPage.tsx
View file

@ -129,7 +129,7 @@ export function TemplatesPage({ onBack }: TemplatesPageProps) {
</p>
</div>
</div>
<Button onClick={handleCreateNew} size="lg">
<Button variant="filled" color="veritas" size="sm" onClick={handleCreateNew}>
<Plus className="h-4 w-4 mr-2" />
New Template
</Button>

5
web/src/components/time/TimeBreakdownPage.tsx
View file

@ -189,7 +189,8 @@ export function TimeBreakdownPage({ onBack, onTaskClick }: TimeBreakdownPageProp
<Group gap="xs" wrap="wrap">
<Button
variant="light"
variant="filled"
color="veritas"
size="sm"
onClick={() => void query.refetch()}
leftSection={
@ -200,6 +201,7 @@ export function TimeBreakdownPage({ onBack, onTaskClick }: TimeBreakdownPageProp
</Button>
<Button
variant="light"
color="veritas"
size="sm"
onClick={exportCsv}
disabled={!includedBlocks.length}
@ -209,6 +211,7 @@ export function TimeBreakdownPage({ onBack, onTaskClick }: TimeBreakdownPageProp
</Button>
<Button
variant="light"
color="veritas"
size="sm"
onClick={exportMarkdown}
disabled={!includedBlocks.length}

3
web/src/components/workflows/WorkflowsPage.tsx
View file

@ -295,6 +295,9 @@ export function WorkflowsPage({ onBack }: WorkflowsPageProps) {
</Group>
<Button
variant="filled"
color="veritas"
size="sm"
leftSection={<BarChart3 className="h-4 w-4" />}
onClick={() => setShowDashboard(true)}
>

10
web/src/globals.css
View file

@ -492,7 +492,7 @@ html[data-client='desktop'] .desktop-board-with-right-rail {
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary: #6541d5;
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
@ -503,7 +503,7 @@ html[data-client='desktop'] .desktop-board-with-right-rail {
--destructive: oklch(0.58 0.22 27);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--ring: #6541d5;
--chart-1: oklch(0.809 0.105 251.813);
--chart-2: oklch(0.623 0.214 259.815);
--chart-3: oklch(0.546 0.245 262.881);
@ -546,8 +546,8 @@ html[data-client='desktop'] .desktop-board-with-right-rail {
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.145 0 0);
--popover-foreground: oklch(0.985 0 0);
/* VK brand: purple primary accent (HSL 270 50% 40%) */
--primary: oklch(0.389 0.15 303.5);
/* Keep Tailwind controls on the same bright Veritas shade as Mantine. */
--primary: #8d68f8;
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
@ -559,7 +559,7 @@ html[data-client='desktop'] .desktop-board-with-right-rail {
--border: oklch(0.269 0 0);
--input: oklch(0.269 0 0);
/* VK brand: ring matches primary */
--ring: oklch(0.389 0.15 303.5);
--ring: #8d68f8;
--chart-1: oklch(0.588 0.158 241.966);
--chart-2: oklch(0.593 0.127 163.054);
--chart-3: oklch(0.688 0.153 55.934);