Merge branch 'main' into rtViz

app/src/styles/components/lists.scss

@@ -3,15 +3,23 @@
 
 .dropdown-list-container {
   border-bottom: 1px solid var(--border-color);
+
+  .lists-container {
+    margin-bottom: 6px;
+  }
+
   &:last-child {
     border: none;
   }
+
   .head {
     @include flex-space-between;
     padding: 6px 12px;
+
     .options {
       @include flex-center;
       gap: 6px;
+
       .option {
         @include flex-center;
         cursor: pointer;
@@ -22,34 +30,52 @@
 }
 
 .list-wrapper {
+
+
   .no-item {
     padding: 12px;
   }
+
   .list-container {
     padding: 2px;
+    // margin-left: 10px;
+    overflow: hidden;
+
+
     .list-item {
       @include flex-space-between;
       width: 100%;
       text-align: center;
-      padding: 4px 12px;
+      padding: 4px 8px;
       border-radius: #{$border-radius-large};
+
       .value {
         width: 100%;
         text-align: start;
         max-width: 180px;
       }
+
       .options-container {
         @include flex-center;
         gap: 6px;
+
         .option {
           @include flex-center;
           cursor: pointer;
         }
       }
     }
+
     .active {
       background-color: var(--highlight-accent-color);
       color: var(--primary-color);
     }
   }
-}
+
+  .asset-list {
+    border-left: 2px solid var(--border-color);
+
+    margin-left: 20px
+  }
+
+}

app/src/styles/layout/sidebar.scss

@@ -253,6 +253,7 @@
 
       .user-profile-container {
         display: flex;
+
         .user-profile {
           background: var(--accent-color);
           color: var(--primary-color);
@@ -483,6 +484,9 @@
         height: 150px;
         background: #f0f0f0;
         // border-radius: 8px;
+        display: flex;
+        align-items: center;
+        // justify-content: center;
       }
 
       .optionsContainer {
@@ -497,7 +501,8 @@
           justify-content: space-between;
           gap: 12px;
 
-          .regularDropdown-container {
+          .regularDropdown-container,
+          input {
             width: 160px;
           }
 
@@ -686,6 +691,7 @@
         font-weight: var(--font-weight-regular);
         padding: 8px 0;
       }
+
       .input-toggle-container {
         padding: 0;
         margin-bottom: 6px;
@@ -1009,11 +1015,9 @@
           top: 50%;
           right: -10px;
           transform: translate(0, -50%);
-          background: linear-gradient(
-            144.19deg,
-            #f1e7cd 16.62%,
-            #fffaef 85.81%
-          );
+          background: linear-gradient(144.19deg,
+              #f1e7cd 16.62%,
+              #fffaef 85.81%);
         }
 
         .category-image {
@@ -1117,11 +1121,13 @@
     }
   }
 }
+
 .assets-result {
   width: 100%;
   height: 100%;
   margin: 8px 10px;
+
   .assets-wrapper {
     margin: 0;
   }
-}
+}

app/src/styles/pages/realTimeViz.scss

@@ -61,7 +61,7 @@
     border-radius: 8px;
     max-width: 80%;
     overflow: auto;
-    // max-width: calc(100% - 450px);
+    max-width: calc(100% - 500px);
 
     &::-webkit-scrollbar {
       display: none;
@@ -166,14 +166,16 @@
 
   .panel {
     position: absolute;
-    background: white;
+    background: var(--background-color);
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
     border-radius: 6px;
-    overflow: visible !important;
+    overflow: auto;
     z-index: $z-index-tools;
     overflow: auto;
-
+    &::-webkit-scrollbar {
+      display: none;
+    }
     .panel-content {
       position: relative;
       height: 100%;
@@ -319,6 +321,7 @@
       right: 0;
       top: 0;
       bottom: 0;
+
     }
   }
 
@@ -715,6 +718,13 @@
   z-index: 2 !important;
 }
 
+.connectionSuccess {
+  outline-color: #43C06D;
+}
+
+.connectionFails {
+  outline-color: #ffe3e0;
+}
 
 
 .editWidgetOptions {