pl-fe: fix 'light mode contrast on menu bar items kinda sucks'

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/components/sidebar-navigation-link.tsx

@@ -40,27 +40,30 @@ const SidebarNavigationLink = React.memo(React.forwardRef((props: ISidebarNaviga
   };
 
   return (
-    <LinkComponent
-      activeOptions={{ exact: true }}
-      activeProps={{ className: '⁂-sidebar-navigation-link--active' }}
-      to={to}
-      ref={ref}
-      onClick={handleClick}
-      className='⁂-sidebar-navigation-link'
-      {...rest}
-    >
-      <span
-        className='⁂-sidebar-navigation-link__icon'
+    <li>
+      <LinkComponent
+        activeOptions={{ exact: true }}
+        activeProps={{ className: '⁂-sidebar-navigation-link--active' }}
+        to={to}
+        ref={ref}
+        onClick={handleClick}
+        className='⁂-sidebar-navigation-link'
+        {...rest}
       >
-        <Icon
-          src={(isActive && activeIcon) || icon}
-          count={demetricator ? undefined : count}
-          countMax={countMax}
-        />
-      </span>
+        <span
+          className='⁂-sidebar-navigation-link__icon'
+          aria-hidden
+        >
+          <Icon
+            src={(isActive && activeIcon) || icon}
+            count={demetricator ? undefined : count}
+            countMax={countMax}
+          />
+        </span>
 
-      <p>{text}</p>
-    </LinkComponent>
+        <p>{text}</p>
+      </LinkComponent>
+    </li>
   );
 }), (prevProps, nextProps) => prevProps.count === nextProps.count);
 

packages/pl-fe/src/components/sidebar-navigation.tsx

@@ -230,7 +230,7 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
         </div>
       )}
 
-      <div className='⁂-sidebar-navigation__links'>
+      <ul className='⁂-sidebar-navigation__links'>
         <SidebarNavigationLink
           to='/'
           icon={require('@phosphor-icons/core/regular/house.svg')}
@@ -386,7 +386,7 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
             />}
           </Stack>
         )}
-      </div>
+      </ul>
 
       {account && (
         <ComposeButton shrink={shrink} />

packages/pl-fe/src/components/ui/text.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 const themes = {
   default: 'text-gray-900 dark:text-gray-100',
-  danger: 'text-danger-600',
+  danger: 'text-danger-700 dark:text-danger-500',
   primary: 'text-primary-600 dark:text-accent-blue',
   muted: 'text-gray-700 dark:text-gray-600',
   subtle: 'text-gray-400 dark:text-gray-500',

packages/pl-fe/src/styles/new/layout.scss

@@ -221,7 +221,7 @@ body {
   }
 
   &:not(&--active) {
-    @apply text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200;
+    @apply text-gray-700 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200;
 
     .⁂-sidebar-navigation-link__icon {
       @apply bg-primary-50 dark:bg-gray-900;

packages/pl-fe/src/styles/new/mixins.scss

@@ -40,7 +40,7 @@
   @if $theme == default {
     @apply text-gray-900 dark:text-gray-100;
   } @else if $theme == danger {
-    @apply text-danger-600;
+    @apply text-danger-700 dark:text-danger-500;
   } @else if $theme == primary {
     @apply text-primary-600 dark:text-accent-blue;
   } @else if $theme == muted {