From 0573e01769238947aebe47083e9ae272962f5cfe Mon Sep 17 00:00:00 2001
From: Estifo77 <139631617+Estifo77@users.noreply.github.com>
Date: Tue, 11 Aug 2026 14:32:26 +0300
Subject: [PATCH] UI fixes

---
 .../features/location/components/LocationTree.tsx    |  8 ++++++--
 libs/ui/src/lib/layout/AppSidebar.tsx                | 12 ++++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/apps/backoffice/src/app/features/location/components/LocationTree.tsx b/apps/backoffice/src/app/features/location/components/LocationTree.tsx
index b8f443721..dda3d9574 100644
--- a/apps/backoffice/src/app/features/location/components/LocationTree.tsx
+++ b/apps/backoffice/src/app/features/location/components/LocationTree.tsx
@@ -11,6 +11,7 @@ import {
   Box,
   rem,
   Center,
+  useMantineColorScheme,
 } from '@mantine/core';
 import {
   IconChevronRight,
@@ -54,6 +55,10 @@ function TreeNode({
   const isSelected = selectedId === location.id;
   const hasChildren =
     Array.isArray(location.children) && location.children.length > 0;
+  const { colorScheme } = useMantineColorScheme();
+  const hoverBg = colorScheme === 'dark'
+    ? 'var(--mantine-color-dark-6)'
+    : 'var(--mantine-color-gray-0)';
 
   const toggle = useCallback(() => {
     setOpened((prev) => !prev);
@@ -88,8 +93,7 @@ function TreeNode({
         }}
         onMouseEnter={(e) => {
           if (!isSelected)
-            e.currentTarget.style.backgroundColor =
-              'var(--mantine-color-gray-0)';
+            e.currentTarget.style.backgroundColor = hoverBg;
         }}
         onMouseLeave={(e) => {
           if (!isSelected)
diff --git a/libs/ui/src/lib/layout/AppSidebar.tsx b/libs/ui/src/lib/layout/AppSidebar.tsx
index e1eea8f5c..3969b1850 100644
--- a/libs/ui/src/lib/layout/AppSidebar.tsx
+++ b/libs/ui/src/lib/layout/AppSidebar.tsx
@@ -10,6 +10,7 @@ import {
   Tooltip,
   UnstyledButton,
   rem,
+  useMantineColorScheme,
 } from '@mantine/core';
 import {
   IconChevronLeft,
@@ -250,6 +251,13 @@ export function AppSidebar({
   brandLogo,
 }: AppSidebarProps) {
   const { t } = useTranslation();
+  const { colorScheme } = useMantineColorScheme();
+  const hoverBg = colorScheme === 'dark'
+    ? 'var(--mantine-color-dark-6)'
+    : 'var(--mantine-color-gray-0)';
+  const hoverColor = colorScheme === 'dark'
+    ? 'var(--mantine-color-gray-3)'
+    : 'var(--mantine-color-gray-7)';
 
   return (
     <>
@@ -372,8 +380,8 @@ export function AppSidebar({
               fontWeight: 500,
             }}
             onMouseEnter={(e) => {
-              e.currentTarget.style.background = 'var(--mantine-color-gray-0)';
-              e.currentTarget.style.color = 'var(--mantine-color-gray-7)';
+              e.currentTarget.style.background = hoverBg;
+              e.currentTarget.style.color = hoverColor;
             }}
             onMouseLeave={(e) => {
               e.currentTarget.style.background = 'transparent';