merged to main

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;
   }
-}
+}