From 6d4b7d39710c90f21af2f8a40f5206929ef47711 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Fri, 6 Mar 2026 22:41:01 +1300
Subject: [PATCH] style: use dark button style with icons for Run/Apply buttons

Match the existing panel button style (bg-neutral-700, border, compact
sizing) instead of full-width blue. Add play triangle icon for Run
buttons and checkmark icon for the Apply button.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/nodes/ControlPanel.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/nodes/ControlPanel.tsx b/src/components/nodes/ControlPanel.tsx
index eedfed71..7ed0c3ee 100644
--- a/src/components/nodes/ControlPanel.tsx
+++ b/src/components/nodes/ControlPanel.tsx
@@ -485,8 +485,9 @@ function GenerateImageControls({ node }: { node: Node }) {
       <button
         onClick={() => regenerateNode(node.id)}
         disabled={isRunning}
-        className="nodrag nopan w-full py-2 text-xs font-medium bg-blue-600 hover:bg-blue-500 disabled:opacity-40 disabled:pointer-events-none rounded text-white transition-colors"
+        className="nodrag nopan inline-flex items-center gap-1.5 px-3 py-1.5 text-xs bg-neutral-700 hover:bg-neutral-600 border border-neutral-600 rounded text-neutral-300 disabled:opacity-40 disabled:pointer-events-none transition-colors"
       >
+        <svg className="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
         {isRunning ? "Running..." : "Run"}
       </button>
 
@@ -586,8 +587,9 @@ function GenerateVideoControls({ node }: { node: Node }) {
       <button
         onClick={() => regenerateNode(node.id)}
         disabled={isRunning}
-        className="nodrag nopan w-full py-2 text-xs font-medium bg-blue-600 hover:bg-blue-500 disabled:opacity-40 disabled:pointer-events-none rounded text-white transition-colors"
+        className="nodrag nopan inline-flex items-center gap-1.5 px-3 py-1.5 text-xs bg-neutral-700 hover:bg-neutral-600 border border-neutral-600 rounded text-neutral-300 disabled:opacity-40 disabled:pointer-events-none transition-colors"
       >
+        <svg className="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
         {isRunning ? "Running..." : "Run"}
       </button>
 
@@ -689,8 +691,9 @@ function Generate3DControls({ node }: { node: Node }) {
       <button
         onClick={() => regenerateNode(node.id)}
         disabled={isRunning}
-        className="nodrag nopan w-full py-2 text-xs font-medium bg-blue-600 hover:bg-blue-500 disabled:opacity-40 disabled:pointer-events-none rounded text-white transition-colors"
+        className="nodrag nopan inline-flex items-center gap-1.5 px-3 py-1.5 text-xs bg-neutral-700 hover:bg-neutral-600 border border-neutral-600 rounded text-neutral-300 disabled:opacity-40 disabled:pointer-events-none transition-colors"
       >
+        <svg className="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
         {isRunning ? "Running..." : "Run"}
       </button>
 
@@ -719,8 +722,9 @@ function GenerateAudioControls({ node }: { node: Node }) {
       <button
         onClick={() => regenerateNode(node.id)}
         disabled={isRunning}
-        className="nodrag nopan w-full py-2 text-xs font-medium bg-blue-600 hover:bg-blue-500 disabled:opacity-40 disabled:pointer-events-none rounded text-white transition-colors"
+        className="nodrag nopan inline-flex items-center gap-1.5 px-3 py-1.5 text-xs bg-neutral-700 hover:bg-neutral-600 border border-neutral-600 rounded text-neutral-300 disabled:opacity-40 disabled:pointer-events-none transition-colors"
       >
+        <svg className="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
         {isRunning ? "Running..." : "Run"}
       </button>
     </div>
@@ -835,8 +839,9 @@ function LLMControls({ node }: { node: Node }) {
       <button
         onClick={() => regenerateNode(node.id)}
         disabled={isRunning}
-        className="nodrag nopan w-full py-2 text-xs font-medium bg-blue-600 hover:bg-blue-500 disabled:opacity-40 disabled:pointer-events-none rounded text-white transition-colors"
+        className="nodrag nopan inline-flex items-center gap-1.5 px-3 py-1.5 text-xs bg-neutral-700 hover:bg-neutral-600 border border-neutral-600 rounded text-neutral-300 disabled:opacity-40 disabled:pointer-events-none transition-colors"
       >
+        <svg className="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
         {isRunning ? "Running..." : "Run"}
       </button>
     </div>
@@ -935,8 +940,9 @@ function EaseCurveControls({ node }: { node: Node }) {
       <button
         onClick={() => regenerateNode(node.id)}
         disabled={isRunning}
-        className="nodrag nopan w-full py-2 text-xs font-medium bg-blue-600 hover:bg-blue-500 disabled:opacity-40 disabled:pointer-events-none rounded text-white transition-colors"
+        className="nodrag nopan inline-flex items-center gap-1.5 px-3 py-1.5 text-xs bg-neutral-700 hover:bg-neutral-600 border border-neutral-600 rounded text-neutral-300 disabled:opacity-40 disabled:pointer-events-none transition-colors"
       >
+        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>
         {isRunning ? "Applying..." : "Apply"}
       </button>