From 4c31cf2ba1abe32987be9d0c020fcacc07a8fc9c Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Mon, 16 May 2022 08:58:16 -0400
Subject: [PATCH] Improve sidebar link design

---
 .../components/sidebar-navigation-link.tsx     | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/app/soapbox/components/sidebar-navigation-link.tsx b/app/soapbox/components/sidebar-navigation-link.tsx
index 9dbedd46a..bda7f3884 100644
--- a/app/soapbox/components/sidebar-navigation-link.tsx
+++ b/app/soapbox/components/sidebar-navigation-link.tsx
@@ -32,17 +32,12 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
       ref={ref}
       onClick={handleClick}
       className={classNames({
-        'flex items-center py-2 text-sm font-semibold space-x-4': true,
-        'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200': !isActive,
-        'text-gray-900 dark:text-white': isActive,
+        'flex items-center p-3 text-sm font-semibold space-x-4 rounded-full group hover:bg-primary-200/80 dark:hover:bg-primary-900/60 hover:text-primary-600 dark:hover:text-gray-200': true,
+        'text-gray-500 dark:text-gray-400': !isActive,
+        'text-primary-600 dark:text-white': isActive,
       })}
     >
-      <span className={classNames({
-        'relative rounded-lg inline-flex p-3': true,
-        'bg-primary-50 dark:bg-slate-700': !isActive,
-        'bg-primary-600': isActive,
-      })}
-      >
+      <span className='relative'>
         {withCounter && count > 0 ? (
           <span className='absolute -top-2 -right-2'>
             <Counter count={count} />
@@ -52,9 +47,8 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
         <Icon
           src={icon}
           className={classNames({
-            'h-5 w-5': true,
-            'text-primary-700 dark:text-white': !isActive,
-            'text-white': isActive,
+            'h-5 w-5 dark:group-hover:text-primary-500': true,
+            'dark:text-primary-500': isActive,
           })}
         />
       </span>