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:
@@ -110,21 +110,21 @@ export function ConfigImporter({ isOpen, onClose, onImport }: ConfigImporterProp
|
||||
};
|
||||
|
||||
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-lg">
|
||||
<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-lg border border-dark-700">
|
||||
{/* Header */}
|
||||
<div className="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
|
||||
<h2 className="text-xl font-semibold text-gray-800">Import Configuration</h2>
|
||||
<div className="px-6 py-4 border-b border-dark-700 flex justify-between items-center">
|
||||
<h2 className="text-xl font-semibold text-white">Import Configuration</h2>
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="text-gray-500 hover:text-gray-700 text-xl"
|
||||
className="text-dark-400 hover:text-white text-xl transition-colors"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex border-b border-gray-200">
|
||||
<div className="flex border-b border-dark-700">
|
||||
{[
|
||||
{ id: 'file', label: 'Upload File' },
|
||||
{ id: 'paste', label: 'Paste JSON' },
|
||||
@@ -135,8 +135,8 @@ export function ConfigImporter({ isOpen, onClose, onImport }: ConfigImporterProp
|
||||
onClick={() => setTab(t.id as 'file' | 'paste' | 'study')}
|
||||
className={`flex-1 px-4 py-3 text-sm font-medium transition-colors ${
|
||||
tab === t.id
|
||||
? 'text-blue-600 border-b-2 border-blue-600 bg-blue-50'
|
||||
: 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'
|
||||
? 'text-primary-400 border-b-2 border-primary-500 bg-dark-800'
|
||||
: 'text-dark-400 hover:text-white hover:bg-dark-800'
|
||||
}`}
|
||||
>
|
||||
{t.label}
|
||||
@@ -149,8 +149,8 @@ export function ConfigImporter({ isOpen, onClose, onImport }: ConfigImporterProp
|
||||
{/* File Upload Tab */}
|
||||
{tab === 'file' && (
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-gray-600">
|
||||
Upload an <code className="bg-gray-100 px-1 rounded">optimization_config.json</code> file
|
||||
<p className="text-sm text-dark-300">
|
||||
Upload an <code className="bg-dark-700 px-1 rounded text-primary-300">optimization_config.json</code> file
|
||||
from an existing study.
|
||||
</p>
|
||||
<input
|
||||
@@ -163,10 +163,10 @@ export function ConfigImporter({ isOpen, onClose, onImport }: ConfigImporterProp
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={isLoading}
|
||||
className="w-full py-8 border-2 border-dashed border-gray-300 rounded-lg hover:border-blue-400 hover:bg-blue-50 transition-colors flex flex-col items-center gap-2"
|
||||
className="w-full py-8 border-2 border-dashed border-dark-600 rounded-lg hover:border-primary-500/50 hover:bg-dark-800 transition-colors flex flex-col items-center gap-2"
|
||||
>
|
||||
<span className="text-3xl">📁</span>
|
||||
<span className="text-gray-600">
|
||||
<span className="text-dark-300">
|
||||
{isLoading ? 'Loading...' : 'Click to select file'}
|
||||
</span>
|
||||
</button>
|
||||
@@ -176,7 +176,7 @@ export function ConfigImporter({ isOpen, onClose, onImport }: ConfigImporterProp
|
||||
{/* Paste JSON Tab */}
|
||||
{tab === 'paste' && (
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-gray-600">
|
||||
<p className="text-sm text-dark-300">
|
||||
Paste your optimization configuration JSON below.
|
||||
</p>
|
||||
<textarea
|
||||
@@ -187,12 +187,12 @@ export function ConfigImporter({ isOpen, onClose, onImport }: ConfigImporterProp
|
||||
"objectives": [...],
|
||||
"method": "TPE"
|
||||
}`}
|
||||
className="w-full h-48 px-3 py-2 border rounded-lg font-mono text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
className="w-full h-48 px-3 py-2 bg-dark-800 border border-dark-600 text-white placeholder-dark-500 rounded-lg font-mono text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-colors"
|
||||
/>
|
||||
<button
|
||||
onClick={handlePasteImport}
|
||||
disabled={!jsonText.trim()}
|
||||
className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
className="w-full px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
Import JSON
|
||||
</button>
|
||||
@@ -202,7 +202,7 @@ export function ConfigImporter({ isOpen, onClose, onImport }: ConfigImporterProp
|
||||
{/* Load Study Tab */}
|
||||
{tab === 'study' && (
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-gray-600">
|
||||
<p className="text-sm text-dark-300">
|
||||
Enter a study name to load its configuration.
|
||||
</p>
|
||||
<input
|
||||
@@ -210,12 +210,12 @@ export function ConfigImporter({ isOpen, onClose, onImport }: ConfigImporterProp
|
||||
value={studyPath}
|
||||
onChange={(e) => setStudyPath(e.target.value)}
|
||||
placeholder="e.g., bracket_mass_v1 or M1_Mirror/m1_mirror_flatback"
|
||||
className="w-full px-3 py-2 border rounded-lg 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 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-colors"
|
||||
/>
|
||||
<button
|
||||
onClick={handleStudyLoad}
|
||||
disabled={!studyPath.trim() || isLoading}
|
||||
className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
className="w-full px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{isLoading ? 'Loading...' : 'Load Study Config'}
|
||||
</button>
|
||||
@@ -224,15 +224,15 @@ export function ConfigImporter({ isOpen, onClose, onImport }: ConfigImporterProp
|
||||
|
||||
{/* Error Display */}
|
||||
{error && (
|
||||
<div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg">
|
||||
<p className="text-sm text-red-700">{error}</p>
|
||||
<div className="mt-4 p-3 bg-red-900/30 border border-red-500/50 rounded-lg">
|
||||
<p className="text-sm text-red-400">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="px-6 py-4 border-t border-gray-200 bg-gray-50 rounded-b-lg">
|
||||
<p className="text-xs text-gray-500">
|
||||
<div className="px-6 py-4 border-t border-dark-700 bg-dark-800/50 rounded-b-xl">
|
||||
<p className="text-xs text-dark-500">
|
||||
Imported configurations will replace the current canvas content.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user