chore: Refine Progression Sidebar hover and active states (#8206)

* chore: removes progression sidebar hover and active backgrounds

* chore: progression active text styling

Author: canerakdas

packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css

@@ -14,29 +14,6 @@
     text-neutral-800
     dark:text-neutral-200;
 
-  &:not(.active):hover {
-    /* Apply hover background to the full item width */
-    @apply bg-neutral-100
-      dark:bg-neutral-900;
-
-    /* Ensure text colors contrast with hover background */
-    .label {
-      @apply text-neutral-900
-        dark:text-neutral-100;
-    }
-
-    .icon {
-      @apply scale-110
-        text-green-600
-        dark:text-green-400;
-    }
-
-    .progressionIcon {
-      @apply fill-green-200
-        dark:fill-green-300;
-    }
-  }
-
   .label {
     @apply font-regular
       flex
@@ -46,48 +23,59 @@
       text-sm;
   }
 
-  .progressionIcon {
-    @apply shrink-0
-      fill-neutral-200
-      stroke-white
-      stroke-[4]
-      dark:fill-neutral-800
-      dark:stroke-neutral-950;
-  }
-
   .icon {
     @apply size-3
       text-neutral-500
       dark:text-neutral-200;
   }
 
   &.progression {
+    &.active {
+      @apply text-neutral-900
+        dark:text-white;
+
+      .hexagonIcon {
+        @apply fill-green-500;
+      }
+    }
+
     .label {
       @apply p-1;
     }
 
-    /* On hover, use full-width background on the item (set above) */
-    &:not(.active):hover {
-      @apply bg-neutral-100
-        dark:bg-neutral-900;
+    .hexagonIcon {
+      @apply shrink-0
+        fill-neutral-200
+        stroke-white
+        stroke-[4]
+        dark:fill-neutral-800
+        dark:stroke-neutral-950;
     }
+  }
 
-    /* Avoid extra pill background on the label when hovering */
-    &:not(.active):hover .label {
-      @apply rounded-none
-        bg-transparent;
+  &:not(.active):not(.progression):hover {
+    /* Apply hover background to the full item width */
+    @apply bg-neutral-100
+      dark:bg-neutral-900;
+
+    /* Ensure text colors contrast with hover background */
+    .label {
+      @apply text-neutral-900
+        dark:text-neutral-100;
+    }
+
+    .icon {
+      @apply scale-110
+        text-green-600
+        dark:text-green-400;
     }
   }
 
-  &.active {
+  &.active:not(.progression) {
     /* Full-width active background and readable text */
     @apply bg-green-600
       text-white;
 
-    .progressionIcon {
-      @apply fill-green-500;
-    }
-
     /* Remove pill background on the label; keep full-width bg on the item */
     .label {
       @apply rounded-none

packages/ui-components/src/Containers/Sidebar/SidebarItem/index.tsx

@@ -31,9 +31,7 @@ const SidebarItem: FC<SidebarItemProps> = ({
     activeClassName={styles.active}
     {...props}
   >
-    {showProgressionIcons && (
-      <ProgressionIcon className={styles.progressionIcon} />
-    )}
+    {showProgressionIcons && <ProgressionIcon className={styles.hexagonIcon} />}
 
     <div className={styles.label}>
       <span>{label}</span>