Antoine/Atomizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add Canvas dark theme styling and Setup page integration

Browse Source 
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:
Anto01
2026-01-14 21:30:30 -05:00
parent 92c82a5518
commit 9f3ac28000
10 changed files with 221 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
atomizer-dashboard/frontend/src/components/canvas/panels/ExecuteDialog.tsx
View File

@@ -51,9 +51,9 @@ export function ExecuteDialog({
};
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white rounded-lg shadow-xl w-full max-w-md p-6">
<h2 className="text-xl font-semibold text-gray-800 mb-4">
<div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 backdrop-blur-sm">
<div className="bg-dark-850 rounded-xl shadow-2xl w-full max-w-md p-6 border border-dark-700">
<h2 className="text-xl font-semibold text-white mb-4">
Execute with Claude
</h2>
@@ -61,7 +61,7 @@ export function ExecuteDialog({
<div className="mb-4">
<label
htmlFor="study-name"
className="block text-sm font-medium text-gray-600 mb-1"
className="block text-sm font-medium text-dark-300 mb-1"
>
Study Name
</label>
@@ -71,14 +71,14 @@ export function ExecuteDialog({
value={studyName}
onChange={(e) => setStudyName(e.target.value.toLowerCase().replace(/\s+/g, '_'))}
placeholder="my_optimization_study"
className="w-full px-3 py-2 border rounded-lg font-mono focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
className="w-full px-3 py-2 bg-dark-800 border border-dark-600 text-white placeholder-dark-400 rounded-lg font-mono focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-colors"
disabled={isExecuting}
autoFocus
/>
{error && (
<p className="mt-1 text-sm text-red-600">{error}</p>
<p className="mt-1 text-sm text-red-400">{error}</p>
)}
<p className="mt-1 text-xs text-gray-500">
<p className="mt-1 text-xs text-dark-500">
Use snake_case (e.g., bracket_mass_v1, mirror_wfe_optimization)
</p>
</div>
@@ -90,9 +90,9 @@ export function ExecuteDialog({
checked={autoRun}
onChange={(e) => setAutoRun(e.target.checked)}
disabled={isExecuting}
className="w-4 h-4"
className="w-4 h-4 rounded bg-dark-800 border-dark-600 text-primary-500 focus:ring-primary-500"
/>
<span className="text-sm text-gray-700">
<span className="text-sm text-dark-300">
Start optimization immediately after creation
</span>
</label>
@@ -103,14 +103,14 @@ export function ExecuteDialog({
type="button"
onClick={handleClose}
disabled={isExecuting}
className="px-4 py-2 text-gray-600 hover:text-gray-800 disabled:opacity-50"
className="px-4 py-2 text-dark-300 hover:text-white disabled:opacity-50 transition-colors"
>
Cancel
</button>
<button
type="submit"
disabled={isExecuting}
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 transition-colors"
>
{isExecuting ? (
<>