From 1816fc2661136fc23e1fc3decb2cdea9f339c996 Mon Sep 17 00:00:00 2001
From: Daniel Bedeleanu <bede@tfm.ro>
Date: Sat, 25 Apr 2026 13:04:07 +0300
Subject: [PATCH] style(frontend): refactor InventoryTable for DESIGN.md
 compliance

- Removed 'font-sans' and 'bg-green-500/10'
- Replaced hardcoded surface colors with black-based variants
- Consistent industrial accents for category and item icons
- Used 'text-rose-500' for low stock instead of 'text-warning'
---
 frontend/components/InventoryTable.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/components/InventoryTable.tsx b/frontend/components/InventoryTable.tsx
index e664f77b..08e7a9b8 100644
--- a/frontend/components/InventoryTable.tsx
+++ b/frontend/components/InventoryTable.tsx
@@ -53,7 +53,7 @@ export default function InventoryTable({
 
   if (categories.length === 0) {
     return (
-      <div className="py-2 lg:py-3 xl:py-40 text-center text-[#888888] font-sans">
+      <div className="py-2 lg:py-3 xl:py-40 text-center text-[#888888]">
         <Package size={48} className="mx-auto mb-4 opacity-10" />
         <p className="font-normal">No Results Found</p>
       </div>
@@ -61,17 +61,17 @@ export default function InventoryTable({
   }
 
   return (
-    <section className="space-y-4 font-sans">
+    <section className="space-y-4">
       {categories.map(cat => {
         const categoryItems = items.filter(i => i.category === cat);
         return (
-          <div key={cat} className="bg-surface-container border border-border transition-all duration-300">
+          <div key={cat} className="level-1 transition-all duration-300">
             <div
-              className="w-full p-2 md:p-3 flex items-center justify-between hover:bg-surface-bright transition-colors cursor-pointer"
+              className="w-full p-2 md:p-3 flex items-center justify-between hover:bg-black/40 transition-colors cursor-pointer"
               onClick={() => onExpandCategory(expandedCategory === cat ? null : cat)}
             >
               <div className="flex items-center gap-3">
-                <div className="w-8 h-8 bg-primary/10 flex items-center justify-center text-primary border border-primary/20 transition-colors">
+                <div className="w-8 h-8 bg-black flex items-center justify-center text-primary border border-primary/20 transition-colors">
                   <Layers size={16} />
                 </div>
                 <div className="text-left">
@@ -89,7 +89,7 @@ export default function InventoryTable({
                       e.stopPropagation();
                       onEditCategory(cat);
                     }}
-                    className="p-1.5 hover:bg-surface-bright text-secondary hover:text-primary transition-colors border border-transparent hover:border-border"
+                    className="p-1.5 hover:bg-black text-secondary hover:text-primary transition-colors border border-transparent hover:border-border"
                   >
                     <EditIcon size={14} />
                   </button>
@@ -102,7 +102,7 @@ export default function InventoryTable({
                 {categoryItems.map(item => (
                   <div
                     key={item.id}
-                    className="bg-black/20 p-2 md:p-3 flex items-center justify-between hover:bg-surface-bright/50 transition-colors"
+                    className="bg-black/40 p-2 md:p-3 flex items-center justify-between hover:bg-black transition-colors"
                   >
                     <div
                       onClick={() => handleItemClick(item)}
@@ -124,7 +124,7 @@ export default function InventoryTable({
                           />
                         </div>
                       ) : (
-                        <div className="w-10 h-10 bg-green-500/10 flex items-center justify-center text-green-500 shrink-0 border border-green-500/20">
+                        <div className="w-10 h-10 bg-black flex items-center justify-center text-primary shrink-0 border border-primary/20">
                           <Package size={14} />
                         </div>
                       )}
@@ -138,7 +138,7 @@ export default function InventoryTable({
                     <div className="text-right shrink-0">
                       <span className={cn(
                         "text-base font-normal tabular-nums",
-                        item.quantity <= item.min_quantity ? "text-warning" : "text-primary"
+                        item.quantity <= item.min_quantity ? "text-rose-500" : "text-primary"
                       )}>
                         {item.quantity}
                       </span>