Merge remote-tracking branch 'origin/main-demo' into ui

app/src/styles/layout/sidebar.scss

@@ -469,10 +469,6 @@
       width: 304px;
 
       .decal-transformation-container {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-
         .transformation-wrapper {
           display: flex;
           align-items: center;
@@ -501,16 +497,17 @@
             }
 
             input {
-              min-width: 43px;
+              min-width: 58px;
+              text-align: center;
             }
           }
 
-          .layers {
+          .layers-list {
             display: flex;
             gap: 6px;
             align-items: center;
 
-            .icon {
+            .layer-move-btn {
               display: flex;
               justify-content: center;
               align-items: center;
@@ -518,6 +515,11 @@
               padding: 4px 16px;
               width: 50px;
               border-radius: 100px;
+              cursor: pointer;
+
+              &:hover {
+                outline: 1px solid var(--accent-color);
+              }
             }
           }
         }
@@ -585,6 +587,7 @@
               align-items: center;
               justify-content: center;
               border-radius: 8px;
+
               &:hover {
                 background: var(--background-color);
                 outline: 1px solid #aaaaaa29;
@@ -599,6 +602,7 @@
 
             .kebab-icon {
               display: flex;
+
               svg {
                 transform: rotate(90deg) scale(0.8);
               }
@@ -1433,6 +1437,11 @@
       padding: 12px;
       border-radius: #{$border-radius-large};
 
+      outline: 1px solid var(--border-color);
+      outline-offset: -1px;
+      border-radius: 12px;
+      background: var(--background-color);
+
       .compare-simulations-header {
         font-weight: var(--font-weight-medium);
       }
@@ -1581,6 +1590,7 @@
   .analysis-main-container,
   .asset-properties-container,
   .zone-properties-container,
+  .decal-transformation-container,
   .aisle-properties-container {
     .header {
       @include flex-space-between;
@@ -1596,8 +1606,10 @@
     .animations-lists {
       max-height: 210px;
       overflow: auto;
+
       .animations-list-wrapper {
         padding: 0 4px;
+
         .animations-list {
           margin: 2px 0;
           padding: 4px 12px;
@@ -1787,6 +1799,11 @@
       padding: 14px;
       padding-bottom: 0;
       margin-bottom: 8px;
+
+      .input-toggle-container {
+        padding: 4px 0;
+        margin-bottom: 8px;
+      }
     }
 
     .header {
@@ -2044,11 +2061,9 @@
         &:nth-child(2) {
           &::after {
             // @include gradient-by-child(4); // Second child uses the second color
-            background: linear-gradient(
-              144.19deg,
-              rgba(197, 137, 26, 0.5) 16.62%,
-              rgba(69, 48, 10, 0.5) 85.81%
-            );
+            background: linear-gradient(144.19deg,
+                rgba(197, 137, 26, 0.5) 16.62%,
+                rgba(69, 48, 10, 0.5) 85.81%);
           }
         }
 
@@ -2185,11 +2200,9 @@
           width: 100%;
           height: 100%;
           font-size: var(--font-size-regular);
-          background: linear-gradient(
-            0deg,
-            rgba(37, 24, 51, 0) 0%,
-            rgba(52, 41, 61, 0.5) 100%
-          );
+          background: linear-gradient(0deg,
+              rgba(37, 24, 51, 0) 0%,
+              rgba(52, 41, 61, 0.5) 100%);
           pointer-events: none;
           backdrop-filter: blur(8px);
           opacity: 0;
@@ -2445,4 +2458,4 @@
       text-transform: capitalize;
     }
   }
-}
+}