feat: Implement event properties management with action handling and UI components

app/src/styles/layout/sidebar.scss

@@ -7,6 +7,7 @@
   top: 32px;
   left: 8px;
   background-color: var(--background-color);
+  backdrop-filter: blur(150px);
   border-radius: #{$border-radius-extra-large};
   box-shadow: #{$box-shadow-medium};
   z-index: #{$z-index-tools};
@@ -131,15 +132,12 @@
       }
 
       .widgets-wrapper {
-
         min-height: 50vh;
         max-height: 60vh;
         overflow: auto;
       }
 
       .widget-left-sideBar {
-
-
         .widget2D {
           overflow: auto;
 
@@ -246,6 +244,7 @@
   top: 32px;
   right: 8px;
   background-color: var(--background-color);
+  backdrop-filter: blur(150px);
   border-radius: #{$border-radius-extra-large};
   box-shadow: #{$box-shadow-medium};
   z-index: #{$z-index-tools};
@@ -643,7 +642,7 @@
 
         path {
           stroke: var(--accent-color);
-          strokewidth: 1.5px;
+          stroke-width: 1.5px;
         }
 
         &:hover {
@@ -658,7 +657,8 @@
   }
 
   .machine-mechanics-content-container,
-  .simulations-container {
+  .simulations-container,
+  .event-proprties-wrapper {
     max-height: calc(60vh - (47px - 35px));
     overflow: auto;
     overflow-y: scroll;
@@ -682,6 +682,52 @@
       }
     }
 
+    .global-props {
+      .property-list-container {
+        .property-item {
+          .value-field-container {
+            margin: 0;
+            input {
+              padding: 5px 4px;
+            }
+            .dropdown {
+              top: 4px;
+              right: 4px;
+            }
+          }
+        }
+      }
+    }
+
+    .selected-actions-details {
+      .selected-actions-header .input-value {
+        padding: 8px 12px;
+        color: var(--accent-color);
+      }
+      .selected-actions-list {
+        margin-bottom: 8px;
+        .eye-dropper-input-container{
+          padding: 6px 12px;
+          .regularDropdown-container {
+            padding: 5px 8px;
+            outline: 2px solid var(--border-color);
+            outline-offset: -2px;
+            border: none;
+          }
+        }
+        .value-field-container {
+          margin: 0;
+          input {
+            padding: 5px 4px;
+          }
+          .dropdown {
+            top: 4px;
+            right: 4px;
+          }
+        }
+      }
+    }
+
     .lists-main-container {
       margin: 2px 8px;
       width: calc(100% - 12px);
@@ -712,6 +758,7 @@
 
           input {
             width: fit-content;
+            outline: none;
             accent-color: var(--accent-color);
           }
         }
@@ -1183,25 +1230,21 @@
           z-index: 3;
           padding: 8px;
           width: 100%;
+          max-height: 38px;
           font-size: var(--font-size-regular);
-          background: color-mix(in srgb,
-              var(--background-color) 40%,
-              transparent);
+          background: color-mix(
+            in srgb,
+            var(--background-color) 40%,
+            transparent
+          );
           backdrop-filter: blur(5px);
           opacity: 0;
           transition: opacity 0.3s ease;
-
-          /* Added properties for ellipsis */
           display: -webkit-box;
-          /* Necessary for multiline truncation */
           -webkit-line-clamp: 2;
-          /* Number of lines to show */
           -webkit-box-orient: vertical;
-          /* Box orientation for the ellipsis */
           overflow: hidden;
-          /* Hide overflowing content */
           text-overflow: ellipsis;
-          /* Add ellipsis for truncated content */
         }
 
         .asset-image {
@@ -1271,4 +1314,4 @@
   .assets-wrapper {
     margin: 0;
   }
-}
+}