style(frontend): refactor ItemDetailModal for DESIGN.md compliance
- Removed 'font-sans' and hardcoded surface colors - Replaced background with 'level-0' and borders with 'border-border' - Ensured sharp corners and removed 'rounded' classes - Updated icon button hover states for industrial look
This commit is contained in:
@@ -68,16 +68,16 @@ export default function ItemDetailModal({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 font-sans">
|
||||
<div className="bg-[#0A0A0A] border border-[#222222] rounded-none max-w-2xl w-full max-h-[90vh] overflow-y-auto shadow-none">
|
||||
<div className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50 p-4">
|
||||
<div className="level-0 border border-border max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
||||
{/* Header */}
|
||||
<div className="sticky top-0 bg-[#0A0A0A] border-b border-[#222222] p-4 md:p-6 flex items-center justify-between">
|
||||
<div className="sticky top-0 level-0 border-b border-border p-4 md:p-6 flex items-center justify-between z-10">
|
||||
<h2 className="text-xl md:text-2xl font-normal text-white truncate">{item.name}</h2>
|
||||
<div className="flex items-center gap-2">
|
||||
{currentPhoto && (
|
||||
<button
|
||||
onClick={() => setShowDebugPanel(true)}
|
||||
className="p-2 hover:bg-[#1A1A1A] rounded-none text-yellow-400 hover:text-yellow-300 transition-colors border border-transparent hover:border-[#222222]"
|
||||
className="p-2 hover:bg-black border border-transparent hover:border-border text-primary transition-colors"
|
||||
title="Debug rotation & crop"
|
||||
aria-label="Debug panel"
|
||||
>
|
||||
@@ -86,7 +86,7 @@ export default function ItemDetailModal({
|
||||
)}
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-[#1A1A1A] rounded-none text-[#888888] hover:text-white transition-colors border border-transparent hover:border-[#222222]"
|
||||
className="p-2 hover:bg-black border border-transparent hover:border-border text-secondary hover:text-white transition-colors"
|
||||
aria-label="Close modal"
|
||||
>
|
||||
<X size={20} />
|
||||
@@ -99,31 +99,31 @@ export default function ItemDetailModal({
|
||||
{/* Item Details */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-xs text-[#888888] mb-1">Category</p>
|
||||
<p className="text-xs text-muted mb-1">Category</p>
|
||||
<p className="text-sm text-white">{item.category}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-[#888888] mb-1">Type</p>
|
||||
<p className="text-xs text-muted mb-1">Type</p>
|
||||
<p className="text-sm text-white">{item.type || 'N/A'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-[#888888] mb-1">Quantity</p>
|
||||
<p className="text-xs text-muted mb-1">Quantity</p>
|
||||
<p className="text-sm text-white">{item.quantity}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-[#888888] mb-1">Part Number</p>
|
||||
<p className="text-xs text-muted mb-1">Part Number</p>
|
||||
<p className="text-sm text-white">{item.part_number || 'N/A'}</p>
|
||||
</div>
|
||||
{item.barcode && (
|
||||
<div className="col-span-2">
|
||||
<p className="text-xs text-[#888888] mb-1">Barcode</p>
|
||||
<p className="text-xs text-muted mb-1">Barcode</p>
|
||||
<p className="text-sm text-white font-mono">{item.barcode}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Photo Section */}
|
||||
<div className="border-t border-[#222222] pt-6">
|
||||
<div className="border-t border-border pt-6">
|
||||
<h3 className="text-lg font-normal text-white mb-4 flex items-center gap-2">
|
||||
<Camera size={18} className="text-primary" />
|
||||
Photo
|
||||
@@ -133,7 +133,7 @@ export default function ItemDetailModal({
|
||||
<>
|
||||
{currentPhoto ? (
|
||||
<div className="space-y-3">
|
||||
<div className="relative bg-black border border-[#222222] rounded-none overflow-hidden aspect-video max-h-96">
|
||||
<div className="relative bg-black border border-border overflow-hidden aspect-video max-h-96">
|
||||
<img
|
||||
src={buildPhotoUrl(backendUrl, currentPhoto.full_url)}
|
||||
alt={item.name}
|
||||
@@ -143,25 +143,25 @@ export default function ItemDetailModal({
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setShowPhotoUpload(true)}
|
||||
className="flex-1 px-4 py-2 bg-primary/20 border border-primary/50 text-primary rounded-none hover:bg-primary/30 transition-colors font-normal text-sm"
|
||||
className="flex-1 px-4 py-2 bg-primary/10 border border-primary/30 text-primary hover:bg-primary/20 transition-colors font-normal text-sm"
|
||||
>
|
||||
Replace Photo
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDeletePhoto}
|
||||
disabled={isDeleting}
|
||||
className="px-4 py-2 bg-rose-500/20 border border-rose-500/50 text-rose-400 rounded-none hover:bg-rose-500/30 disabled:opacity-50 transition-colors font-normal text-sm"
|
||||
className="px-4 py-2 bg-rose-500/10 border border-rose-500/30 text-rose-500 hover:bg-rose-500/20 disabled:opacity-50 transition-colors font-normal text-sm"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-black border border-[#222222] rounded-none p-8 text-center">
|
||||
<p className="text-[#888888] text-sm mb-4">No Photo Uploaded</p>
|
||||
<div className="bg-black border border-border p-8 text-center">
|
||||
<p className="text-muted text-sm mb-4">No Photo Uploaded</p>
|
||||
<button
|
||||
onClick={() => setShowPhotoUpload(true)}
|
||||
className="px-4 py-2 bg-primary/20 border border-primary/50 text-primary rounded-none hover:bg-primary/30 transition-colors font-normal text-sm"
|
||||
className="px-4 py-2 bg-primary/10 border border-primary/30 text-primary hover:bg-primary/20 transition-colors font-normal text-sm"
|
||||
>
|
||||
Upload Photo
|
||||
</button>
|
||||
@@ -169,12 +169,12 @@ export default function ItemDetailModal({
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div ref={photoUploadRef} className="bg-black border border-[#222222] rounded-none p-4 md:p-6">
|
||||
<div ref={photoUploadRef} className="bg-black border border-border p-4 md:p-6">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h4 className="font-normal text-white">Upload New Photo</h4>
|
||||
<button
|
||||
onClick={() => setShowPhotoUpload(false)}
|
||||
className="p-1 hover:bg-[#1A1A1A] rounded-none text-[#888888] hover:text-white transition-colors border border-transparent hover:border-[#222222]"
|
||||
className="p-1 hover:bg-black border border-transparent hover:border-border text-secondary hover:text-white transition-colors"
|
||||
aria-label="Cancel upload"
|
||||
>
|
||||
<X size={16} />
|
||||
|
||||
Reference in New Issue
Block a user