Merge branch 'realTimeVisulization' into rtViz

app/src/styles/pages/realTimeViz.scss

@@ -1,5 +1,4 @@
 @use "../abstracts/variables.scss" as *;
-@use "../abstracts/mixins" as *;
 
 // Main Container
 .realTime-viz {
@@ -149,8 +148,9 @@
     background: white;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
+    border-radius: 6px;
     overflow: visible !important;
-    
+
     .panel-content {
       position: relative;
       height: 100%;
@@ -160,7 +160,6 @@
       flex-direction: column;
       gap: 10px;
       background-color: var(--background-color);
-      border-radius: #{$border-radius-small};
 
       &::-webkit-scrollbar {
         display: none;
@@ -195,6 +194,8 @@
       left: 0;
       right: 0;
 
+
+
       .panel-content {
         display: flex;
         flex-direction: row;
@@ -235,9 +236,9 @@
   }
 }
 
-.playingFlase {
-  .zoon-wrapper.bottom {
-    bottom: 300px;
+.playingFlase{
+  .zoon-wrapper{
+    bottom: 300px !important;
   }
 }
 // Side Buttons
@@ -245,11 +246,9 @@
   position: absolute;
   display: flex;
   background-color: var(--background-color);
-  padding: 2px;
-  border-radius: 2px;
+  padding: 5px;
+  border-radius: 8px;
   transition: transform 0.3s ease;
-  box-shadow: #{$box-shadow-medium};
-  // outline: 1px solid var(--border-color);
 
   .extra-Bs {
     display: flex;
@@ -279,29 +278,13 @@
     transition: background-color 0.3s ease;
     width: 18px;
     height: 18px;
-    @include flex-center;
+    display: flex;
+    justify-content: center;
+    // align-items: center;
     background-color: var(--accent-color);
     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 {