From e41810ee01e9c6ce33a31d11be059f4d4fcc31f3 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@resolutionflow.com>
Date: Sun, 22 Mar 2026 22:26:37 +0000
Subject: [PATCH] fix: category badges use subtle cyan pill instead of solid
 bg-accent

Solid cyan background with gray text was unreadable. Now uses
bg-primary/10 + border-primary/20 + text-primary for clear contrast.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/library/TreeGridView.tsx  | 2 +-
 frontend/src/components/library/TreeListView.tsx  | 2 +-
 frontend/src/components/library/TreeTableView.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/library/TreeGridView.tsx b/frontend/src/components/library/TreeGridView.tsx
index 1f5b4d55..2275db2a 100644
--- a/frontend/src/components/library/TreeGridView.tsx
+++ b/frontend/src/components/library/TreeGridView.tsx
@@ -68,7 +68,7 @@ export function TreeGridView({
                 </span>
               )}
               {tree.category_info && (
-                <span className="rounded-full bg-accent px-2 py-0.5 text-xs text-muted-foreground">
+                <span className="rounded-full bg-primary/10 border border-primary/20 px-2 py-0.5 text-xs text-primary">
                   {tree.category_info.name}
                 </span>
               )}
diff --git a/frontend/src/components/library/TreeListView.tsx b/frontend/src/components/library/TreeListView.tsx
index 79f975da..78c1429c 100644
--- a/frontend/src/components/library/TreeListView.tsx
+++ b/frontend/src/components/library/TreeListView.tsx
@@ -74,7 +74,7 @@ export function TreeListView({
           {/* Center: Category and Tags */}
           <div className="hidden lg:flex items-center gap-2 min-w-0" style={{ maxWidth: '300px' }}>
             {tree.category_info && (
-              <span className="rounded-full bg-accent px-2 py-0.5 text-xs text-muted-foreground whitespace-nowrap">
+              <span className="rounded-full bg-primary/10 border border-primary/20 px-2 py-0.5 text-xs text-primary whitespace-nowrap">
                 {tree.category_info.name}
               </span>
             )}
diff --git a/frontend/src/components/library/TreeTableView.tsx b/frontend/src/components/library/TreeTableView.tsx
index 3cef00ac..8663598f 100644
--- a/frontend/src/components/library/TreeTableView.tsx
+++ b/frontend/src/components/library/TreeTableView.tsx
@@ -176,7 +176,7 @@ export function TreeTableView({
               </td>
               <td className="hidden lg:table-cell px-4 py-3">
                 {tree.category_info && (
-                  <span className="inline-block rounded-full bg-accent px-2 py-0.5 text-xs text-muted-foreground">
+                  <span className="inline-block rounded-full bg-primary/10 border border-primary/20 px-2 py-0.5 text-xs text-primary">
                     {tree.category_info.name}
                   </span>
                 )}