added pannel hide and EditWidgetOption component

app/src/styles/components/confirmationPopUp.scss

@@ -0,0 +1,43 @@
+.confirmation-overlay {
+    width: 100vw;
+    height: 100vh;
+    background: var(--background-color-secondary);
+    backdrop-filter: blur(2px);
+
+    .confirmation-modal {
+        min-width: 35%;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 5;
+        background-color: var(--background-color);
+        padding: 14px 12px;
+        border-radius: 6px;
+
+        .buttton-wrapper {
+            padding-top: 12px;
+            display: flex;
+            justify-content: end;
+            align-items: end;
+            gap: 12px;
+
+            .confirmation-button {
+                padding: 6px 10px;
+                border-radius: 6px;
+                cursor: pointer;
+
+                &:first-child {
+                    color: var(--accent-color);
+                }
+
+                &:last-child {
+                    background-color: #ffe3e0;
+                    color: #f65648;
+                }
+
+            }
+
+        }
+    }
+}

app/src/styles/main.scss

@@ -24,6 +24,7 @@
 @use 'components/marketPlace/marketPlace';
 @use 'components/simulation/simulation';
 @use 'components/menu/menu';
+@use 'components/confirmationPopUp';
 
 // layout
 @use 'layout/loading';

app/src/styles/pages/realTimeViz.scss

@@ -172,6 +172,7 @@
     border-radius: 6px;
     overflow: visible !important;
     z-index: $z-index-tools;
+    overflow: auto;
 
     .panel-content {
       position: relative;
@@ -320,6 +321,10 @@
       bottom: 0;
     }
   }
+
+  .panel.hidePanel {
+    opacity: 0;
+  }
 }
 
 .playingFlase {
@@ -707,4 +712,43 @@
 .activeChart {
   outline: 1px solid var(--accent-color);
   z-index: 2 !important;
+}
+
+
+.editWidgetOptions-wrapper {
+
+  height: 100vh;
+  width: 100vw;
+}
+
+.editWidgetOptions {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: var(--background-color);
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  border-radius: 6px;
+  overflow: hidden;
+
+  .option {
+    padding: 8px 10px;
+    color: var(--text-color);
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--highlight-accent-color);
+      color: var(--accent-color);
+    }
+
+    &:last-child {
+      color: #f65648;
+
+      &:hover {
+        background-color: #ffe3e0;
+      }
+    }
+  }
 }