Skip to content

chore: Refine Progression Sidebar hover and active states #8206

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

Merged
merged 2 commits into from
Oct 6, 2025
Merged

chore: Refine Progression Sidebar hover and active states #8206

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b99d2c1
chore: removes progression sidebar hover and active backgrounds
canerakdas Oct 6, 2025
501ff02
chore: progression active text styling
canerakdas Oct 6, 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
78 changes: 33 additions & 45 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 @@ -14,29 +14,6 @@
text-neutral-800
dark:text-neutral-200;

&:not(.active):hover {
/* Apply hover background to the full item width */
@apply bg-neutral-100
dark:bg-neutral-900;

/* Ensure text colors contrast with hover background */
.label {
@apply text-neutral-900
dark:text-neutral-100;
}

.icon {
@apply scale-110
text-green-600
dark:text-green-400;
}

.progressionIcon {
@apply fill-green-200
dark:fill-green-300;
}
}

.label {
@apply font-regular
flex
Expand All @@ -46,48 +23,59 @@
text-sm;
}

.progressionIcon {
@apply shrink-0
fill-neutral-200
stroke-white
stroke-[4]
dark:fill-neutral-800
dark:stroke-neutral-950;
}

.icon {
@apply size-3
text-neutral-500
dark:text-neutral-200;
}

&.progression {
&.active {
@apply text-neutral-900
dark:text-white;

.hexagonIcon {
@apply fill-green-500;
}
}

.label {
@apply p-1;
}

/* On hover, use full-width background on the item (set above) */
&:not(.active):hover {
@apply bg-neutral-100
dark:bg-neutral-900;
.hexagonIcon {
@apply shrink-0
fill-neutral-200
stroke-white
stroke-[4]
dark:fill-neutral-800
dark:stroke-neutral-950;
}
}

/* Avoid extra pill background on the label when hovering */
&:not(.active):hover .label {
@apply rounded-none
bg-transparent;
&:not(.active):not(.progression):hover {
/* Apply hover background to the full item width */
@apply bg-neutral-100
dark:bg-neutral-900;

/* Ensure text colors contrast with hover background */
.label {
@apply text-neutral-900
dark:text-neutral-100;
}

.icon {
@apply scale-110
text-green-600
dark:text-green-400;
}
}

&.active {
&.active:not(.progression) {
/* Full-width active background and readable text */
@apply bg-green-600
text-white;

.progressionIcon {
@apply fill-green-500;
}

/* Remove pill background on the label; keep full-width bg on the item */
.label {
@apply rounded-none
Expand Down
4 changes: 1 addition & 3 deletions packages/ui-components/src/Containers/Sidebar/SidebarItem/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,7 @@ const SidebarItem: FC<SidebarItemProps> = ({
activeClassName={styles.active}
{...props}
>
{showProgressionIcons && (
<ProgressionIcon className={styles.progressionIcon} />
)}
{showProgressionIcons && <ProgressionIcon className={styles.hexagonIcon} />}

<div className={styles.label}>
<span>{label}</span>
Expand Down
Loading