From 9d316b6a4f0c93238fd4dc86ad1125ef182b9a33 Mon Sep 17 00:00:00 2001 From: IslemDjd Date: Fri, 12 Sep 2025 20:03:49 +0100 Subject: [PATCH 1/3] style: update sidebar item spacing and scrollbar styles --- .../src/Containers/Sidebar/SidebarGroup/index.module.css | 8 ++++---- .../src/Containers/Sidebar/SidebarItem/index.module.css | 1 + packages/ui-components/src/styles/index.css | 7 +++++++ 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css b/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css index ef254be7796fb..b20c9227dbb8d 100644 --- a/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css +++ b/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css @@ -38,9 +38,9 @@ -left-1 flex flex-col - gap-px + gap-1 after:absolute - after:left-[0.45rem] + after:left-3 after:top-0 after:z-10 after:h-full @@ -64,8 +64,8 @@ last:after:w-4 last:after:bg-white last:after:content-[''] - first:dark:before:bg-neutral-950 - last:dark:after:bg-neutral-950; + first:dark:before:bg-transparent + last:dark:after:bg-transparent; } } } diff --git a/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css b/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css index f11585de67303..758deb601742c 100644 --- a/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css +++ b/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css @@ -10,6 +10,7 @@ gap-1 overflow-hidden rounded-md + pl-1 text-sm text-neutral-800 dark:text-neutral-200; diff --git a/packages/ui-components/src/styles/index.css b/packages/ui-components/src/styles/index.css index c1fe1ddb15026..c47a8ab77b0af 100644 --- a/packages/ui-components/src/styles/index.css +++ b/packages/ui-components/src/styles/index.css @@ -37,3 +37,10 @@ } @custom-variant aria-current (&[aria-current="page"]); + +* { + scrollbar-color: var(--color-green-600, #417e38) + var(--color-neutral-900, #2c3437); /* thumb color, track color */ + + scrollbar-width: thin; +} From ae910cc453e7afcf4d9b595f3bc586d6cb36fdf3 Mon Sep 17 00:00:00 2001 From: Islem Djoudi Date: Fri, 12 Sep 2025 20:53:29 +0100 Subject: [PATCH 2/3] Update packages/ui-components/src/styles/index.css Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: Islem Djoudi --- packages/ui-components/src/styles/index.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/ui-components/src/styles/index.css b/packages/ui-components/src/styles/index.css index c47a8ab77b0af..b2a418d4f1a0f 100644 --- a/packages/ui-components/src/styles/index.css +++ b/packages/ui-components/src/styles/index.css @@ -39,8 +39,7 @@ @custom-variant aria-current (&[aria-current="page"]); * { - scrollbar-color: var(--color-green-600, #417e38) - var(--color-neutral-900, #2c3437); /* thumb color, track color */ + scrollbar-color: var(--color-green-600, #417e38) var(--color-neutral-900, #2c3437); /* thumb color, track color */ scrollbar-width: thin; } From 1158d8924783bf40f4d8096aa2158d8f69b3b737 Mon Sep 17 00:00:00 2001 From: IslemDjd Date: Sat, 13 Sep 2025 02:30:26 +0100 Subject: [PATCH 3/3] style: update scrollbar colors for light mode and fix some sidebar light mode issues --- .../Containers/Sidebar/SidebarGroup/index.module.css | 4 ++-- .../Containers/Sidebar/SidebarItem/index.module.css | 10 +++++----- packages/ui-components/src/styles/index.css | 12 ++++++++++-- 3 files changed, 17 insertions(+), 9 deletions(-) diff --git a/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css b/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css index b20c9227dbb8d..af4fb007b46dd 100644 --- a/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css +++ b/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css @@ -55,14 +55,14 @@ first:before:left-0 first:before:h-20 first:before:w-4 - first:before:bg-white + first:before:bg-transparent first:before:content-[''] last:after:absolute last:after:left-0 last:after:top-[calc(50%+0.25rem)] last:after:h-20 last:after:w-4 - last:after:bg-white + last:after:bg-transparent last:after:content-[''] first:dark:before:bg-transparent last:dark:after:bg-transparent; diff --git a/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css b/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css index 758deb601742c..660618cec3efc 100644 --- a/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css +++ b/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css @@ -17,7 +17,7 @@ &:not(.active):hover { /* Apply hover background to the full item width */ - @apply bg-neutral-100 + @apply bg-neutral-200 dark:bg-neutral-900; /* Ensure text colors contrast with hover background */ @@ -33,7 +33,7 @@ } .progressionIcon { - @apply fill-green-200 + @apply fill-green-400 dark:fill-green-300; } } @@ -49,8 +49,8 @@ .progressionIcon { @apply shrink-0 - fill-neutral-200 - stroke-white + fill-neutral-600 + stroke-neutral-300 stroke-[4] dark:fill-neutral-800 dark:stroke-neutral-950; @@ -69,7 +69,7 @@ /* On hover, use full-width background on the item (set above) */ &:not(.active):hover { - @apply bg-neutral-100 + @apply bg-neutral-200 dark:bg-neutral-900; } diff --git a/packages/ui-components/src/styles/index.css b/packages/ui-components/src/styles/index.css index b2a418d4f1a0f..3181c98e56807 100644 --- a/packages/ui-components/src/styles/index.css +++ b/packages/ui-components/src/styles/index.css @@ -39,7 +39,15 @@ @custom-variant aria-current (&[aria-current="page"]); * { - scrollbar-color: var(--color-green-600, #417e38) var(--color-neutral-900, #2c3437); /* thumb color, track color */ - + scrollbar-color: var(--color-green-600, #417e38) + var(--color-neutral-400, #2c3437); /* thumb color, track color */ scrollbar-width: thin; } + +@media (prefers-color-scheme: dark) { + * { + scrollbar-color: var(--color-green-600, #417e38) + var(--color-neutral-900, #2c3437); /* thumb color, track color */ + scrollbar-width: thin; + } +}