From b857c7d0811cf7dabc31130b9135b8f90aafd17f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Mon, 5 Jan 2026 21:36:32 +0100
Subject: [PATCH] pl-fe: fix 'light mode contrast on menu bar items kinda
 sucks'
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 .../components/sidebar-navigation-link.tsx    | 41 ++++++++++---------
 .../src/components/sidebar-navigation.tsx     |  4 +-
 packages/pl-fe/src/components/ui/text.tsx     |  2 +-
 packages/pl-fe/src/styles/new/layout.scss     |  2 +-
 packages/pl-fe/src/styles/new/mixins.scss     |  2 +-
 5 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/packages/pl-fe/src/components/sidebar-navigation-link.tsx b/packages/pl-fe/src/components/sidebar-navigation-link.tsx
index 87987f6aa..b2ebc2a5d 100644
--- a/packages/pl-fe/src/components/sidebar-navigation-link.tsx
+++ b/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);
 
diff --git a/packages/pl-fe/src/components/sidebar-navigation.tsx b/packages/pl-fe/src/components/sidebar-navigation.tsx
index f3138c8be..ee34bb53c 100644
--- a/packages/pl-fe/src/components/sidebar-navigation.tsx
+++ b/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} />
diff --git a/packages/pl-fe/src/components/ui/text.tsx b/packages/pl-fe/src/components/ui/text.tsx
index be4515803..0395cf20c 100644
--- a/packages/pl-fe/src/components/ui/text.tsx
+++ b/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',
diff --git a/packages/pl-fe/src/styles/new/layout.scss b/packages/pl-fe/src/styles/new/layout.scss
index 1445294a6..a9777ef62 100644
--- a/packages/pl-fe/src/styles/new/layout.scss
+++ b/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;
diff --git a/packages/pl-fe/src/styles/new/mixins.scss b/packages/pl-fe/src/styles/new/mixins.scss
index 5b8534b44..0b828d56c 100644
--- a/packages/pl-fe/src/styles/new/mixins.scss
+++ b/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 {