Browse Source

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>
handoff-20260429-1057
shrimbly 4 months ago
parent
commit
6d4b7d3971
  1. 18
      src/components/nodes/ControlPanel.tsx

18
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>

Loading…
Cancel
Save