style(tables): improve headers, pagination, and date columns

- Add small-caps to all table column headers
- Show Added date in normal font size with time as smaller subtext
- Show Finished date in normal font size in bag table
- Rename "Previous" to "Prev" in pagination controls
- Use orange text and subtle hover on Prev/Next buttons and Rows select

templates/partials/lists/bag_list.html

@@ -21,7 +21,7 @@
     {{ table::search_header(navigator, "#bag-list") }}
     <div class="overflow-x-auto">
       <table class="responsive-table min-w-full divide-y text-left text-sm text-text">
-        <thead class="bg-surface-alt text-xs font-semibold tracking-wide text-text">
+        <thead class="bg-surface-alt text-xs font-semibold tracking-wide text-text" style="font-variant: small-caps">
           <tr>
             {{ table::sortable_header("Added", "created-at", navigator, "#bag-list") }}
             {{ table::sortable_header("Roaster", "roaster", navigator, "#bag-list") }}
@@ -38,9 +38,9 @@
           <tr class="transition hover:bg-surface-alt"
             {% if is_authenticated %}onclick="toggleRow(event)"{% endif %}
           >
-            <td data-label="Added" class="card-date whitespace-nowrap px-4 py-3 text-xs font-medium text-text-secondary">
+            <td data-label="Added" class="card-date whitespace-nowrap px-4 py-3 font-medium text-text-secondary">
               <div>{{ bag.created_date }}</div>
-              <div class="hidden md:block font-normal text-text-muted">{{ bag.created_time }}</div>
+              <div class="hidden md:block text-xs font-normal text-text-muted">{{ bag.created_time }}</div>
             </td>
             <td data-label="Roaster" class="px-4 py-3 whitespace-nowrap font-medium text-text-secondary">
               {{ bag.roaster_name }}
@@ -68,11 +68,11 @@
               <div class="mt-0.5 text-right text-text-muted" style="font-variant: small-caps; font-size: 0.7rem">{{ bag.remaining }} / {{ bag.amount }}g</div>
             </td>
             {% endif %}
-            <td data-label="Finished" class="mobile-hidden whitespace-nowrap px-4 py-3 text-xs font-medium text-text-secondary">
+            <td data-label="Finished" class="mobile-hidden whitespace-nowrap px-4 py-3 font-medium text-text-secondary">
               <div>{{ bag.finished_date }}</div>
             </td>
             {% if bag.closed %}
-            <td data-label="Finished" class="whitespace-nowrap px-4 py-3 text-xs font-medium text-text-secondary md:hidden">
+            <td data-label="Finished" class="whitespace-nowrap px-4 py-3 font-medium text-text-secondary md:hidden">
               <div>{{ bag.finished_date }}</div>
             </td>
             {% endif %}

templates/partials/lists/brew_list.html

@@ -36,7 +36,7 @@
 
     <div class="overflow-x-auto">
       <table class="responsive-table min-w-full divide-y text-left text-sm text-text">
-        <thead class="bg-surface-alt text-xs font-semibold tracking-wide text-text">
+        <thead class="bg-surface-alt text-xs font-semibold tracking-wide text-text" style="font-variant: small-caps">
           <tr>
             {{ table::sortable_header("Added", "created-at", navigator, "#brew-list") }}
             <th scope="col" class="px-4 py-3">Coffee</th>
@@ -54,9 +54,9 @@
           <tr class="transition hover:bg-surface-alt"
             {% if is_authenticated %}onclick="toggleRow(event)"{% endif %}
           >
-            <td data-label="Added" class="card-date whitespace-nowrap px-4 py-3 text-xs font-medium text-text-secondary">
+            <td data-label="Added" class="card-date whitespace-nowrap px-4 py-3 font-medium text-text-secondary">
               <div>{{ brew.created_date }}</div>
-              <div class="hidden md:block font-normal text-text-muted">{{ brew.created_time }}</div>
+              <div class="hidden md:block text-xs font-normal text-text-muted">{{ brew.created_time }}</div>
             </td>
             <td data-label="Coffee" class="card-title px-4 py-3 whitespace-nowrap">
               <div class="font-medium text-text">{{ brew.roast_name }}</div>

templates/partials/lists/cafe_list.html

@@ -21,7 +21,7 @@
     {{ table::search_header(navigator, "#cafe-list") }}
     <div class="overflow-x-auto">
       <table class="responsive-table min-w-full divide-y text-left text-sm text-text">
-        <thead class="bg-surface-alt text-xs font-semibold tracking-wide text-text">
+        <thead class="bg-surface-alt text-xs font-semibold tracking-wide text-text" style="font-variant: small-caps">
           <tr>
             {{ table::sortable_header("Added", "created-at", navigator, "#cafe-list") }}
             {{ table::sortable_header("Name", "name", navigator, "#cafe-list") }}
@@ -41,9 +41,9 @@
             class="transition hover:bg-surface-alt"
             onclick="toggleRow(event)"
           >
-            <td data-label="Added" class="card-date whitespace-nowrap px-4 py-3 text-xs font-medium text-text-secondary">
+            <td data-label="Added" class="card-date whitespace-nowrap px-4 py-3 font-medium text-text-secondary">
               <div>{{ cafe.created_date }}</div>
-              <div class="hidden md:block font-normal text-text-muted">{{ cafe.created_time }}</div>
+              <div class="hidden md:block text-xs font-normal text-text-muted">{{ cafe.created_time }}</div>
             </td>
             <td data-label="Name" class="card-title px-4 py-3 font-medium text-text">
               {{ cafe.name }}

templates/partials/lists/cup_list.html

@@ -21,7 +21,7 @@
     {{ table::search_header(navigator, "#cup-list") }}
     <div class="overflow-x-auto">
       <table class="responsive-table min-w-full divide-y text-left text-sm text-text">
-        <thead class="bg-surface-alt text-xs font-semibold tracking-wide text-text">
+        <thead class="bg-surface-alt text-xs font-semibold tracking-wide text-text" style="font-variant: small-caps">
           <tr>
             {{ table::sortable_header("Added", "created-at", navigator, "#cup-list") }}
             {{ table::sortable_header("Roast", "roast", navigator, "#cup-list") }}
@@ -40,9 +40,9 @@
             class="transition hover:bg-surface-alt"
             {% if is_authenticated %}onclick="toggleRow(event)"{% endif %}
           >
-            <td data-label="Added" class="card-date whitespace-nowrap px-4 py-3 text-xs font-medium text-text-secondary">
+            <td data-label="Added" class="card-date whitespace-nowrap px-4 py-3 font-medium text-text-secondary">
               <div>{{ cup.created_date }}</div>
-              <div class="hidden md:block font-normal text-text-muted">{{ cup.created_time }}</div>
+              <div class="hidden md:block text-xs font-normal text-text-muted">{{ cup.created_time }}</div>
             </td>
             <td data-label="Coffee" class="card-title px-4 py-3 whitespace-nowrap md:hidden">
               <div class="font-medium text-text">{{ cup.roast_name }}</div>

templates/partials/lists/gear_list.html

@@ -22,7 +22,7 @@
 
     <div class="overflow-x-auto">
       <table class="responsive-table min-w-full divide-y text-left text-sm text-text">
-        <thead class="bg-surface-alt text-xs font-semibold tracking-wide text-text">
+        <thead class="bg-surface-alt text-xs font-semibold tracking-wide text-text" style="font-variant: small-caps">
           <tr>
             {{ table::sortable_header("Added", "created-at", navigator, "#gear-list") }}
             {{ table::sortable_header("Category", "category", navigator, "#gear-list") }}
@@ -38,9 +38,9 @@
           <tr class="transition hover:bg-surface-alt"
             {% if is_authenticated %}onclick="toggleRow(event)"{% endif %}
           >
-            <td data-label="Added" class="card-date whitespace-nowrap px-4 py-3 text-xs font-medium text-text-secondary">
+            <td data-label="Added" class="card-date whitespace-nowrap px-4 py-3 font-medium text-text-secondary">
               <div>{{ item.created_date }}</div>
-              <div class="hidden md:block font-normal text-text-muted">{{ item.created_time }}</div>
+              <div class="hidden md:block text-xs font-normal text-text-muted">{{ item.created_time }}</div>
             </td>
             <td data-label="" class="card-title px-4 py-3 whitespace-nowrap md:hidden">{{ item.make }} {{ item.model }}</td>
             <td data-label="Category" class="px-4 py-3 whitespace-nowrap">

templates/partials/lists/roast_list.html

@@ -21,7 +21,7 @@
     {{ table::search_header(navigator, "#roast-list") }}
     <div class="overflow-x-auto">
       <table class="responsive-table min-w-full divide-y text-left text-sm text-text">
-        <thead class="bg-surface-alt text-xs font-semibold tracking-wide text-text">
+        <thead class="bg-surface-alt text-xs font-semibold tracking-wide text-text" style="font-variant: small-caps">
           <tr>
             {{ table::sortable_header("Added", "created-at", navigator, "#roast-list") }}
             {{ table::sortable_header("Roast", "name", navigator, "#roast-list") }}
@@ -44,9 +44,9 @@
             class="transition hover:bg-surface-alt"
             {% if is_authenticated %}onclick="toggleRow(event)"{% endif %}
           >
-            <td data-label="Added" class="card-date whitespace-nowrap px-4 py-3 text-xs font-medium text-text-secondary">
+            <td data-label="Added" class="card-date whitespace-nowrap px-4 py-3 font-medium text-text-secondary">
               <div>{{ roast.created_date }}</div>
-              <div class="hidden md:block font-normal text-text-muted">{{ roast.created_time }}</div>
+              <div class="hidden md:block text-xs font-normal text-text-muted">{{ roast.created_time }}</div>
             </td>
             <td data-label="Roast" class="card-title px-4 py-3">
               <div class="font-medium text-text">{{ roast.name }}</div>

templates/partials/lists/roaster_list.html

@@ -21,7 +21,7 @@
     {{ table::search_header(navigator, "#roaster-list") }}
     <div class="overflow-x-auto">
       <table class="responsive-table min-w-full divide-y text-left text-sm text-text">
-        <thead class="bg-surface-alt text-xs font-semibold tracking-wide text-text">
+        <thead class="bg-surface-alt text-xs font-semibold tracking-wide text-text" style="font-variant: small-caps">
           <tr>
             {{ table::sortable_header("Added", "created-at", navigator, "#roaster-list") }}
             {{ table::sortable_header("Name", "name", navigator, "#roaster-list") }}
@@ -41,9 +41,9 @@
             class="transition hover:bg-surface-alt"
             {% if roaster.has_homepage || is_authenticated %}onclick="toggleRow(event)"{% endif %}
           >
-            <td data-label="Added" class="card-date whitespace-nowrap px-4 py-3 text-xs font-medium text-text-secondary">
+            <td data-label="Added" class="card-date whitespace-nowrap px-4 py-3 font-medium text-text-secondary">
               <div>{{ roaster.created_date }}</div>
-              <div class="hidden md:block font-normal text-text-muted">{{ roaster.created_time }}</div>
+              <div class="hidden md:block text-xs font-normal text-text-muted">{{ roaster.created_time }}</div>
             </td>
             <td data-label="Name" class="card-title px-4 py-3 font-medium text-text">
               {{ roaster.name }}

templates/partials/lists/table.html

@@ -24,7 +24,7 @@
         <div class="flex items-center gap-2">
           <button
             type="button"
-            class="inline-flex items-center gap-1 rounded-md border px-2.5 py-0.5 text-xs font-semibold transition hover:border-accent hover:text-accent disabled:cursor-not-allowed disabled:opacity-40"
+            class="inline-flex items-center gap-1 rounded-md border px-2.5 py-0.5 text-xs font-semibold text-accent transition hover:bg-surface-alt disabled:cursor-not-allowed disabled:opacity-40"
             {% if items.has_previous() %}
             data-on:click="history.pushState(null, '', '{{ navigator.page_href(items.previous_page().unwrap())|safe }}'); @get('{{ navigator.fragment_page_href(items.previous_page().unwrap())|safe }}', {responseOverrides: {selector: '{{ target_selector }}', mode: 'replace'}})"
             {% else %}
@@ -32,7 +32,7 @@
             {% endif %}
           >
             <span aria-hidden="true">←</span>
-            <span>Previous</span>
+            <span>Prev</span>
           </button>
           {% if items.is_showing_all() %}
           <span class="font-semibold text-text">Showing all results</span>
@@ -43,7 +43,7 @@
           {% endif %}
           <button
             type="button"
-            class="inline-flex items-center gap-1 rounded-md border px-2.5 py-0.5 text-xs font-semibold transition hover:border-accent hover:text-accent disabled:cursor-not-allowed disabled:opacity-40"
+            class="inline-flex items-center gap-1 rounded-md border px-2.5 py-0.5 text-xs font-semibold text-accent transition hover:bg-surface-alt disabled:cursor-not-allowed disabled:opacity-40"
             {% if items.has_next() %}
             data-on:click="history.pushState(null, '', '{{ navigator.page_href(items.next_page().unwrap())|safe }}'); @get('{{ navigator.fragment_page_href(items.next_page().unwrap())|safe }}', {responseOverrides: {selector: '{{ target_selector }}', mode: 'replace'}})"
             {% else %}
@@ -57,7 +57,7 @@
         <label class="flex items-center gap-2 text-xs font-semibold text-text-secondary">
           <span>Rows</span>
           <select
-            class="rounded-md border bg-surface px-2 py-1 text-xs font-semibold text-text transition hover:border-accent"
+            class="rounded-md border bg-surface px-2 py-1 text-xs font-semibold text-accent transition hover:border-accent"
             data-on:change="history.pushState(null, '', evt.target.selectedOptions[0].dataset.url); @get(evt.target.selectedOptions[0].dataset.href, {responseOverrides: {selector: '{{ target_selector }}', mode: 'replace'}})"
           >
             <option value="5" data-href="{{ navigator.fragment_rows_href("5")|safe }}" data-url="{{ navigator.rows_href("5")|safe }}" {% if items.is_page_size(5) %}selected{% endif %}>5</option>