feat: Update table headers to improve styling and consistency across components

Author: Lasim

services/frontend/src/components/credentials/CredentialsTable.vue

@@ -39,23 +39,23 @@ const getCreatedByDisplay = (createdBy: any) => {
   <div class="rounded-md border">
     <table class="w-full">
       <thead>
-        <tr class="border-b">
-          <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
+        <tr class="border-b bg-muted/50">
+          <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground text-sm">
             Name
           </th>
-          <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
+          <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground text-sm">
             Provider
           </th>
-          <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
+          <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground text-sm">
             Comment
           </th>
-          <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
+          <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground text-sm">
             Created By
           </th>
-          <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
+          <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground text-sm">
             Created
           </th>
-          <th class="h-12 px-4 text-right align-middle font-medium text-muted-foreground">
+          <th class="h-12 px-4 text-right align-middle font-medium text-muted-foreground text-sm">
             Manage
           </th>
         </tr>

services/frontend/src/components/ui/table/TableHead.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <th
     data-slot="table-head"
-    :class="cn('text-muted-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)"
+    :class="cn('text-muted-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-sm [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)"
   >
     <slot />
   </th>

services/frontend/src/views/admin/Users.vue

@@ -54,9 +54,9 @@ async function fetchUsers(): Promise<User[]> {
   if (!apiUrl) {
     throw new Error('VITE_DEPLOYSTACK_BACKEND_URL is not configured.')
   }
-  
-  const response = await fetch(`${apiUrl}/api/users`, { 
-    credentials: 'include' 
+
+  const response = await fetch(`${apiUrl}/api/users`, {
+    credentials: 'include'
   })
 
   if (!response.ok) {
@@ -95,23 +95,23 @@ const table = useVueTable({
     return columns
   },
   onSortingChange: (updaterOrValue) => {
-    sorting.value = typeof updaterOrValue === 'function' 
-      ? updaterOrValue(sorting.value) 
+    sorting.value = typeof updaterOrValue === 'function'
+      ? updaterOrValue(sorting.value)
       : updaterOrValue
   },
   onColumnFiltersChange: (updaterOrValue) => {
-    columnFilters.value = typeof updaterOrValue === 'function' 
-      ? updaterOrValue(columnFilters.value) 
+    columnFilters.value = typeof updaterOrValue === 'function'
+      ? updaterOrValue(columnFilters.value)
       : updaterOrValue
   },
   onColumnVisibilityChange: (updaterOrValue) => {
-    columnVisibility.value = typeof updaterOrValue === 'function' 
-      ? updaterOrValue(columnVisibility.value) 
+    columnVisibility.value = typeof updaterOrValue === 'function'
+      ? updaterOrValue(columnVisibility.value)
       : updaterOrValue
   },
   onRowSelectionChange: (updaterOrValue) => {
-    rowSelection.value = typeof updaterOrValue === 'function' 
-      ? updaterOrValue(rowSelection.value) 
+    rowSelection.value = typeof updaterOrValue === 'function'
+      ? updaterOrValue(rowSelection.value)
       : updaterOrValue
   },
   getCoreRowModel: getCoreRowModel(),
@@ -177,6 +177,7 @@ const filterValue = computed({
               <TableRow
                 v-for="headerGroup in table.getHeaderGroups()"
                 :key="headerGroup.id"
+                class="bg-muted/50"
               >
                 <TableHead
                   v-for="header in headerGroup.headers"

services/frontend/src/views/teams/TeamTableColumns.vue

@@ -45,22 +45,22 @@ const getRoleDisplay = (role: string) => {
     <table class="w-full">
       <thead>
         <tr class="border-b bg-muted/50">
-          <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
+          <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground text-sm">
             {{ t('teams.table.columns.name') }}
           </th>
-          <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
+          <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground text-sm">
             {{ t('teams.table.columns.description') }}
           </th>
-          <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
+          <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground text-sm">
             {{ t('teams.table.columns.role') }}
           </th>
-          <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
+          <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground text-sm">
             {{ t('teams.table.columns.created') }}
           </th>
-          <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">
+          <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground text-sm">
             {{ t('teams.table.columns.switch') }}
           </th>
-          <th class="h-12 px-4 text-right align-middle font-medium text-muted-foreground">
+          <th class="h-12 px-4 text-right align-middle font-medium text-muted-foreground text-sm">
             {{ t('teams.table.columns.actions') }}
           </th>
         </tr>