feat(canvas): Responsive full-screen layout and dark theme
Phase 2 of Canvas Professional Upgrade: - Update AtomizerCanvas with Lucide icons (MessageCircle, Plug, X) - Update CanvasView page with dark theme styling - Replace emoji buttons with Lucide icons (ClipboardList, Download, Trash2) - Update Setup canvas tab for full-width responsive layout - Use calc(100vh-6rem) for proper canvas height Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -7,6 +7,7 @@ import ReactFlow, {
|
||||
ReactFlowInstance,
|
||||
} from 'reactflow';
|
||||
import 'reactflow/dist/style.css';
|
||||
import { MessageCircle, Plug, X } from 'lucide-react';
|
||||
|
||||
import { nodeTypes } from './nodes';
|
||||
import { NodePalette } from './palette/NodePalette';
|
||||
@@ -159,7 +160,7 @@ function CanvasFlow() {
|
||||
}`}
|
||||
title="Toggle Chat"
|
||||
>
|
||||
{isConnected ? '💬' : '🔌'}
|
||||
{isConnected ? <MessageCircle size={18} /> : <Plug size={18} />}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleValidate}
|
||||
@@ -206,7 +207,7 @@ function CanvasFlow() {
|
||||
onClick={() => setShowChat(false)}
|
||||
className="text-dark-400 hover:text-white transition-colors"
|
||||
>
|
||||
✕
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
<ChatPanel
|
||||
|
||||
Reference in New Issue
Block a user