updating UI

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

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