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

app/src/styles/components/input.scss

@@ -7,8 +7,8 @@ input {
   width: 100%;
   padding: 2px 4px;
   border-radius: #{$border-radius-small};
-  outline: 2px solid var(--border-color);
-  outline-offset: -2px;
+  outline: 1px solid var(--border-color);
+  outline-offset: -1px;
   border: none;
   background: transparent;
   color: var(--input-text-color);
@@ -30,6 +30,24 @@ input {
     background-color: var(--background-color) !important;
     -webkit-box-shadow: 0 0 0px 1000px var(--background-color) inset !important;
   }
+
+  // File input specific style adjustments
+  &::file-selector-button {
+    font-size: 14px;
+    color: var(--accent-color);
+    background-color: var(--background-color-secondary);
+    border: none;
+    outline: none;
+    border-radius: #{$border-radius-small};
+    padding: 2px;
+    cursor: pointer;
+
+    // Hover effect for the file button
+    &:hover {
+      color: var(--primary-color);
+      background-color: var(--accent-color);
+    }
+  }
 }
 
 .input-value {
@@ -712,3 +730,47 @@ input {
     border: 1px solid var(--accent-color);
   }
 }
+
+.preview-selection-with-upload-wrapper {
+  .input-header-container {
+    padding: 6px 12px;
+    @include flex-space-between;
+    .arrow-container {
+      transition: all 0.2s;
+      @include flex-center;
+    }
+  }
+  .upload-custom-asset-button{
+    padding: 6px 12px;
+    @include flex-space-between;
+    .title{
+      white-space: nowrap;
+      width: 40%;
+    }
+    input{
+      display: none;
+    }
+    .upload-button{
+      width: 60%;
+      background: var(--highlight-accent-color);
+      color: var(--accent-color);
+      padding: 3px 6px;
+      border-radius: #{$border-radius-small};
+      text-align: center;
+    }
+  }
+  .canvas-wrapper {
+    height: 150px;
+    width: 100%;
+    padding: 8px;
+    padding-right: 4px;
+    overflow: hidden;
+    position: relative;
+    .canvas-container {
+      width: 100%;
+      height: 100%;
+      border-radius: #{$border-radius-small};
+      background-color: var(--background-color-gray);
+    }
+  }
+}

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