Skip to content

Commit 34b3d24

Browse files
kylecarbskylecarbs
committed
🤖 Centralize Tailwind color usage with CSS variables
Replace hardcoded hex colors and arbitrary Tailwind values with semantic CSS variables throughout the codebase. This improves maintainability and makes it easier to update the color scheme consistently. Changes: - Extended @theme in globals.css with 40+ new semantic color variables - Replaced 157 instances of text-[#...], bg-[#...], border-[#...] - Replaced rgba() arbitrary values with named color variables - Replaced var() usages with direct Tailwind classes - Applied to both components and Storybook stories New color categories added: - Text variants (muted-light, muted-dark, placeholder, subtle, etc.) - Border variants (border-medium, border-darker, border-light, etc.) - Background variants (bg-dark, bg-darker, modal-bg, etc.) - Accent variants (accent-hover, accent-dark, accent-light, etc.) - Status colors (danger-light, danger-soft, warning, success-light, etc.) - Toast/notification backgrounds with opacity - Semi-transparent overlays (danger-overlay, warning-overlay, etc.) - Code syntax highlighting (code-type, code-keyword, etc.) - Review/diff backgrounds (review-bg-blue, review-bg-info, etc.) All colors are now centralized in src/styles/globals.css and use Tailwind v4's @theme directive for automatic class generation. _Generated with `cmux`_
1 parent 4850101 commit 34b3d24

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+240
-172
lines changed

‎src/components/AIView.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -250,7 +250,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
250250
)}
251251
style={{ containerType: "inline-size" }}
252252
>
253-
<div className="flex-1 flex flex-col items-center justify-center h-full text-[#6b6b6b] text-center">
253+
<div className="flex-1 flex flex-col items-center justify-center h-full text-text-placeholder text-center">
254254
<h3 className="m-0 mb-2.5 text-base font-medium">Loading workspace...</h3>
255255
</div>
256256
</div>
@@ -291,7 +291,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
291291
)}
292292
style={{ containerType: "inline-size" }}
293293
>
294-
<div className="flex-1 flex flex-col items-center justify-center h-full text-[#6b6b6b] text-center">
294+
<div className="flex-1 flex flex-col items-center justify-center h-full text-text-placeholder text-center">
295295
<h3 className="m-0 mb-2.5 text-base font-medium">Loading workspace...</h3>
296296
</div>
297297
</div>
@@ -307,7 +307,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
307307
)}
308308
style={{ containerType: "inline-size" }}
309309
>
310-
<div className="flex-1 flex flex-col items-center justify-center h-full text-[#6b6b6b] text-center">
310+
<div className="flex-1 flex flex-col items-center justify-center h-full text-text-placeholder text-center">
311311
<h3 className="m-0 mb-2.5 text-base font-medium">No Workspace Selected</h3>
312312
<p className="m-0 text-[13px]">
313313
Select a workspace from the sidebar to view and interact with Claude
@@ -378,7 +378,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
378378
className="h-full overflow-y-auto p-[15px] whitespace-pre-wrap break-words leading-[1.5]"
379379
>
380380
{mergedMessages.length === 0 ? (
381-
<div className="flex-1 flex flex-col items-center justify-center h-full text-[#6b6b6b] text-center [&_h3]:m-0 [&_h3]:mb-2.5 [&_h3]:text-base [&_h3]:font-medium [&_p]:m-0 [&_p]:text-[13px]">
381+
<div className="flex-1 flex flex-col items-center justify-center h-full text-text-placeholder text-center [&_h3]:m-0 [&_h3]:mb-2.5 [&_h3]:text-base [&_h3]:font-medium [&_p]:m-0 [&_p]:text-[13px]">
382382
<h3>No Messages Yet</h3>
383383
<p>Send a message below to begin</p>
384384
</div>

‎src/components/ChatInputToast.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import React, { useEffect, useCallback } from "react";
33
import { cn } from "@/lib/utils";
44

55
const toastTypeStyles: Record<"success" | "error", string> = {
6-
success: "bg-[#0e639c20] border border-[#0e639c] text-[#3794ff]",
7-
error: "bg-[#f1483620] border border-[#f14836] text-[#f14836]",
6+
success: "bg-toast-success-bg border border-accent-dark text-toast-success-text",
7+
error: "bg-toast-error-bg border border-toast-error-border text-toast-error-text",
88
};
99

1010
export interface Toast {
@@ -22,7 +22,7 @@ interface ChatInputToastProps {
2222
}
2323

2424
export const SolutionLabel: React.FC<{ children: ReactNode }> = ({ children }) => (
25-
<div className="text-[#808080] text-[10px] mb-1 uppercase">{children}</div>
25+
<div className="text-text-muted-light text-[10px] mb-1 uppercase">{children}</div>
2626
);
2727

2828
export const ChatInputToast: React.FC<ChatInputToastProps> = ({ toast, onDismiss }) => {
@@ -65,15 +65,15 @@ export const ChatInputToast: React.FC<ChatInputToastProps> = ({ toast, onDismiss
6565
<div
6666
role="alert"
6767
aria-live="assertive"
68-
className="bg-[#2d1f1f] border border-[#5a2c2c] rounded px-3 py-2.5 text-xs text-[#f48771] animate-[toastSlideIn_0.2s_ease-out] shadow-[0_4px_12px_rgba(0,0,0,0.3)]"
68+
className="bg-toast-fatal-bg border border-toast-fatal-border rounded px-3 py-2.5 text-xs text-danger-soft animate-[toastSlideIn_0.2s_ease-out] shadow-[0_4px_12px_rgba(0,0,0,0.3)]"
6969
>
7070
<div className="flex items-start gap-1.5">
7171
<span className="text-sm leading-none">⚠</span>
7272
<div className="flex-1">
7373
{toast.title && <div className="font-semibold mb-1.5">{toast.title}</div>}
7474
<div className="text-text-light leading-[1.4] mt-1.5">{toast.message}</div>
7575
{toast.solution && (
76-
<div className="bg-bg-dark rounded px-2 py-1.5 mt-2 font-monospace text-[11px] text-[#9cdcfe]">
76+
<div className="bg-bg-dark rounded px-2 py-1.5 mt-2 font-monospace text-[11px] text-code-type">
7777
{toast.solution}
7878
</div>
7979
)}

‎src/components/CommandPalette.stories.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ const PaletteDemo: React.FC<{ autoOpen?: boolean }> = ({ autoOpen = true }) => {
132132
<>
133133
<button
134134
onClick={() => open()}
135-
className="py-2 px-4 bg-[#0e639c] text-white border-none rounded cursor-pointer font-primary text-[13px] self-start hover:bg-[#1177bb] active:bg-[#0d5689]"
135+
className="py-2 px-4 bg-accent-dark text-white border-none rounded cursor-pointer font-primary text-[13px] self-start hover:bg-accent-hover active:bg-accent-dark"
136136
>
137137
Open Command Palette (⌘⇧P)
138138
</button>
@@ -174,8 +174,8 @@ type Story = StoryObj<typeof meta>;
174174

175175
export const Default: Story = {
176176
render: () => (
177-
<div className="min-h-[600px] bg-[#1e1e1e] p-5 flex flex-col gap-5">
178-
<div className="p-4 bg-[#252526] border border-[#3e3e42] rounded text-[#cccccc] font-primary text-[13px] leading-[1.6] [&_kbd]:py-0.5 [&_kbd]:px-1.5 [&_kbd]:bg-[#1e1e1e] [&_kbd]:border [&_kbd]:border-[#3e3e42] [&_kbd]:rounded-[3px] [&_kbd]:font-monospace [&_kbd]:text-[11px]">
177+
<div className="min-h-[600px] bg-bg-dark p-5 flex flex-col gap-5">
178+
<div className="p-4 bg-separator border border-border-light rounded text-text-bright font-primary text-[13px] leading-[1.6] [&_kbd]:py-0.5 [&_kbd]:px-1.5 [&_kbd]:bg-bg-dark [&_kbd]:border [&_kbd]:border-border-light [&_kbd]:rounded-[3px] [&_kbd]:font-monospace [&_kbd]:text-[11px]">
179179
<strong>Command Palette</strong>
180180
<br />
181181
<br />

‎src/components/CommandPalette.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -364,12 +364,12 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
364364
}}
365365
>
366366
<Command
367-
className="w-[min(720px,92vw)] bg-[#1f1f1f] border border-[#333] rounded-lg shadow-[0_10px_40px_rgba(0,0,0,0.4)] text-[#e5e5e5] font-primary overflow-hidden"
367+
className="w-[min(720px,92vw)] bg-separator border border-border rounded-lg shadow-[0_10px_40px_rgba(0,0,0,0.4)] text-text-lighter font-primary overflow-hidden"
368368
onMouseDown={(e: React.MouseEvent) => e.stopPropagation()}
369369
shouldFilter={shouldUseCmdkFilter}
370370
>
371371
<Command.Input
372-
className="w-full py-3 px-3.5 bg-[#161616] text-[#e5e5e5] border-none outline-none text-sm border-b border-[#2a2a2a]"
372+
className="w-full py-3 px-3.5 bg-bg-darker text-text-lighter border-none outline-none text-sm border-b border-bg-hover"
373373
value={query}
374374
onValueChange={handleQueryChange}
375375
placeholder={
@@ -405,12 +405,12 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
405405
<Command.Group
406406
key={group.name}
407407
heading={group.name}
408-
className="[&[cmdk-group]]:py-2 [&[cmdk-group]]:px-1.5 [&[cmdk-group-heading]]:py-1 [&[cmdk-group-heading]]:px-2.5 [&[cmdk-group-heading]]:text-[#9a9a9a] [&[cmdk-group-heading]]:text-[11px] [&[cmdk-group-heading]]:uppercase [&[cmdk-group-heading]]:tracking-[0.08em]"
408+
className="[&[cmdk-group]]:py-2 [&[cmdk-group]]:px-1.5 [&[cmdk-group-heading]]:py-1 [&[cmdk-group-heading]]:px-2.5 [&[cmdk-group-heading]]:text-text-subdued [&[cmdk-group-heading]]:text-[11px] [&[cmdk-group-heading]]:uppercase [&[cmdk-group-heading]]:tracking-[0.08em]"
409409
>
410410
{group.items.map((item) => (
411411
<Command.Item
412412
key={item.id}
413-
className="grid grid-cols-[1fr_auto] items-center gap-2 py-2 px-3 text-[13px] cursor-pointer rounded-md my-0.5 mx-1 hover:bg-[#2a2a2a] aria-selected:bg-[#2f2f2f]"
413+
className="grid grid-cols-[1fr_auto] items-center gap-2 py-2 px-3 text-[13px] cursor-pointer rounded-md my-0.5 mx-1 hover:bg-bg-hover aria-selected:bg-bg-hover"
414414
onSelect={() => {
415415
if ("prompt" in item && item.prompt) {
416416
addRecent(item.id);
@@ -435,12 +435,12 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
435435
{"subtitle" in item && item.subtitle && (
436436
<>
437437
<br />
438-
<span className="text-[#9a9a9a] text-xs">{item.subtitle}</span>
438+
<span className="text-text-subdued text-xs">{item.subtitle}</span>
439439
</>
440440
)}
441441
</div>
442442
{"shortcutHint" in item && item.shortcutHint && (
443-
<span className="text-[#9a9a9a] text-[11px] font-monospace">
443+
<span className="text-text-subdued text-[11px] font-monospace">
444444
{item.shortcutHint}
445445
</span>
446446
)}
@@ -449,7 +449,7 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
449449
</Command.Group>
450450
))}
451451
{!hasAnyItems && (
452-
<div className="p-4 text-[#7a7a7a] text-[13px]">{emptyText ?? "No results"}</div>
452+
<div className="p-4 text-text-gray text-[13px]">{emptyText ?? "No results"}</div>
453453
)}
454454
</Command.List>
455455
</Command>

‎src/components/CommandSuggestions.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -104,19 +104,19 @@ export const CommandSuggestions: React.FC<CommandSuggestionsProps> = ({
104104
role="option"
105105
aria-selected={index === selectedIndex}
106106
className={cn(
107-
"px-2.5 py-1.5 cursor-pointer transition-colors duration-150 flex items-center justify-between gap-3 hover:bg-[#094771]",
108-
index === selectedIndex ? "bg-[#094771]" : "bg-transparent"
107+
"px-2.5 py-1.5 cursor-pointer transition-colors duration-150 flex items-center justify-between gap-3 hover:bg-accent-darker",
108+
index === selectedIndex ? "bg-accent-darker" : "bg-transparent"
109109
)}
110110
>
111-
<div className="text-[#569cd6] font-monospace text-xs flex-shrink-0">
111+
<div className="text-accent font-monospace text-xs flex-shrink-0">
112112
{suggestion.display}
113113
</div>
114-
<div className="text-[#969696] text-[11px] text-right overflow-hidden text-ellipsis whitespace-nowrap">
114+
<div className="text-text-medium text-[11px] text-right overflow-hidden text-ellipsis whitespace-nowrap">
115115
{suggestion.description}
116116
</div>
117117
</div>
118118
))}
119-
<div className="px-2.5 py-1 border-t border-border-light bg-bg-dark text-[#6b6b6b] text-[10px] text-center flex-shrink-0 [&_span]:text-[#969696] [&_span]:font-medium">
119+
<div className="px-2.5 py-1 border-t border-border-light bg-bg-dark text-text-placeholder text-[10px] text-center flex-shrink-0 [&_span]:text-text-medium [&_span]:font-medium">
120120
<span>Tab</span> to complete • <span>↑↓</span> to navigate • <span>Esc</span> to dismiss
121121
</div>
122122
</div>

‎src/components/DirectorySelectModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export const DirectorySelectModal: React.FC = () => {
8282
onKeyDown={handleKeyDown}
8383
placeholder="/home/user/projects/my-project"
8484
autoFocus
85-
className="w-full px-3 py-2 bg-modal-bg border border-[#444] rounded text-white text-sm font-mono mb-5 focus:outline-none focus:border-accent placeholder:text-muted"
85+
className="w-full px-3 py-2 bg-modal-bg border border-border-medium rounded text-white text-sm font-mono mb-5 focus:outline-none focus:border-accent placeholder:text-muted"
8686
/>
8787
{error && <div className="text-error text-xs -mt-3 mb-3">{error}</div>}
8888
<ModalActions>

‎src/components/ErrorBoundary.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export class ErrorBoundary extends Component<Props, State> {
4242
}
4343

4444
return (
45-
<div className="p-5 bg-[#3c1f1f] border border-[#f48771] rounded text-[#f48771] m-5">
45+
<div className="p-5 bg-error-bg-dark border border-danger-soft rounded text-danger-soft m-5">
4646
<h3 className="m-0 mb-2.5 text-base">
4747
Something went wrong{this.props.workspaceInfo && ` in ${this.props.workspaceInfo}`}
4848
</h3>
@@ -59,7 +59,7 @@ export class ErrorBoundary extends Component<Props, State> {
5959
)}
6060
<button
6161
onClick={this.handleReset}
62-
className="py-2 px-4 bg-[#f48771] text-white border-none rounded-sm cursor-pointer text-sm hover:bg-[#ff9980]"
62+
className="py-2 px-4 bg-danger-soft text-white border-none rounded-sm cursor-pointer text-sm hover:bg-info-light"
6363
>
6464
Reset
6565
</button>

‎src/components/GitStatusIndicatorView.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
6262
if (!gitStatus) {
6363
return (
6464
<span
65-
className="text-[#569cd6] text-[11px] flex items-center gap-1 mr-1.5 font-mono relative"
65+
className="text-accent text-[11px] flex items-center gap-1 mr-1.5 font-mono relative"
6666
aria-hidden="true"
6767
/>
6868
);
@@ -72,7 +72,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
7272
if (gitStatus.ahead === 0 && gitStatus.behind === 0 && !gitStatus.dirty) {
7373
return (
7474
<span
75-
className="text-[#569cd6] text-[11px] flex items-center gap-1 mr-1.5 font-mono relative"
75+
className="text-accent text-[11px] flex items-center gap-1 mr-1.5 font-mono relative"
7676
aria-hidden="true"
7777
/>
7878
);
@@ -81,7 +81,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
8181
// Render colored indicator characters
8282
const renderIndicators = (indicators: string) => {
8383
return (
84-
<span className="text-[#6b6b6b] whitespace-pre flex-shrink-0 font-mono mr-2">
84+
<span className="text-text-placeholder whitespace-pre flex-shrink-0 font-mono mr-2">
8585
{Array.from(indicators).map((char, index) => (
8686
<span key={index} style={{ color: getIndicatorColor(index) }}>
8787
{char}
@@ -98,10 +98,10 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
9898
}
9999

100100
return (
101-
<div className="flex flex-col gap-0.5 mb-2 pb-2 border-b border-[#464647]">
101+
<div className="flex flex-col gap-0.5 mb-2 pb-2 border-b border-separator-light">
102102
{branchHeaders.map((header, index) => (
103103
<div key={index} className="flex gap-2 font-mono leading-snug">
104-
<span className="text-[#6b6b6b] whitespace-pre flex-shrink-0 font-mono mr-2">
104+
<span className="text-text-placeholder whitespace-pre flex-shrink-0 font-mono mr-2">
105105
{/* Create spacing to align with column */}
106106
{Array.from({ length: header.columnIndex }).map((_, i) => (
107107
<span key={i} style={{ color: getIndicatorColor(i) }}>
@@ -128,7 +128,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
128128
const isTruncated = dirtyFiles.length > LIMIT;
129129

130130
return (
131-
<div className="mb-2 pb-2 border-b border-[#464647]">
131+
<div className="mb-2 pb-2 border-b border-separator-light">
132132
<div className="text-git-dirty font-semibold mb-1 font-mono">Uncommitted changes:</div>
133133
<div className="flex flex-col gap-px">
134134
{displayFiles.map((line, index) => (
@@ -141,7 +141,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
141141
))}
142142
</div>
143143
{isTruncated && (
144-
<div className="text-[#808080] italic mt-1 text-[10px]">
144+
<div className="text-text-muted-light italic mt-1 text-[10px]">
145145
(showing {LIMIT} of {dirtyFiles.length} files)
146146
</div>
147147
)}
@@ -172,8 +172,8 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
172172
<div key={`${commit.hash}-${index}`} className="flex flex-col gap-0.5">
173173
<div className="flex gap-2 font-mono leading-snug">
174174
{renderIndicators(commit.indicators)}
175-
<span className="text-[#569cd6] flex-shrink-0 select-all">{commit.hash}</span>
176-
<span className="text-[#808080] flex-shrink-0">{commit.date}</span>
175+
<span className="text-accent flex-shrink-0 select-all">{commit.hash}</span>
176+
<span className="text-text-muted-light flex-shrink-0">{commit.date}</span>
177177
<span className="text-foreground flex-1 break-words">{commit.subject}</span>
178178
</div>
179179
</div>
@@ -187,7 +187,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
187187
const tooltipElement = (
188188
<div
189189
className={cn(
190-
"fixed z-[10000] bg-modal-bg text-foreground border border-[#464647] rounded px-3 py-2 text-[11px] font-mono whitespace-pre max-w-[600px] max-h-[400px] overflow-auto shadow-[0_4px_12px_rgba(0,0,0,0.5)] pointer-events-auto transition-opacity duration-200",
190+
"fixed z-[10000] bg-modal-bg text-foreground border border-separator-light rounded px-3 py-2 text-[11px] font-mono whitespace-pre max-w-[600px] max-h-[400px] overflow-auto shadow-[0_4px_12px_rgba(0,0,0,0.5)] pointer-events-auto transition-opacity duration-200",
191191
showTooltip ? "opacity-100 visible" : "opacity-0 invisible"
192192
)}
193193
style={{
@@ -208,7 +208,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
208208
ref={onContainerRef}
209209
onMouseEnter={onMouseEnter}
210210
onMouseLeave={onMouseLeave}
211-
className="text-[#569cd6] text-[11px] flex items-center gap-1 mr-1.5 font-mono relative"
211+
className="text-accent text-[11px] flex items-center gap-1 mr-1.5 font-mono relative"
212212
>
213213
{gitStatus.ahead > 0 && (
214214
<span className="flex items-center font-normal">↑{gitStatus.ahead}</span>

‎src/components/KebabMenu.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,10 +110,10 @@ export const KebabMenu: React.FC<KebabMenuProps> = ({ items, className }) => {
110110
onClick={() => handleItemClick(item)}
111111
title={item.tooltip}
112112
className={cn(
113-
"w-full border-none border-b border-[#2d2d30] text-xs py-2 px-3 text-left transition-all duration-150 font-primary flex items-center gap-2",
113+
"w-full border-none border-b border-modal-bg text-xs py-2 px-3 text-left transition-all duration-150 font-primary flex items-center gap-2",
114114
"last:border-b-0",
115115
item.disabled
116-
? "bg-bg-dark text-[#808080] cursor-not-allowed opacity-50 hover:bg-bg-dark hover:text-[#808080]"
116+
? "bg-bg-dark text-text-muted-light cursor-not-allowed opacity-50 hover:bg-bg-dark hover:text-text-muted-light"
117117
: item.active
118118
? "bg-white/15 text-foreground cursor-pointer hover:bg-white/15 hover:text-white"
119119
: "bg-bg-dark text-foreground cursor-pointer hover:bg-white/15 hover:text-white"

‎src/components/LeftSidebar.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,10 @@ export function LeftSidebar(props: LeftSidebarProps) {
4646
aria-label="Open sidebar menu"
4747
className={cn(
4848
"hidden max-md:flex fixed top-3 left-3 z-[998]",
49-
"w-10 h-10 bg-separator border border-[#3c3c3c] rounded-md cursor-pointer",
49+
"w-10 h-10 bg-separator border border-border-light rounded-md cursor-pointer",
5050
"items-center justify-center text-foreground text-xl transition-all duration-200",
5151
"shadow-[0_2px_4px_rgba(0,0,0,0.3)]",
52-
"hover:bg-bg-hover hover:border-[#4c4c4c]",
52+
"hover:bg-bg-hover hover:border-bg-light",
5353
"active:scale-95"
5454
)}
5555
>
@@ -69,7 +69,7 @@ export function LeftSidebar(props: LeftSidebarProps) {
6969
{/* Sidebar */}
7070
<div
7171
className={cn(
72-
"h-screen bg-separator border-r border-[#1e1e1e] flex flex-col shrink-0",
72+
"h-screen bg-separator border-r border-bg-dark flex flex-col shrink-0",
7373
"transition-all duration-200 overflow-hidden relative z-[100]",
7474
collapsed ? "w-8" : "w-[280px]",
7575
"max-md:fixed max-md:left-0 max-md:top-0 max-md:w-[280px] max-md:z-[1000]",

0 commit comments

Comments
 (0)