Refactor event properties components to use section elements for better semantics and styling consistency; update mechanics components to enhance layout and improve user experience; modify simulation component to manage open/close state for event lists; enhance file menu with project icon; improve input toggle styles; standardize color variables in SCSS; adjust sidebar styles for better visual hierarchy; implement backdrop filters for improved UI aesthetics; and refine overall component styling for consistency across the application.

app/src/components/ui/FileMenu.tsx

@@ -2,12 +2,16 @@ import React, { useState } from "react";
 import RenameInput from "./inputs/RenameInput";
 import { ArrowIcon } from "../icons/ExportCommonIcons";
 import MenuBar from "./menu/menu";
+import { ProjectIcon } from "../icons/HeaderIcons";
 
 const FileMenu: React.FC = () => {
   const [openMenu, setOpenMenu] = useState(false);
   return (
     <div className="project-dropdowm-container">
       <div className="project-name">
+        <div className="icon">
+          <ProjectIcon />
+        </div>
         <RenameInput value="untitled" />
       </div>
       <div

app/src/components/ui/inputs/InputToggle.tsx

@@ -24,11 +24,16 @@ const InputToggle: React.FC<InputToggleProps> = ({
       <label htmlFor={`toogle-input-${inputKey}`} className="label">
         {label}
       </label>
-      <div className={"check-box"} onClick={handleOnClick}>
+      <div className={"check-box"} onClick={handleOnClick} 
+        style={{
+          background: value ? "var(--background-color-accent)" : "",
+          outline: value ? "" : "1px solid var(--border-color)",
+        }}
+      >
         <div
           className="check-box-style"
           style={{
-            left: value ? "50%" : "2px",
+            left: value ? "16px" : "2px",
             background: value ? "" : "var(--text-disabled)",
           }}
         ></div>