From 51327917b0853a60b982715aab8c04afb74bc9d8 Mon Sep 17 00:00:00 2001
From: Caleb <57644769+alliraine@users.noreply.github.com>
Date: Fri, 16 May 2025 18:36:39 -0400
Subject: [PATCH] Change system information table

---
 .../src/lib/components/DeleteAllButton.svelte   |  2 +-
 bin/web/src/lib/components/DownloadLink.svelte  |  5 +++--
 bin/web/src/lib/components/ManifestTable.svelte |  3 +--
 .../src/lib/components/ManifestTableRow.svelte  |  1 -
 .../src/lib/components/RecordingControls.svelte | 17 +++++++++++++----
 .../src/lib/components/SystemStatsTable.svelte  | 13 +++++++------
 bin/web/src/routes/+page.svelte                 | 13 +++++++++----
 7 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/bin/web/src/lib/components/DeleteAllButton.svelte b/bin/web/src/lib/components/DeleteAllButton.svelte
index ac94bf4..a916678 100644
--- a/bin/web/src/lib/components/DeleteAllButton.svelte
+++ b/bin/web/src/lib/components/DeleteAllButton.svelte
@@ -9,7 +9,7 @@
     }
 </script>
 
-<div class="flex flex-row justify-between gap-2">
+<div class="flex flex-row justify-end gap-2">
     <DeleteButton
         text="Delete ALL Recordings"
         prompt={`Are you sure you want to delete ALL recordings?`}
diff --git a/bin/web/src/lib/components/DownloadLink.svelte b/bin/web/src/lib/components/DownloadLink.svelte
index 33bb6f7..4d6171a 100644
--- a/bin/web/src/lib/components/DownloadLink.svelte
+++ b/bin/web/src/lib/components/DownloadLink.svelte
@@ -10,8 +10,9 @@
     }
 </script>
 
-<button class="flex flex-row {full_button ? 'bg-blue-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-md' : 'text-blue-600 underline'}" onclick={download}>
-    {text} <svg class="fill-current w-4 h-4 m-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+<button class="flex flex-row {full_button ? 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md' : 'text-blue-600 underline'}" onclick={download}>
+    {text}
+    <svg class="fill-current w-4 h-4 m-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
         <path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/>
     </svg>
 </button>
diff --git a/bin/web/src/lib/components/ManifestTable.svelte b/bin/web/src/lib/components/ManifestTable.svelte
index 1cba349..71058ad 100644
--- a/bin/web/src/lib/components/ManifestTable.svelte
+++ b/bin/web/src/lib/components/ManifestTable.svelte
@@ -4,10 +4,9 @@
     import Card from "./ManifestCard.svelte"
     interface Props {
         entries: ManifestEntry[];
-        current_entry: ManifestEntry | undefined;
         server_is_recording: boolean;
     }
-    let { entries, current_entry, server_is_recording }: Props = $props();
+    let { entries, server_is_recording }: Props = $props();
 </script>
 
 <!--For larger screens we use a table-->
diff --git a/bin/web/src/lib/components/ManifestTableRow.svelte b/bin/web/src/lib/components/ManifestTableRow.svelte
index 27ae237..bb3f6a4 100644
--- a/bin/web/src/lib/components/ManifestTableRow.svelte
+++ b/bin/web/src/lib/components/ManifestTableRow.svelte
@@ -8,7 +8,6 @@
         entry: ManifestEntry;
         current: boolean;
         i: number;
-        server_is_recording: boolean;
     } = $props();
 
     // passing `undefined` as the locale uses the browser default
diff --git a/bin/web/src/lib/components/RecordingControls.svelte b/bin/web/src/lib/components/RecordingControls.svelte
index 0522264..70c31c3 100644
--- a/bin/web/src/lib/components/RecordingControls.svelte
+++ b/bin/web/src/lib/components/RecordingControls.svelte
@@ -17,8 +17,7 @@
         client_set_recording = false;
     }
 
-    const stop_recording_classes = "bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-md";
-    const start_recording_classes = "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md";
+    const recording_button_classes = "text-white font-bold py-2 px-4 rounded-md flex flex-row gap-1";
 </script>
 
 <div>
@@ -27,9 +26,19 @@
             {server_is_recording ? "Stopping..." : "Starting..."}
         </button>
     {:else if server_is_recording}
-        <button class={stop_recording_classes} onclick={stop_recording}>Stop Recording</button>
+        <button class="{recording_button_classes} bg-red-500 hover:bg-red-700" onclick={stop_recording}>
+            <span>Stop</span>
+            <svg class="w-6 h-6 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M7 5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H7Z"/>
+            </svg>
+        </button>
     {:else}
-        <button class={start_recording_classes} onclick={start_recording}>Start Recording</button>
+        <button class="{recording_button_classes} bg-blue-500 hover:bg-blue-700" onclick={start_recording}>
+            <span>Start</span>
+            <svg class="w-6 h-6 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+                <path fill-rule="evenodd" d="M8.6 5.2A1 1 0 0 0 7 6v12a1 1 0 0 0 1.6.8l8-6a1 1 0 0 0 0-1.6l-8-6Z" clip-rule="evenodd"/>
+            </svg>
+        </button>
     {/if}
 </div>
 
diff --git a/bin/web/src/lib/components/SystemStatsTable.svelte b/bin/web/src/lib/components/SystemStatsTable.svelte
index 40c2f43..c829d67 100644
--- a/bin/web/src/lib/components/SystemStatsTable.svelte
+++ b/bin/web/src/lib/components/SystemStatsTable.svelte
@@ -4,6 +4,7 @@
         stats: SystemStats;
     } = $props();
 
+    const table_cell_classes = "border p-1 lg:p-2";
 </script>
 
 <div class="flex-1 drop-shadow p-4 flex flex-col gap-2 border rounded-md bg-gray-100 border-gray-100">
@@ -11,24 +12,24 @@
     <table class="table-auto border">
         <tbody>
             <tr class="border">
-                <th class="border">
+                <th class={table_cell_classes}>
                     Rayhunter Version
                 </th>
-                <td class="border">{stats.runtime_metadata.rayhunter_version}</td>
+                <td class={table_cell_classes}>{stats.runtime_metadata.rayhunter_version}</td>
             </tr>
             <tr class="border">
-                <th class="border">
+                <th class={table_cell_classes}>
                     Storage
                 </th>
-                <td class="border">
+                <td class={table_cell_classes}>
                     {stats.disk_stats.used_percent} used ({stats.disk_stats.used_size} / {stats.disk_stats.available_size})
                 </td>
             </tr>
             <tr class="border-b">
-                <th class="border">
+                <th class={table_cell_classes}>
                     Memory (RAM)
                 </th>
-                <td class="border">
+                <td class={table_cell_classes}>
                     Free: {stats.memory_stats.free}, Used: {stats.memory_stats.used}
                 </td>
             </tr>
diff --git a/bin/web/src/routes/+page.svelte b/bin/web/src/routes/+page.svelte
index dc637cb..d0bee1b 100644
--- a/bin/web/src/routes/+page.svelte
+++ b/bin/web/src/routes/+page.svelte
@@ -56,16 +56,21 @@
         {#if recording}
             <Card entry={current_entry} current={true} i={0} server_is_recording={recording}/>
         {:else}
-            <div class="bg-red-100 border-red-100 drop-shadow p-4 flex flex-col gap-2 border rounded-md flex-1">
-                <span class="text-2xl font-bold mb-2">WARNING: Not Recording</span>
+            <div class="bg-red-100 border-red-100 drop-shadow p-4 flex flex-col gap-2 border rounded-md flex-1 justify-between">
+                <span class="text-2xl font-bold mb-2 flex flex-row items-center gap-2">
+                    <svg class="w-8 h-8 text-red-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+                        <path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm11-4a1 1 0 1 0-2 0v5a1 1 0 1 0 2 0V8Zm-1 7a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2H12Z" clip-rule="evenodd"/>
+                    </svg>
+                    WARNING: Not Recording
+                </span>
                 <span>Rayhunter is not currently running!</span>
-                <div class="flex flex-row justify-between mt-2">
+                <div class="flex flex-row justify-end mt-2">
                     <RecordingControls {recording} />
                 </div>
             </div>
         {/if}
     </div>
-    <ManifestTable entries={entries} current_entry={current_entry} server_is_recording={recording} />
+    <ManifestTable entries={entries} server_is_recording={recording} />
     <DeleteAllButton/>
 {:else}
     <p>Loading...</p>