fix: include right-arrow icon in hover background; remove margin, rounded corners, and clean unrelated styles as per review

Author: Mohit5Upadhyay

packages/ui-components/src/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 {

packages/ui-components/src/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>
 );