Skip to content

Commit d513153

Browse files
ameer2468ameer2468
committed
Merge branch 'ameers-work' into dev
2 parents 29d2a60 + dd57343 commit d513153

File tree

7 files changed

+73
-61
lines changed

7 files changed

+73
-61
lines changed

‎apps/dashboard/app/(main)/organizations/components/organization-provider.tsx‎

Lines changed: 21 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -167,28 +167,23 @@ export function OrganizationProvider({
167167
if (requiresOrg && !activeOrganization) {
168168
return (
169169
<div className="flex h-full flex-col">
170-
<div className="border-b bg-linear-to-r from-background via-background to-muted/20">
171-
<div className="flex h-24 items-center px-4 sm:px-6">
172-
<PageHeader
173-
description={description}
174-
icon={<Icon />}
175-
title={title}
176-
/>
177-
{actionButton && (
170+
<PageHeader
171+
description={description}
172+
icon={<Icon />}
173+
right={
174+
actionButton && (
178175
<Button
179176
className="w-full rounded text-xs sm:w-auto sm:text-sm"
180177
onClick={actionButton.action}
181178
size="sm"
182179
>
183-
<actionButton.icon
184-
className="mr-2 h-3 w-3 sm:h-4 sm:w-4"
185-
size={12}
186-
/>
180+
<actionButton.icon className="size-4" />
187181
{actionButton.text}
188182
</Button>
189-
)}
190-
</div>
191-
</div>
183+
)
184+
}
185+
title={title}
186+
/>
192187

193188
<main className="flex flex-1 items-center justify-center p-4 sm:p-6">
194189
<div className="w-full max-w-md rounded-lg border bg-card p-6 text-center sm:p-8">
@@ -209,10 +204,7 @@ export function OrganizationProvider({
209204
onClick={() => setShowCreateDialog(true)}
210205
size="default"
211206
>
212-
<BuildingsIcon
213-
className="mr-2 h-4 w-4 sm:h-5 sm:w-5"
214-
size={16}
215-
/>
207+
<BuildingsIcon className="size-4" />
216208
Create organization
217209
</Button>
218210
</div>
@@ -224,24 +216,23 @@ export function OrganizationProvider({
224216

225217
return (
226218
<div className="flex h-full flex-col">
227-
<div className="h-22 border-b bg-linear-to-r from-background via-background to-muted/20">
228-
<div className="flex flex-col justify-between gap-2.5 p-3 sm:flex-row sm:items-center sm:gap-0 sm:px-5 sm:py-4">
229-
<PageHeader description={description} icon={<Icon />} title={title} />
230-
{actionButton && (
219+
<PageHeader
220+
description={description}
221+
icon={<Icon />}
222+
right={
223+
actionButton && (
231224
<Button
232225
className="w-full rounded text-xs sm:w-auto sm:text-sm"
233226
onClick={actionButton.action}
234227
size="sm"
235228
>
236-
<actionButton.icon
237-
className="mr-2 h-3 w-3 sm:h-4 sm:w-4"
238-
size={12}
239-
/>
229+
<actionButton.icon className="size-4" />
240230
{actionButton.text}
241231
</Button>
242-
)}
243-
</div>
244-
</div>
232+
)
233+
}
234+
title={title}
235+
/>
245236

246237
<main className="flex-1 overflow-y-auto">{children}</main>
247238

‎apps/dashboard/app/(main)/organizations/components/organizations-list.tsx‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -122,19 +122,15 @@ export function OrganizationsList({
122122
className={cn(
123123
"group relative cursor-pointer overflow-hidden transition-all duration-200",
124124
isActive
125-
? "border-primary/30 bg-primary/5 shadow-sm"
126-
: "hover:border-border/60 hover:bg-muted/30",
127-
isProcessing && "pointer-events-none opacity-70"
125+
? "cursor-default bg-sidebar-accent"
126+
: isProcessing && "pointer-events-none opacity-70"
128127
)}
129128
key={org.id}
130129
onClick={() => handleCardClick(org.id)}
131130
>
132131
{isActive && (
133132
<div className="absolute top-3 right-3">
134-
<Badge
135-
className="border-accent bg-accent/50 text-primary text-xs"
136-
variant="secondary"
137-
>
133+
<Badge variant="secondary">
138134
<CheckIcon className="mr-1 h-3 w-3" size={12} />
139135
Active
140136
</Badge>
@@ -147,29 +143,34 @@ export function OrganizationsList({
147143
</div>
148144
)}
149145

150-
<CardContent className="p-4">
146+
<CardContent>
151147
<div className="space-y-3">
152148
{/* Organization Info */}
153149
<div className="flex items-start gap-3">
154-
<Avatar className="h-10 w-10 shrink-0 border border-border/30">
150+
<Avatar className="size-9 shrink-0">
155151
<AvatarImage alt={org.name} src={org.logo || undefined} />
156-
<AvatarFallback className="bg-accent font-medium text-xs">
152+
<AvatarFallback
153+
className={cn(
154+
"font-medium text-xs",
155+
isActive ? "bg-secondary-brightest" : "bg-accent"
156+
)}
157+
>
157158
{getOrganizationInitials(org.name)}
158159
</AvatarFallback>
159160
</Avatar>
160161
<div className="min-w-0 flex-1">
161-
<h3 className="truncate font-semibold text-sm">
162+
<h3 className="mb-2 truncate font-semibold text-base">
162163
{org.name}
163164
</h3>
164-
<p className="truncate text-muted-foreground text-xs">
165+
<p className="truncate text-muted-foreground text-sm">
165166
@{org.slug}
166167
</p>
167168
<div className="mt-0.5 flex items-center gap-1">
168169
<CalendarIcon
169170
className="h-3 w-3 text-muted-foreground"
170171
size={12}
171172
/>
172-
<span className="text-muted-foreground text-xs">
173+
<span className="text-muted-foreground text-sm">
173174
Created {dayjs(org.createdAt).fromNow()}
174175
</span>
175176
</div>

‎apps/dashboard/app/globals.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -445,7 +445,7 @@
445445
/* Angled Rectangle Gradient - Modal footer */
446446

447447
.dark .angled-rectangle-gradient {
448-
background-image: repeating-linear-gradient(-50deg, rgba(47, 47, 52, 0.4) 0px, rgba(47, 47, 52, 0.4) 1px, transparent 1px, transparent 5px);
448+
background-image: repeating-linear-gradient(-50deg, rgba(47, 47, 52, 0.5) 0px, rgba(47, 47, 52, 0.5) 1px, transparent 1px, transparent 5px);
449449
}
450450

451451
.angled-rectangle-gradient {

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,8 @@ export function CategorySidebar({
9191
/>
9292
</Link>
9393
</div>
94-
{categories.map((category) => {
94+
95+
{categories.map((category, index) => {
9596
const Icon = category.icon;
9697
const isActive = activeCategory === category.id;
9798

@@ -100,10 +101,16 @@ export function CategorySidebar({
100101
<TooltipTrigger asChild>
101102
<button
102103
className={cn(
103-
"flex cursor-pointer items-center justify-center px-3 py-2.5 hover:bg-accent",
104+
index === 0
105+
? "box-content border-t-0 border-b"
106+
: index === categories.length - 1
107+
? "box-content border-b-0"
108+
: "box-content border-b",
109+
"flex h-10 items-center justify-center border-transparent px-3 transition-colors duration-200",
104110
"focus:outline-none",
105-
isActive &&
106-
"bg-sidebar-accent text-sidebar-accent-foreground"
111+
isActive
112+
? "cursor-default bg-accent text-sidebar-accent-foreground hover:bg-accent"
113+
: "cursor-pointer hover:bg-sidebar-accent"
107114
)}
108115
onClick={() => onCategoryChangeAction?.(category.id)}
109116
type="button"

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

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
import { CaretDownIcon } from "@phosphor-icons/react";
2+
import clsx from "clsx";
23
import { AnimatePresence, MotionConfig, motion } from "framer-motion";
34
import { useSearchParams } from "next/navigation";
45
import { memo } from "react";
56
import type { useAccordionStates } from "@/hooks/use-persistent-state";
67
import { NavigationItem } from "./navigation-item";
78
import type { NavigationSection as NavigationSectionType } from "./types";
8-
import clsx from "clsx";
99

1010
type NavigationSectionProps = {
1111
title: string;
1212
icon: NavigationSectionType["icon"];
1313
items: NavigationSectionType["items"];
1414
pathname: string;
1515
currentWebsiteId?: string | null;
16+
className?: string;
1617
accordionStates: ReturnType<typeof useAccordionStates>;
1718
};
1819

@@ -93,6 +94,7 @@ export const NavigationSection = memo(function NavigationSectionComponent({
9394
pathname,
9495
currentWebsiteId,
9596
accordionStates,
97+
className,
9698
}: NavigationSectionProps) {
9799
const { getAccordionState, toggleAccordion } = accordionStates;
98100
const isExpanded = getAccordionState(title, true); // Default to expanded
@@ -119,21 +121,28 @@ export const NavigationSection = memo(function NavigationSectionComponent({
119121
}
120122

121123
return (
122-
<div>
124+
<>
123125
<button
124-
className={clsx("flex w-full items-center gap-3 px-3 py-2.5 text-left font-medium text-sidebar-foreground text-sm transition-colors focus:outline-none", isExpanded ? "bg-sidebar-accent-brighter" : "hover:bg-sidebar-accent-brighter")}
126+
className={clsx(
127+
className,
128+
"box-content flex h-10 items-center gap-3 px-3 text-left font-medium text-sidebar-foreground text-sm transition-colors focus:outline-none",
129+
isExpanded
130+
? "border-b-0 bg-sidebar-accent-brighter"
131+
: "hover:bg-sidebar-accent-brighter"
132+
)}
125133
data-section={title}
126134
data-track="navigation-section-toggle"
127135
onClick={() => toggleAccordion(title, true)}
128136
type="button"
129137
>
130138
<Icon className="size-5 shrink-0 text-sidebar-ring" weight="fill" />
131139
<span className="flex-1 text-sm">{title}</span>
132-
<div
133-
className="shrink-0"
134-
>
140+
<div className="shrink-0">
135141
<CaretDownIcon
136-
className={clsx("size-4 transition-transform duration-200 text-sidebar-foreground/60", isExpanded ? "rotate-180" : "")}
142+
className={clsx(
143+
"size-4 text-sidebar-foreground/60 transition-transform duration-200",
144+
isExpanded ? "rotate-180" : ""
145+
)}
137146
/>
138147
</div>
139148
</button>
@@ -182,6 +191,6 @@ export const NavigationSection = memo(function NavigationSectionComponent({
182191
)}
183192
</AnimatePresence>
184193
</MotionConfig>
185-
</div>
194+
</>
186195
);
187196
});

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -269,10 +269,7 @@ export function OrganizationSelector() {
269269
</span>
270270
</div>
271271
{activeOrganization?.id === org.id && (
272-
<CheckIcon
273-
className="h-4 w-4 not-dark:text-primary"
274-
weight="duotone"
275-
/>
272+
<CheckIcon className="h-4 w-4 text-accent-foreground" />
276273
)}
277274
</DropdownMenuItem>
278275
))}

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -258,9 +258,16 @@ export function Sidebar() {
258258
/>
259259

260260
<nav aria-label="Main navigation" className="flex flex-col">
261-
{navigation.map((section) => (
261+
{navigation.map((section, idx) => (
262262
<NavigationSection
263263
accordionStates={accordionStates}
264+
className={
265+
idx === navigation.length - 1
266+
? "border-t"
267+
: idx === 0
268+
? "border-t-0 border-b"
269+
: "border-0"
270+
}
264271
currentWebsiteId={currentWebsiteId}
265272
icon={section.icon}
266273
items={section.items}

0 commit comments

Comments
 (0)