feat: Add Canvas dark theme styling and Setup page integration

Canvas Builder Visual Updates:
- Update all Canvas components to use Atomaster dark theme
- BaseNode: dark background (bg-dark-800), white text, primary selection glow
- NodePalette: dark sidebar with hover states
- NodeConfigPanel: dark inputs, labels, and panel background
- ValidationPanel: semi-transparent error/warning panels with backdrop blur
- ChatPanel: dark message area with themed welcome state
- ExecuteDialog: dark modal with primary button styling
- ConfigImporter: dark tabs, inputs, and file upload zone
- TemplateSelector: dark cards with category pills and hover effects

Setup Page Integration:
- Add Configuration/Canvas Builder tab switcher
- Canvas tab renders AtomizerCanvas full-height
- Tabs styled to match Atomaster theme

Build: Passes TypeScript and Vite build

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-14 21:30:30 -05:00
parent 92c82a5518
commit 9f3ac28000
10 changed files with 221 additions and 153 deletions

View File

@@ -26,8 +26,8 @@ export function NodePalette() {
};
return (
<div className="w-64 bg-gray-50 border-r border-gray-200 p-4 overflow-y-auto">
<h3 className="text-sm font-semibold text-gray-500 uppercase mb-4">
<div className="w-64 bg-dark-850 border-r border-dark-700 p-4 overflow-y-auto">
<h3 className="text-sm font-semibold text-dark-400 uppercase mb-4 tracking-wide">
Components
</h3>
<div className="space-y-2">
@@ -36,13 +36,14 @@ export function NodePalette() {
key={item.type}
draggable
onDragStart={(e) => onDragStart(e, item.type)}
className="flex items-center gap-3 p-3 bg-white rounded-lg border border-gray-200
cursor-grab hover:border-blue-300 hover:shadow-sm transition-all"
className="flex items-center gap-3 p-3 bg-dark-800 rounded-lg border border-dark-600
cursor-grab hover:border-primary-500/50 hover:bg-dark-750 transition-all
active:cursor-grabbing"
>
<span className="text-xl">{item.icon}</span>
<div>
<div className="font-medium text-gray-800">{item.label}</div>
<div className="text-xs text-gray-500">{item.description}</div>
<div className="font-medium text-white">{item.label}</div>
<div className="text-xs text-dark-400">{item.description}</div>
</div>
</div>
))}