From cb6e9d1889035a595bb0f92aa97de7513f748bcf Mon Sep 17 00:00:00 2001
From: Zynh0722 <Zynh0722@gmail.com>
Date: Sun, 5 Nov 2023 08:38:15 -0800
Subject: [PATCH] styling reports table

---
 templates/shift_reports.rs.html | 68 ++++++++++++++++++---------------
 1 file changed, 38 insertions(+), 30 deletions(-)

diff --git a/templates/shift_reports.rs.html b/templates/shift_reports.rs.html
index a8812ef..412734d 100644
--- a/templates/shift_reports.rs.html
+++ b/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>
 
 })