Skip to content

Commit d01088a

Browse files
claudeclaude
committed
fix: ensure sidebar colors remain consistent across themes and improve visibility
- Fixed text colors to always use slate-300/100 (white/light) regardless of theme - Changed overflow-x to visible to allow submenu flyouts to be visible when sidebar is collapsed - Updated all hover/active states to use slate colors instead of theme-dependent colors - Fixed SubMenuFlyout background and text colors for better visibility - Ensured all sidebar elements use consistent slate color palette
1 parent 7b24a48 commit d01088a

File tree

4 files changed

+22
-22
lines changed

4 files changed

+22
-22
lines changed

‎src/components/layout/Sidebar.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,7 @@ export function Sidebar() {
213213
)}
214214
</div>
215215

216-
<div className="flex-1 overflow-y-auto">
216+
<div className="flex-1 overflow-y-auto overflow-x-visible">
217217
<div className="p-3">
218218
<nav className="space-y-1">
219219
<SidebarGroup
@@ -296,8 +296,8 @@ export function Sidebar() {
296296
${
297297
pathname === "/action-required" &&
298298
currentTab === "assigned"
299-
? "bg-accent text-foreground"
300-
: "text-muted-foreground hover:text-foreground hover:bg-accent/50"
299+
? "bg-slate-700 text-slate-100"
300+
: "text-slate-300 hover:text-slate-100 hover:bg-slate-800"
301301
}`}
302302
>
303303
<UserCheck className="w-4 h-4 shrink-0" />
@@ -315,8 +315,8 @@ export function Sidebar() {
315315
${
316316
pathname === "/action-required" &&
317317
currentTab === "mentions"
318-
? "bg-accent text-foreground"
319-
: "text-muted-foreground hover:text-foreground hover:bg-accent/50"
318+
? "bg-slate-700 text-slate-100"
319+
: "text-slate-300 hover:text-slate-100 hover:bg-slate-800"
320320
}`}
321321
>
322322
<MessageSquare className="w-4 h-4 shrink-0" />
@@ -334,8 +334,8 @@ export function Sidebar() {
334334
${
335335
pathname === "/action-required" &&
336336
currentTab === "stale"
337-
? "bg-accent text-foreground"
338-
: "text-muted-foreground hover:text-foreground hover:bg-accent/50"
337+
? "bg-slate-700 text-slate-100"
338+
: "text-slate-300 hover:text-slate-100 hover:bg-slate-800"
339339
}`}
340340
>
341341
<Clock className="w-4 h-4 shrink-0" />
@@ -410,8 +410,8 @@ export function Sidebar() {
410410
${
411411
pathname === "/quick-wins" &&
412412
currentTab === "good-issues"
413-
? "bg-accent text-foreground"
414-
: "text-muted-foreground hover:text-foreground hover:bg-accent/50"
413+
? "bg-slate-700 text-slate-100"
414+
: "text-slate-300 hover:text-slate-100 hover:bg-slate-800"
415415
}`}
416416
>
417417
<Lightbulb className="w-4 h-4 shrink-0" />
@@ -429,8 +429,8 @@ export function Sidebar() {
429429
${
430430
pathname === "/quick-wins" &&
431431
currentTab === "easy-fixes"
432-
? "bg-accent text-foreground"
433-
: "text-muted-foreground hover:text-foreground hover:bg-accent/50"
432+
? "bg-slate-700 text-slate-100"
433+
: "text-slate-300 hover:text-slate-100 hover:bg-slate-800"
434434
}`}
435435
>
436436
<Wrench className="w-4 h-4 shrink-0" />
@@ -475,7 +475,7 @@ export function Sidebar() {
475475
href={`https://github.com/${repo}`}
476476
target="_blank"
477477
rel="noopener noreferrer"
478-
className="flex items-center justify-center px-3 py-2 rounded-lg hover:bg-accent/50 transition-colors"
478+
className="flex items-center justify-center px-3 py-2 rounded-lg hover:bg-slate-800 transition-colors text-slate-300 hover:text-slate-100"
479479
aria-label={repo}
480480
>
481481
<GitBranch className="w-4 h-4 shrink-0" />
@@ -494,7 +494,7 @@ export function Sidebar() {
494494
href={`https://github.com/${repo}`}
495495
target="_blank"
496496
rel="noopener noreferrer"
497-
className="flex items-center gap-3 px-3 py-2 text-sm rounded-lg hover:bg-accent/50 transition-colors font-medium text-muted-foreground hover:text-foreground"
497+
className="flex items-center gap-3 px-3 py-2 text-sm rounded-lg hover:bg-slate-800 transition-colors font-medium text-slate-300 hover:text-slate-100"
498498
>
499499
<GitBranch className="w-4 h-4 shrink-0" />
500500
<span className="truncate flex-1">{repo}</span>

‎src/components/layout/SidebarGroup.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export function SidebarGroup({
2121

2222
return (
2323
<div
24-
className={`px-3 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 ${className}`}
24+
className={`px-3 py-2 text-xs font-semibold text-slate-400 uppercase tracking-wider flex items-center gap-2 ${className}`}
2525
>
2626
{Icon && <Icon className="w-3 h-3" />}
2727
<span>{title}</span>

‎src/components/layout/SidebarItem.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@ export function SidebarItem({
3939
transition-all duration-200
4040
${
4141
isActive
42-
? "bg-accent text-foreground"
43-
: "hover:bg-accent/50 hover:text-foreground"
42+
? "bg-slate-700 text-slate-100"
43+
: "text-slate-300 hover:bg-slate-800 hover:text-slate-100"
4444
}
4545
${isCollapsed ? "justify-center" : ""}
4646
${className}

‎src/components/layout/SubMenuFlyout.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@ export function SubMenuFlyout({
4646
justify-center
4747
${
4848
isActive
49-
? "bg-accent text-foreground"
50-
: "hover:bg-accent/50 hover:text-foreground"
49+
? "bg-slate-700 text-slate-100"
50+
: "text-slate-300 hover:bg-slate-800 hover:text-slate-100"
5151
}
5252
`}
5353
>
@@ -63,8 +63,8 @@ export function SubMenuFlyout({
6363
</TooltipProvider>
6464

6565
<div className="absolute left-full top-0 ml-2 hidden group-hover:block z-50 min-w-[200px]">
66-
<div className="bg-popover border border-border rounded-lg shadow-lg py-2 px-1">
67-
<div className="px-3 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider flex items-center justify-between">
66+
<div className="bg-slate-800 border border-slate-700 rounded-lg shadow-lg py-2 px-1">
67+
<div className="px-3 py-2 text-xs font-semibold text-slate-400 uppercase tracking-wider flex items-center justify-between">
6868
<span>{label}</span>
6969
{totalBadge !== undefined && (
7070
<Badge
@@ -83,8 +83,8 @@ export function SubMenuFlyout({
8383
className={`flex items-center gap-2 px-3 py-2 text-sm rounded-lg transition-colors font-medium
8484
${
8585
item.isActive
86-
? "bg-accent text-foreground"
87-
: "text-muted-foreground hover:text-foreground hover:bg-accent/50"
86+
? "bg-slate-700 text-slate-100"
87+
: "text-slate-300 hover:text-slate-100 hover:bg-slate-900"
8888
}`}
8989
>
9090
<item.icon className="w-4 h-4 shrink-0" />

0 commit comments

Comments
 (0)