From ae25c564b650212fc2ef312c51213c4273672954 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@resolutionflow.com>
Date: Sun, 22 Mar 2026 22:22:52 +0000
Subject: [PATCH] fix: card-level buttons use ghost/outline instead of solid
 primary

Repeated per-card action buttons (Start Session, Resume, Save, Insert,
Start batch) now use cyan outline style to reduce visual noise.
Page-level and modal primary actions remain solid cyan.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/dashboard/OpenSessions.tsx      | 2 +-
 frontend/src/components/library/TreeGridView.tsx        | 4 ++--
 frontend/src/components/library/TreeListView.tsx        | 4 ++--
 frontend/src/components/library/TreeTableView.tsx       | 4 ++--
 frontend/src/components/maintenance/BatchStatusCard.tsx | 2 +-
 frontend/src/components/step-library/StepCard.tsx       | 4 ++--
 6 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/dashboard/OpenSessions.tsx b/frontend/src/components/dashboard/OpenSessions.tsx
index 3a70ae05..df74d633 100644
--- a/frontend/src/components/dashboard/OpenSessions.tsx
+++ b/frontend/src/components/dashboard/OpenSessions.tsx
@@ -52,7 +52,7 @@ export function OpenSessions({ sessions }: OpenSessionsProps) {
               <Link
                 to={getTreeNavigatePath(session.treeId, session.treeType)}
                 state={{ sessionId: session.id }}
-                className="shrink-0 rounded-lg bg-primary px-3 py-1 text-[0.6875rem] font-medium text-white hover:brightness-110 transition-opacity"
+                className="shrink-0 rounded-lg border border-primary/40 px-3 py-1 text-[0.6875rem] font-medium text-primary hover:bg-primary/10 hover:border-primary/60 transition-colors"
               >
                 Resume
               </Link>
diff --git a/frontend/src/components/library/TreeGridView.tsx b/frontend/src/components/library/TreeGridView.tsx
index c95c7561..1f5b4d55 100644
--- a/frontend/src/components/library/TreeGridView.tsx
+++ b/frontend/src/components/library/TreeGridView.tsx
@@ -163,8 +163,8 @@ export function TreeGridView({
                 type="button"
                 onClick={() => onStartSession(tree.id, tree.tree_type)}
                 className={cn(
-                  'rounded-md bg-primary px-3 py-2 text-sm font-medium text-white',
-                  'hover:brightness-110'
+                  'rounded-md border border-primary/40 px-3 py-2 text-sm font-medium text-primary',
+                  'hover:bg-primary/10 hover:border-primary/60 transition-colors'
                 )}
               >
                 Start Session
diff --git a/frontend/src/components/library/TreeListView.tsx b/frontend/src/components/library/TreeListView.tsx
index b1add690..79f975da 100644
--- a/frontend/src/components/library/TreeListView.tsx
+++ b/frontend/src/components/library/TreeListView.tsx
@@ -166,8 +166,8 @@ export function TreeListView({
                 type="button"
                 onClick={() => onStartSession(tree.id, tree.tree_type)}
                 className={cn(
-                  'rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-white',
-                  'hover:brightness-110 whitespace-nowrap'
+                  'rounded-md border border-primary/40 px-3 py-1.5 text-sm font-medium text-primary',
+                  'hover:bg-primary/10 hover:border-primary/60 transition-colors whitespace-nowrap'
                 )}
               >
                 Start
diff --git a/frontend/src/components/library/TreeTableView.tsx b/frontend/src/components/library/TreeTableView.tsx
index b941a747..3cef00ac 100644
--- a/frontend/src/components/library/TreeTableView.tsx
+++ b/frontend/src/components/library/TreeTableView.tsx
@@ -270,8 +270,8 @@ export function TreeTableView({
                     type="button"
                     onClick={() => onStartSession(tree.id, tree.tree_type)}
                     className={cn(
-                      'rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-white',
-                      'hover:brightness-110 whitespace-nowrap'
+                      'rounded-md border border-primary/40 px-3 py-1.5 text-xs font-medium text-primary',
+                      'hover:bg-primary/10 hover:border-primary/60 transition-colors whitespace-nowrap'
                     )}
                   >
                     Start
diff --git a/frontend/src/components/maintenance/BatchStatusCard.tsx b/frontend/src/components/maintenance/BatchStatusCard.tsx
index 9327e66a..687d172e 100644
--- a/frontend/src/components/maintenance/BatchStatusCard.tsx
+++ b/frontend/src/components/maintenance/BatchStatusCard.tsx
@@ -132,7 +132,7 @@ export function BatchStatusCard({ session, targetLabel, treeId, batchId }: Batch
         {isNotStarted && (
           <button
             onClick={handleStart}
-            className="flex items-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-[0.8125rem] font-medium text-white hover:brightness-110 transition-opacity"
+            className="flex items-center gap-1.5 rounded-lg border border-primary/40 px-3 py-1.5 text-[0.8125rem] font-medium text-primary hover:bg-primary/10 hover:border-primary/60 transition-colors"
           >
             <Play className="h-3.5 w-3.5" />
             Start
diff --git a/frontend/src/components/step-library/StepCard.tsx b/frontend/src/components/step-library/StepCard.tsx
index cb42bebc..2c5d358c 100644
--- a/frontend/src/components/step-library/StepCard.tsx
+++ b/frontend/src/components/step-library/StepCard.tsx
@@ -188,7 +188,7 @@ export function StepCard({ step, onPreview, onInsert, onEdit, onDelete, onSave,
               </button>
               <button
                 onClick={() => onSave?.(step)}
-                className="flex flex-1 items-center justify-center gap-2 rounded-md bg-primary text-white px-3 py-2 text-sm font-medium hover:brightness-110 transition-colors"
+                className="flex flex-1 items-center justify-center gap-2 rounded-md border border-primary/40 text-primary px-3 py-2 text-sm font-medium hover:bg-primary/10 hover:border-primary/60 transition-colors"
               >
                 <Bookmark className="h-4 w-4" />
                 Save
@@ -207,7 +207,7 @@ export function StepCard({ step, onPreview, onInsert, onEdit, onDelete, onSave,
             </button>
             <button
               onClick={() => onInsert?.(step)}
-              className="flex flex-1 items-center justify-center gap-2 rounded-md bg-primary text-white px-3 py-2 text-sm font-medium hover:brightness-110 transition-colors"
+              className="flex flex-1 items-center justify-center gap-2 rounded-md border border-primary/40 text-primary px-3 py-2 text-sm font-medium hover:bg-primary/10 hover:border-primary/60 transition-colors"
             >
               <Plus className="h-4 w-4" />
               Insert