Hartmut/HartOMat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): theme WorkflowEditor for dark mode

Browse Source 
Replace all hardcoded gray-*/white Tailwind classes with semantic CSS
variable tokens (bg-surface, text-content, border-border-default, etc.)
so the page respects dark/light mode correctly.

- Sidebar, header bar, toolbar: bg-surface + border-border-default
- Node cards: bg-surface + border-accent (selected) / border-border-default
- ConfigSidepanel: bg-surface, text-content-secondary labels
- NewWorkflowModal: bg-surface, border-border-default inputs, accent buttons
- Workflow list items: bg-accent-light highlight for selected, hover:bg-surface-hover
- Empty state icon: text-content-muted
- ReactFlow: colorMode prop tied to useThemeStore (dark/light)
- Background: removed hardcoded #e5e7eb dot color (uses ReactFlow colorMode)
- All blue-600 buttons → bg-accent / hover:bg-accent-hover

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Hartmut Nörenberg
2026-03-06 18:21:35 +01:00
parent c0ea60d984
commit df02067687
1 changed files with 69 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/WorkflowEditor.tsx
+69 -64
View File
@@ -15,6 +15,7 @@ import {
type NodeTypes, type NodeTypes,
} from '@xyflow/react' } from '@xyflow/react'
import '@xyflow/react/dist/style.css' import '@xyflow/react/dist/style.css'
import { useThemeStore, resolveTheme } from '../store/theme'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query' import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { import {
getWorkflows, getWorkflows,
@@ -55,8 +56,8 @@ interface BaseNodeProps {
function BaseNode({ label, icon, color, description, selected, hasSource = true, hasTarget = true }: BaseNodeProps) { function BaseNode({ label, icon, color, description, selected, hasSource = true, hasTarget = true }: BaseNodeProps) {
return ( return (
<div <div
className={`rounded-lg border-2 p-3 min-w-[140px] bg-white shadow-sm transition-colors ${ className={`rounded-lg border-2 p-3 min-w-[140px] bg-surface shadow-sm transition-colors ${
selected ? 'border-blue-500' : 'border-gray-200' selected ? 'border-accent' : 'border-border-default'
}`} }`}
> >
{hasTarget && ( {hasTarget && (
@@ -236,12 +237,12 @@ function ConfigSidepanel({
onChange: (p: WorkflowParams) => void onChange: (p: WorkflowParams) => void
}) { }) {
return ( return (
<div className="w-72 border-l border-gray-200 bg-white p-4 space-y-5 overflow-y-auto"> <div className="w-72 border-l border-border-default bg-surface p-4 space-y-5 overflow-y-auto">
<h3 className="font-semibold text-gray-800">Node-Konfiguration</h3> <h3 className="font-semibold text-content">Node-Konfiguration</h3>
{/* Render Engine */} {/* Render Engine */}
<div> <div>
<label className="text-sm text-gray-600 mb-2 block">Render Engine</label> <label className="text-sm text-content-secondary mb-2 block">Render Engine</label>
<div className="flex gap-2"> <div className="flex gap-2">
{(['cycles', 'eevee'] as const).map(eng => ( {(['cycles', 'eevee'] as const).map(eng => (
<button <button
@@ -249,8 +250,8 @@ function ConfigSidepanel({
onClick={() => onChange({ ...params, render_engine: eng })} onClick={() => onChange({ ...params, render_engine: eng })}
className={`px-3 py-1.5 rounded text-sm font-medium transition-colors ${ className={`px-3 py-1.5 rounded text-sm font-medium transition-colors ${
(params.render_engine ?? 'cycles') === eng (params.render_engine ?? 'cycles') === eng
? 'bg-blue-600 text-white' ? 'bg-accent text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200' : 'bg-surface-hover text-content-secondary hover:bg-surface-muted'
}`} }`}
> >
{eng === 'cycles' ? 'Cycles' : 'EEVEE'} {eng === 'cycles' ? 'Cycles' : 'EEVEE'}
@@ -261,8 +262,8 @@ function ConfigSidepanel({
{/* Samples */} {/* Samples */}
<div> <div>
<label className="text-sm text-gray-600 mb-2 block"> <label className="text-sm text-content-secondary mb-2 block">
Samples: <span className="font-semibold text-gray-800">{params.samples ?? 256}</span> Samples: <span className="font-semibold text-content">{params.samples ?? 256}</span>
</label> </label>
<input <input
type="range" type="range"
@@ -271,9 +272,9 @@ function ConfigSidepanel({
step={1} step={1}
value={params.samples ?? 256} value={params.samples ?? 256}
onChange={e => onChange({ ...params, samples: Number(e.target.value) })} onChange={e => onChange({ ...params, samples: Number(e.target.value) })}
className="w-full accent-blue-600" className="w-full accent-accent"
/> />
<div className="flex justify-between text-xs text-gray-400 mt-1"> <div className="flex justify-between text-xs text-content-muted mt-1">
<span>1</span> <span>1</span>
<span>4096</span> <span>4096</span>
</div> </div>
@@ -281,16 +282,16 @@ function ConfigSidepanel({
{/* Resolution */} {/* Resolution */}
<div> <div>
<label className="text-sm text-gray-600 mb-2 block">Auflösung</label> <label className="text-sm text-content-secondary mb-2 block">Auflösung</label>
<div className="flex gap-2"> <div className="flex gap-2">
{([[1024, 1024], [2048, 2048], [4096, 4096]] as [number, number][]).map(([w, h]) => ( {([[1024, 1024], [2048, 2048], [4096, 4096]] as [number, number][]).map(([w]) => (
<button <button
key={w} key={w}
onClick={() => onChange({ ...params, resolution: [w, h] })} onClick={() => onChange({ ...params, resolution: [w, w] })}
className={`px-2 py-1.5 rounded text-xs font-medium transition-colors ${ className={`px-2 py-1.5 rounded text-xs font-medium transition-colors ${
(params.resolution?.[0] ?? 2048) === w (params.resolution?.[0] ?? 2048) === w
? 'bg-blue-600 text-white' ? 'bg-accent text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200' : 'bg-surface-hover text-content-secondary hover:bg-surface-muted'
}`} }`}
> >
{w}px {w}px
@@ -301,8 +302,8 @@ function ConfigSidepanel({
{/* FPS (only relevant for animation nodes) */} {/* FPS (only relevant for animation nodes) */}
<div> <div>
<label className="text-sm text-gray-600 mb-2 block"> <label className="text-sm text-content-secondary mb-2 block">
FPS: <span className="font-semibold text-gray-800">{params.fps ?? 24}</span> FPS: <span className="font-semibold text-content">{params.fps ?? 24}</span>
</label> </label>
<div className="flex gap-2"> <div className="flex gap-2">
{[12, 24, 30, 60].map(fps => ( {[12, 24, 30, 60].map(fps => (
@@ -311,8 +312,8 @@ function ConfigSidepanel({
onClick={() => onChange({ ...params, fps })} onClick={() => onChange({ ...params, fps })}
className={`px-2 py-1.5 rounded text-xs font-medium transition-colors ${ className={`px-2 py-1.5 rounded text-xs font-medium transition-colors ${
(params.fps ?? 24) === fps (params.fps ?? 24) === fps
? 'bg-blue-600 text-white' ? 'bg-accent text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200' : 'bg-surface-hover text-content-secondary hover:bg-surface-muted'
}`} }`}
> >
{fps} {fps}
@@ -323,8 +324,8 @@ function ConfigSidepanel({
{/* Duration */} {/* Duration */}
<div> <div>
<label className="text-sm text-gray-600 mb-2 block"> <label className="text-sm text-content-secondary mb-2 block">
Dauer (s): <span className="font-semibold text-gray-800">{params.duration_s ?? 5}</span> Dauer (s): <span className="font-semibold text-content">{params.duration_s ?? 5}</span>
</label> </label>
<input <input
type="range" type="range"
@@ -333,7 +334,7 @@ function ConfigSidepanel({
step={1} step={1}
value={params.duration_s ?? 5} value={params.duration_s ?? 5}
onChange={e => onChange({ ...params, duration_s: Number(e.target.value) })} onChange={e => onChange({ ...params, duration_s: Number(e.target.value) })}
className="w-full accent-blue-600" className="w-full accent-accent"
/> />
</div> </div>
</div> </div>
@@ -364,19 +365,19 @@ function NewWorkflowModal({ onClose, onCreate, isLoading }: NewWorkflowModalProp
return ( return (
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50"> <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
<div className="bg-white rounded-xl shadow-xl w-full max-w-md p-6"> <div className="bg-surface rounded-xl shadow-xl w-full max-w-md p-6">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<h2 className="text-lg font-semibold">Neuer Workflow</h2> <h2 className="text-lg font-semibold text-content">Neuer Workflow</h2>
<button onClick={onClose} className="text-gray-400 hover:text-gray-600"> <button onClick={onClose} className="text-content-muted hover:text-content">
<X size={20} /> <X size={20} />
</button> </button>
</div> </div>
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<label className="block text-sm text-gray-600 mb-1">Name</label> <label className="block text-sm text-content-secondary mb-1">Name</label>
<input <input
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" className="w-full border border-border-default rounded-lg px-3 py-2 text-sm bg-surface text-content focus:outline-none focus:ring-2 focus:ring-accent"
placeholder="z.B. Still Render Standard" placeholder="z.B. Still Render Standard"
value={name} value={name}
onChange={e => setName(e.target.value)} onChange={e => setName(e.target.value)}
@@ -385,7 +386,7 @@ function NewWorkflowModal({ onClose, onCreate, isLoading }: NewWorkflowModalProp
</div> </div>
<div> <div>
<label className="block text-sm text-gray-600 mb-1">Typ</label> <label className="block text-sm text-content-secondary mb-1">Typ</label>
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-2 gap-2">
{([ {([
{ value: 'still', label: 'Still', desc: 'Einzelbild PNG' }, { value: 'still', label: 'Still', desc: 'Einzelbild PNG' },
@@ -398,12 +399,12 @@ function NewWorkflowModal({ onClose, onCreate, isLoading }: NewWorkflowModalProp
onClick={() => setType(opt.value)} onClick={() => setType(opt.value)}
className={`p-3 rounded-lg border-2 text-left transition-colors ${ className={`p-3 rounded-lg border-2 text-left transition-colors ${
type === opt.value type === opt.value
? 'border-blue-500 bg-blue-50' ? 'border-accent bg-accent-light'
: 'border-gray-200 hover:border-gray-300' : 'border-border-default hover:border-border-light'
}`} }`}
> >
<p className="text-sm font-medium">{opt.label}</p> <p className="text-sm font-medium text-content">{opt.label}</p>
<p className="text-xs text-gray-500 mt-0.5">{opt.desc}</p> <p className="text-xs text-content-muted mt-0.5">{opt.desc}</p>
</button> </button>
))} ))}
</div> </div>
@@ -413,14 +414,14 @@ function NewWorkflowModal({ onClose, onCreate, isLoading }: NewWorkflowModalProp
<div className="flex justify-end gap-2 mt-6"> <div className="flex justify-end gap-2 mt-6">
<button <button
onClick={onClose} onClick={onClose}
className="px-4 py-2 text-sm rounded-lg border border-gray-300 hover:bg-gray-50" className="px-4 py-2 text-sm rounded-lg border border-border-default text-content-secondary hover:bg-surface-hover"
> >
Abbrechen Abbrechen
</button> </button>
<button <button
disabled={!name.trim() || isLoading} disabled={!name.trim() || isLoading}
onClick={() => onCreate(name.trim(), type)} onClick={() => onCreate(name.trim(), type)}
className="px-4 py-2 text-sm rounded-lg bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed" className="px-4 py-2 text-sm rounded-lg bg-accent text-white hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed"
> >
{isLoading ? 'Erstelle…' : 'Erstellen'} {isLoading ? 'Erstelle…' : 'Erstellen'}
</button> </button>
@@ -520,11 +521,14 @@ function FlowCanvas({ workflow, onSave, isSaving }: FlowCanvasProps) {
const selectedNode = nodes.find(n => n.id === selectedNodeId) const selectedNode = nodes.find(n => n.id === selectedNodeId)
const { mode } = useThemeStore()
const isDark = resolveTheme(mode) === 'dark'
return ( return (
<div className="flex flex-col flex-1 min-h-0"> <div className="flex flex-col flex-1 min-h-0">
{/* Canvas Toolbar */} {/* Canvas Toolbar */}
<div className="flex items-center gap-2 px-4 py-2 border-b border-gray-200 bg-white"> <div className="flex items-center gap-2 px-4 py-2 border-b border-border-default bg-surface">
<span className="text-sm font-medium text-gray-600 mr-2">Nodes:</span> <span className="text-sm font-medium text-content-secondary mr-2">Nodes:</span>
{NODE_PALETTE.map(item => ( {NODE_PALETTE.map(item => (
<div <div
key={item.type} key={item.type}
@@ -533,7 +537,7 @@ function FlowCanvas({ workflow, onSave, isSaving }: FlowCanvasProps) {
e.dataTransfer.setData('application/reactflow', item.type) e.dataTransfer.setData('application/reactflow', item.type)
e.dataTransfer.effectAllowed = 'move' e.dataTransfer.effectAllowed = 'move'
}} }}
className="flex items-center gap-1.5 px-2.5 py-1.5 rounded border border-gray-200 bg-gray-50 text-xs text-gray-700 cursor-grab hover:bg-gray-100 select-none" className="flex items-center gap-1.5 px-2.5 py-1.5 rounded border border-border-default bg-surface-hover text-xs text-content-secondary cursor-grab hover:bg-surface-muted select-none"
> >
{item.icon} {item.icon}
{item.label} {item.label}
@@ -543,7 +547,7 @@ function FlowCanvas({ workflow, onSave, isSaving }: FlowCanvasProps) {
<button <button
onClick={handleSave} onClick={handleSave}
disabled={isSaving} disabled={isSaving}
className="flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50" className="flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg bg-accent text-white hover:bg-accent-hover disabled:opacity-50"
> >
<Save size={14} /> <Save size={14} />
{isSaving ? 'Speichere…' : 'Speichern'} {isSaving ? 'Speichere…' : 'Speichern'}
@@ -564,10 +568,11 @@ function FlowCanvas({ workflow, onSave, isSaving }: FlowCanvasProps) {
onPaneClick={onPaneClick} onPaneClick={onPaneClick}
onInit={setReactFlowInstance} onInit={setReactFlowInstance}
nodeTypes={nodeTypes} nodeTypes={nodeTypes}
colorMode={isDark ? 'dark' : 'light'}
fitView fitView
fitViewOptions={{ padding: 0.2 }} fitViewOptions={{ padding: 0.2 }}
> >
<Background gap={16} color="#e5e7eb" /> <Background gap={16} />
<Controls /> <Controls />
<MiniMap nodeStrokeWidth={3} zoomable pannable /> <MiniMap nodeStrokeWidth={3} zoomable pannable />
</ReactFlow> </ReactFlow>
@@ -649,24 +654,24 @@ export default function WorkflowEditor() {
} }
const typeBadgeColor: Record<WorkflowConfig['type'], string> = { const typeBadgeColor: Record<WorkflowConfig['type'], string> = {
still: 'bg-orange-100 text-orange-700', still: 'bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-300',
turntable: 'bg-purple-100 text-purple-700', turntable: 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300',
multi_angle: 'bg-blue-100 text-blue-700', multi_angle: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
custom: 'bg-gray-100 text-gray-600', custom: 'bg-surface-hover text-content-muted',
} }
return ( return (
<div className="flex h-full"> <div className="flex h-full">
{/* Workflow List Sidebar */} {/* Workflow List Sidebar */}
<aside className="w-56 flex-shrink-0 border-r border-gray-200 bg-white flex flex-col"> <aside className="w-56 flex-shrink-0 border-r border-border-default bg-surface flex flex-col">
<div className="p-3 border-b border-gray-200 flex items-center justify-between"> <div className="p-3 border-b border-border-default flex items-center justify-between">
<div className="flex items-center gap-2 text-sm font-semibold text-gray-700"> <div className="flex items-center gap-2 text-sm font-semibold text-content-secondary">
<GitBranch size={16} /> <GitBranch size={16} />
Workflows Workflows
</div> </div>
<button <button
onClick={() => setShowNewModal(true)} onClick={() => setShowNewModal(true)}
className="p-1 rounded hover:bg-gray-100 text-gray-500 hover:text-gray-700" className="p-1 rounded hover:bg-surface-hover text-content-muted hover:text-content"
title="Neuer Workflow" title="Neuer Workflow"
> >
<Plus size={16} /> <Plus size={16} />
@@ -675,15 +680,15 @@ export default function WorkflowEditor() {
<div className="flex-1 overflow-y-auto p-2 space-y-1"> <div className="flex-1 overflow-y-auto p-2 space-y-1">
{isLoading && ( {isLoading && (
<p className="text-xs text-gray-400 px-2 py-4 text-center">Lade…</p> <p className="text-xs text-content-muted px-2 py-4 text-center">Lade…</p>
)} )}
{!isLoading && workflows.length === 0 && ( {!isLoading && workflows.length === 0 && (
<p className="text-xs text-gray-400 px-2 py-4 text-center"> <p className="text-xs text-content-muted px-2 py-4 text-center">
Noch keine Workflows. Noch keine Workflows.
<br /> <br />
<button <button
onClick={() => setShowNewModal(true)} onClick={() => setShowNewModal(true)}
className="mt-1 text-blue-500 hover:underline" className="mt-1 text-accent hover:underline"
> >
+ Neu erstellen + Neu erstellen
</button> </button>
@@ -695,12 +700,12 @@ export default function WorkflowEditor() {
onClick={() => setSelectedId(wf.id)} onClick={() => setSelectedId(wf.id)}
className={`w-full text-left px-3 py-2.5 rounded-lg transition-colors group ${ className={`w-full text-left px-3 py-2.5 rounded-lg transition-colors group ${
selectedId === wf.id selectedId === wf.id
? 'bg-blue-50 border border-blue-200' ? 'bg-accent-light border border-accent/30'
: 'hover:bg-gray-50 border border-transparent' : 'hover:bg-surface-hover border border-transparent'
}`} }`}
> >
<div className="flex items-start justify-between gap-1"> <div className="flex items-start justify-between gap-1">
<p className="text-sm font-medium text-gray-800 truncate">{wf.name}</p> <p className="text-sm font-medium text-content truncate">{wf.name}</p>
<button <button
onClick={e => { onClick={e => {
e.stopPropagation() e.stopPropagation()
@@ -708,7 +713,7 @@ export default function WorkflowEditor() {
deleteMutation.mutate(wf.id) deleteMutation.mutate(wf.id)
} }
}} }}
className="opacity-0 group-hover:opacity-100 p-0.5 rounded hover:bg-red-100 hover:text-red-600 text-gray-400 flex-shrink-0" className="opacity-0 group-hover:opacity-100 p-0.5 rounded hover:bg-red-100 hover:text-red-600 text-content-muted flex-shrink-0"
title="Löschen" title="Löschen"
> >
<Trash2 size={12} /> <Trash2 size={12} />
@@ -722,7 +727,7 @@ export default function WorkflowEditor() {
{typeLabel[wf.config.type]} {typeLabel[wf.config.type]}
</span> </span>
{!wf.is_active && ( {!wf.is_active && (
<span className="ml-1 text-xs text-gray-400">(inaktiv)</span> <span className="ml-1 text-xs text-content-muted">(inaktiv)</span>
)} )}
</button> </button>
))} ))}
@@ -732,16 +737,16 @@ export default function WorkflowEditor() {
{/* Main Canvas Area */} {/* Main Canvas Area */}
<div className="flex-1 flex flex-col min-w-0"> <div className="flex-1 flex flex-col min-w-0">
{/* Header */} {/* Header */}
<div className="px-6 py-4 border-b border-gray-200 bg-white flex items-center justify-between"> <div className="px-6 py-4 border-b border-border-default bg-surface flex items-center justify-between">
<div> <div>
<h1 className="text-xl font-semibold text-gray-900">Workflow-Editor</h1> <h1 className="text-xl font-semibold text-content">Workflow-Editor</h1>
{selectedWorkflow && ( {selectedWorkflow && (
<p className="text-sm text-gray-500 mt-0.5">{selectedWorkflow.name}</p> <p className="text-sm text-content-muted mt-0.5">{selectedWorkflow.name}</p>
)} )}
</div> </div>
<button <button
onClick={() => setShowNewModal(true)} onClick={() => setShowNewModal(true)}
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 transition-colors" className="flex items-center gap-2 px-4 py-2 rounded-lg bg-accent text-white text-sm font-medium hover:bg-accent-hover transition-colors"
> >
<Plus size={16} /> <Plus size={16} />
Neuer Workflow Neuer Workflow
@@ -759,14 +764,14 @@ export default function WorkflowEditor() {
) : ( ) : (
<div className="flex-1 flex items-center justify-center text-center"> <div className="flex-1 flex items-center justify-center text-center">
<div> <div>
<GitBranch size={48} className="mx-auto text-gray-300 mb-4" /> <GitBranch size={48} className="mx-auto text-content-muted mb-4" />
<p className="text-gray-500 font-medium">Kein Workflow ausgewählt</p> <p className="text-content-secondary font-medium">Kein Workflow ausgewählt</p>
<p className="text-sm text-gray-400 mt-1"> <p className="text-sm text-content-muted mt-1">
Wähle einen Workflow aus der Liste oder erstelle einen neuen. Wähle einen Workflow aus der Liste oder erstelle einen neuen.
</p> </p>
<button <button
onClick={() => setShowNewModal(true)} onClick={() => setShowNewModal(true)}
className="mt-4 flex items-center gap-2 px-4 py-2 mx-auto rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700" className="mt-4 flex items-center gap-2 px-4 py-2 mx-auto rounded-lg bg-accent text-white text-sm font-medium hover:bg-accent-hover"
> >
<Plus size={16} /> <Plus size={16} />
Workflow erstellen Workflow erstellen