From a04b0f4be1f418653a4dd4c6ef900eec94b622a7 Mon Sep 17 00:00:00 2001
From: Julian Freeman <freemanjulian372@gmail.com>
Date: Tue, 2 Dec 2025 10:50:15 -0400
Subject: [PATCH] fix logging style

---
 src/views/Logs.vue | 49 ++++++++++++++++++++++++++--------------------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/views/Logs.vue b/src/views/Logs.vue
index f80d0fb..dca324c 100644
--- a/src/views/Logs.vue
+++ b/src/views/Logs.vue
@@ -30,17 +30,24 @@ watch(() => logsStore.logs.length, () => {
 })
 
 function formatTime(ts: number) {
-    return new Date(ts).toLocaleTimeString()
+    const d = new Date(ts)
+    const year = d.getFullYear()
+    const month = String(d.getMonth() + 1).padStart(2, '0')
+    const day = String(d.getDate()).padStart(2, '0')
+    const hours = String(d.getHours()).padStart(2, '0')
+    const minutes = String(d.getMinutes()).padStart(2, '0')
+    const seconds = String(d.getSeconds()).padStart(2, '0')
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
 }
 </script>
 
 <template>
-  <div class="flex flex-col h-full">
+  <div class="flex flex-col h-full p-6">
       <!-- Header -->
-      <div class="px-8 py-6 border-b border-gray-200 dark:border-zinc-800 flex justify-between items-center bg-white dark:bg-zinc-900">
+      <div class="flex justify-between items-center mb-6">
           <div>
-            <h1 class="text-2xl font-bold text-zinc-900 dark:text-white">Execution Logs</h1>
-            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Real-time output from download processes.</p>
+            <h1 class="text-3xl font-bold text-zinc-900 dark:text-white">Execution Logs</h1>
+            <p class="text-gray-500 dark:text-gray-400 mt-2">Real-time output from download processes.</p>
           </div>
           
           <div class="flex items-center gap-3">
@@ -51,32 +58,32 @@ function formatTime(ts: number) {
                     v-model="searchQuery"
                     type="text" 
                     placeholder="Search logs..." 
-                    class="pl-9 pr-4 py-2 bg-gray-100 dark:bg-zinc-800 rounded-lg text-sm outline-none focus:ring-2 focus:ring-blue-500 border-none w-48"
+                    class="pl-9 pr-4 py-2 bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 rounded-xl text-sm outline-none focus:ring-2 focus:ring-blue-500 text-zinc-900 dark:text-white w-48"
                  />
              </div>
 
              <!-- Level Filter -->
-             <div class="flex bg-gray-100 dark:bg-zinc-800 rounded-lg p-1">
+             <div class="flex bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 rounded-xl p-1">
                  <button 
                     @click="filterLevel = 'all'"
-                    class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
-                    :class="filterLevel === 'all' ? 'bg-white dark:bg-zinc-700 shadow-sm text-zinc-900 dark:text-white' : 'text-gray-500 hover:text-zinc-900 dark:hover:text-white'"
+                    class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
+                    :class="filterLevel === 'all' ? 'bg-gray-100 dark:bg-zinc-800 text-zinc-900 dark:text-white' : 'text-gray-500 hover:text-zinc-900 dark:hover:text-white'"
                  >All</button>
                  <button 
                     @click="filterLevel = 'info'"
-                    class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
-                    :class="filterLevel === 'info' ? 'bg-white dark:bg-zinc-700 shadow-sm text-zinc-900 dark:text-white' : 'text-gray-500 hover:text-zinc-900 dark:hover:text-white'"
+                    class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
+                    :class="filterLevel === 'info' ? 'bg-gray-100 dark:bg-zinc-800 text-zinc-900 dark:text-white' : 'text-gray-500 hover:text-zinc-900 dark:hover:text-white'"
                  >Info</button>
                  <button 
                     @click="filterLevel = 'error'"
-                    class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
-                    :class="filterLevel === 'error' ? 'bg-white dark:bg-zinc-700 shadow-sm text-zinc-900 dark:text-white' : 'text-gray-500 hover:text-zinc-900 dark:hover:text-white'"
+                    class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
+                    :class="filterLevel === 'error' ? 'bg-gray-100 dark:bg-zinc-800 text-zinc-900 dark:text-white' : 'text-gray-500 hover:text-zinc-900 dark:hover:text-white'"
                  >Error</button>
              </div>
 
              <button 
                 @click="logsStore.clearLogs"
-                class="p-2 text-gray-500 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 rounded-lg transition-colors"
+                class="p-2 text-gray-500 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 rounded-xl transition-colors border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-900"
                 title="Clear Logs"
              >
                 <Trash2 class="w-4 h-4" />
@@ -85,23 +92,23 @@ function formatTime(ts: number) {
       </div>
 
       <!-- Logs Console -->
-      <div class="flex-1 overflow-hidden relative bg-gray-900 text-gray-300 font-mono text-xs md:text-sm">
+      <div class="flex-1 overflow-hidden relative bg-white dark:bg-zinc-900 rounded-2xl shadow-sm border border-gray-200 dark:border-zinc-800 font-mono text-xs md:text-sm">
           <div 
             ref="logsContainer"
-            class="absolute inset-0 overflow-auto p-4 space-y-1 custom-scrollbar"
+            class="absolute inset-0 overflow-auto p-4 space-y-1"
             @scroll="(e) => {
                 const target = e.target as HTMLElement;
                 autoScroll = target.scrollTop + target.clientHeight >= target.scrollHeight - 10;
             }"
           >
-              <div v-if="filteredLogs.length === 0" class="h-full flex items-center justify-center text-gray-600">
+              <div v-if="filteredLogs.length === 0" class="h-full flex items-center justify-center text-gray-400 dark:text-gray-600">
                   No logs to display
               </div>
-              <div v-for="log in filteredLogs" :key="log.id" class="flex gap-3 hover:bg-gray-800/50 px-2 py-0.5 rounded">
-                  <span class="text-gray-600 shrink-0 select-none w-20">{{ formatTime(log.timestamp) }}</span>
+              <div v-for="log in filteredLogs" :key="log.id" class="flex gap-4 hover:bg-gray-50 dark:hover:bg-zinc-800/50 px-2 py-1 rounded transition-colors">
+                  <span class="text-gray-400 dark:text-zinc-600 shrink-0 select-none w-36">{{ formatTime(log.timestamp) }}</span>
                   <span 
                     class="break-all whitespace-pre-wrap"
-                    :class="log.level === 'error' ? 'text-red-400' : 'text-gray-300'"
+                    :class="log.level === 'error' ? 'text-red-500 dark:text-red-400' : 'text-zinc-700 dark:text-gray-300'"
                   >{{ log.message }}</span>
               </div>
           </div>
@@ -117,4 +124,4 @@ function formatTime(ts: number) {
           </div>
       </div>
   </div>
-</template>
+</template>
\ No newline at end of file