Changes to UI

resources/js/Components/DataTable/DataTableClient.vue

@@ -209,7 +209,7 @@ function setPageSize(ps) {
               @click="toggleSort(col)"
               :aria-sort="sort?.key === col.key ? sort.direction || 'none' : 'none'"
             >
-              <span>{{ col.label }}</span>
+              <span class="uppercase">{{ col.label }}</span>
               <span v-if="sort?.key === col.key && sort.direction === 'asc'">▲</span>
               <span v-else-if="sort?.key === col.key && sort.direction === 'desc'"
                 >▼</span
@@ -281,9 +281,14 @@ function setPageSize(ps) {
       </FwbTable>
     </div>
 
-    <nav class="mt-3 flex flex-wrap items-center justify-between gap-3 text-sm text-gray-700" aria-label="Pagination">
+    <nav
+      class="mt-3 flex flex-wrap items-center justify-between gap-3 text-sm text-gray-700"
+      aria-label="Pagination"
+    >
       <div v-if="showPageStats">
-        <span v-if="total > 0">Prikazano: {{ showingFrom }}–{{ showingTo }} od {{ total }}</span>
+        <span v-if="total > 0"
+          >Prikazano: {{ showingFrom }}–{{ showingTo }} od {{ total }}</span
+        >
         <span v-else>Ni zadetkov</span>
       </div>
       <div class="flex items-center gap-1">
@@ -311,7 +316,9 @@ function setPageSize(ps) {
           v-if="visiblePages[0] > 1"
           class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50"
           @click="setPage(1)"
-        >1</button>
+        >
+          1
+        </button>
         <span v-if="visiblePages[0] > 2" class="px-1">…</span>
 
         <!-- Page numbers -->
@@ -319,7 +326,11 @@ function setPageSize(ps) {
           v-for="p in visiblePages"
           :key="p"
           class="px-3 py-1 rounded border transition-colors"
-          :class="p === currentPage ? 'border-indigo-600 bg-indigo-600 text-white' : 'border-gray-300 hover:bg-gray-50'"
+          :class="
+            p === currentPage
+              ? 'border-indigo-600 bg-indigo-600 text-white'
+              : 'border-gray-300 hover:bg-gray-50'
+          "
           :aria-current="p === currentPage ? 'page' : undefined"
           @click="setPage(p)"
         >
@@ -327,12 +338,16 @@ function setPageSize(ps) {
         </button>
 
         <!-- Trailing ellipsis / last page when window doesn't include last -->
-        <span v-if="visiblePages[visiblePages.length - 1] < lastPage - 1" class="px-1">…</span>
+        <span v-if="visiblePages[visiblePages.length - 1] < lastPage - 1" class="px-1"
+          >…</span
+        >
         <button
           v-if="visiblePages[visiblePages.length - 1] < lastPage"
           class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50"
           @click="setPage(lastPage)"
-        >{{ lastPage }}</button>
+        >
+          {{ lastPage }}
+        </button>
 
         <!-- Next -->
         <button