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,
} from '@xyflow/react'
import '@xyflow/react/dist/style.css'
import { useThemeStore, resolveTheme } from '../store/theme'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import {
getWorkflows,
@@ -55,8 +56,8 @@ interface BaseNodeProps {
function BaseNode({ label, icon, color, description, selected, hasSource = true, hasTarget = true }: BaseNodeProps) {
return (
<div
className={`rounded-lg border-2 p-3 min-w-[140px] bg-white shadow-sm transition-colors ${
selected ? 'border-blue-500' : 'border-gray-200'
className={`rounded-lg border-2 p-3 min-w-[140px] bg-surface shadow-sm transition-colors ${
selected ? 'border-accent' : 'border-border-default'
}`}
>
{hasTarget && (
@@ -236,12 +237,12 @@ function ConfigSidepanel({
onChange: (p: WorkflowParams) => void
}) {
return (
<div className="w-72 border-l border-gray-200 bg-white p-4 space-y-5 overflow-y-auto">
<h3 className="font-semibold text-gray-800">Node-Konfiguration</h3>
<div className="w-72 border-l border-border-default bg-surface p-4 space-y-5 overflow-y-auto">
<h3 className="font-semibold text-content">Node-Konfiguration</h3>
{/* Render Engine */}
<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">
{(['cycles', 'eevee'] as const).map(eng => (
<button
@@ -249,8 +250,8 @@ function ConfigSidepanel({
onClick={() => onChange({ ...params, render_engine: eng })}
className={`px-3 py-1.5 rounded text-sm font-medium transition-colors ${
(params.render_engine ?? 'cycles') === eng
? 'bg-blue-600 text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
? 'bg-accent text-white'
: 'bg-surface-hover text-content-secondary hover:bg-surface-muted'
}`}
>
{eng === 'cycles' ? 'Cycles' : 'EEVEE'}
@@ -261,8 +262,8 @@ function ConfigSidepanel({
{/* Samples */}
<div>
<label className="text-sm text-gray-600 mb-2 block">
Samples: <span className="font-semibold text-gray-800">{params.samples ?? 256}</span>
<label className="text-sm text-content-secondary mb-2 block">
Samples: <span className="font-semibold text-content">{params.samples ?? 256}</span>
</label>
<input
type="range"
@@ -271,9 +272,9 @@ function ConfigSidepanel({
step={1}
value={params.samples ?? 256}
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>4096</span>
</div>
@@ -281,16 +282,16 @@ function ConfigSidepanel({
{/* Resolution */}
<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">
{([[1024, 1024], [2048, 2048], [4096, 4096]] as [number, number][]).map(([w, h]) => (
{([[1024, 1024], [2048, 2048], [4096, 4096]] as [number, number][]).map(([w]) => (
<button
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 ${
(params.resolution?.[0] ?? 2048) === w
? 'bg-blue-600 text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
? 'bg-accent text-white'
: 'bg-surface-hover text-content-secondary hover:bg-surface-muted'
}`}
>
{w}px
@@ -301,8 +302,8 @@ function ConfigSidepanel({
{/* FPS (only relevant for animation nodes) */}
<div>
<label className="text-sm text-gray-600 mb-2 block">
FPS: <span className="font-semibold text-gray-800">{params.fps ?? 24}</span>
<label className="text-sm text-content-secondary mb-2 block">
FPS: <span className="font-semibold text-content">{params.fps ?? 24}</span>
</label>
<div className="flex gap-2">
{[12, 24, 30, 60].map(fps => (
@@ -311,8 +312,8 @@ function ConfigSidepanel({
onClick={() => onChange({ ...params, fps })}
className={`px-2 py-1.5 rounded text-xs font-medium transition-colors ${
(params.fps ?? 24) === fps
? 'bg-blue-600 text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
? 'bg-accent text-white'
: 'bg-surface-hover text-content-secondary hover:bg-surface-muted'
}`}
>
{fps}
@@ -323,8 +324,8 @@ function ConfigSidepanel({
{/* Duration */}
<div>
<label className="text-sm text-gray-600 mb-2 block">
Dauer (s): <span className="font-semibold text-gray-800">{params.duration_s ?? 5}</span>
<label className="text-sm text-content-secondary mb-2 block">
Dauer (s): <span className="font-semibold text-content">{params.duration_s ?? 5}</span>
</label>
<input
type="range"
@@ -333,7 +334,7 @@ function ConfigSidepanel({
step={1}
value={params.duration_s ?? 5}
onChange={e => onChange({ ...params, duration_s: Number(e.target.value) })}
className="w-full accent-blue-600"
className="w-full accent-accent"
/>
</div>
</div>
@@ -364,19 +365,19 @@ function NewWorkflowModal({ onClose, onCreate, isLoading }: NewWorkflowModalProp
return (
<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">
<h2 className="text-lg font-semibold">Neuer Workflow</h2>
<button onClick={onClose} className="text-gray-400 hover:text-gray-600">
<h2 className="text-lg font-semibold text-content">Neuer Workflow</h2>
<button onClick={onClose} className="text-content-muted hover:text-content">
<X size={20} />
</button>
</div>
<div className="space-y-4">
<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
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"
value={name}
onChange={e => setName(e.target.value)}
@@ -385,7 +386,7 @@ function NewWorkflowModal({ onClose, onCreate, isLoading }: NewWorkflowModalProp
</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">
{([
{ value: 'still', label: 'Still', desc: 'Einzelbild PNG' },
@@ -398,12 +399,12 @@ function NewWorkflowModal({ onClose, onCreate, isLoading }: NewWorkflowModalProp
onClick={() => setType(opt.value)}
className={`p-3 rounded-lg border-2 text-left transition-colors ${
type === opt.value
? 'border-blue-500 bg-blue-50'
: 'border-gray-200 hover:border-gray-300'
? 'border-accent bg-accent-light'
: 'border-border-default hover:border-border-light'
}`}
>
<p className="text-sm font-medium">{opt.label}</p>
<p className="text-xs text-gray-500 mt-0.5">{opt.desc}</p>
<p className="text-sm font-medium text-content">{opt.label}</p>
<p className="text-xs text-content-muted mt-0.5">{opt.desc}</p>
</button>
))}
</div>
@@ -413,14 +414,14 @@ function NewWorkflowModal({ onClose, onCreate, isLoading }: NewWorkflowModalProp
<div className="flex justify-end gap-2 mt-6">
<button
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
</button>
<button
disabled={!name.trim() || isLoading}
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'}
</button>
@@ -520,11 +521,14 @@ function FlowCanvas({ workflow, onSave, isSaving }: FlowCanvasProps) {
const selectedNode = nodes.find(n => n.id === selectedNodeId)
const { mode } = useThemeStore()
const isDark = resolveTheme(mode) === 'dark'
return (
<div className="flex flex-col flex-1 min-h-0">
{/* Canvas Toolbar */}
<div className="flex items-center gap-2 px-4 py-2 border-b border-gray-200 bg-white">
<span className="text-sm font-medium text-gray-600 mr-2">Nodes:</span>
<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-content-secondary mr-2">Nodes:</span>
{NODE_PALETTE.map(item => (
<div
key={item.type}
@@ -533,7 +537,7 @@ function FlowCanvas({ workflow, onSave, isSaving }: FlowCanvasProps) {
e.dataTransfer.setData('application/reactflow', item.type)
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.label}
@@ -543,7 +547,7 @@ function FlowCanvas({ workflow, onSave, isSaving }: FlowCanvasProps) {
<button
onClick={handleSave}
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} />
{isSaving ? 'Speichere…' : 'Speichern'}
@@ -564,10 +568,11 @@ function FlowCanvas({ workflow, onSave, isSaving }: FlowCanvasProps) {
onPaneClick={onPaneClick}
onInit={setReactFlowInstance}
nodeTypes={nodeTypes}
colorMode={isDark ? 'dark' : 'light'}
fitView
fitViewOptions={{ padding: 0.2 }}
>
<Background gap={16} color="#e5e7eb" />
<Background gap={16} />
<Controls />
<MiniMap nodeStrokeWidth={3} zoomable pannable />
</ReactFlow>
@@ -649,24 +654,24 @@ export default function WorkflowEditor() {
}
const typeBadgeColor: Record<WorkflowConfig['type'], string> = {
still: 'bg-orange-100 text-orange-700',
turntable: 'bg-purple-100 text-purple-700',
multi_angle: 'bg-blue-100 text-blue-700',
custom: 'bg-gray-100 text-gray-600',
still: 'bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-300',
turntable: 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300',
multi_angle: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
custom: 'bg-surface-hover text-content-muted',
}
return (
<div className="flex h-full">
{/* Workflow List Sidebar */}
<aside className="w-56 flex-shrink-0 border-r border-gray-200 bg-white flex flex-col">
<div className="p-3 border-b border-gray-200 flex items-center justify-between">
<div className="flex items-center gap-2 text-sm font-semibold text-gray-700">
<aside className="w-56 flex-shrink-0 border-r border-border-default bg-surface flex flex-col">
<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-content-secondary">
<GitBranch size={16} />
Workflows
</div>
<button
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"
>
<Plus size={16} />
@@ -675,15 +680,15 @@ export default function WorkflowEditor() {
<div className="flex-1 overflow-y-auto p-2 space-y-1">
{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 && (
<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.
<br />
<button
onClick={() => setShowNewModal(true)}
className="mt-1 text-blue-500 hover:underline"
className="mt-1 text-accent hover:underline"
>
+ Neu erstellen
</button>
@@ -695,12 +700,12 @@ export default function WorkflowEditor() {
onClick={() => setSelectedId(wf.id)}
className={`w-full text-left px-3 py-2.5 rounded-lg transition-colors group ${
selectedId === wf.id
? 'bg-blue-50 border border-blue-200'
: 'hover:bg-gray-50 border border-transparent'
? 'bg-accent-light border border-accent/30'
: 'hover:bg-surface-hover border border-transparent'
}`}
>
<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
onClick={e => {
e.stopPropagation()
@@ -708,7 +713,7 @@ export default function WorkflowEditor() {
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"
>
<Trash2 size={12} />
@@ -722,7 +727,7 @@ export default function WorkflowEditor() {
{typeLabel[wf.config.type]}
</span>
{!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>
))}
@@ -732,16 +737,16 @@ export default function WorkflowEditor() {
{/* Main Canvas Area */}
<div className="flex-1 flex flex-col min-w-0">
{/* 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>
<h1 className="text-xl font-semibold text-gray-900">Workflow-Editor</h1>
<h1 className="text-xl font-semibold text-content">Workflow-Editor</h1>
{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>
<button
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} />
Neuer Workflow
@@ -759,14 +764,14 @@ export default function WorkflowEditor() {
) : (
<div className="flex-1 flex items-center justify-center text-center">
<div>
<GitBranch size={48} className="mx-auto text-gray-300 mb-4" />
<p className="text-gray-500 font-medium">Kein Workflow ausgewählt</p>
<p className="text-sm text-gray-400 mt-1">
<GitBranch size={48} className="mx-auto text-content-muted mb-4" />
<p className="text-content-secondary font-medium">Kein Workflow ausgewählt</p>
<p className="text-sm text-content-muted mt-1">
Wähle einen Workflow aus der Liste oder erstelle einen neuen.
</p>
<button
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} />
Workflow erstellen