Skip to content

Release: dark-mode contrast overhaul #1437

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zbigniewsobiecki merged 2 commits into from
Jun 23, 2026
Merged

Release: dark-mode contrast overhaul #1437

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0a27393
fix(web): overhaul dark-mode contrast in dashboard tables
zbigniewsobiecki Jun 23, 2026
0840e7c
Merge pull request #1436 from mongrel-intelligence/fix/dark-mode-cont…
zbigniewsobiecki Jun 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 33 additions & 22 deletions web/src/components/global/organizations-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
import { Edit2 } from 'lucide-react';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table.js';

interface Organization {
id: string;
Expand All @@ -12,28 +20,31 @@ interface OrganizationsTableProps {

export function OrganizationsTable({ organizations, onEdit }: OrganizationsTableProps) {
return (
<div className="overflow-x-auto rounded-lg border border-border">
<table className="w-full text-sm">
<thead>
<tr className="border-b border-border bg-muted/50">
<th className="px-4 py-3 text-left font-medium text-muted-foreground">ID</th>
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Name</th>
<th className="px-4 py-3 text-right font-medium text-muted-foreground">Actions</th>
</tr>
</thead>
<tbody>
<div className="rounded-lg border border-border">
<Table>
<TableHeader>
<TableRow className="bg-muted/50 hover:bg-muted/50">
<TableHead className="px-4 py-3">ID</TableHead>
<TableHead className="px-4 py-3">Name</TableHead>
<TableHead className="px-4 py-3 text-right">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{organizations.length === 0 && (
<tr>
<td colSpan={3} className="px-4 py-8 text-center text-muted-foreground">
<TableRow>
<TableCell
colSpan={3}
className="px-4 py-8 text-center whitespace-normal text-muted-foreground"
>
No organizations found
</td>
</tr>
</TableCell>
</TableRow>
)}
{organizations.map((org) => (
<tr key={org.id} className="border-b border-border transition-colors hover:bg-muted/30">
<td className="px-4 py-3 font-mono text-xs">{org.id}</td>
<td className="px-4 py-3 font-medium">{org.name}</td>
<td className="px-4 py-3 text-right">
<TableRow key={org.id}>
<TableCell className="px-4 py-3 font-mono text-xs">{org.id}</TableCell>
<TableCell className="px-4 py-3 font-medium">{org.name}</TableCell>
<TableCell className="px-4 py-3 text-right">
<button
type="button"
onClick={() => onEdit(org)}
Expand All @@ -42,11 +53,11 @@ export function OrganizationsTable({ organizations, onEdit }: OrganizationsTable
>
<Edit2 className="h-4 w-4" />
</button>
</td>
</tr>
</TableCell>
</TableRow>
))}
</tbody>
</table>
</TableBody>
</Table>
</div>
);
}
76 changes: 41 additions & 35 deletions web/src/components/projects/project-work-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
import { useNavigate } from '@tanstack/react-router';
import { ClipboardList, ExternalLink, GitPullRequest } from 'lucide-react';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table.js';
import { agentTypeLabel } from '@/lib/chart-colors.js';
import { useChartColors } from '@/lib/use-chart-colors.js';
import { formatCostSummary } from '@/lib/utils.js';
Expand Down Expand Up @@ -179,47 +187,46 @@ function WorkItemRow({ item, projectId, projectAvgDurationMs }: WorkItemRowProps
};

return (
<tr
className="border-b border-border transition-colors hover:bg-muted/30"
<TableRow
onClick={handleClick}
onKeyDown={handleKeyDown}
style={canNavigate ? { cursor: 'pointer' } : undefined}
>
{/* Type icon */}
<td className="px-4 py-3 text-muted-foreground">
<TableCell className="px-4 py-3 text-muted-foreground">
<ItemIcon item={item} />
</td>
</TableCell>

{/* PR title / number + Associated work item (stacked) */}
<td className="px-4 py-3">
<TableCell className="px-4 py-3 whitespace-normal">
<div className="flex flex-col gap-1">
<PrimaryItemTitle item={item} />
<SecondaryItemTitle item={item} />
</div>
</td>
</TableCell>

{/* Duration bar */}
<td className="px-4 py-3 hidden sm:table-cell" style={{ minWidth: 160 }}>
<TableCell className="hidden px-4 py-3 sm:table-cell" style={{ minWidth: 160 }}>
<WorkItemDurationBar
runs={item.runs ?? []}
projectAvgDurationMs={projectAvgDurationMs ?? null}
/>
</td>
</TableCell>

{/* Run count */}
<td className="px-4 py-3 text-right tabular-nums">
<TableCell className="px-4 py-3 text-right tabular-nums">
{canNavigate ? (
<span className="cursor-pointer text-primary hover:underline">{item.runCount}</span>
) : (
item.runCount
)}
</td>
</TableCell>

{/* Cost */}
<td className="px-4 py-3 text-right tabular-nums text-muted-foreground">
<TableCell className="px-4 py-3 text-right tabular-nums text-muted-foreground">
{formatCostSummary(item.totalCostUsd)}
</td>
</tr>
</TableCell>
</TableRow>
);
}

Expand Down Expand Up @@ -269,28 +276,27 @@ export function ProjectWorkTable({
</div>
)}

<div className="overflow-x-auto rounded-lg border border-border">
<table className="w-full text-sm">
<thead>
<tr className="border-b border-border bg-muted/50">
<th className="px-4 py-3 text-left font-medium text-muted-foreground w-8" />
<th className="px-4 py-3 text-left font-medium text-muted-foreground">
Title / Associated Item
</th>
<th className="px-4 py-3 text-left font-medium text-muted-foreground hidden sm:table-cell">
Duration
</th>
<th className="px-4 py-3 text-right font-medium text-muted-foreground">Runs</th>
<th className="px-4 py-3 text-right font-medium text-muted-foreground">Cost</th>
</tr>
</thead>
<tbody>
<div className="rounded-lg border border-border">
<Table>
<TableHeader>
<TableRow className="bg-muted/50 hover:bg-muted/50">
<TableHead className="w-8 px-4 py-3" />
<TableHead className="px-4 py-3">Title / Associated Item</TableHead>
<TableHead className="hidden px-4 py-3 sm:table-cell">Duration</TableHead>
<TableHead className="px-4 py-3 text-right">Runs</TableHead>
<TableHead className="px-4 py-3 text-right">Cost</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{pageItems.length === 0 && (
<tr>
<td colSpan={5} className="px-4 py-8 text-center text-muted-foreground">
<TableRow>
<TableCell
colSpan={5}
className="px-4 py-8 text-center whitespace-normal text-muted-foreground"
>
No work found for this project
</td>
</tr>
</TableCell>
</TableRow>
)}
{pageItems.map((item) => (
<WorkItemRow
Expand All @@ -300,8 +306,8 @@ export function ProjectWorkTable({
projectAvgDurationMs={projectAvgDurationMs}
/>
))}
</tbody>
</table>
</TableBody>
</Table>
</div>

{total > limit && (
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/runs/run-status-badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export function RunStatusBadge({ status }: { status: string }) {
<span
className={cn(
'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
statusStyles[status] ?? 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300',
statusStyles[status] ?? 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-100',
)}
>
{status === 'timed_out' ? 'timed out' : status}
Expand Down
Loading
Loading