From 8950fd62609ed4138a85ef2ebf14ba8f71a00f50 Mon Sep 17 00:00:00 2001
From: Daniel Bedeleanu <bede@tfm.ro>
Date: Sat, 25 Apr 2026 13:04:45 +0300
Subject: [PATCH] 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
---
 frontend/components/ItemDetailModal.tsx | 38 ++++++++++++-------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/frontend/components/ItemDetailModal.tsx b/frontend/components/ItemDetailModal.tsx
index db7dee76..dd7c1163 100644
--- a/frontend/components/ItemDetailModal.tsx
+++ b/frontend/components/ItemDetailModal.tsx
@@ -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} />