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:
@@ -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>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user