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/components/input.scss

@@ -5,12 +5,12 @@
 
 input {
   width: 100%;
-  padding: 2px 4px;
-  border-radius: #{$border-radius-small};
-  outline: 1px solid var(--border-color);
+  padding: 4px 8px;
+  border-radius: #{$border-radius-large};
+  outline: 1px solid var(--input-border-color);
   outline-offset: -1px;
   border: none;
-  background: transparent;
+  background: var(--background-color-input);
   color: var(--input-text-color);
 
   &:focus,
@@ -44,6 +44,18 @@ input {
   }
 }
 
+input[type="number"] {
+  // Chrome, Safari, Edge, Opera
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  // Firefox
+  -moz-appearance: textfield;
+}
+
 .input-value {
   color: var(--input-text-color);
   font-size: var(--font-size-regular);
@@ -61,9 +73,7 @@ input {
   color: var(--input-text-color);
   font-size: var(--font-size-regular);
   font-weight: var(--font-weight-regular);
-  border: 1px solid var(--accent-color);
   outline: none;
-  border-radius: #{$border-radius-small};
   line-height: 26px;
   padding: 0 8px;
 }
@@ -102,10 +112,11 @@ input {
   .search-container {
     @include flex-center;
     width: 100%;
-    border-radius: #{$border-radius-small};
-    padding: 6px 2px;
+    border-radius: #{$border-radius-extra-large};
+    padding: 3px 2px;
     position: relative;
     border: 1px solid var(--border-color);
+    background: var(--background-color-input-focus);
 
     .icon-container {
       @include flex-center;
@@ -220,7 +231,6 @@ input {
     justify-content: space-between;
     cursor: pointer;
     border-radius: 6px;
-    background: var(--background-color);
   }
 
   .dropdown-options {
@@ -469,7 +479,7 @@ input {
   .check-box {
     height: 24px;
     width: 38px;
-    background: var(--background-color-secondary);
+    background: var(--background-color);
     border-radius: #{$border-radius-large};
     position: relative;
     cursor: pointer;
@@ -480,7 +490,7 @@ input {
       width: 20px;
       top: 2px;
       left: 2px;
-      background: var(--accent-color);
+      background: var(--text-button-color);
       border-radius: #{$border-radius-circle};
       transition: left 0.3s ease;
     }
@@ -726,17 +736,17 @@ input {
       @include flex-center;
     }
   }
-  .upload-custom-asset-button{
+  .upload-custom-asset-button {
     padding: 6px 12px;
     @include flex-space-between;
-    .title{
+    .title {
       white-space: nowrap;
       width: 40%;
     }
-    input{
+    input {
       display: none;
     }
-    .upload-button{
+    .upload-button {
       width: 60%;
       background: var(--highlight-accent-color);
       color: var(--accent-color);

app/src/styles/components/menu/menu.scss

@@ -6,15 +6,31 @@
   align-items: center;
   gap: 2px;
   position: relative;
-  height: 32px;
+  border-radius: #{$border-radius-extra-large};
+  background: var(--background-color-drop-down);
+  padding: 3px 8px;
+  width: fit-content;
+  max-width: 100%;
   .project-name {
-    line-height: 32px;
+    @include flex-center;
     height: 100%;
+    line-height: 26px;
+    .icon{
+      @include flex-center;
+      height: 20px;
+      width: 20px;
+    }
+    .input-value{
+      max-width: 120px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
   .more-options-button {
     @include flex-center;
     border-radius: #{$border-radius-small};
-    height: 28px;
+    height: 22px;
     position: relative;
     &:hover {
       background: var(--highlight-accent-color);
@@ -41,6 +57,7 @@
   box-shadow: var(--box-shadow-light);
   border-radius: 8px;
   border: 1px solid var(--border-color);
+  backdrop-filter: blur(10px);
   .menu-buttons {
     display: flex;
     flex-direction: column;

app/src/styles/components/tools.scss

@@ -49,10 +49,10 @@
     }
 
     .active {
-      background: var(--accent-color);
+      background: var(--background-color-accent);
 
       &:hover {
-        background: var(--accent-color);
+        background: var(--background-color-accent);
       }
     }
   }