design: change to minimalistic and clean light theme

- Replace Matrix/terminal dark theme with modern light design
- Update Tailwind config with clean, professional color palette
- Change from monospace to Inter sans-serif font
- Update chart styling to use white background with subtle grids
- Remove glow effects and neon colors from buttons and UI
- Update color picker with better color options
- Improve sidebar spacing and typography
- Update annotation badges with softer colors
- Change scrollbar styling to match light theme
This commit is contained in:
Marko Djordjevic 2026-02-12 16:01:33 +01:00
parent 42bc3ae757
commit 08e8ebd1e0
9 changed files with 225 additions and 108 deletions

View file

@ -87,30 +87,33 @@ export default function Home() {
}, [selectedLabelId]);
return (
<div className="flex h-screen">
<div className="flex h-screen bg-background">
{/* Sidebar */}
<aside className="w-64 flex-shrink-0 flex flex-col border-r border-border">
<div className="p-4 border-b border-border">
<h1 className="text-xl font-bold">Candle Annotator</h1>
<aside className="w-72 flex-shrink-0 flex flex-col border-r border-border bg-card">
<div className="p-6 border-b border-border">
<h1 className="text-2xl font-semibold text-foreground">Candle Annotator</h1>
<p className="text-sm text-muted-foreground mt-1">Chart annotation tool</p>
</div>
<div className="p-4">
<div className="p-6">
<FileUpload onUploadSuccess={handleUploadSuccess} />
</div>
<Toolbox
activeTool={activeTool}
onToolChange={setActiveTool}
onExport={handleExport}
selectedColor={selectedColor}
onColorChange={setSelectedColor}
annotations={annotations}
selectedLabelId={selectedLabelId}
onLabelSelect={handleLabelSelect}
onLabelDelete={handleLabelDelete}
/>
<div className="px-6 pb-6">
<Toolbox
activeTool={activeTool}
onToolChange={setActiveTool}
onExport={handleExport}
selectedColor={selectedColor}
onColorChange={setSelectedColor}
annotations={annotations}
selectedLabelId={selectedLabelId}
onLabelSelect={handleLabelSelect}
onLabelDelete={handleLabelDelete}
/>
</div>
</aside>
{/* Main chart area */}
<main className="flex-1 relative">
<main className="flex-1 relative bg-background">
<CandleChart
ref={chartRef}
activeTool={activeTool}