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
parent
42bc3ae757
commit
08e8ebd1e0
9 changed files with 225 additions and 108 deletions
|
|
@ -89,12 +89,12 @@ const CandleChart = forwardRef<CandleChartHandle, CandleChartProps>(
|
|||
width: chartContainerRef.current.clientWidth,
|
||||
height: chartContainerRef.current.clientHeight,
|
||||
layout: {
|
||||
background: { color: '#0f172a' }, // Slate-900
|
||||
textColor: '#e2e8f0', // Slate-200
|
||||
background: { color: '#ffffff' },
|
||||
textColor: '#1e293b',
|
||||
},
|
||||
grid: {
|
||||
vertLines: { color: '#1e293b' }, // Subtle grid
|
||||
horzLines: { color: '#1e293b' },
|
||||
vertLines: { color: '#f1f5f9' },
|
||||
horzLines: { color: '#f1f5f9' },
|
||||
},
|
||||
crosshair: {
|
||||
mode: 1,
|
||||
|
|
@ -102,18 +102,18 @@ const CandleChart = forwardRef<CandleChartHandle, CandleChartProps>(
|
|||
timeScale: {
|
||||
timeVisible: true,
|
||||
secondsVisible: false,
|
||||
borderColor: '#334155',
|
||||
borderColor: '#e2e8f0',
|
||||
},
|
||||
rightPriceScale: {
|
||||
borderColor: '#334155',
|
||||
borderColor: '#e2e8f0',
|
||||
},
|
||||
});
|
||||
|
||||
const candlestickSeries = chart.addCandlestickSeries({
|
||||
upColor: '#22c55e', // Green
|
||||
downColor: '#ef4444', // Red
|
||||
upColor: '#10b981',
|
||||
downColor: '#ef4444',
|
||||
borderVisible: false,
|
||||
wickUpColor: '#22c55e',
|
||||
wickUpColor: '#10b981',
|
||||
wickDownColor: '#ef4444',
|
||||
});
|
||||
|
||||
|
|
@ -167,8 +167,8 @@ const CandleChart = forwardRef<CandleChartHandle, CandleChartProps>(
|
|||
time: annotation.timestamp as Time,
|
||||
position: annotation.label_type === 'break_up' ? ('belowBar' as const) : ('aboveBar' as const),
|
||||
color: isSelected
|
||||
? (annotation.label_type === 'break_up' ? '#00ff41' : '#ff0040')
|
||||
: (annotation.label_type === 'break_up' ? '#22c55e' : '#ef4444'),
|
||||
? (annotation.label_type === 'break_up' ? '#059669' : '#dc2626')
|
||||
: (annotation.label_type === 'break_up' ? '#10b981' : '#ef4444'),
|
||||
shape: annotation.label_type === 'break_up' ? ('arrowUp' as const) : ('arrowDown' as const),
|
||||
text: annotation.label_type === 'break_up' ? 'Break Up' : 'Break Down',
|
||||
size: isSelected ? 2 : 1,
|
||||
|
|
|
|||
|
|
@ -58,8 +58,8 @@ export default function FileUpload({ onUploadSuccess }: FileUploadProps) {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="mb-4 p-4 bg-secondary/50 rounded-lg border border-border">
|
||||
<h3 className="text-sm font-semibold mb-2">Upload CSV Data</h3>
|
||||
<div className="p-4 bg-muted rounded-lg border border-border">
|
||||
<h3 className="text-sm font-medium mb-3 text-foreground">Upload CSV Data</h3>
|
||||
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
|
|
@ -73,7 +73,6 @@ export default function FileUpload({ onUploadSuccess }: FileUploadProps) {
|
|||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={isUploading}
|
||||
|
|
@ -84,10 +83,10 @@ export default function FileUpload({ onUploadSuccess }: FileUploadProps) {
|
|||
|
||||
{message && (
|
||||
<div
|
||||
className={`mt-2 text-xs p-2 rounded ${
|
||||
className={`mt-3 text-xs p-3 rounded-md ${
|
||||
message.type === 'success'
|
||||
? 'bg-green-500/10 text-green-500 border border-green-500/20'
|
||||
: 'bg-red-500/10 text-red-500 border border-red-500/20'
|
||||
? 'bg-emerald-50 text-emerald-700 border border-emerald-200'
|
||||
: 'bg-red-50 text-red-700 border border-red-200'
|
||||
}`}
|
||||
>
|
||||
{message.text}
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@ export default function Toolbox({
|
|||
<div className="flex flex-col gap-2">
|
||||
<Button
|
||||
variant={activeTool === 'break_up' ? 'default' : 'outline'}
|
||||
className={`justify-start gap-2 ${activeTool === 'break_up' ? 'animate-glow-pulse shadow-glow' : 'hover:shadow-glow'}`}
|
||||
className="justify-start gap-2"
|
||||
onClick={() => handleToolClick('break_up')}
|
||||
>
|
||||
<ArrowUpCircle className="w-5 h-5" />
|
||||
|
|
@ -101,7 +101,7 @@ export default function Toolbox({
|
|||
|
||||
<Button
|
||||
variant={activeTool === 'break_down' ? 'default' : 'outline'}
|
||||
className={`justify-start gap-2 ${activeTool === 'break_down' ? 'animate-glow-pulse shadow-glow' : 'hover:shadow-glow'}`}
|
||||
className="justify-start gap-2"
|
||||
onClick={() => handleToolClick('break_down')}
|
||||
>
|
||||
<ArrowDownCircle className="w-5 h-5" />
|
||||
|
|
@ -110,7 +110,7 @@ export default function Toolbox({
|
|||
|
||||
<Button
|
||||
variant={activeTool === 'line' ? 'default' : 'outline'}
|
||||
className={`justify-start gap-2 ${activeTool === 'line' ? 'animate-glow-pulse shadow-glow' : 'hover:shadow-glow'}`}
|
||||
className="justify-start gap-2"
|
||||
onClick={() => handleToolClick('line')}
|
||||
>
|
||||
<TrendingUp className="w-5 h-5" />
|
||||
|
|
@ -121,10 +121,10 @@ export default function Toolbox({
|
|||
<div className="flex gap-1 px-1">
|
||||
{[
|
||||
{ color: '#ef4444', name: 'Red' },
|
||||
{ color: '#22c55e', name: 'Green' },
|
||||
{ color: '#10b981', name: 'Green' },
|
||||
{ color: '#3b82f6', name: 'Blue' },
|
||||
{ color: '#eab308', name: 'Yellow' },
|
||||
{ color: '#ffffff', name: 'White' },
|
||||
{ color: '#f59e0b', name: 'Orange' },
|
||||
{ color: '#8b5cf6', name: 'Purple' },
|
||||
].map((preset) => (
|
||||
<Button
|
||||
key={preset.color}
|
||||
|
|
@ -151,7 +151,7 @@ export default function Toolbox({
|
|||
|
||||
<Button
|
||||
variant={activeTool === 'delete' ? 'destructive' : 'outline'}
|
||||
className={`justify-start gap-2 ${activeTool === 'delete' ? 'animate-glow-pulse shadow-[0_0_15px_#ff0040]' : 'hover:shadow-[0_0_15px_#ff0040]'}`}
|
||||
className="justify-start gap-2"
|
||||
onClick={() => handleToolClick('delete')}
|
||||
>
|
||||
<Trash2 className="w-5 h-5" />
|
||||
|
|
@ -225,22 +225,22 @@ export default function Toolbox({
|
|||
onClick={() => onLabelSelect?.(annotation.id)}
|
||||
className={`p-2 rounded border text-xs cursor-pointer transition-colors ${
|
||||
isSelected
|
||||
? 'border-matrix bg-matrix/10'
|
||||
: 'border-border hover:bg-secondary/30'
|
||||
? 'border-primary bg-primary/10'
|
||||
: 'border-border hover:bg-secondary'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="font-mono text-foreground">{formattedTime}</div>
|
||||
<div className="font-medium text-foreground">{formattedTime}</div>
|
||||
<div className="mt-1 flex items-center gap-2">
|
||||
<span
|
||||
className={`px-2 py-0.5 rounded text-xs font-semibold ${
|
||||
className={`px-2 py-0.5 rounded text-xs font-medium ${
|
||||
annotation.label_type === 'break_up'
|
||||
? 'bg-green-900/50 text-matrix'
|
||||
: 'bg-red-900/50 text-neonRed'
|
||||
? 'bg-emerald-100 text-emerald-700'
|
||||
: 'bg-red-100 text-red-700'
|
||||
}`}
|
||||
>
|
||||
{annotation.label_type === 'break_up' ? 'BREAK UP' : 'BREAK DOWN'}
|
||||
{annotation.label_type === 'break_up' ? 'Break Up' : 'Break Down'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue