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">
-      <div className="log-list-wrapper">
+    // eslint-disable-next-line
+    <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)}>
-            {/* <CloseIcon /> */}X
-          </div>
+          <button className="close" onClick={() => setIsLogListVisible(false)}>
+            <CloseIcon />
+          </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">
-                [{formatTimestamp(log.timestamp)}] [{log.type.toUpperCase()}]{" "}
-                {log.message}
+              <div className="log-entry-message-container">
+                <div className="log-entry-message">{log.message}</div>
+                <div className="message-time">
+                  {formatTimestamp(log.timestamp)}
+                </div>
               </div>
             </div>
           ))}