Refactor footer and log components; introduce new log icons and improve styling

- Moved log icon logic to a separate file for better organization.
- Updated Footer component to utilize new log icon logic and improved styling.
- Created new LogIcons component for various log types.
- Enhanced LoggerContext to support 'success' log type.
- Refactored LogList component to use new log icon logic and improved tab handling.
- Removed unused CSS styles and consolidated log-related styles in SCSS files.
- Updated user authentication styles for better color consistency.
- Removed deprecated index.css file and adjusted imports accordingly.
- Improved overall styling and responsiveness of log and footer components.

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

@@ -23,6 +23,7 @@
       padding: 3px 6px;
       border-radius: 12px;
       color: var(--text-color);
+      backdrop-filter: blur(14px);
 
       .selector {
         color: var(--text-color);
@@ -33,70 +34,51 @@
   .logs-wrapper {
     display: flex;
     gap: 6px;
+    position: relative;
 
+    // dummy 
+    .bg-dummy{
+      background: var(--background-color-solid);
+      position: absolute;
+      z-index: -1;
+    }
+    .bg-dummy.left-top{
+      top: 1px;
+      left: 4px;
+      width: 60%;
+      height: 16px;
+      border-radius: 20px;
+    }
+    .bg-dummy.right-bottom{
+      right: 68px;
+      bottom: 0;
+      width: 20%;
+      height: 100%;
+      border-radius: 50%;
+    }
+
+    .log-container {
+      background: var(--background-color);
+      backdrop-filter: blur(20px);
+      border-radius: 12px;
+      @include flex-center;
+      overflow: hidden;
+    }
     .logs-detail,
     .version {
+      @include flex-center;
       border-radius: 12px;
-      background: var(--background-color);
       padding: 3px 6px;
+      height: 100%;
       color: var(--text-color);
-      display: flex;
-      align-items: center;
       gap: 6px;
     }
 
-    .log {
-      background-color: var(--log-default-background-color);
-
-      .log-message {
-        color: var(--default-text-color);
-
-      }
-    }
-
-    .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;
-
+      outline: 0 solid var(--border-color);
+      outline-offset: -1px;
       .log-icon {
         @include flex-center;
       }
@@ -110,13 +92,51 @@
     }
 
     .version {
+      background: var(--background-color);
       font-size: var(--font-size-tiny);
-      display: flex;
-      gap: 6px;
 
       .icon {
         @include flex-center;
       }
     }
+
+    .log {
+      background: var(--log-default-background-color);
+      outline-color: var(--default-text-color);
+      .log-message {
+        color: var(--default-text-color);
+      }
+    }
+
+    .info {
+      background: var(--log-info-background-color);
+      outline-color: var(--log-info-text-color);
+      .log-message {
+        color: var(--log-info-text-color);
+      }
+    }
+
+    .error {
+      background: var(--log-error-background-color);
+      outline-color: var(--log-error-text-color);
+      .log-message {
+        color: var(--log-error-text-color);
+      }
+    }
+
+    .warning {
+      background: var(--log-warn-background-color);
+      outline-color: var(--log-warn-text-color);
+      .log-message {
+        color: var(--log-warn-text-color);
+      }
+    }
+
+    .success {
+      background: var(--log-success-background-color);
+      .log-message {
+        color: var(--log-success-text-color);
+      }
+    }
   }
-}
+}

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

@@ -5,14 +5,11 @@
   width: 100vw;
   height: 100vh;
   background: var(--background-color-secondary);
+  @include flex-center;
 
   .log-list-wrapper {
-    height: 50%;
-    min-width: 50%;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    height: 60%;
+    min-width: 55%;
     z-index: 5;
     background: var(--background-color);
     padding: 14px 12px;
@@ -31,6 +28,10 @@
         display: flex;
         align-items: center;
         gap: 6px;
+        .icon{
+          @include flex-center;
+          scale: .8;
+        }
       }
 
       .close {
@@ -38,9 +39,13 @@
         height: 28px;
         width: 28px;
         cursor: pointer;
+        border-radius: #{$border-radius-medium};
         svg {
           scale: 1.6;
         }
+        &:hover{
+          background: var(--background-color);
+        }
       }
     }
 
@@ -60,25 +65,26 @@
     }
 
     .log-entry-wrapper {
-      height: 100%;
+      height: calc(100% - 80px);
       display: flex;
       flex-direction: column;
       gap: 4px;
       background: var(--background-color);
-      padding: 18px 10px;
+      padding: 10px;
       border-radius: 16px;
       outline: 1px solid var(--border-color);
       outline-offset: -1px;
+      overflow: auto;
 
       .log-entry {
         padding: 4px;
         border-radius: 4px;
         font-size: var(--font-size-small);
         display: flex;
-        align-items: center;
-        gap: 6px;
 
         .log-icon {
+          height: 24px;
+          width: 24px;
           @include flex-center;
         }
         .log-entry-message-container {
@@ -90,6 +96,7 @@
             font-weight: 300;
             opacity: 0.8;
             text-wrap: nowrap;
+            height: 100%;
           }
           .log-entry-message{
             width: 100%;

app/src/styles/components/tools.scss

@@ -36,6 +36,7 @@
     width: 0;
     opacity: 0;
     animation: expandWidth 0.2s ease-in-out forwards;
+    will-change: width;
 
     .tool-button {
       @include flex-center;