updated realTime vis panel smooth transition

app/src/styles/pages/realTimeViz.scss

@@ -78,7 +78,7 @@
     min-width: 150px;
     z-index: 3;
     transform: translate(-50%, -10%);
-
+    transition: transform 0.5s linear;
     &::-webkit-scrollbar {
       display: none;
     }
@@ -183,8 +183,8 @@
 
   .panel {
     position: absolute;
-    background: var(--background-color);
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    // background: var(--background-color);
+    // box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
     border-radius: 6px;
     overflow: auto;
@@ -203,7 +203,7 @@
       display: flex;
       flex-direction: column;
       gap: 6px;
-      background: var(--background-color);
+      // background: var(--background-color);
 
       &::-webkit-scrollbar {
         display: none;
@@ -383,6 +383,10 @@
   transition: transform 0.3s ease;
   box-shadow: #{$box-shadow-medium};
 
+  svg {
+    stroke: var(--icon-default-color) !important;
+  }
+
   .extra-Bs {
     display: flex;
     align-items: center;
@@ -422,6 +426,7 @@
     .add-icon {
       @include flex-center;
       transition: rotate 0.2s;
+
     }
 
     path {
@@ -440,6 +445,8 @@
         stroke: #f65648;
         stroke-width: 2;
       }
+
+
     }
   }
 
@@ -662,7 +669,7 @@
 }
 
 .distance-line {
- 
+
   position: absolute;
   border-style: dashed;
   border-color: var(--accent-color);
@@ -801,4 +808,179 @@
       }
     }
   }
+}
+
+
+
+
+.panel-content {
+  background: var(--background-color);
+
+}
+
+
+
+
+/* RIGHT */
+.panel-content.right-opening {
+  animation: rightExpand 0.5s ease-in-out forwards;
+  transform-origin: right;
+}
+
+@keyframes rightExpand {
+  from {
+    transform: scaleX(0);
+  }
+
+  to {
+    transform: scaleX(1);
+  }
+}
+
+.panel-content.right-closing {
+  animation: rightCollapse 0.5s ease-in-out forwards;
+  transform-origin: right;
+}
+
+@keyframes rightCollapse {
+  from {
+    transform: scaleX(1);
+  }
+
+  to {
+    transform: scaleX(0);
+  }
+}
+
+/* LEFT */
+.panel-content.left-opening {
+  animation: leftExpand 0.5s ease-in-out forwards;
+  transform-origin: left;
+}
+
+@keyframes leftExpand {
+  from {
+    transform: scaleX(0);
+  }
+
+  to {
+    transform: scaleX(1);
+  }
+}
+
+.left-closing {
+  animation: leftCollapse 0.5s ease-in-out forwards;
+  transform-origin: left;
+}
+
+@keyframes leftCollapse {
+  from {
+    transform: scaleX(1);
+  }
+
+  to {
+    transform: scaleX(0);
+  }
+}
+
+/* TOP */
+.panel-content.top-opening {
+  animation: topExpand 0.5s ease-in-out forwards;
+  transform-origin: top;
+}
+
+@keyframes topExpand {
+  from {
+    transform: scaleY(0);
+  }
+
+  to {
+    transform: scaleY(1);
+  }
+}
+
+.top-closing {
+  animation: topCollapse 0.5s ease-in-out forwards;
+  transform-origin: top;
+}
+
+@keyframes topCollapse {
+  from {
+    transform: scaleY(1);
+  }
+
+  to {
+    transform: scaleY(0);
+  }
+}
+
+/* BOTTOM */
+.panel-content.bottom-opening {
+  animation: bottomExpand 0.5s ease-in-out forwards;
+  transform-origin: bottom;
+}
+
+@keyframes bottomExpand {
+  from {
+    transform: scaleY(0);
+  }
+
+  to {
+    transform: scaleY(1);
+  }
+}
+
+.bottom-closing {
+  animation: bottomCollapse 0.5s ease-in-out forwards;
+  transform-origin: bottom;
+}
+
+@keyframes bottomCollapse {
+  from {
+    transform: scaleY(1);
+  }
+
+  to {
+    transform: scaleY(0);
+  }
+}
+
+
+
+
+// Add button
+
+.extra-Bs {}
+
+.extra-Bs-addopening {
+  animation: slideDown 0.3s ease forwards;
+}
+
+.extra-Bs-addclosing {
+  animation: slideUp 0.3s ease forwards;
+}
+
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: scaleY(0);
+  }
+
+  to {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scaleY(0);
+  }
 }