UI improvements
- 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
10
src/App.tsx
10
src/App.tsx
@@ -76,9 +76,6 @@ function App() {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p className="mt-2 text-gray-600 dark:text-gray-400">
|
|
||||||
Bambu Lab praćenje zaliha filamenata sinhronizovano sa Confluence
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
@@ -90,13 +87,6 @@ function App() {
|
|||||||
/>
|
/>
|
||||||
</main>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -77,33 +77,33 @@ export const FilamentTable: React.FC<FilamentTableProps> = ({ filaments, loading
|
|||||||
<thead>
|
<thead>
|
||||||
<tr className="bg-gray-100 dark:bg-gray-700">
|
<tr className="bg-gray-100 dark:bg-gray-700">
|
||||||
<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('brand')}
|
onClick={() => handleSort('brand')}
|
||||||
>
|
>
|
||||||
Brend {sortField === 'brand' && (sortOrder === 'asc' ? '↑' : '↓')}
|
Brend {sortField === 'brand' && (sortOrder === 'asc' ? '↑' : '↓')}
|
||||||
</th>
|
</th>
|
||||||
<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')}
|
onClick={() => handleSort('tip')}
|
||||||
>
|
>
|
||||||
Tip {sortField === 'tip' && (sortOrder === 'asc' ? '↑' : '↓')}
|
Tip {sortField === 'tip' && (sortOrder === 'asc' ? '↑' : '↓')}
|
||||||
</th>
|
</th>
|
||||||
<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')}
|
onClick={() => handleSort('finish')}
|
||||||
>
|
>
|
||||||
Završna obrada {sortField === 'finish' && (sortOrder === 'asc' ? '↑' : '↓')}
|
Završna obrada {sortField === 'finish' && (sortOrder === 'asc' ? '↑' : '↓')}
|
||||||
</th>
|
</th>
|
||||||
<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')}
|
onClick={() => handleSort('boja')}
|
||||||
>
|
>
|
||||||
Boja {sortField === 'boja' && (sortOrder === 'asc' ? '↑' : '↓')}
|
Boja {sortField === 'boja' && (sortOrder === 'asc' ? '↑' : '↓')}
|
||||||
</th>
|
</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 border-r 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 border-r 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 border-r 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">Količina</th>
|
||||||
<th className="px-4 py-2 border-b dark:border-gray-600 text-gray-900 dark:text-gray-100">Cena</th>
|
<th className="px-4 py-2 border-b dark:border-gray-600 text-gray-900 dark:text-gray-100">Cena</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
@@ -125,16 +125,16 @@ export const FilamentTable: React.FC<FilamentTableProps> = ({ filaments, loading
|
|||||||
color: textColor
|
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 border-r 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 border-r 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 border-r 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">
|
||||||
<ColorCell colorName={filament.boja} />
|
<ColorCell colorName={filament.boja} />
|
||||||
</td>
|
</td>
|
||||||
<td className="px-4 py-2 border-b dark:border-gray-700">{filament.refill}</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 dark:border-gray-700">{filament.vakum}</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 dark:border-gray-700">{filament.otvoreno}</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 dark:border-gray-700">{filament.kolicina}</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>
|
<td className="px-4 py-2 border-b dark:border-gray-700">{filament.cena}</td>
|
||||||
</tr>
|
</tr>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user