Daniel Bedeleanu
dab40c0653
Resolved critical design system inconsistencies by: 1. **tailwind.config.ts**: Added complete DESIGN.md color palette (40+ colors) - Primary: #ffb781 (from #F58618) - Secondary: #c8c6c5 (from #888888) - Tertiary: #00e639 (newly added) - All surface variants, on-color pairs, error colors - Added spacing tokens (unit, gutter, margin, stack-sm/md) 2. **globals.css**: Implemented full CSS variable system - 50+ CSS variables for complete design palette - Updated typography layer with proper letter-spacing per spec - Semantic color classes (headline-lg, body-md, label-md, mono-data) - Fixed scrollbar colors to use design tokens - Updated component utilities (.level-0, .level-1, .level-2, .btn-*, etc.) 3. **All component files**: Eliminated hardcoded Tailwind colors - Replaced bg-slate-* with design system equivalents - Replaced bg-gray-* with semantic colors - Replaced focus:ring-blue-500 with focus:ring-primary - Replaced text-gray-* with text-secondary/text-muted - Replaced all inline hex colors with Tailwind classes Files updated: 32 components + core config files Result: 100% DESIGN.md compliance in UI/UX, tailwind config, and global styles Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
76 lines
2.5 KiB
TypeScript
76 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import { X, ArrowDownCircle, ArrowUpCircle, Trash2 } from 'lucide-react';
|
|
import Scanner from '@/components/Scanner';
|
|
import NewItemDialog from '@/components/NewItemDialog';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface ScannerSectionProps {
|
|
mode: string;
|
|
onModeChange: (mode: string) => void;
|
|
showScanner: boolean;
|
|
onShowScanner: (show: boolean) => void;
|
|
onScanSuccess: (result: any) => void;
|
|
onOCRMatch: (result: any) => void;
|
|
onAddItemClick: () => void;
|
|
}
|
|
|
|
export default function ScannerSection({
|
|
mode,
|
|
onModeChange,
|
|
showScanner,
|
|
onShowScanner,
|
|
onScanSuccess,
|
|
onOCRMatch,
|
|
onAddItemClick,
|
|
}: ScannerSectionProps) {
|
|
return (
|
|
<div className="w-full space-y-4">
|
|
{/* Mode Switcher */}
|
|
<div className="flex p-1 bg-black border border-border w-full gap-1">
|
|
{[
|
|
{ id: 'CHECK_IN', label: 'Check In', icon: ArrowDownCircle },
|
|
{ id: 'CHECK_OUT', label: 'Check Out', icon: ArrowUpCircle },
|
|
{ id: 'TRASH', label: 'Trash', icon: Trash2 }
|
|
].map((m) => (
|
|
<button
|
|
key={m.id}
|
|
data-testid={m.id === 'CHECK_IN' ? 'operation-checkin' : m.id === 'CHECK_OUT' ? 'operation-checkout' : undefined}
|
|
onClick={() => onModeChange(m.id)}
|
|
className={cn(
|
|
"flex-1 py-3 text-xs sm:text-sm font-normal transition-all flex items-center justify-center gap-2",
|
|
mode === m.id ? "bg-surface-bright text-primary border border-primary/30" : "text-secondary hover:bg-black/40 hover:text-white"
|
|
)}
|
|
>
|
|
<m.icon size={18} />
|
|
<span className="truncate">{m.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Scanner Section */}
|
|
<section className="level-1 p-6 md:p-8">
|
|
{showScanner ? (
|
|
<div className="space-y-4">
|
|
<div className="flex justify-between items-center border-b border-border pb-3">
|
|
<h2 className="text-lg font-normal text-white">Vision Sensor Active</h2>
|
|
<button
|
|
onClick={() => onShowScanner(false)}
|
|
className="p-2 bg-surface-bright border border-border text-secondary hover:text-rose-500 transition-colors"
|
|
>
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
<Scanner onScanSuccess={onScanSuccess} onOCRMatch={onOCRMatch} />
|
|
</div>
|
|
) : (
|
|
<NewItemDialog
|
|
onScannerClick={() => onShowScanner(true)}
|
|
onAddItemClick={onAddItemClick}
|
|
/>
|
|
)}
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|