Skip to content

style: update sidebar item spacing and scrollbar styles #8166

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+26 −11
Open

style: update sidebar item spacing and scrollbar styles #8166

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9d316b6
style: update sidebar item spacing and scrollbar styles
IslemDjd Sep 12, 2025
ae910cc
Update packages/ui-components/src/styles/index.css
IslemDjd Sep 12, 2025
1158d89
style: update scrollbar colors for light mode and fix some sidebar li…
IslemDjd Sep 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -55,17 +55,17 @@
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-neutral-950
last:dark:after:bg-neutral-950;
first:dark:before:bg-transparent
last:dark:after:bg-transparent;
}
}
}
Expand Down
11 changes: 6 additions & 5 deletions packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,14 @@
gap-1
overflow-hidden
rounded-md
pl-1
text-sm
text-neutral-800
dark:text-neutral-200;

&: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 */
Expand All @@ -32,7 +33,7 @@
}

.progressionIcon {
@apply fill-green-200
@apply fill-green-400
dark:fill-green-300;
}
}
Expand All @@ -48,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;
Expand All @@ -68,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;
}

Expand Down
14 changes: 14 additions & 0 deletions packages/ui-components/src/styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,3 +37,17 @@
}

@custom-variant aria-current (&[aria-current="page"]);

* {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@canerakdas cam tailwind styles be used here?

Also, I wonder if we really want to change the scrollbar on this PR. I feel this shouldn't be done on this PR and done in another discussion.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@canerakdas cam tailwind styles be used here?

It should be available, even if these utility classes are not available in tailwind, they can be added like

@apply [scrollbar-width:thin]

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;
}
}
Loading