From cc5de29194addbab162f6aca4255652e6cf52e7d Mon Sep 17 00:00:00 2001
From: mkljczk <git@mkljczk.pl>
Date: Sun, 2 Feb 2025 20:33:26 +0100
Subject: [PATCH] pl-fe: sidebar menu backdrop blur

Signed-off-by: mkljczk <git@mkljczk.pl>
---
 packages/pl-fe/src/components/sidebar-menu.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/pl-fe/src/components/sidebar-menu.tsx b/packages/pl-fe/src/components/sidebar-menu.tsx
index 92ee2f73e..3cf2008ac 100644
--- a/packages/pl-fe/src/components/sidebar-menu.tsx
+++ b/packages/pl-fe/src/components/sidebar-menu.tsx
@@ -62,7 +62,7 @@ interface ISidebarLink {
 const SidebarLink: React.FC<ISidebarLink> = React.memo(({ href, to, icon, text, onClick }) => {
   const body = (
     <HStack space={2} alignItems='center'>
-      <div className='relative inline-flex rounded-full bg-primary-50 p-2 dark:bg-gray-800'>
+      <div className='relative inline-flex rounded-md bg-primary-100 p-2 dark:bg-gray-800'>
         <Icon src={icon} className='size-5 text-primary-500' />
       </div>
 
@@ -189,7 +189,7 @@ const SidebarMenu: React.FC = React.memo((): JSX.Element | null => {
       <div
         className={clsx('fixed inset-0 cursor-default bg-gray-500 black:bg-gray-900 no-reduce-motion:transition-opacity dark:bg-gray-700', {
           'no-reduce-motion:opacity-0': !(sidebarVisible && isSidebarOpen),
-          'opacity-40': (sidebarVisible && isSidebarOpen),
+          'opacity-20': (sidebarVisible && isSidebarOpen),
         })}
         role='button'
         onClick={handleClose}
@@ -197,7 +197,7 @@ const SidebarMenu: React.FC = React.memo((): JSX.Element | null => {
 
       <div
         className={
-          clsx('fixed bottom-[60px] left-2 z-[1000] flex max-h-[calc(100dvh-68px)] w-full max-w-xs flex-1 origin-bottom-left flex-col overflow-hidden rounded-xl bg-white shadow-lg ease-in-out black:bg-black no-reduce-motion:transition-transform dark:border dark:border-gray-800 dark:bg-primary-900 dark:shadow-none rtl:right-2 rtl:origin-bottom-right', {
+          clsx('fixed bottom-[60px] left-2 z-[1000] flex max-h-[calc(100dvh-68px)] w-full max-w-xs flex-1 origin-bottom-left flex-col overflow-hidden rounded-xl bg-white/90 shadow-lg backdrop-blur-md ease-in-out black:bg-black/90 no-reduce-motion:transition-transform dark:border dark:border-gray-800 dark:bg-primary-900/90 dark:shadow-none rtl:right-2 rtl:origin-bottom-right', {
             'scale-100': sidebarVisible && isSidebarOpen,
             'no-reduce-motion:scale-0': !(sidebarVisible && isSidebarOpen),
           })