Skip to content

Commit d881cee

Browse files
izadoesdevizadoesdev
committed
fix: great success, better sidebarer
1 parent 1b25a1c commit d881cee

File tree

8 files changed

+66
-66
lines changed

8 files changed

+66
-66
lines changed

‎apps/dashboard/app/globals.css‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -131,14 +131,14 @@
131131
--chart-4: oklch(0.49 0.22 264);
132132
--chart-5: oklch(0.42 0.18 266);
133133

134-
--sidebar: oklch(0.96 0.005 240);
135-
--sidebar-foreground: oklch(0.3 0.01 240);
136-
--sidebar-primary: oklch(0.4891 0 0);
137-
--sidebar-primary-foreground: oklch(1 0 0);
138-
--sidebar-accent: oklch(0.9 0.01 240);
139-
--sidebar-accent-foreground: oklch(0.2 0.01 240);
140-
--sidebar-border: oklch(0.9 0.005 240);
141-
--sidebar-ring: oklch(0.4891 0 0);
134+
--sidebar: oklch(0.98 0.005 240);
135+
--sidebar-foreground: oklch(0.25 0.01 240);
136+
--sidebar-primary: oklch(0.94 0.01 240);
137+
--sidebar-primary-foreground: oklch(0.2 0.01 240);
138+
--sidebar-accent: oklch(0.96 0.005 240);
139+
--sidebar-accent-foreground: oklch(0.15 0.01 240);
140+
--sidebar-border: oklch(0.88 0.005 240);
141+
--sidebar-ring: oklch(0.65 0.22 265);
142142

143143
--font-sans:
144144
ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
@@ -218,14 +218,14 @@
218218
--chart-4: oklch(0.49 0.22 264);
219219
--chart-5: oklch(0.42 0.18 266);
220220

221-
--sidebar: oklch(0.12 0.02 240);
222-
--sidebar-foreground: oklch(0.8 0.01 240);
223-
--sidebar-primary: oklch(0.72 0 0);
224-
--sidebar-primary-foreground: oklch(0.14 0.005 240);
225-
--sidebar-accent: oklch(0.25 0.02 240);
226-
--sidebar-accent-foreground: oklch(0.85 0.01 240);
227-
--sidebar-border: oklch(0.3 0.02 240);
228-
--sidebar-ring: oklch(0.72 0 0);
221+
--sidebar: oklch(0.08 0.02 240);
222+
--sidebar-foreground: oklch(0.85 0.01 240);
223+
--sidebar-primary: oklch(0.15 0.025 240);
224+
--sidebar-primary-foreground: oklch(0.9 0.01 240);
225+
--sidebar-accent: oklch(0.12 0.02 240);
226+
--sidebar-accent-foreground: oklch(0.88 0.01 240);
227+
--sidebar-border: oklch(0.25 0.02 240);
228+
--sidebar-ring: oklch(0.7 0.22 265);
229229

230230
--font-sans:
231231
ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",

‎apps/dashboard/components/layout/category-sidebar.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,10 +55,10 @@ export function CategorySidebar({
5555
const activeCategory = selectedCategory || defaultCategory;
5656

5757
return (
58-
<div className="fixed inset-y-0 left-0 z-40 w-12 border-r bg-background">
58+
<div className="fixed inset-y-0 left-0 z-40 w-12 border-r bg-sidebar-primary border-sidebar-border">
5959
<div className="flex h-full flex-col">
6060
{/* Logo */}
61-
<div className="flex h-16 items-center justify-center border-border border-b">
61+
<div className="flex h-16 items-center justify-center border-sidebar-border border-b">
6262
<Link
6363
className="relative flex-shrink-0 transition-opacity hover:opacity-80"
6464
href="/websites"
@@ -82,17 +82,17 @@ export function CategorySidebar({
8282
<TooltipTrigger asChild>
8383
<button
8484
className={cn(
85-
'flex items-center justify-center px-3 py-2 transition-colors hover:bg-muted/50',
86-
'focus:outline-none',
87-
isActive && 'bg-muted text-foreground'
85+
'flex items-center justify-center px-3 py-2.5 transition-colors hover:bg-sidebar-accent/50',
86+
'focus:outline-none focus:ring-2 focus:ring-sidebar-ring/50',
87+
isActive && 'bg-sidebar-accent text-sidebar-accent-foreground'
8888
)}
8989
onClick={() => onCategoryChange?.(category.id)}
9090
type="button"
9191
>
9292
<Icon
9393
className={cn(
9494
'h-5 w-5 transition-colors',
95-
isActive ? 'text-primary' : 'text-muted-foreground'
95+
isActive ? 'text-sidebar-ring' : 'text-sidebar-primary-foreground/70'
9696
)}
9797
weight={isActive ? 'fill' : 'duotone'}
9898
/>
@@ -109,7 +109,7 @@ export function CategorySidebar({
109109
<div className="flex-1" />
110110

111111
{/* Bottom controls */}
112-
<div className="space-y-2 border-border border-t p-2 pb-4">
112+
<div className="space-y-2 border-sidebar-border border-t p-2 pb-4">
113113
{/* Notifications */}
114114
<div className="flex justify-center">
115115
<Tooltip>

‎apps/dashboard/components/layout/navigation/mobile-category-selector.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export function MobileCategorySelector({
4343
const currentCategory = categories.find((cat) => cat.id === activeCategory);
4444

4545
return (
46-
<div className="border-border border-b p-3 md:hidden">
46+
<div className="border-sidebar-border border-b p-3 md:hidden">
4747
<DropdownMenu>
4848
<DropdownMenuTrigger asChild>
4949
<Button
@@ -68,15 +68,15 @@ export function MobileCategorySelector({
6868
<DropdownMenuItem
6969
className={cn(
7070
'flex cursor-pointer items-center gap-2',
71-
isActive && 'bg-muted'
71+
isActive && 'bg-sidebar-accent text-sidebar-accent-foreground'
7272
)}
7373
key={category.id}
7474
onClick={() => onCategoryChange?.(category.id)}
7575
>
7676
<Icon
7777
className={cn(
7878
'h-4 w-4',
79-
isActive ? 'text-primary' : 'text-muted-foreground'
79+
isActive ? 'text-sidebar-ring' : 'text-muted-foreground'
8080
)}
8181
weight={isActive ? 'fill' : 'duotone'}
8282
/>

‎apps/dashboard/components/layout/navigation/navigation-item.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -77,12 +77,12 @@ export function NavigationItem({
7777

7878
if (disabled) {
7979
return (
80-
<div
81-
aria-disabled="true"
82-
className={cn(
83-
'group flex items-center gap-3 px-3 py-2 text-sm transition-colors',
84-
'cursor-not-allowed text-muted-foreground/50'
85-
)}
80+
<div
81+
aria-disabled="true"
82+
className={cn(
83+
'group flex items-center gap-3 px-4 py-2.5 text-sm transition-colors',
84+
'cursor-not-allowed text-sidebar-foreground/30'
85+
)}
8686
>
8787
{content}
8888
</div>
@@ -95,10 +95,10 @@ export function NavigationItem({
9595
aria-current={isActive ? 'page' : undefined}
9696
aria-label={`${name}${isExternal ? ' (opens in new tab)' : ''}`}
9797
className={cn(
98-
'group flex items-center gap-3 px-4 py-2 text-sm transition-colors hover:bg-muted/50 hover:text-foreground',
98+
'group flex items-center gap-3 px-4 py-2.5 text-sm transition-colors hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground',
9999
isActive
100-
? '!bg-muted !text-foreground font-medium'
101-
: 'text-muted-foreground'
100+
? 'bg-sidebar-accent text-sidebar-accent-foreground font-medium border-r-2 border-sidebar-ring'
101+
: 'text-sidebar-foreground/70'
102102
)}
103103
data-is-external={isExternal ? 'true' : 'false'}
104104
data-nav-item={name.toLowerCase().replace(/\s+/g, '-')}
@@ -110,12 +110,12 @@ export function NavigationItem({
110110
{content}
111111
<div className="flex items-center gap-1.5">
112112
{alpha && (
113-
<span className="font-mono text-muted-foreground text-xs">ALPHA</span>
113+
<span className="font-mono text-sidebar-foreground/50 text-xs">ALPHA</span>
114114
)}
115115
{isExternal && (
116116
<ArrowSquareOutIcon
117117
aria-hidden="true"
118-
className="h-3 w-3 not-dark:text-primary text-muted-foreground opacity-0 transition-opacity duration-200 group-hover:opacity-100"
118+
className="h-3 w-3 text-sidebar-ring opacity-0 transition-opacity duration-200 group-hover:opacity-100"
119119
weight="duotone"
120120
/>
121121
)}

‎apps/dashboard/components/layout/navigation/navigation-section.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -110,27 +110,27 @@ export const NavigationSection = memo(function NavigationSectionComponent({
110110
}
111111

112112
return (
113-
<div className="border-muted-foreground/20 border-b border-dotted last:border-b-0">
113+
<div className="border-sidebar-border/30 border-b border-dotted last:border-b-0">
114114
<button
115-
className="flex w-full items-center gap-3 px-2 py-2 text-left font-medium text-foreground text-sm transition-colors hover:bg-muted/50 focus:outline-none"
115+
className="flex w-full items-center gap-3 px-3 py-2.5 text-left font-medium text-sidebar-foreground text-sm transition-colors hover:bg-sidebar-accent/50 focus:outline-none focus:ring-2 focus:ring-sidebar-ring/50"
116116
onClick={() => toggleAccordion(title, true)}
117117
type="button"
118118
>
119-
<Icon className="size-5 flex-shrink-0 text-foreground" weight="fill" />
119+
<Icon className="size-5 flex-shrink-0 text-sidebar-ring" weight="fill" />
120120
<span className="flex-1 text-sm">{title}</span>
121121
<motion.div
122122
animate={{ rotate: isExpanded ? 180 : 0 }}
123123
className="flex-shrink-0"
124124
transition={{ duration: 0.2 }}
125125
>
126126
<CaretDownIcon
127-
className="h-4 w-4 text-muted-foreground"
127+
className="h-4 w-4 text-sidebar-foreground/60"
128128
weight="duotone"
129129
/>
130130
</motion.div>
131131
</button>
132132

133-
<MotionConfig transition={{ duration: 0.3, type: 'spring', bounce: 0 }}>
133+
<MotionConfig transition={{ duration: 0.2, type: 'tween', ease: 'easeOut' }}>
134134
<AnimatePresence initial={false}>
135135
{isExpanded && (
136136
<motion.div

‎apps/dashboard/components/layout/navigation/website-header.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,18 @@ interface WebsiteHeaderProps {
1010

1111
export function WebsiteHeader({ website }: WebsiteHeaderProps) {
1212
return (
13-
<div className="border-border border-b bg-accent/20">
13+
<div className="border-sidebar-border border-b bg-sidebar-accent">
1414
{/* Website info - aligned with logo section */}
15-
<div className="flex h-16 items-center justify-center border-border border-b bg-gradient-to-r from-accent/30 to-accent/10 px-5">
15+
<div className="flex h-16 items-center justify-center border-sidebar-border border-b bg-gradient-to-r from-sidebar-accent to-sidebar-accent/80 px-5">
1616
<div className="flex w-full items-center gap-3">
17-
<div className="rounded-lg bg-background/80 p-1.5 shadow-sm ring-1 ring-border/50">
17+
<div className="rounded-lg bg-sidebar/80 p-1.5 shadow-sm ring-1 ring-sidebar-border/50">
1818
<FaviconImage
1919
altText={`${website?.name || website?.domain || 'Website'} favicon`}
2020
className="size-5 flex-shrink-0"
2121
domain={website?.domain || ''}
2222
fallbackIcon={
2323
<PlanetIcon
24-
className="text-primary/70"
24+
className="text-sidebar-ring"
2525
size={20}
2626
weight="duotone"
2727
/>
@@ -30,13 +30,13 @@ export function WebsiteHeader({ website }: WebsiteHeaderProps) {
3030
/>
3131
</div>
3232
<div className="flex min-w-0 flex-1 flex-col items-start">
33-
<h2 className="truncate text-left font-semibold text-foreground text-sm">
33+
<h2 className="truncate text-left font-semibold text-sidebar-accent-foreground text-sm">
3434
{website?.name || website?.domain || (
3535
<Skeleton className="h-4 w-32" />
3636
)}
3737
</h2>
3838
{website?.domain ? (
39-
<p className="truncate text-left text-muted-foreground/80 text-xs">
39+
<p className="truncate text-left text-sidebar-accent-foreground/70 text-xs">
4040
{website.domain}
4141
</p>
4242
) : (
@@ -50,15 +50,15 @@ export function WebsiteHeader({ website }: WebsiteHeaderProps) {
5050

5151
{/* Back navigation - aligned with category buttons */}
5252
<button
53-
className="group flex w-full cursor-pointer items-start justify-start p-2 transition-colors hover:bg-muted/50"
53+
className="group flex w-full cursor-pointer items-start justify-start p-2 transition-colors hover:bg-sidebar-accent/60"
5454
type="button"
5555
>
5656
<Link className="flex items-center gap-2" href="/websites">
5757
<CaretLeftIcon
58-
className="group-hover:-translate-x-0.5 h-5 w-5 flex-shrink-0 transition-transform"
58+
className="group-hover:-translate-x-0.5 h-5 w-5 flex-shrink-0 transition-transform text-sidebar-accent-foreground/80"
5959
weight="fill"
6060
/>
61-
<span className="text-muted-foreground text-xs">
61+
<span className="text-sidebar-accent-foreground/70 text-xs">
6262
Back to Websites
6363
</span>
6464
</Link>

‎apps/dashboard/components/layout/organization-selector.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -73,15 +73,15 @@ function OrganizationSelectorTrigger({
7373
return (
7474
<div
7575
className={cn(
76-
'flex h-16 w-full items-center border-border border-b bg-accent/20 px-5 py-3 transition-colors',
77-
'hover:bg-accent/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50',
76+
'flex h-16 w-full items-center border-sidebar-border border-b bg-sidebar-accent px-5 py-3 transition-colors',
77+
'hover:bg-sidebar-accent/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring/50',
7878
isSettingActiveOrganization && 'cursor-not-allowed opacity-70',
79-
isOpen && 'bg-accent/30'
79+
isOpen && 'bg-sidebar-accent/60'
8080
)}
8181
>
8282
<div className="flex w-full items-center justify-between">
8383
<div className="flex items-center gap-3">
84-
<div className="rounded-lg bg-background/80 p-1.5 shadow-sm ring-1 ring-border/50">
84+
<div className="rounded-lg bg-sidebar/80 p-1.5 shadow-sm ring-1 ring-sidebar-border/50">
8585
<Avatar className="h-5 w-5">
8686
<AvatarImage
8787
alt={activeOrganization?.name || 'Personal'}
@@ -92,32 +92,32 @@ function OrganizationSelectorTrigger({
9292
getOrganizationInitials(activeOrganization.name)
9393
) : (
9494
<UserIcon
95-
className="not-dark:text-primary"
95+
className="text-sidebar-ring"
9696
weight="duotone"
9797
/>
9898
)}
9999
</AvatarFallback>
100100
</Avatar>
101101
</div>
102102
<div className="flex min-w-0 flex-1 flex-col items-start">
103-
<span className="truncate text-left font-semibold text-foreground text-sm">
103+
<span className="truncate text-left font-semibold text-sidebar-accent-foreground text-sm">
104104
{activeOrganization?.name || 'Personal'}
105105
</span>
106-
<p className="truncate text-left text-muted-foreground/80 text-xs">
106+
<p className="truncate text-left text-sidebar-accent-foreground/70 text-xs">
107107
{activeOrganization?.slug || 'Your workspace'}
108108
</p>
109109
</div>
110110
</div>
111111
{isSettingActiveOrganization ? (
112112
<SpinnerGapIcon
113113
aria-label="Switching workspace"
114-
className="h-4 w-4 animate-spin text-muted-foreground"
114+
className="h-4 w-4 animate-spin text-sidebar-accent-foreground/60"
115115
weight="duotone"
116116
/>
117117
) : (
118118
<CaretDownIcon
119119
className={cn(
120-
'h-4 w-4 text-muted-foreground transition-transform duration-200',
120+
'h-4 w-4 text-sidebar-accent-foreground/60 transition-transform duration-200',
121121
isOpen && 'rotate-180'
122122
)}
123123
weight="fill"
@@ -190,10 +190,10 @@ export function OrganizationSelector() {
190190

191191
if (isLoading) {
192192
return (
193-
<div className="flex h-16 w-full items-center border-border border-b bg-accent/20 px-5 py-3">
193+
<div className="flex h-16 w-full items-center border-sidebar-border border-b bg-sidebar-accent px-5 py-3">
194194
<div className="flex w-full items-center justify-between">
195195
<div className="flex items-center gap-3">
196-
<div className="rounded-lg bg-background/80 p-1.5 shadow-sm ring-1 ring-border/50">
196+
<div className="rounded-lg bg-sidebar/80 p-1.5 shadow-sm ring-1 ring-sidebar-border/50">
197197
<Skeleton className="h-5 w-5 rounded" />
198198
</div>
199199
<div className="flex min-w-0 flex-1 flex-col items-start">
@@ -209,9 +209,9 @@ export function OrganizationSelector() {
209209

210210
if (hasError && !isActiveOrgNotFound) {
211211
return (
212-
<div className="border-border border-b bg-destructive/10 px-5 py-3">
212+
<div className="border-sidebar-border border-b bg-destructive/10 px-5 py-3">
213213
<div className="flex items-center gap-3">
214-
<div className="rounded bg-background/80 p-1.5 shadow-sm ring-1 ring-destructive/50">
214+
<div className="rounded bg-sidebar/80 p-1.5 shadow-sm ring-1 ring-destructive/50">
215215
<UserIcon className="h-5 w-5 text-destructive" weight="duotone" />
216216
</div>
217217
<div className="min-w-0 flex-1">

‎apps/dashboard/components/layout/sidebar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -207,8 +207,8 @@ export function Sidebar() {
207207
<nav
208208
aria-hidden={!isMobileOpen}
209209
className={cn(
210-
'fixed inset-y-0 z-40 w-72 bg-background',
211-
'border-r transition-transform duration-200 ease-out',
210+
'fixed inset-y-0 z-40 w-72 bg-sidebar',
211+
'border-r border-sidebar-border transition-transform duration-200 ease-out',
212212
'left-0 md:left-12', // Mobile: left-0, Desktop: left-12 (after category sidebar)
213213
'pt-16 md:pt-0', // Mobile: account for mobile header, Desktop: no top padding
214214
'md:translate-x-0',

0 commit comments

Comments
 (0)