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,57 +1,67 @@
+@use "../../abstracts/variables" as *;
+@use "../../abstracts/mixins" as *;
+
 .footer-wrapper {
-    position: absolute;
+  position: absolute;
-    bottom: 0;
+  bottom: 0;
-    left: 0;
+  left: 0;
-    width: 100%;
+  width: 100%;
-    z-index: 1;
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+  padding: 2px 12px;
+
+  .selection-wrapper {
     display: flex;
-    justify-content: space-between;
+    gap: 6px;
-    padding: 12px 24px;
 
-    .selection-wrapper {
+    .selector-wrapper {
-        display: flex;
+      display: flex;
-        gap: 6px;
+      gap: 6px;
+      align-items: center;
+      background: var(--background-color);
+      padding: 3px 6px;
+      border-radius: 12px;
+      color: var(--text-color);
 
-        .selector-wrapper {
+      .selector {
-            display: flex;
+        color: var(--text-color);
-            gap: 6px;
+      }
-            align-items: center;
+    }
-            background: var(--background-color);
+  }
-            padding: 3px 6px;
-            border-radius: 12px;
-            color: var(--text-color);
 
-            .selector {
+  .logs-wrapper {
-                color: var(--text-color);
+    display: flex;
-            }
+    gap: 6px;
-        }
+
+    .logs-detail,
+    .version {
+      border-radius: 12px;
+      background: var(--background-color);
+      padding: 3px 6px;
+      color: var(--text-color);
+      display: flex;
+      align-items: center;
+      gap: 6px;
     }
 
-    .logs-wrapper {
+    .logs-detail {
-        display: flex;
+      padding: 2px 12px;
-        gap: 6px;
+      cursor: pointer;
-
+      .log-icon {
-        .logs-detail,
+        @include flex-center;
-        .version {
+      }
-
+      .log-message {
-            border-radius: 12px;
+        max-width: 40vw;
-            background: var(--background-color);
+        white-space: nowrap;
-            padding: 3px 6px;
+        overflow: hidden;
-            color: var(--text-color);
+        text-overflow: ellipsis;
-            display: flex;
+      }
-            align-items: center;
-            gap: 6px;
-        }
-
-        .logs-detail {
-            // background-color: #fff;
-            cursor: pointer;
-        }
-
-        .version {
-            display: flex;
-            gap: 6px;
-
-        }
     }
-}
+
+    .version {
+      display: flex;
+      gap: 6px;
+    }
+  }
+}

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

@@ -1,77 +1,76 @@
 .log-list-container {
-    width: 100vw;
+  width: 100vw;
-    height: 100vh;
+  height: 100vh;
-    // background: var(--background-color-secondary);
+  // background: var(--background-color-secondary);
-    // backdrop-filter: blur(2px);
+  // backdrop-filter: blur(2px);
 
-    .log-list-wrapper {
+  .log-list-wrapper {
-        height: 50%;
+    height: 50%;
-        min-width: 50%;
+    min-width: 50%;
-        position: absolute;
+    position: absolute;
-        top: 50%;
+    top: 50%;
-        left: 50%;
+    left: 50%;
-        transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
-        z-index: 5;
+    z-index: 5;
-        background: var(--background-color);
+    background: var(--background-color);
-        padding: 14px 12px;
+    padding: 14px 12px;
-        border-radius: 15px;
+    border-radius: 15px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    backdrop-filter: blur(50px);
+
+    .log-header {
+      display: flex;
+      justify-content: space-between;
+
+      .log-header-wrapper {
         display: flex;
-        flex-direction: column;
+        align-items: center;
-        gap: 12px;
+        gap: 6px;
-        backdrop-filter: blur(50px);
+      }
 
-        .log-header {
+      .close {
-            display: flex;
+        cursor: pointer;
-            justify-content: space-between;
+      }
-
-            .log-header-wrapper {
-                display: flex;
-                align-items: center;
-                gap: 6px;
-            }
-
-            .close {
-                // transform: scale(1.5);
-                cursor: pointer;
-            }
-        }
-
-        .log-nav-wrapper {
-            display: flex;
-            gap: 6px;
-
-            .log-nav {
-                padding: 8px 16px;
-                border-radius: 19px;
-            }
-
-            .log-nav.active {
-                background-color: var(--accent-color);
-                color: var(--text-button-color);
-            }
-        }
-
-        .log-entry-wrapper {
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-            background: var(--background-color);
-            padding: 18px 10px;
-            border-radius: 16px;
-
-            .log-entry {
-                padding: 4px;
-                border-radius: 4px;
-                font-size: var(--font-size-small);
-                display: flex;
-                align-items: center;
-                gap: 6px;
-
-                &:nth-child(odd) {
-                    background: var(--background-color);
-                }
-            }
-        }
     }
-}
+
+    .log-nav-wrapper {
+      display: flex;
+      gap: 6px;
+
+      .log-nav {
+        padding: 8px 16px;
+        border-radius: 19px;
+      }
+
+      .log-nav.active {
+        background-color: var(--background-color-accent);
+        color: var(--text-button-color);
+      }
+    }
+
+    .log-entry-wrapper {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      background: var(--background-color);
+      padding: 18px 10px;
+      border-radius: 16px;
+
+      .log-entry {
+        padding: 4px;
+        border-radius: 4px;
+        font-size: var(--font-size-small);
+        display: flex;
+        align-items: center;
+        gap: 6px;
+
+        &:nth-child(odd) {
+          background: var(--background-color);
+        }
+      }
+    }
+  }
+}