App: Add shadows to buttons (except for the header)

src/lib/components/Table.svelte

@@ -15,35 +15,37 @@
   let { data, columns, handler = undefined }: TableProps = $props();
 </script>
 
-<div class="table-container bg-white shadow">
-  <table class="table table-compact bg-white">
-    <thead>
-      <tr class="bg-surface-500">
-        {#each columns as col}
-          <th class="!px-3">{col.label}</th>
-        {/each}
-      </tr>
-    </thead>
-
-    <tbody>
-      {#each data as row}
-        <tr
-          class="cursor-pointer bg-surface-300"
-          onclick={async (event: Event) => {
-            if (handler) await handler(event, row.id);
-          }}
-        >
+{#if data.length > 0}
+  <div class="table-container bg-white shadow">
+    <table class="table table-compact bg-white">
+      <thead>
+        <tr class="bg-surface-500">
           {#each columns as col}
-            {#if col.valuefun}
-              <td class="!align-middle">
-                {#await col.valuefun(row[col.data_value_name]) then value}{@html value}{/await}
-              </td>
-            {:else}
-              <td class="!align-middle">{row[col.data_value_name]}</td>
-            {/if}
+            <th class="!px-3">{col.label}</th>
           {/each}
         </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+      </thead>
+
+      <tbody>
+        {#each data as row}
+          <tr
+            class="cursor-pointer bg-surface-300"
+            onclick={async (event: Event) => {
+              if (handler) await handler(event, row.id);
+            }}
+          >
+            {#each columns as col}
+              {#if col.valuefun}
+                <td class="!align-middle">
+                  {#await col.valuefun(row[col.data_value_name]) then value}{@html value}{/await}
+                </td>
+              {:else}
+                <td class="!align-middle">{row[col.data_value_name]}</td>
+              {/if}
+            {/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+{/if}

src/routes/+layout.svelte

@@ -133,32 +133,40 @@
     <!-- Menu Drawer -->
     <!-- Menu Drawer -->
     <div class="flex flex-col gap-2 p-2 pt-3">
-      <Button href="/racepicks" onclick={close_drawer} color="surface" width="w-full">
+      <Button href="/racepicks" onclick={close_drawer} color="surface" width="w-full" shadow>
         Race Picks
       </Button>
-      <Button href="/seasonpicks" onclick={close_drawer} color="surface" width="w-full">
+      <Button href="/seasonpicks" onclick={close_drawer} color="surface" width="w-full" shadow>
         Season Picks
       </Button>
-      <Button href="/leaderboard" onclick={close_drawer} color="surface" width="w-full">
+      <Button href="/leaderboard" onclick={close_drawer} color="surface" width="w-full" shadow>
         Leaderboard
       </Button>
-      <Button href="/statistics" onclick={close_drawer} color="surface" width="w-full">
+      <Button href="/statistics" onclick={close_drawer} color="surface" width="w-full" shadow>
         Statistics
       </Button>
-      <Button href="/rules" onclick={close_drawer} color="surface" width="w-full">Rules</Button>
+      <Button href="/rules" onclick={close_drawer} color="surface" width="w-full" shadow>
+        Rules
+      </Button>
     </div>
   {:else if $drawerStore.id === "data_drawer"}
     <!-- Data Drawer -->
     <!-- Data Drawer -->
     <!-- Data Drawer -->
     <div class="flex flex-col gap-2 p-2 pt-3">
-      <Button href="/data/raceresults" onclick={close_drawer} color="surface" width="w-full">
+      <Button href="/data/raceresults" onclick={close_drawer} color="surface" width="w-full" shadow>
         Race Results
       </Button>
-      <Button href="/data/season/teams" onclick={close_drawer} color="surface" width="w-full">
+      <Button
+        href="/data/season/teams"
+        onclick={close_drawer}
+        color="surface"
+        width="w-full"
+        shadow
+      >
         Season
       </Button>
-      <Button href="/data/users" onclick={close_drawer} color="surface" width="w-full">
+      <Button href="/data/users" onclick={close_drawer} color="surface" width="w-full" shadow>
         Users
       </Button>
     </div>
@@ -181,7 +189,13 @@
           <PasswordIcon />
         </Input>
         <div class="flex justify-end gap-2">
-          <Button formaction="/profile?/login" onclick={close_drawer} color="tertiary" submit>
+          <Button
+            formaction="/profile?/login"
+            onclick={close_drawer}
+            color="tertiary"
+            submit
+            shadow
+          >
             Login
           </Button>
           <Button
@@ -189,6 +203,7 @@
             onclick={close_drawer}
             color="tertiary"
             submit
+            shadow
           >
             Register
           </Button>
@@ -225,7 +240,9 @@
           name="avatar"
           onchange={get_avatar_preview_event_handler("user_avatar_preview")}
         >
-          <svelte:fragment slot="message"><span class="font-bold">Upload Avatar</span></svelte:fragment>
+          <svelte:fragment slot="message"
+            ><span class="font-bold">Upload Avatar</span></svelte:fragment
+          >
         </FileDropzone>
         <div class="flex justify-end gap-2">
           <Button
@@ -233,10 +250,17 @@
             onclick={close_drawer}
             color="secondary"
             submit
+            shadow
           >
             Save Changes
           </Button>
-          <Button formaction="/profile?/logout" onclick={close_drawer} color="primary" submit>
+          <Button
+            formaction="/profile?/logout"
+            onclick={close_drawer}
+            color="primary"
+            submit
+            shadow
+          >
             Logout
           </Button>
         </div>

src/routes/data/season/drivers/+page.svelte

@@ -100,7 +100,7 @@
 </script>
 
 <div class="pb-2">
-  <Button width="w-full" color="tertiary" onclick={create_driver_handler}>
+  <Button width="w-full" color="tertiary" onclick={create_driver_handler} shadow>
     <span class="font-bold">Create New Driver</span>
   </Button>
 </div>

src/routes/data/season/races/+page.svelte

@@ -72,7 +72,7 @@
 </script>
 
 <div class="pb-2">
-  <Button width="w-full" color="tertiary" onclick={create_race_handler}>
+  <Button width="w-full" color="tertiary" onclick={create_race_handler} shadow>
     <span class="font-bold">Create New Race</span>
   </Button>
 </div>

src/routes/data/season/substitutions/+page.svelte

@@ -129,7 +129,7 @@
 </script>
 
 <div class="pb-2">
-  <Button width="w-full" color="tertiary" onclick={create_substitution_handler}>
+  <Button width="w-full" color="tertiary" onclick={create_substitution_handler} shadow>
     <span class="font-bold">Create New Substitution</span>
   </Button>
 </div>

src/routes/data/season/teams/+page.svelte

@@ -59,7 +59,7 @@
 </script>
 
 <div class="pb-2">
-  <Button width="w-full" color="tertiary" onclick={create_team_handler}>
+  <Button width="w-full" color="tertiary" onclick={create_team_handler} shadow>
     <span class="font-bold">Create New Team</span>
   </Button>
 </div>