Merge branch 'ui' of http://185.100.212.76:7776/Dwinzo-Beta/Dwinzo_dev into ui

app/src/styles/pages/realTimeViz.scss

@@ -44,15 +44,28 @@
     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(--accent-color);
+      color: var(--background-color);
+    }
+
+    .zones-wrapper {
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+    }
+
     .zone {
       width: auto;
       background-color: var(--background-color);
@@ -155,7 +168,8 @@
       position: relative;
       height: 100%;
       padding: 10px;
-      overflow: auto;
+
+      
       display: flex;
       flex-direction: column;
       gap: 10px;
@@ -177,6 +191,65 @@
         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;
+          
+          @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);
+
+            .label {
+              &:hover {
+                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);
+                }
+              }
+            }
+          }
+        }
       }
 
       .close-btn {
@@ -240,6 +313,7 @@
     bottom: 300px;
   }
 }
+
 // Side Buttons
 .side-button-container {
   position: absolute;
@@ -418,3 +492,40 @@
     }
   }
 }
+
+
+
+
+
+.arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  border: none;
+  cursor: pointer;
+  font-size: 20px;
+  padding: 6px;
+  z-index: 10;
+}
+
+.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;
+}