Refactor logging components and styles; remove unused CSS; enhance log icon functionality

- Removed the random color generation function from ProductionCapacity component.
- Updated ThroughputSummary component to remove unused imports.
- Simplified LogList component by removing unnecessary icons and integrating GetLogIcon for log types.
- Enhanced LoggerContext to support a new "success" log type and optimized logger methods with useMemo.
- Adjusted SimulationPlayer to conditionally render analysis components.
- Deleted index.css and removed its import from index.tsx.
- Cleaned up builder module by removing unused imports and optimizing state management.
- Removed savedTheme from Ground component.
- Changed log message from info to warning in Project component.
- Updated log color variables in SCSS files for better visibility and consistency.
- Added new log icons for success, error, info, and warning in LogIcons component.
- Created GetLogIcon utility to streamline log icon rendering based on log type.

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);
+      }
+    }
   }
-}
+}