From ba509400cbfab14e5a2469afda117f0f73a9209c Mon Sep 17 00:00:00 2001
From: Zynh0722 <Zynh0722@gmail.com>
Date: Sun, 5 Nov 2023 10:46:46 -0800
Subject: [PATCH] table styling

---
 templates/shift_reports.rs.html | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/templates/shift_reports.rs.html b/templates/shift_reports.rs.html
index e21a2f9..5b0e289 100644
--- a/templates/shift_reports.rs.html
+++ b/templates/shift_reports.rs.html
@@ -16,31 +16,30 @@
 
 <div class="flex">
   <table class="m-auto table-auto w-4/5">
-    <thead>
+    <thead class="text-xs text-gray-700 bg-gray-50">
       <tr>
-        <th>Shift ID</th>
-        <th>Shift Start</th>
-        <th>Shift End</th>
+        <th scope="col" class="px-6 py-3">Shift ID</th>
+        <th scope="col" class="px-6 py-3">Shift Start</th>
+        <th scope="col" class="px-6 py-3">Shift End</th>
+        <th></th>
       </tr>
     </thead>
     <tbody>
       @for shift in shifts {
 
-      <tr class="odd:bg-neutral-200">
-        <td class="text-center">@shift.id</td>
-        <td class="text-center">@shift.start.format("%A, %b %m - %H:%M")</td>
-        <td class="text-center">
+      <tr class="bg-white odd:bg-neutral-50 border-b">
+        <td scope="row" class="text-center px-6 py-3">@shift.id</td>
+        <td class="text-center px-6 py-3">@shift.start.format("%A, %b %m - %H:%M")</td>
+        <td class="text-center px-6 py-3">
           @if let Some(end) = shift.end {
             @end.format("%A, %b %m - %H:%M")
           } else {
             Currently Open
           }
         </td>
-        <td hx-boost="true" class="flex justify-end">
-          <a href="/shifts/@shift.id/report">
-            <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5">
+        <td hx-boost="true" class="px-6 py-4">
+          <a href="/shifts/@shift.id/report" class="text-center font-medium text-blue-600 hover:underline">
               View Shift
-            </button>
           </a>
         </td>
       </tr>