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

app/src/components/ui/log/LogList.tsx

@@ -2,7 +2,6 @@
 import React, { useState } from "react";
 import {
   LogListIcon,
-  TickIcon,
   LogInfoIcon,
   WarningIcon,
   ErrorIcon,
@@ -38,8 +37,17 @@ const LogList: React.FC = () => {
       : [...logs].filter((log) => log.type === selectedTab).reverse();
 
   return (
-    <div className="log-list-container">
+    // eslint-disable-next-line
-      <div className="log-list-wrapper">
+    <div
+      className="log-list-container"
+      onClick={() => setIsLogListVisible(false)}
+    >
+      <div
+        className="log-list-wrapper"
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+      >
         <div className="log-header">
           <div className="log-header-wrapper">
             <div className="icon">
@@ -47,9 +55,9 @@ const LogList: React.FC = () => {
             </div>
             <div className="head">Log List</div>
           </div>
-          <div className="close" onClick={() => setIsLogListVisible(false)}>
+          <button className="close" onClick={() => setIsLogListVisible(false)}>
-            {/* <CloseIcon /> */}X
+            <CloseIcon />
-          </div>
+          </button>
         </div>
 
         {/* Tabs */}
@@ -70,9 +78,11 @@ const LogList: React.FC = () => {
           {filteredLogs.map((log) => (
             <div key={log.id} className={`log-entry ${log.type}`}>
               <div className="log-icon">{getLogIcon(log.type)}</div>
-              <div className="log-entry-message">
+              <div className="log-entry-message-container">
-                [{formatTimestamp(log.timestamp)}] [{log.type.toUpperCase()}]{" "}
+                <div className="log-entry-message">{log.message}</div>
-                {log.message}
+                <div className="message-time">
+                  {formatTimestamp(log.timestamp)}
+                </div>
               </div>
             </div>
           ))}

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);
+  background: var(--background-color-secondary);
-  // backdrop-filter: blur(2px);
 
   .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);
         }