styling reports table

templates/shift_reports.rs.html

@@ -6,9 +6,16 @@
 
 @:base_html({
 
-@:return_to_main_html()
+<div class="fixed right-0 top-0 pr-4 pt-4">
+  @:return_to_main_html()
+</div>
 
-<table>
+<h1 class="text-4xl underline text-center pt-4 pb-6">
+    Shift Reports
+</h1>
+
+<div class="flex">
+  <table class="m-auto table-auto w-4/5">
     <thead>
       <tr>
         <th>Shift ID</th>
@@ -19,25 +26,26 @@
     <tbody>
       @for shift in shifts {
 
-    <tr>
-      <td>@shift.id</td>
-      <td>@shift.start.format("%Y-%m-%d %H:%M:%S")</td>
-      <td>
+      <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">
+        <td hx-boost="true" class="flex justify-end">
           <a href="/shifts/@shift.id/report">
-          <button type="button">View Shift</button>
+            <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>
+  </table>
+</div>
 
 })