Merge branch 'main' into rtViz

app/src/styles/pages/realTimeViz.scss

@@ -1,4 +1,5 @@
 @use "../abstracts/variables.scss" as *;
+@use "../abstracts/mixins.scss" as *;
 
 // Main Container
 .realTime-viz {
@@ -46,7 +47,7 @@
     }
   }
 
-  .zoon-wrapper {
+  .zone-wrapper {
     display: flex;
     background-color: var(--background-color);
     position: absolute;
@@ -54,15 +55,37 @@
     left: 50%;
     transform: translate(-50%, 0);
     gap: 6px;
-    padding: 4px;
+
     border-radius: 8px;
     max-width: 80%;
     overflow: auto;
-    max-width: calc(100% - 450px);
+    // max-width: calc(100% - 450px);
+
     &::-webkit-scrollbar {
       display: none;
     }
 
+    .arrow {
+      background-color: var(--highlight-accent-color);
+      color: var(--background-color);
+    }
+
+    .zones-wrapper {
+      padding: 6px;
+      display: flex;
+      gap: 6px;
+      border-radius: #{$border-radius-medium};
+      overflow-x: auto;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+    .no-zone {
+      @include flex-center;
+      gap: 4px;
+      padding: 4px;
+      color: var(--text-disabled);
+    }
     .zone {
       width: auto;
       background-color: var(--background-color);
@@ -79,28 +102,10 @@
     }
   }
 
-  .zoon-wrapper.bottom {
+  .zone-wrapper.bottom {
     bottom: 210px;
   }
 
-  @media (max-width: 1024px) {
-    width: 80%; // Increase width to take more space on smaller screens
-    height: 500px; // Reduce height to fit smaller screens
-    left: 50%; // Center horizontally
-
-    .main-container {
-      margin: 0 15px; // Reduce margin for better spacing
-    }
-
-    .zoon-wrapper {
-      bottom: 5px; // Adjust position for smaller screens
-
-      &.bottom {
-        bottom: 150px; // Adjust for bottom placement
-      }
-    }
-  }
-
   .content-container {
     display: flex;
     height: 100vh;
@@ -115,7 +120,7 @@
     margin: 0 30px;
     transition: height 0.3s ease, margin 0.3s ease;
 
-    .zoon-wrapper {
+    .zone-wrapper {
       display: flex;
       background-color: rgba(224, 223, 255, 0.5);
       position: absolute;
@@ -161,15 +166,15 @@
     transition: all 0.3s ease;
     border-radius: 6px;
     overflow: visible !important;
+    z-index: $z-index-tools;
 
     .panel-content {
       position: relative;
       height: 100%;
       padding: 10px;
-      overflow: auto;
       display: flex;
       flex-direction: column;
-      gap: 10px;
+      gap: 6px;
       background-color: var(--background-color);
 
       &::-webkit-scrollbar {
@@ -178,8 +183,7 @@
 
       .chart-container {
         width: 100%;
-        height: 24% !important;
-
+        height: 25% !important;
         min-height: 150px;
         max-height: 100%;
         border: 1px dotted #a9a9a9;
@@ -187,6 +191,70 @@
         box-shadow: 0px 2px 6px 0px rgba(60, 60, 67, 0.1);
         padding: 6px 0;
         background-color: white;
+        position: relative;
+
+        .kebab {
+          width: 30px;
+          height: 30px;
+          position: absolute;
+          top: 0px;
+          right: 0px;
+          z-index: 10;
+          cursor: pointer;
+          @include flex-center;
+        }
+
+        .kebab-options {
+          position: absolute;
+          top: 12px;
+          right: -100px;
+          transform: translate(0px, 0);
+          background-color: var(--background-color);
+          z-index: 10;
+
+          display: flex;
+          flex-direction: column;
+          gap: 6px;
+          border-radius: 4px;
+
+          box-shadow: var(--box-shadow-medium);
+
+          .btn {
+            display: flex;
+            gap: 6px;
+            align-items: center;
+            padding: 5px 10px;
+            color: var(--text-color);
+
+            &:hover {
+              .label {
+                color: var(--accent-color);
+              }
+            }
+
+            &:hover {
+              background-color: var(--highlight-accent-color);
+              width: 100%;
+
+              svg {
+                &:first-child {
+                  fill: var(--accent-color);
+                }
+
+                &:last-child {
+                  fill: auto;
+                  stroke: var(--accent-color);
+                }
+              }
+            }
+          }
+
+          .btn-blur {
+            color: var(--text-disabled);
+            cursor: not-allowed;
+            pointer-events: none;
+          }
+        }
       }
 
       .close-btn {
@@ -246,18 +314,20 @@
 }
 
 .playingFlase {
-  .zoon-wrapper {
-    bottom: 300px !important;
+  .zone-wrapper.bottom {
+    bottom: 300px;
   }
 }
+
 // Side Buttons
 .side-button-container {
   position: absolute;
   display: flex;
   background-color: var(--background-color);
-  padding: 5px;
-  border-radius: 8px;
+  padding: 2px;
+  border-radius: 2px;
   transition: transform 0.3s ease;
+  box-shadow: #{$box-shadow-medium};
 
   .extra-Bs {
     display: flex;
@@ -294,6 +364,24 @@
     border: none;
     color: var(--background-color);
     border-radius: 4px;
+    .add-icon {
+      @include flex-center;
+      transition: rotate 0.2s;
+    }
+    path {
+      stroke: var(--primary-color);
+      stroke-width: 2;
+    }
+  }
+  .active {
+    background: #ffe3e0;
+    .add-icon {
+      rotate: 45deg;
+      path {
+        stroke: #f65648;
+        stroke-width: 2;
+      }
+    }
   }
 
   &.top {
@@ -410,3 +498,33 @@
     }
   }
 }
+
+.arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  border: none;
+  cursor: pointer;
+  z-index: 10;
+  height: 100%;
+}
+
+.left-arrow {
+  left: 0;
+}
+
+.right-arrow {
+  right: 0;
+}
+
+.zone {
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.zone.active {
+  background-color: #007bff;
+  color: white;
+}