refactor: Clean up LogList component by removing unused TickIcon; enhance footer and logs styles for better layout and readability

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

@@ -69,9 +69,6 @@ const LogList: React.FC = () => {
         <div className="log-entry-wrapper">
           {filteredLogs.map((log) => (
             <div key={log.id} className={`log-entry ${log.type}`}>
-              <div className="tick">
-                <TickIcon />
-              </div>
               <div className="log-icon">{getLogIcon(log.type)}</div>
               <div className="log-entry-message">
                 [{formatTimestamp(log.timestamp)}] [{log.type.toUpperCase()}]{" "}

app/src/styles/abstracts/variables.scss

@@ -22,7 +22,11 @@ $text-button-color-dark: #f3f3fd;
 // background colors
 // ---------- light mode ----------
 $background-color: linear-gradient(-45deg, #fcfdfd71 0%, #fcfdfd79 100%);
-$background-color-solid-gradient: linear-gradient(-45deg, #fcfdfd 0%, #fcfdfd 100%);
+$background-color-solid-gradient: linear-gradient(
+  -45deg,
+  #fcfdfd 0%,
+  #fcfdfd 100%
+);
 $background-color-solid: #fcfdfd;
 $background-color-secondary: #fcfdfd4d;
 $background-color-accent: #6f42c1;
@@ -45,7 +49,11 @@ $background-radial-gray-gradient: radial-gradient(
 
 // ---------- dark mode ----------
 $background-color-dark: linear-gradient(-45deg, #333333b3 0%, #2d2437b3 100%);
-$background-color-solid-gradient-dark: linear-gradient(-45deg, #333333 0%, #2d2437 100%);
+$background-color-solid-gradient-dark: linear-gradient(
+  -45deg,
+  #333333 0%,
+  #2d2437 100%
+);
 $background-color-solid-dark: #19191d;
 $background-color-secondary-dark: #19191d99;
 $background-color-accent-dark: #6f42c1;
@@ -104,6 +112,21 @@ $color3: #b186ff;
 $color4: #8752e8;
 $color5: #c7a8ff;
 
+// log indication colors
+// ------------ text -------------
+$log-default-text-color: #6f42c1;
+$log-info-text-color: #488ef6;
+$log-warn-text-color: #f3a50c;
+$log-error-text-color: #f65648;
+$log-success-text-color: #43c06d;
+
+// ------------ background -------------
+$log-default-backgroung-color: #6e42c133;
+$log-info-background-color: #488ef633;
+$log-warn-background-color: #f3a50c33;
+$log-error-background-color: #f6564833;
+$log-success-background-color: #43c06d33;
+
 // old variables
 $accent-color: #6f42c1;
 $accent-color-dark: #c4abf1;

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

@@ -1,3 +1,6 @@
+@use "../../abstracts/variables" as *;
+@use "../../abstracts/mixins" as *;
+
 .footer-wrapper {
   position: absolute;
   bottom: 0;
@@ -6,7 +9,7 @@
   z-index: 1;
   display: flex;
   justify-content: space-between;
-    padding: 12px 24px;
+  padding: 2px 12px;
 
   .selection-wrapper {
     display: flex;
@@ -33,7 +36,6 @@
 
     .logs-detail,
     .version {
-
       border-radius: 12px;
       background: var(--background-color);
       padding: 3px 6px;
@@ -44,14 +46,22 @@
     }
 
     .logs-detail {
-            // background-color: #fff;
+      padding: 2px 12px;
       cursor: pointer;
+      .log-icon {
+        @include flex-center;
+      }
+      .log-message {
+        max-width: 40vw;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
 
     .version {
       display: flex;
       gap: 6px;
-
     }
   }
 }

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

@@ -31,7 +31,6 @@
       }
 
       .close {
-                // transform: scale(1.5);
         cursor: pointer;
       }
     }
@@ -46,7 +45,7 @@
       }
 
       .log-nav.active {
-                background-color: var(--accent-color);
+        background-color: var(--background-color-accent);
         color: var(--text-button-color);
       }
     }