From 0860686019053a24c384548f621c492343ab0eb2 Mon Sep 17 00:00:00 2001
From: DaX <daxdax89@msn.com>
Date: Tue, 17 Jun 2025 23:30:27 +0200
Subject: [PATCH] UI improvements

- Removed subtitle from header
- Added vertical borders to table for better readability
- Removed footer text
- Cleaner, more minimal interface
---
 src/App.tsx                      | 10 ----------
 src/components/FilamentTable.tsx | 32 ++++++++++++++++----------------
 2 files changed, 16 insertions(+), 26 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 7313f30..db542d5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -76,9 +76,6 @@ function App() {
               </button>
             </div>
           </div>
-          <p className="mt-2 text-gray-600 dark:text-gray-400">
-            Bambu Lab praćenje zaliha filamenata sinhronizovano sa Confluence
-          </p>
         </div>
       </header>
       
@@ -90,13 +87,6 @@ function App() {
         />
       </main>
       
-      <footer className="bg-white dark:bg-gray-800 border-t dark:border-gray-700 mt-12 transition-colors">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-          <p className="text-center text-sm text-gray-500 dark:text-gray-400">
-            Filamenteka - Automatsko praćenje filamenata sa kodiranjem bojama
-          </p>
-        </div>
-      </footer>
     </div>
   );
 }
diff --git a/src/components/FilamentTable.tsx b/src/components/FilamentTable.tsx
index ac62bfe..17a0a3a 100644
--- a/src/components/FilamentTable.tsx
+++ b/src/components/FilamentTable.tsx
@@ -77,33 +77,33 @@ export const FilamentTable: React.FC<FilamentTableProps> = ({ filaments, loading
           <thead>
             <tr className="bg-gray-100 dark:bg-gray-700">
               <th 
-                className="px-4 py-2 border-b dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
+                className="px-4 py-2 border-b border-r dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
                 onClick={() => handleSort('brand')}
               >
                 Brend {sortField === 'brand' && (sortOrder === 'asc' ? '↑' : '↓')}
               </th>
               <th 
-                className="px-4 py-2 border-b dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
+                className="px-4 py-2 border-b border-r dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
                 onClick={() => handleSort('tip')}
               >
                 Tip {sortField === 'tip' && (sortOrder === 'asc' ? '↑' : '↓')}
               </th>
               <th 
-                className="px-4 py-2 border-b dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
+                className="px-4 py-2 border-b border-r dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
                 onClick={() => handleSort('finish')}
               >
                 Završna obrada {sortField === 'finish' && (sortOrder === 'asc' ? '↑' : '↓')}
               </th>
               <th 
-                className="px-4 py-2 border-b dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
+                className="px-4 py-2 border-b border-r dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
                 onClick={() => handleSort('boja')}
               >
                 Boja {sortField === 'boja' && (sortOrder === 'asc' ? '↑' : '↓')}
               </th>
-              <th className="px-4 py-2 border-b dark:border-gray-600 text-gray-900 dark:text-gray-100">Refill</th>
-              <th className="px-4 py-2 border-b dark:border-gray-600 text-gray-900 dark:text-gray-100">Vakum</th>
-              <th className="px-4 py-2 border-b dark:border-gray-600 text-gray-900 dark:text-gray-100">Otvoreno</th>
-              <th className="px-4 py-2 border-b dark:border-gray-600 text-gray-900 dark:text-gray-100">Količina</th>
+              <th className="px-4 py-2 border-b border-r dark:border-gray-600 text-gray-900 dark:text-gray-100">Refill</th>
+              <th className="px-4 py-2 border-b border-r dark:border-gray-600 text-gray-900 dark:text-gray-100">Vakum</th>
+              <th className="px-4 py-2 border-b border-r dark:border-gray-600 text-gray-900 dark:text-gray-100">Otvoreno</th>
+              <th className="px-4 py-2 border-b border-r dark:border-gray-600 text-gray-900 dark:text-gray-100">Količina</th>
               <th className="px-4 py-2 border-b dark:border-gray-600 text-gray-900 dark:text-gray-100">Cena</th>
             </tr>
           </thead>
@@ -125,16 +125,16 @@ export const FilamentTable: React.FC<FilamentTableProps> = ({ filaments, loading
                     color: textColor
                   }}
                 >
-                  <td className="px-4 py-2 border-b dark:border-gray-700">{filament.brand}</td>
-                  <td className="px-4 py-2 border-b dark:border-gray-700">{filament.tip}</td>
-                  <td className="px-4 py-2 border-b dark:border-gray-700">{filament.finish}</td>
-                  <td className="px-4 py-2 border-b dark:border-gray-700">
+                  <td className="px-4 py-2 border-b border-r dark:border-gray-700">{filament.brand}</td>
+                  <td className="px-4 py-2 border-b border-r dark:border-gray-700">{filament.tip}</td>
+                  <td className="px-4 py-2 border-b border-r dark:border-gray-700">{filament.finish}</td>
+                  <td className="px-4 py-2 border-b border-r dark:border-gray-700">
                     <ColorCell colorName={filament.boja} />
                   </td>
-                  <td className="px-4 py-2 border-b dark:border-gray-700">{filament.refill}</td>
-                  <td className="px-4 py-2 border-b dark:border-gray-700">{filament.vakum}</td>
-                  <td className="px-4 py-2 border-b dark:border-gray-700">{filament.otvoreno}</td>
-                  <td className="px-4 py-2 border-b dark:border-gray-700">{filament.kolicina}</td>
+                  <td className="px-4 py-2 border-b border-r dark:border-gray-700">{filament.refill}</td>
+                  <td className="px-4 py-2 border-b border-r dark:border-gray-700">{filament.vakum}</td>
+                  <td className="px-4 py-2 border-b border-r dark:border-gray-700">{filament.otvoreno}</td>
+                  <td className="px-4 py-2 border-b border-r dark:border-gray-700">{filament.kolicina}</td>
                   <td className="px-4 py-2 border-b dark:border-gray-700">{filament.cena}</td>
                 </tr>
               );