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/styles/layout/sidebar.scss

@@ -44,33 +44,40 @@
       width: 32px;
       min-height: 32px;
       min-width: 32px;
-      border-radius: #{$border-radius-small};
+      border-radius: #{$border-radius-large};
 
       &:hover {
-        background: var(--background-color-secondary);
+        outline: 1px solid var(--border-color);
+        outline-offset: -1px;
+        background: var(--background-color-drop-down);
       }
     }
 
     .active {
-      background: var(--background-color-secondary);
-      outline: 1px solid var(--accent-color);
+      background: var(--background-color-accent);
+      outline: 1px solid var(--border-color);
       outline-offset: -1px;
+      rect {
+        stroke: var(--icon-default-color-active);
+      }
+      circle {
+        fill: var(--icon-default-color-active);
+      }
+      &:hover {
+        background: var(--background-color-secondary);
+      }
     }
   }
 
   .sidebar-left-container {
     min-height: 50vh;
-    padding-bottom: 12px;
+    padding-bottom: 4px;
     position: relative;
     display: flex;
     flex-direction: column;
 
     .sidebar-left-content-container {
-      border-bottom: 1px solid var(--border-color);
-      // flex: 1;
-      // height: calc(100% - 36px);
       position: relative;
-      // overflow: auto;
 
       .template-list {
         display: flex;
@@ -232,8 +239,12 @@
       .outline-content-container {
         position: relative;
         height: 100%;
-        overflow: auto;
-        max-height: 60vh;
+        padding: 8px;
+        .overflow {
+          height: calc(100% - 16px);
+          max-height: 46vh;
+          overflow: auto;
+        }
       }
     }
   }
@@ -323,8 +334,8 @@
         display: flex;
 
         .user-profile {
-          background: var(--accent-color);
-          color: var(--primary-color);
+          background: var(--background-color-accent);
+          color: var(--text-button-color);
         }
 
         .user-organization {
@@ -349,6 +360,8 @@
   .sidebar-actions-container {
     position: absolute;
     left: -40px;
+    background: transparent;
+    overflow: visible;
 
     .sidebar-action-list {
       margin-bottom: 12px;
@@ -359,6 +372,8 @@
       background: var(--background-color-secondary);
       backdrop-filter: blur(8px);
       box-shadow: #{$box-shadow-medium};
+      outline: 1px solid var(--border-color);
+      outline-offset: -1px;
     }
 
     .active {
@@ -715,10 +730,10 @@
   .machine-mechanics-content-container,
   .simulations-container,
   .event-proprties-wrapper {
+    position: relative;
     max-height: calc(60vh - (47px - 35px));
-    overflow: auto;
-    overflow-y: scroll;
-
+    width: calc(100% - 4px);
+    overflow-x: hidden;
     .header {
       @include flex-space-between;
       padding: 6px 12px;
@@ -904,9 +919,8 @@
       .collapse-header-container {
         @include flex-space-between;
         padding-right: 12px;
-        margin-top: 8px;
-        border-top: 1px solid var(--border-color);
-        border-bottom: 1px solid var(--border-color);
+        margin: 8px 0;
+        width: 100%;
 
         .header {
           color: var(--accent-color);
@@ -990,7 +1004,6 @@
       @include flex-space-between;
       padding: 10px 12px;
       color: var(--text-color);
-      margin-bottom: 4px;
       .input-value {
         color: inherit;
       }
@@ -998,7 +1011,6 @@
 
     .input-container {
       @include flex-center;
-
       .remove-button {
         @include flex-center;
         height: 18px;
@@ -1032,6 +1044,13 @@
     }
 
     .custom-input-container {
+      @include flex-space-between;
+      .split {
+        height: 20px;
+        width: 2px;
+        border-radius: 2px;
+        background: var(--text-disabled);
+      }
       .header {
         @include flex-space-between;
         border: none;
@@ -1043,11 +1062,9 @@
 
       .inputs-container {
         @include flex-space-between;
-        padding-bottom: 8px;
 
         .input-container {
           padding: 0 12px;
-          margin-top: 6px;
           gap: 6px;
         }
       }
@@ -1065,7 +1082,6 @@
       .dropdown-header-container,
       .dropdown-content-container {
         padding: 6px 12px;
-        border-top: 1px solid var(--highlight-accent-color);
       }
 
       .input-range-container {