From baa05783dd61306fa158928644527ee1311b1d56 Mon Sep 17 00:00:00 2001
From: Mohit5Upadhyay <upadhyaym7060@gmail.com>
Date: Wed, 2 Jul 2025 17:36:12 +0530
Subject: [PATCH 1/5] fix: add hover effect to sidebar links (#7893)

---
 .../Sidebar/SidebarItem/index.module.css      | 41 ++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/packages/ui-components/Containers/Sidebar/SidebarItem/index.module.css b/packages/ui-components/Containers/Sidebar/SidebarItem/index.module.css
index c2ea7c7ff8e41..b8d754d51221b 100644
--- a/packages/ui-components/Containers/Sidebar/SidebarItem/index.module.css
+++ b/packages/ui-components/Containers/Sidebar/SidebarItem/index.module.css
@@ -8,14 +8,42 @@
     w-full
     items-center
     overflow-hidden
+    rounded-md
     text-sm
     text-neutral-800
+    transition-all
+    duration-200
+    ease-in-out
     dark:text-neutral-200;
 
+  margin-bottom: 1px;
+
+  &:not(.active):hover {
+    @apply bg-neutral-100
+      text-neutral-900
+      shadow-sm
+      dark:bg-neutral-800
+      dark:text-neutral-100;
+
+    .icon {
+      @apply scale-110
+        text-green-600
+        dark:text-green-400;
+    }
+
+    .label {
+      @apply text-neutral-900
+        dark:text-neutral-100;
+    }
+  }
+
   .label {
     @apply font-regular
       p-2
-      text-sm;
+      text-sm
+      transition-colors
+      duration-200
+      ease-in-out;
   }
 
   .progressionIcon {
@@ -23,6 +51,9 @@
       fill-neutral-200
       stroke-white
       stroke-[4]
+      transition-colors
+      duration-200
+      ease-in-out
       dark:fill-neutral-800
       dark:stroke-neutral-950;
   }
@@ -30,6 +61,9 @@
   .icon {
     @apply size-3
       text-neutral-500
+      transition-all
+      duration-200
+      ease-in-out
       dark:text-neutral-200;
   }
 
@@ -37,6 +71,11 @@
     .label {
       @apply p-1;
     }
+
+    &:not(.active):hover {
+      @apply bg-neutral-50
+        dark:bg-neutral-900;
+    }
   }
 
   &.active {

From 74a3a68924ed8de49a91968f31ea196440e28fca Mon Sep 17 00:00:00 2001
From: Mohit5Upadhyay <upadhyaym7060@gmail.com>
Date: Fri, 4 Jul 2025 16:14:47 +0530
Subject: [PATCH 2/5] fix(sidebar): update hover to neutral grey for
 consistency with nav links

---
 .../Sidebar/SidebarItem/index.module.css      | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/ui-components/Containers/Sidebar/SidebarItem/index.module.css b/packages/ui-components/Containers/Sidebar/SidebarItem/index.module.css
index b8d754d51221b..e5e13c658da8a 100644
--- a/packages/ui-components/Containers/Sidebar/SidebarItem/index.module.css
+++ b/packages/ui-components/Containers/Sidebar/SidebarItem/index.module.css
@@ -18,23 +18,20 @@
 
   margin-bottom: 1px;
 
-  &:not(.active):hover {
-    @apply bg-neutral-100
-      text-neutral-900
-      shadow-sm
-      dark:bg-neutral-800
-      dark:text-neutral-100;
+  &:hover {
+    &:not(.progression) .label {
+      @apply rounded-sm
+          bg-neutral-100
+          text-neutral-900
+          dark:bg-neutral-800
+          dark:text-neutral-100;
+    }
 
     .icon {
       @apply scale-110
         text-green-600
         dark:text-green-400;
     }
-
-    .label {
-      @apply text-neutral-900
-        dark:text-neutral-100;
-    }
   }
 
   .label {
@@ -73,7 +70,7 @@
     }
 
     &:not(.active):hover {
-      @apply bg-neutral-50
+      @apply bg-neutral-100
         dark:bg-neutral-900;
     }
   }

From 939da2efca380956207248cd64fcf70acb06aab4 Mon Sep 17 00:00:00 2001
From: Mohit5Upadhyay <upadhyaym7060@gmail.com>
Date: Fri, 4 Jul 2025 18:23:56 +0530
Subject: [PATCH 3/5] chore: remove unrelated style changes, keep necessary
 margin and rounded corners

---
 .../Sidebar/SidebarItem/index.module.css        | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/packages/ui-components/Containers/Sidebar/SidebarItem/index.module.css b/packages/ui-components/Containers/Sidebar/SidebarItem/index.module.css
index e5e13c658da8a..e7b7f5d9ee3ac 100644
--- a/packages/ui-components/Containers/Sidebar/SidebarItem/index.module.css
+++ b/packages/ui-components/Containers/Sidebar/SidebarItem/index.module.css
@@ -11,9 +11,6 @@
     rounded-md
     text-sm
     text-neutral-800
-    transition-all
-    duration-200
-    ease-in-out
     dark:text-neutral-200;
 
   margin-bottom: 1px;
@@ -21,10 +18,10 @@
   &:hover {
     &:not(.progression) .label {
       @apply rounded-sm
-          bg-neutral-100
-          text-neutral-900
-          dark:bg-neutral-800
-          dark:text-neutral-100;
+        bg-neutral-100
+        text-neutral-900
+        dark:bg-neutral-800
+        dark:text-neutral-100;
     }
 
     .icon {
@@ -48,9 +45,6 @@
       fill-neutral-200
       stroke-white
       stroke-[4]
-      transition-colors
-      duration-200
-      ease-in-out
       dark:fill-neutral-800
       dark:stroke-neutral-950;
   }
@@ -58,9 +52,6 @@
   .icon {
     @apply size-3
       text-neutral-500
-      transition-all
-      duration-200
-      ease-in-out
       dark:text-neutral-200;
   }
 

From 1785286a729031b58c2b984134f29ad25d3c186a Mon Sep 17 00:00:00 2001
From: Mohit5Upadhyay <upadhyaym7060@gmail.com>
Date: Fri, 4 Jul 2025 22:31:34 +0530
Subject: [PATCH 4/5] fix: include right-arrow icon in hover background; remove
 margin, rounded corners, and clean unrelated styles as per review

---
 .../Containers/Sidebar/SidebarItem/index.module.css      | 9 +--------
 .../Containers/Sidebar/SidebarItem/index.tsx             | 7 +++++--
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/ui-components/Containers/Sidebar/SidebarItem/index.module.css b/packages/ui-components/Containers/Sidebar/SidebarItem/index.module.css
index e7b7f5d9ee3ac..c1aafd1b2acab 100644
--- a/packages/ui-components/Containers/Sidebar/SidebarItem/index.module.css
+++ b/packages/ui-components/Containers/Sidebar/SidebarItem/index.module.css
@@ -8,13 +8,10 @@
     w-full
     items-center
     overflow-hidden
-    rounded-md
     text-sm
     text-neutral-800
     dark:text-neutral-200;
 
-  margin-bottom: 1px;
-
   &:hover {
     &:not(.progression) .label {
       @apply rounded-sm
@@ -33,11 +30,7 @@
 
   .label {
     @apply font-regular
-      p-2
-      text-sm
-      transition-colors
-      duration-200
-      ease-in-out;
+      p-2;
   }
 
   .progressionIcon {
diff --git a/packages/ui-components/Containers/Sidebar/SidebarItem/index.tsx b/packages/ui-components/Containers/Sidebar/SidebarItem/index.tsx
index 0556c11c0d156..210c8887c0f99 100644
--- a/packages/ui-components/Containers/Sidebar/SidebarItem/index.tsx
+++ b/packages/ui-components/Containers/Sidebar/SidebarItem/index.tsx
@@ -34,9 +34,12 @@ const SidebarItem: FC<SidebarItemProps> = ({
     {showProgressionIcons && (
       <ProgressionIcon className={styles.progressionIcon} />
     )}
-    <span className={styles.label}>{label}</span>
 
-    {/^https?:/.test(link) && <ArrowUpRightIcon className={styles.icon} />}
+    <div className={`${styles.label} flex items-center gap-1.5`}>
+      <span>{label}</span>
+
+      {/^https?:/.test(link) && <ArrowUpRightIcon className={styles.icon} />}
+    </div>
   </BaseActiveLink>
 );
 

From 8abdef22687fd26ff982fab878bf0fa7bd8fea22 Mon Sep 17 00:00:00 2001
From: Mohit5Upadhyay <upadhyaym7060@gmail.com>
Date: Sat, 5 Jul 2025 12:34:32 +0530
Subject: [PATCH 5/5] fix(sidebar): move flex styles to CSS file & adding
 margin , rounded on item

---
 .../Containers/Sidebar/SidebarItem/index.module.css       | 8 +++++++-
 .../Containers/Sidebar/SidebarItem/index.tsx              | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/ui-components/Containers/Sidebar/SidebarItem/index.module.css b/packages/ui-components/Containers/Sidebar/SidebarItem/index.module.css
index c1aafd1b2acab..32ebb38ea0957 100644
--- a/packages/ui-components/Containers/Sidebar/SidebarItem/index.module.css
+++ b/packages/ui-components/Containers/Sidebar/SidebarItem/index.module.css
@@ -4,10 +4,12 @@
   @apply font-regular
     relative
     z-20
+    mb-px
     flex
     w-full
     items-center
     overflow-hidden
+    rounded-md
     text-sm
     text-neutral-800
     dark:text-neutral-200;
@@ -30,7 +32,11 @@
 
   .label {
     @apply font-regular
-      p-2;
+      flex
+      items-center
+      gap-1.5
+      p-2
+      text-sm;
   }
 
   .progressionIcon {
diff --git a/packages/ui-components/Containers/Sidebar/SidebarItem/index.tsx b/packages/ui-components/Containers/Sidebar/SidebarItem/index.tsx
index 210c8887c0f99..7bd4132875cc7 100644
--- a/packages/ui-components/Containers/Sidebar/SidebarItem/index.tsx
+++ b/packages/ui-components/Containers/Sidebar/SidebarItem/index.tsx
@@ -35,7 +35,7 @@ const SidebarItem: FC<SidebarItemProps> = ({
       <ProgressionIcon className={styles.progressionIcon} />
     )}
 
-    <div className={`${styles.label} flex items-center gap-1.5`}>
+    <div className={styles.label}>
       <span>{label}</span>
 
       {/^https?:/.test(link) && <ArrowUpRightIcon className={styles.icon} />}