refactor: Enhance LogList component layout and styles; improve footer and logs styles for better readability and responsiveness

app/src/styles/components/footer/footer.scss

@@ -60,8 +60,12 @@
     }
 
     .version {
+      font-size: var(--font-size-tiny);
       display: flex;
       gap: 6px;
+      .icon{
+        @include flex-center;
+      }
     }
   }
 }

app/src/styles/components/logs/logs.scss

@@ -1,8 +1,10 @@
+@use "../../abstracts/variables" as *;
+@use "../../abstracts/mixins" as *;
+
 .log-list-container {
   width: 100vw;
   height: 100vh;
-  // background: var(--background-color-secondary);
-  // backdrop-filter: blur(2px);
+  background: var(--background-color-secondary);
 
   .log-list-wrapper {
     height: 50%;
@@ -19,6 +21,7 @@
     flex-direction: column;
     gap: 12px;
     backdrop-filter: blur(50px);
+    outline: 1px solid var(--border-color);
 
     .log-header {
       display: flex;
@@ -31,7 +34,13 @@
       }
 
       .close {
+        @include flex-center;
+        height: 28px;
+        width: 28px;
         cursor: pointer;
+        svg {
+          scale: 1.6;
+        }
       }
     }
 
@@ -58,6 +67,8 @@
       background: var(--background-color);
       padding: 18px 10px;
       border-radius: 16px;
+      outline: 1px solid var(--border-color);
+      outline-offset: -1px;
 
       .log-entry {
         padding: 4px;
@@ -67,6 +78,24 @@
         align-items: center;
         gap: 6px;
 
+        .log-icon {
+          @include flex-center;
+        }
+        .log-entry-message-container {
+          @include flex-space-between;
+          gap: 12px;
+          width: 100%;
+          .message-time {
+            font-size: var(--font-size-tiny);
+            font-weight: 300;
+            opacity: 0.8;
+            text-wrap: nowrap;
+          }
+          .log-entry-message{
+            width: 100%;
+          }
+        }
+
         &:nth-child(odd) {
           background: var(--background-color);
         }