merged to main

app/src/styles/abstracts/mixins.scss

@@ -9,3 +9,25 @@
   justify-content: space-between;
   align-items: center;
 }
+
+// Array of base colors
+$colors: (
+  #f5550b,
+  #1bac1b,
+  #0099ff,
+  #d4c927,
+  #8400ff, 
+  #13e9b3, 
+  #df1dcf 
+);
+
+@mixin gradient-by-child($index) {
+  // Get the color based on the index passed
+  $base-color: nth($colors, $index);
+  // Apply gradient using the same color with different alpha values
+  background: linear-gradient(
+    144.19deg,
+    rgba($base-color, 0.2) 16.62%,  // 20% opacity
+    rgba($base-color, 0.08) 85.81%   // 80% opacity
+  );
+}

app/src/styles/components/input.scss

@@ -7,14 +7,28 @@ input {
   width: 100%;
   padding: 2px 4px;
   border-radius: #{$border-radius-small};
-  border: 1px solid var(--border-color);
-  outline: none;
+  outline: 2px solid var(--border-color);
+  outline-offset: -2px;
+  border: none;
   background: transparent;
   color: var(--input-text-color);
 
   &:focus,
   &:active {
-    border: 1px solid var(--accent-color);
+    outline: 1px solid var(--accent-color);
+  }
+
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus,
+  &:-webkit-autofill:active {
+    // Text styles
+    -webkit-text-fill-color: var(--input-text-color) !important;
+    caret-color: var(--input-text-color);
+
+    // Background styles
+    background-color: var(--background-color) !important;
+    -webkit-box-shadow: 0 0 0px 1000px var(--background-color) inset !important;
   }
 }
 
@@ -617,6 +631,7 @@ input {
 
     input {
       border: none;
+      outline: none;
       background: transparent;
 
       &::placeholder {

app/src/styles/layout/sidebar.scss

@@ -130,7 +130,6 @@
         grid-column: 1 / -1;
       }
 
-
       .widget-left-sideBar {
         .widgets-wrapper {
 
@@ -542,7 +541,6 @@
 
           .floating {
             width: 100%;
-
           }
         }
 
@@ -1074,24 +1072,62 @@
         .category-name {
           position: relative;
           z-index: 3;
-          font-size: var(--font-size-large);
+          font-size: var(--font-size-regular);
           // -webkit-text-fill-color: transparent;
           // -webkit-text-stroke: 1px black;
         }
 
         &::after {
           content: "";
-          width: 50px;
-          height: 50px;
+          width: 60px;
+          height: 60px;
           border-radius: 50%;
           background-color: var(--circle-color, #000);
           position: absolute;
-          top: 50%;
+          top: 60%;
           right: -10px;
           transform: translate(0, -50%);
-          background: linear-gradient(144.19deg,
-              #f1e7cd 16.62%,
-              #fffaef 85.81%);
+        }
+        &:nth-child(1), &:nth-child(9) {
+          &::after {
+            @include gradient-by-child(1); // First child uses the first color
+          }
+        }
+
+        &:nth-child(2), &:nth-child(10) {
+          &::after {
+            @include gradient-by-child(2); // Second child uses the second color
+          }
+        }
+
+        &:nth-child(3), &:nth-child(11) {
+          &::after {
+            @include gradient-by-child(3); // Third child uses the third color
+          }
+        }
+
+        &:nth-child(4), &:nth-child(12) {
+          &::after {
+            @include gradient-by-child(4); // Fourth child uses the fourth color
+          }
+        }
+
+        &:nth-child(5), &:nth-child(13) {
+          &::after {
+            @include gradient-by-child(5); // Fifth child uses the fifth color
+          }
+        }
+
+        &:nth-child(6), &:nth-child(14) {
+          &::after {
+            @include gradient-by-child(6); // Fifth child uses the fifth color
+          }
+        }
+
+        &:nth-child(7), &:nth-child(15) {
+          &::after {
+            @include gradient-by-child(7); // Fifth child uses the fifth color
+          }
         }
 
         .category-image {
@@ -1118,30 +1154,47 @@
       .assets {
         width: 117px;
         height: 95px;
-        border-radius: 3.59px;
+        border-radius: #{$border-radius-small};
         background-color: var(--background-color-gray);
-        padding: 8px;
-        padding-top: 12px;
         font-weight: $medium-weight;
         position: relative;
         overflow: hidden;
+        padding: 0;
+        &:hover {
+          .asset-name {
+            opacity: 1;
+          }
+        }
 
         .asset-name {
-          position: relative;
+          position: absolute;
+          top: 0;
           z-index: 3;
+          padding: 8px;
+          width: 100%;
           font-size: var(--font-size-regular);
+          background: color-mix(
+            in srgb,
+            var(--background-color) 40%,
+            transparent
+          );
+          backdrop-filter: blur(5px);
+          opacity: 0;
+          transition: opacity 0.3s ease;
+
+          /* Added properties for ellipsis */
+          display: -webkit-box; /* Necessary for multiline truncation */
+          -webkit-line-clamp: 2; /* Number of lines to show */
+          -webkit-box-orient: vertical; /* Box orientation for the ellipsis */
+          overflow: hidden; /* Hide overflowing content */
+          text-overflow: ellipsis; /* Add ellipsis for truncated content */
         }
 
         .asset-image {
           height: 100%;
           width: 100%;
-          position: absolute;
-          // top: 50%;
-          // right: 5px;
-          // transform: translate(0, -50%);
-          top: 0;
-          left: 0;
           z-index: 2;
+          object-fit: cover;
         }
       }
     }
@@ -1204,4 +1257,4 @@
   .assets-wrapper {
     margin: 0;
   }
-}
+}

app/src/styles/pages/realTimeViz.scss

@@ -765,20 +765,19 @@
 
 .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;
+  padding: 4px;
 
   min-width: 150px;
 
   .option {
-    padding: 8px 10px;
+    padding: 4px 10px;
+    border-radius: #{$border-radius-small};
     color: var(--text-color);
     cursor: pointer;
 
@@ -791,7 +790,8 @@
       color: #f65648;
 
       &:hover {
-        background-color: #ffe3e0;
+        background-color: #f65648;
+        color: white;
       }
     }
   }