Skip to content

Commit 78b5be8

Browse files
ameer2468ameer2468
committed
fixes
1 parent 39cee7c commit 78b5be8

File tree

18 files changed

+434
-755
lines changed

18 files changed

+434
-755
lines changed

‎apps/dashboard/app/(main)/billing/components/usage-row.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -77,11 +77,8 @@ export const UsageRow = memo(function UsageRowComponent({
7777
<div className="flex items-center gap-2">
7878
<span className="font-medium">{feature.name}</span>
7979
{feature.hasExtraCredits && (
80-
<Badge
81-
className="bg-primary/10 text-primary"
82-
variant="secondary"
83-
>
84-
<GiftIcon className="mr-1" size={10} />
80+
<Badge variant="secondary">
81+
<GiftIcon size={10} weight="fill" />
8582
Bonus
8683
</Badge>
8784
)}

‎apps/dashboard/app/(main)/billing/history/page.tsx‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -132,11 +132,25 @@ const InvoiceRow = memo(function InvoiceRowComponent({
132132
<div
133133
className={cn(
134134
"flex h-10 w-10 shrink-0 items-center justify-center rounded border",
135-
status.bgClass
135+
status.variant === "green"
136+
? "border-green-600 bg-green-100 dark:border-green-800 dark:bg-green-900/30"
137+
: status.variant === "amber"
138+
? "border-amber-600 bg-amber-100 dark:border-amber-800 dark:bg-amber-900/30"
139+
: status.variant === "destructive"
140+
? "border-destructive bg-destructive-100 dark:border-destructive-800 dark:bg-destructive-900/30"
141+
: "border-muted-foreground bg-muted dark:border-muted-foreground dark:bg-muted/30"
136142
)}
137143
>
138144
<status.icon
139-
className={status.iconClass}
145+
className={cn(
146+
status.variant === "green"
147+
? "text-green-600 dark:text-green-600"
148+
: status.variant === "amber"
149+
? "text-amber-600 dark:text-amber-400"
150+
: status.variant === "destructive"
151+
? "text-destructive dark:text-destructive-400"
152+
: "text-muted-foreground dark:text-muted-foreground/80"
153+
)}
140154
size={18}
141155
weight="duotone"
142156
/>
@@ -146,9 +160,7 @@ const InvoiceRow = memo(function InvoiceRowComponent({
146160
<span className="font-medium">
147161
Invoice #{invoice.stripe_id.slice(-8)}
148162
</span>
149-
<Badge className={status.badgeClass} variant="secondary">
150-
{status.label}
151-
</Badge>
163+
<Badge variant={status.variant}>{status.label}</Badge>
152164
</div>
153165
<div className="flex items-center gap-2 text-muted-foreground text-sm">
154166
<span>{formattedDate}</span>
@@ -164,9 +176,9 @@ const InvoiceRow = memo(function InvoiceRowComponent({
164176
className="shrink-0"
165177
onClick={() => window.open(invoice.hosted_invoice_url, "_blank")}
166178
size="sm"
167-
variant="ghost"
179+
variant="secondary"
168180
>
169-
<FileTextIcon className="mr-2" size={14} weight="duotone" />
181+
<FileTextIcon size={14} weight="duotone" />
170182
View
171183
</Button>
172184
)}
@@ -331,34 +343,22 @@ function getInvoiceStatus(status: string) {
331343
return {
332344
label: "Paid",
333345
icon: CheckCircleIcon,
334-
bgClass: "bg-emerald-500/10",
335-
iconClass: "text-emerald-500",
336-
badgeClass: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
346+
variant: "green" as const,
337347
};
338348
case "open":
339349
case "pending":
340-
return {
341-
label: "Pending",
342-
icon: ClockIcon,
343-
bgClass: "bg-amber-500/10",
344-
iconClass: "text-amber-500",
345-
badgeClass: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
346-
};
350+
return { label: "Pending", icon: ClockIcon, variant: "amber" as const };
347351
case "failed":
348352
return {
349353
label: "Failed",
350354
icon: XCircleIcon,
351-
bgClass: "bg-destructive/10",
352-
iconClass: "text-destructive",
353-
badgeClass: "bg-destructive/10 text-destructive",
355+
variant: "destructive" as const,
354356
};
355357
default:
356358
return {
357359
label: status,
358360
icon: FileTextIcon,
359-
bgClass: "bg-muted",
360-
iconClass: "text-muted-foreground",
361-
badgeClass: "",
361+
variant: "secondary" as const,
362362
};
363363
}
364364
}

‎apps/dashboard/app/(main)/billing/page.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,9 +107,10 @@ export default function BillingPage() {
107107
/>
108108

109109
{/* Main Content */}
110-
<div className="relative flex shrink-0 flex-col items-center justify-center">
110+
<div className="shrink-0 lg:h-full lg:min-h-0 lg:overflow-y-auto">
111111
{usageStats.length === 0 ? (
112112
<EmptyState
113+
className="h-full"
113114
description="Start using features to see your consumption stats here"
114115
icon={<TrendUpIcon />}
115116
title="No usage data yet"

‎apps/dashboard/app/(main)/websites/[id]/loading.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ import { Skeleton } from "@/components/ui/skeleton";
33
export default function Loading() {
44
return (
55
<div className="select-none space-y-6 p-6">
6+
<Skeleton className="h-12 w-full rounded sm:h-16" />
67
{/* Key metrics cards skeleton */}
7-
<div className="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-6">
8+
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
89
{[1, 2, 3, 4, 5, 6].map((num) => (
910
<div
1011
className="rounded border bg-sidebar p-4"

‎apps/dashboard/app/(main)/websites/_components/mini-chart.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const formatNumber = (num: number) => {
2929

3030
const MiniChart = memo(({ data, id, days = 7 }: MiniChartProps) => (
3131
<div className="chart-container rounded">
32-
<ResponsiveContainer height={days > 14 ? 56 : 50} width="100%">
32+
<ResponsiveContainer height={64} width="100%">
3333
<AreaChart
3434
aria-label={`Mini chart showing views for the last ${days} days`}
3535
data={data}

‎apps/dashboard/app/(main)/websites/_components/website-card.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -116,15 +116,15 @@ export const WebsiteCard = memo(
116116
href={`/websites/${website.id}`}
117117
>
118118
<Card className="flex h-full select-none flex-col gap-0 overflow-hidden bg-background p-0 transition-all duration-300 ease-in-out group-hover:border-primary/60 group-hover:shadow-primary/5 group-hover:shadow-xl motion-reduce:transform-none motion-reduce:transition-none">
119-
<CardHeader className="dotted-bg border-b bg-accent-brighter/80 px-0 pt-4">
119+
<CardHeader className="dotted-bg gap-0! border-b bg-accent-brighter/80 px-0 pt-4 pb-0!">
120120
{isLoadingChart ? (
121121
<div className="px-3">
122122
<Skeleton className="mx-auto h-12 w-full rounded sm:h-16" />
123123
</div>
124124
) : chartData ? (
125125
chartData.data.length > 0 ? (
126-
<div className="space-y-2">
127-
<div className="transition-colors duration-300 [--chart-color:theme(colors.primary.DEFAULT)] motion-reduce:transition-none group-hover:[--chart-color:theme(colors.primary.600)]">
126+
<div className="h-16 space-y-2">
127+
<div className="h-full transition-colors duration-300 [--chart-color:theme(colors.primary.DEFAULT)] motion-reduce:transition-none group-hover:[--chart-color:theme(colors.primary.600)]">
128128
<Suspense
129129
fallback={
130130
<Skeleton className="h-12 w-full rounded sm:h-16" />

‎apps/dashboard/app/(main)/websites/page.tsx‎

Lines changed: 25 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -21,36 +21,33 @@ import { WebsiteCard } from "./_components/website-card";
2121

2222
function LoadingSkeleton() {
2323
return (
24-
<div className="grid select-none gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
25-
{[1, 2, 3, 4, 5, 6].map((num) => (
26-
<Card
27-
className="animate-pulse overflow-hidden"
28-
key={`website-skeleton-${num}`}
29-
>
30-
<CardHeader className="pb-2">
31-
<div className="flex items-center justify-between">
32-
<div className="flex-1 space-y-2">
33-
<Skeleton className="h-4 w-32 rounded" />
34-
<div className="flex items-center gap-1">
35-
<Skeleton className="h-3 w-3 rounded" />
36-
<Skeleton className="h-3 w-24 rounded" />
24+
<>
25+
<Skeleton className="mb-6 h-[38px] w-full rounded" />
26+
<div className="grid select-none gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
27+
{[1, 2, 3, 4, 5, 6].map((num) => (
28+
<Card
29+
className="h-[189px] animate-pulse overflow-hidden pt-0"
30+
key={`website-skeleton-${num}`}
31+
>
32+
<CardHeader className="dotted-bg gap-0! border-b bg-accent-brighter/80 px-3 pt-4 pb-0!">
33+
<Skeleton className="mx-auto h-12 w-full rounded sm:h-16" />
34+
</CardHeader>
35+
<CardContent className="pb-4">
36+
<div className="flex flex-col gap-4">
37+
<div className="flex flex-col gap-1.5">
38+
<Skeleton className="h-3 w-20 shrink-0" />
39+
<Skeleton className="h-3 w-32 rounded" />
40+
</div>
41+
<div className="flex items-center justify-between pt-1">
42+
<Skeleton className="h-4 w-20 rounded" />
43+
<Skeleton className="h-4 w-12 rounded" />
3744
</div>
3845
</div>
39-
<Skeleton className="h-4 w-4 rounded" />
40-
</div>
41-
</CardHeader>
42-
<CardContent className="pt-0 pb-3">
43-
<div className="space-y-2">
44-
<div className="flex justify-between">
45-
<Skeleton className="h-3 w-12 rounded" />
46-
<Skeleton className="h-3 w-8 rounded" />
47-
</div>
48-
<Skeleton className="h-12 w-full rounded" />
49-
</div>
50-
</CardContent>
51-
</Card>
52-
))}
53-
</div>
46+
</CardContent>
47+
</Card>
48+
))}
49+
</div>
50+
</>
5451
);
5552
}
5653

‎apps/dashboard/app/globals.css‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@
153153
--sidebar-foreground: oklch(0.25 0.01 240);
154154
--sidebar-primary: oklch(0.94 0.01 240);
155155
--sidebar-primary-foreground: oklch(0.2 0.01 240);
156-
--sidebar-accent: oklch(0.96 0.005 240);
156+
--sidebar-accent: oklch(0.94 0.005 240);
157157
--sidebar-accent-foreground: oklch(0.15 0.01 240);
158158
--sidebar-border: oklch(0.88 0.005 240);
159159
--sidebar-ring: oklch(0.0706 0.0123 95.29);
@@ -480,6 +480,17 @@
480480
background-image: repeating-linear-gradient(-50deg, rgba(255, 255, 255, 0.1) 0px, rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 5px);
481481
}
482482

483+
/* Red Angled Rectangle Gradient */
484+
485+
.red-angled-rectangle-gradient {
486+
background-image: repeating-linear-gradient(-50deg, rgba(121, 16, 16, 0.1) 0px, rgba(121, 16, 16, 0.1) 1px, transparent 1px, transparent 5px);
487+
}
488+
489+
.dark .red-angled-rectangle-gradient {
490+
background-image: repeating-linear-gradient(-50deg, rgba(255, 176, 176, 0.3) 0px, rgba(255, 176, 176, 0.3) 1px, transparent 1px, transparent 5px);
491+
}
492+
493+
483494
/* Green Angled Rectangle Gradient */
484495

485496
.green-angled-rectangle-gradient {
@@ -500,6 +511,7 @@
500511
background-image: repeating-linear-gradient(-50deg, rgba(104, 104, 255, 0.13) 0px, rgba(104, 104, 255, 0.13) 1px, transparent 1px, transparent 5px);
501512
}
502513

514+
503515
/* Amber Angled Rectangle Gradient */
504516

505517
.amber-angled-rectangle-gradient {

‎apps/dashboard/components/analytics/stat-card.tsx‎

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -106,21 +106,9 @@ const MiniChart = memo(
106106
>
107107
<defs>
108108
<linearGradient id={`gradient-${id}`} x1="0" x2="0" y1="0" y2="1">
109-
<stop
110-
offset="0%"
111-
stopColor="var(--accent-foreground)"
112-
stopOpacity={0.8}
113-
/>
114-
<stop
115-
offset="50%"
116-
stopColor="var(--accent-foreground)"
117-
stopOpacity={0.3}
118-
/>
119-
<stop
120-
offset="100%"
121-
stopColor="var(--accent-foreground)"
122-
stopOpacity={0.05}
123-
/>
109+
<stop offset="0%" stopColor="#2E27F5" stopOpacity={0.8} />
110+
<stop offset="50%" stopColor="#2E27F5" stopOpacity={0.3} />
111+
<stop offset="100%" stopColor="#2E27F5" stopOpacity={0.05} />
124112
</linearGradient>
125113
<filter id={`glow-${id}`}>
126114
<feGaussianBlur result="coloredBlur" stdDeviation="2" />
@@ -154,23 +142,23 @@ const MiniChart = memo(
154142
) : null
155143
}
156144
cursor={{
157-
stroke: "var(--accent-foreground)",
145+
stroke: "#2E27F5",
158146
strokeWidth: 1,
159147
strokeOpacity: 0.3,
160148
}}
161149
/>
162150
<Area
163151
activeDot={{
164152
r: 3,
165-
fill: "var(--accent-foreground)",
153+
fill: "#2E27F5",
166154
stroke: "var(--background)",
167155
strokeWidth: 2,
168156
filter: `url(#glow-${id})`,
169157
}}
170158
dataKey="value"
171159
dot={false}
172160
fill={`url(#gradient-${id})`}
173-
stroke="var(--accent-foreground)"
161+
stroke="#2E27F5"
174162
strokeWidth={2}
175163
type="monotone"
176164
/>

‎apps/dashboard/components/autumn/pricing-table.tsx‎

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ export default function PricingTable({
155155
"rounded px-4 py-1.5 font-medium text-sm transition",
156156
isAnnual
157157
? "text-muted-foreground hover:text-foreground"
158-
: "bg-background shadow-sm"
158+
: "bg-background"
159159
)}
160160
onClick={() => setIsAnnual(false)}
161161
type="button"
@@ -166,7 +166,7 @@ export default function PricingTable({
166166
className={cn(
167167
"rounded px-4 py-1.5 font-medium text-sm transition",
168168
isAnnual
169-
? "bg-background shadow-sm"
169+
? "bg-background"
170170
: "text-muted-foreground hover:text-foreground"
171171
)}
172172
onClick={() => setIsAnnual(true)}
@@ -267,8 +267,8 @@ function PricingCard({
267267
return (
268268
<div
269269
className={cn(
270-
"relative flex flex-col rounded border bg-background transition-shadow hover:shadow-md",
271-
isRecommended && "border-primary shadow-md",
270+
"relative flex flex-col rounded border bg-card",
271+
isRecommended && "border-primary",
272272
isSelected && "border-primary ring-2 ring-primary/20",
273273
className
274274
)}
@@ -282,8 +282,8 @@ function PricingCard({
282282
)}
283283

284284
<div className="flex items-center gap-3 p-5 pb-4">
285-
<div className="flex h-11 w-11 shrink-0 items-center justify-center rounded border bg-muted/50">
286-
<Icon className="text-primary" size={20} weight="duotone" />
285+
<div className="flex size-9 shrink-0 items-center justify-center rounded-lg border bg-accent">
286+
<Icon className="text-accent-foreground" size={16} weight="duotone" />
287287
</div>
288288
<div className="min-w-0 flex-1">
289289
<div className="flex items-center gap-2">
@@ -305,18 +305,13 @@ function PricingCard({
305305
</div>
306306

307307
{/* Price */}
308-
<div className="border-y bg-muted/30 px-5 py-4">
308+
<div className="dotted-bg border-y bg-accent px-5 py-4">
309309
{product.id === "hobby" ? (
310310
<div className="flex items-baseline gap-2">
311311
<span className="text-muted-foreground line-through">$9.99</span>
312312
<span className="font-semibold text-2xl text-green-600">$2.00</span>
313313
<span className="text-muted-foreground text-sm">/month</span>
314-
<Badge
315-
className="ml-2 bg-green-600/10 text-green-600"
316-
variant="secondary"
317-
>
318-
Limited time
319-
</Badge>
314+
<Badge variant="secondary">Limited time</Badge>
320315
</div>
321316
) : (
322317
<div className="flex items-baseline gap-1">
@@ -339,7 +334,7 @@ function PricingCard({
339334
Everything from {product.display.everything_from}, plus:
340335
</p>
341336
)}
342-
<div className="space-y-2.5">
337+
<div className="space-y-3">
343338
{featureItems.map((item) => (
344339
<FeatureItem item={item} key={item.display?.primary_text} />
345340
))}
@@ -378,7 +373,7 @@ function FeatureItem({ item }: { item: ProductItem }) {
378373
return (
379374
<div className="flex items-start gap-2 text-sm">
380375
<CheckIcon
381-
className="mt-0.5 h-4 w-4 shrink-0 text-primary"
376+
className="mt-0.5 h-4 w-4 shrink-0 text-accent-foreground"
382377
weight="bold"
383378
/>
384379
<div className="flex flex-col">
@@ -430,7 +425,7 @@ function PricingCardButton({
430425
className={cn("w-full", className)}
431426
disabled={loading || disabled}
432427
onClick={handleClick}
433-
variant={recommended ? "default" : "outline"}
428+
variant={recommended ? "default" : "secondary"}
434429
>
435430
{loading ? (
436431
<CircleNotchIcon className="h-4 w-4 animate-spin" />

0 commit comments

Comments
 (0)