DaX/Filamenteka
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI improvements

Browse Source 
- Removed subtitle from header
- Added vertical borders to table for better readability
- Removed footer text
- Cleaner, more minimal interface
This commit is contained in:
DaX
2025-06-17 23:30:27 +02:00
parent 050292539a
commit 0860686019
2 changed files with 16 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/App.tsx
View File

@@ -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>
);
}

32
src/components/FilamentTable.tsx
View File

@@ -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>
);