Daniel Bedeleanu
9a87064dbe
Phase 10 Implementation: Bulk color system compliance across frontend Applied DESIGN_COLOR_RULES.md to 40 component and page files: - Indigo (3) → primary/secondary (primary actions) - Green (12) → tertiary (#00e639) (success/healthy status) - Red/Rose (20) → error (#ffb4ab) (destructive actions) - Amber/Sky (9) → primary/secondary (warnings/info) - Blue/Slate (various) → primary/design system colors (focus states) - Black → bg-surface-container-lowest (proper design color) Files updated: 40 components + pages Color replacements: 44+ instances Build status: ✓ Zero errors, compiled in 6.3s Test status: Pending (npm run test) All colors now follow DESIGN.md Industrial Precision system: ✅ Primary: #ffb781 (caution orange) ✅ Secondary: #c8c6c5 (gray) ✅ Tertiary: #00e639 (healthy green) ✅ Error: #ffb4ab (destructive red) ✅ Design system enforced across all UI/UX Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
43 lines
1.8 KiB
TypeScript
43 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { Smartphone, Sparkles } from 'lucide-react';
|
|
import { clsx, type ClassValue } from 'clsx';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
function cn(...inputs: ClassValue[]) {
|
|
return twMerge(clsx(inputs));
|
|
}
|
|
|
|
interface NewItemDialogProps {
|
|
onScannerClick: () => void;
|
|
onAddItemClick: () => void;
|
|
}
|
|
|
|
export default function NewItemDialog({ onScannerClick, onAddItemClick }: NewItemDialogProps) {
|
|
return (
|
|
<div className="flex flex-col items-center py-3 md:py-4 text-center gap-3 md:gap-4">
|
|
<button
|
|
onClick={onScannerClick}
|
|
className="w-24 h-24 rounded-none bg-primary/20 hover:bg-primary/30 border-2 border-primary border-dashed flex items-center justify-center group transition-all"
|
|
>
|
|
<Smartphone className="w-10 h-10 text-primary group-hover:scale-110 transition-transform" />
|
|
</button>
|
|
|
|
<div className="w-full flex justify-center">
|
|
<button
|
|
onClick={onAddItemClick}
|
|
className="w-full flex flex-col items-center justify-center p-4 md:p-6 rounded-none bg-secondary/5 border border-primary/20 group hover:border-primary/50 transition-all font-normal text-primary gap-2 md:gap-3"
|
|
>
|
|
<div className="p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 bg-primary/10 rounded-none group-hover:scale-110 transition-transform shadow-none shadow-none">
|
|
<Sparkles size={32} />
|
|
</div>
|
|
<div className="text-center">
|
|
<p className="text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl leading-tight">Add New Item</p>
|
|
<p className="text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl opacity-60 font-mono mt-1">AI Smart Discovery</p>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|