From c677110bfe8b6b695e30c4c092b2d3dedac098dd Mon Sep 17 00:00:00 2001
From: Ajax Davis <thomasalwyndavis@gmail.com>
Date: Sun, 18 Jan 2026 01:51:41 +1000
Subject: [PATCH] fix(ui): resolve table dark mode styling issues

- Update Table component to use bg-surface instead of hardcoded bg-white
- Fix TableRow hover and selected states to use design system tokens
- Update virtualized tables in agents, collections, and tool-search pages
---
 apps/web/src/app/agents/page.tsx           | 2 +-
 apps/web/src/app/collections/page.tsx      | 2 +-
 apps/web/src/app/tool/tool-search/page.tsx | 2 +-
 packages/ui/src/Table/Table.tsx            | 6 +++---
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/app/agents/page.tsx b/apps/web/src/app/agents/page.tsx
index 56d2d94..e395de6 100644
--- a/apps/web/src/app/agents/page.tsx
+++ b/apps/web/src/app/agents/page.tsx
@@ -224,7 +224,7 @@ export default function PublicAgentsPage(): React.ReactElement {
                   TableRow: (props) => (
                     <tr
                       {...props}
-                      className="border-b border-border bg-white dark:bg-zinc-900 hover:bg-surface transition-all duration-150 group"
+                      className="border-b border-border bg-surface hover:bg-surface-secondary transition-all duration-150 group"
                     />
                   ),
                 }}
diff --git a/apps/web/src/app/collections/page.tsx b/apps/web/src/app/collections/page.tsx
index 24adb50..ef05728 100644
--- a/apps/web/src/app/collections/page.tsx
+++ b/apps/web/src/app/collections/page.tsx
@@ -269,7 +269,7 @@ export default function PublicCollectionsPage(): React.ReactElement {
                   TableRow: (props) => (
                     <tr
                       {...props}
-                      className="border-b border-border bg-white dark:bg-zinc-900 hover:bg-surface transition-all duration-150 group"
+                      className="border-b border-border bg-surface hover:bg-surface-secondary transition-all duration-150 group"
                     />
                   ),
                 }}
diff --git a/apps/web/src/app/tool/tool-search/page.tsx b/apps/web/src/app/tool/tool-search/page.tsx
index 5fb3ab8..52c475e 100644
--- a/apps/web/src/app/tool/tool-search/page.tsx
+++ b/apps/web/src/app/tool/tool-search/page.tsx
@@ -315,7 +315,7 @@ export default function ToolSearchPage(): React.ReactElement {
                 TableRow: (props) => (
                   <tr
                     {...props}
-                    className="border-b border-border bg-white dark:bg-zinc-900 hover:bg-surface transition-all duration-150 group"
+                    className="border-b border-border bg-surface hover:bg-surface-secondary transition-all duration-150 group"
                   />
                 ),
               }}
diff --git a/packages/ui/src/Table/Table.tsx b/packages/ui/src/Table/Table.tsx
index d351547..dd650d0 100644
--- a/packages/ui/src/Table/Table.tsx
+++ b/packages/ui/src/Table/Table.tsx
@@ -83,9 +83,9 @@ const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
     <tr
       ref={ref}
       className={cn(
-        'border-b border-border bg-white dark:bg-zinc-900 transition-colors',
-        interactive && 'cursor-pointer hover:bg-surface',
-        selected && 'bg-surface',
+        'border-b border-border bg-surface transition-colors',
+        interactive && 'cursor-pointer hover:bg-surface-secondary',
+        selected && 'bg-surface-secondary',
         className
       )}
       {...props}