styling reports table

templates/shift_reports.rs.html

@@ -6,38 +6,46 @@
 
 @:base_html({
 
-@:return_to_main_html()
+<div class="fixed right-0 top-0 pr-4 pt-4">
+  @:return_to_main_html()
+</div>
 
-<table>
-  <thead>
-    <tr>
-      <th>Shift ID</th>
-      <th>Shift Start</th>
-      <th>Shift End</th>
-    </tr>
-  </thead>
-  <tbody>
-    @for shift in shifts {
+<h1 class="text-4xl underline text-center pt-4 pb-6">
+    Shift Reports
+</h1>
 
-    <tr>
-      <td>@shift.id</td>
-      <td>@shift.start.format("%Y-%m-%d %H:%M:%S")</td>
-      <td>
-        @if let Some(end) = shift.end {
-          @end.format("%Y-%m-%d %H:%M:%S")
-        } else {
-          Currently Open
-        }
-      </td>
-      <td hx-boost="true">
-        <a href="/shifts/@shift.id/report">
-          <button type="button">View Shift</button>
-        </a>
-      </td>
-    </tr>
+<div class="flex">
+  <table class="m-auto table-auto w-4/5">
+    <thead>
+      <tr>
+        <th>Shift ID</th>
+        <th>Shift Start</th>
+        <th>Shift End</th>
+      </tr>
+    </thead>
+    <tbody>
+      @for shift in shifts {
 
-    }
-  </tbody>
-</table>
+      <tr class="odd:bg-neutral-200">
+        <td class="text-center">@shift.id</td>
+        <td class="text-center">@shift.start.format("%Y-%m-%d %H:%M:%S")</td>
+        <td class="text-center">
+          @if let Some(end) = shift.end {
+            @end.format("%Y-%m-%d %H:%M:%S")
+          } 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">View Shift</button>
+          </a>
+        </td>
+      </tr>
+
+      }
+    </tbody>
+  </table>
+</div>
 
 })