Merge branch 'update-thumb-navigation' into 'main'

Update thumb navigation

Closes #1807

See merge request soapbox-pub/soapbox!3314

src/components/icon-with-counter.tsx

@@ -1,5 +1,6 @@
-import Icon, { IIcon } from 'soapbox/components/icon.tsx';
+import { IIcon } from 'soapbox/components/icon.tsx';
 import Counter from 'soapbox/components/ui/counter.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
 
 interface IIconWithCounter extends React.HTMLAttributes<HTMLDivElement> {
   count: number;

src/components/sidebar-navigation-link.tsx

@@ -55,7 +55,7 @@ const SidebarNavigationLink = forwardRef((props: ISidebarNavigationLink, ref: Re
           count={count}
           countMax={countMax}
           className={clsx('size-5', {
-            'text-gray-600 black:text-white dark:text-gray-500 group-hover:text-gray-900 dark:group-hover:text-gray-50': !isActive,
+            'text-gray-600 black:text-gray-500 dark:text-gray-500 group-hover:text-gray-900 dark:group-hover:text-gray-50': !isActive,
             'text-gray-900 dark:text-gray-50': isActive,
           })}
         />

src/components/thumb-navigation-link.tsx

@@ -37,9 +37,9 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax,
         <IconWithCounter
           src={icon}
           className={clsx({
-            'h-5 w-5': true,
+            'size-5': true,
-            'text-gray-600 black:text-white': !active,
+            'text-black dark:text-white black:text-white': active,
-            'text-primary-500': active,
+            'text-gray-600': !active,
           })}
           count={count}
           countMax={countMax}
@@ -48,9 +48,9 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax,
         <Icon
           src={icon}
           className={clsx({
-            'h-5 w-5': true,
+            'size-5': true,
-            'text-gray-600 black:text-white': !active,
+            'text-black black:text-white dark:text-white': active,
-            'text-primary-500': active,
+            'text-gray-600 black:text-gray-500 dark:text-gray-500': !active,
           })}
         />
       )}
@@ -60,9 +60,9 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax,
         size='xs'
         weight='medium'
         className={clsx({
-          'text-gray-600': !active,
+          'text-gray-600 black:text-white dark:text-white': active,
-          'text-primary-500': active,
+          '!text-gray-600 black:!text-gray-500 dark:!text-gray-500': !active,
-        })}
+        })}text-primary-500
       >
         {text}
       </Text>