Skip to content

Commit bedc9c7

Browse files
sprettsprett
authored
Fix-vercel-darkmode (#143)
* set fixed zoom level and define map bounds * - Updated styles for PlanStatusCard and Card components for better visual consistency. - Improved loading skeleton structure for a more organized layout. - Added SWR configuration to useBillingData for optimized data fetching. * vercel icon was not visible on darkmode
1 parent f54409f commit bedc9c7

File tree

4 files changed

+82
-49
lines changed

4 files changed

+82
-49
lines changed

‎apps/dashboard/app/(main)/billing/components/overview-tab.tsx‎

Lines changed: 69 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -213,9 +213,9 @@ const PlanStatusCard = memo(function PlanStatusCardComponent({
213213
return (
214214
<Badge>
215215
<CheckIcon
216-
className="mr-1 font-bold not-dark:text-primary"
216+
className="mr-1 text-white dark:text-black"
217217
size={12}
218-
weight="duotone"
218+
weight="bold"
219219
/>
220220
Active
221221
</Badge>
@@ -247,7 +247,7 @@ const PlanStatusCard = memo(function PlanStatusCardComponent({
247247
};
248248

249249
return (
250-
<Card>
250+
<Card className="h-full flex flex-col">
251251
<CardHeader>
252252
<div className="flex items-start justify-between gap-4">
253253
<div className="min-w-0 flex-1 space-y-3">
@@ -292,7 +292,7 @@ const PlanStatusCard = memo(function PlanStatusCardComponent({
292292
</div>
293293
</CardHeader>
294294

295-
<CardContent className="space-y-6">
295+
<CardContent className="flex-1 flex flex-col space-y-6">
296296
<div className="space-y-3">
297297
{plan?.items.map((item) => (
298298
<div className="flex items-start gap-3" key={item.feature_id}>
@@ -318,7 +318,7 @@ const PlanStatusCard = memo(function PlanStatusCardComponent({
318318

319319
<Separator />
320320

321-
<div className="space-y-3">
321+
<div className="space-y-3 mt-auto">
322322
{isCanceled ? (
323323
<Button
324324
aria-label="Reactivate subscription"
@@ -347,7 +347,7 @@ const PlanStatusCard = memo(function PlanStatusCardComponent({
347347
{!(isFree || isCanceled) && (
348348
<Button
349349
aria-label="Cancel subscription"
350-
className="w-full border-destructive text-destructive hover:bg-destructive hover:text-destructive-foreground"
350+
className="w-full border-destructive text-destructive hover:bg-destructive hover:text-destructive-foreground hover:cursor-pointer"
351351
onClick={() =>
352352
plan &&
353353
onCancelClick(
@@ -368,7 +368,7 @@ const PlanStatusCard = memo(function PlanStatusCardComponent({
368368

369369
<Button
370370
aria-label="Manage billing settings"
371-
className="w-full"
371+
className="w-full hover:cursor-pointer"
372372
onClick={onManageBilling}
373373
size="sm"
374374
type="button"
@@ -440,23 +440,37 @@ export const OverviewTab = memo(function OverviewTabComponent({
440440
if (isLoading) {
441441
return (
442442
<div className="space-y-8">
443-
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
444-
<div className="space-y-2">
445-
<Skeleton className="h-8 w-48" />
446-
<Skeleton className="h-4 w-64" />
443+
{/* Header Section Skeleton */}
444+
<div className="grid gap-8 lg:grid-cols-3">
445+
{/* Usage Overview Header Skeleton */}
446+
<div className="lg:col-span-2">
447+
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
448+
<div className="space-y-2">
449+
<Skeleton className="h-8 w-48" />
450+
<Skeleton className="h-4 w-64" />
451+
</div>
452+
<Skeleton className="h-6 w-32" />
453+
</div>
454+
</div>
455+
456+
{/* Current Plan Header Skeleton */}
457+
<div className="lg:col-span-1">
458+
<div className="space-y-2">
459+
<Skeleton className="h-8 w-32" />
460+
<Skeleton className="h-4 w-40" />
461+
</div>
447462
</div>
448-
<Skeleton className="h-6 w-32" />
449463
</div>
450464

465+
{/* Main Content Grid Skeleton */}
451466
<div className="grid gap-8 lg:grid-cols-3">
467+
{/* Usage Overview Section Skeleton */}
452468
<div className="space-y-6 lg:col-span-2">
453-
<div className="grid gap-4">
454-
{Array.from({ length: 3 }).map((_, i) => (
455-
<Skeleton className="h-32 w-full" key={`skeleton-${i + 1}`} />
456-
))}
457-
</div>
469+
<Skeleton className="h-96 w-full" />
458470
</div>
459-
<div className="lg:col-span-1">
471+
472+
{/* Current Plan Section Skeleton */}
473+
<div className="space-y-6 lg:col-span-1">
460474
<Skeleton className="h-96 w-full" />
461475
</div>
462476
</div>
@@ -483,28 +497,43 @@ export const OverviewTab = memo(function OverviewTabComponent({
483497

484498
<div className="space-y-8">
485499
{/* Header Section */}
486-
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
487-
<div>
488-
<h1 className="font-bold text-2xl tracking-tight">
489-
Usage Overview
490-
</h1>
491-
<p className="mt-1 text-muted-foreground">
492-
Monitor your current usage and limits
493-
</p>
500+
<div className="grid gap-8 lg:grid-cols-3">
501+
{/* Usage Overview Header */}
502+
<div className="lg:col-span-2">
503+
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
504+
<div>
505+
<h1 className="font-bold text-2xl tracking-tight">
506+
Usage Overview
507+
</h1>
508+
<p className="mt-1 text-muted-foreground">
509+
Monitor your current usage and limits
510+
</p>
511+
</div>
512+
<Badge variant="secondary">
513+
<SparkleIcon className="mr-1" size={12} weight="duotone" />
514+
Current period
515+
</Badge>
516+
</div>
517+
</div>
518+
519+
{/* Current Plan Header */}
520+
<div className="lg:col-span-1">
521+
<div>
522+
<h2 className="font-bold text-2xl tracking-tight">Current Plan</h2>
523+
<p className="mt-1 text-muted-foreground">
524+
Manage your subscription
525+
</p>
526+
</div>
494527
</div>
495-
<Badge variant="secondary">
496-
<SparkleIcon className="mr-1" size={12} weight="duotone" />
497-
Current period
498-
</Badge>
499528
</div>
500529

501530
{/* Main Content Grid */}
502531
<div className="grid gap-8 lg:grid-cols-3">
503532
{/* Usage Overview Section */}
504533
<div className="space-y-6 lg:col-span-2">
505534
{usageStats.length === 0 ? (
506-
<Card>
507-
<CardContent className="flex flex-col items-center justify-center py-16">
535+
<Card className="h-full">
536+
<CardContent className="flex h-full flex-col items-center justify-center py-16">
508537
<div className="mb-6 flex h-16 w-16 items-center justify-center rounded border bg-muted">
509538
<TrendUpIcon
510539
className="not-dark:text-primary text-muted-foreground"
@@ -533,20 +562,15 @@ export const OverviewTab = memo(function OverviewTabComponent({
533562

534563
{/* Current Plan Section */}
535564
<div className="space-y-6 lg:col-span-1">
536-
<div>
537-
<h2 className="font-bold text-xl">Current Plan</h2>
538-
<p className="mt-1 text-muted-foreground text-sm">
539-
Manage your subscription
540-
</p>
565+
<div className="h-full">
566+
<PlanStatusCard
567+
onCancelClick={onCancelClick}
568+
onManageBilling={onManageBilling}
569+
onUpgrade={onNavigateToPlans}
570+
plan={currentPlan}
571+
statusDetails={statusDetails}
572+
/>
541573
</div>
542-
543-
<PlanStatusCard
544-
onCancelClick={onCancelClick}
545-
onManageBilling={onManageBilling}
546-
onUpgrade={onNavigateToPlans}
547-
plan={currentPlan}
548-
statusDetails={statusDetails}
549-
/>
550574
</div>
551575
</div>
552576
</div>

‎apps/dashboard/app/(main)/billing/hooks/use-billing.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,11 @@ export function useBillingData() {
197197
refetch: refetchCustomer,
198198
} = useCustomer({
199199
expand: ['invoices'],
200+
swrConfig: {
201+
revalidateOnFocus: false,
202+
revalidateOnMount: true,
203+
dedupingInterval: 5 * 60 * 1000, // 5 minutes
204+
},
200205
});
201206

202207
const {
@@ -260,4 +265,4 @@ export function useBillingData() {
260265
isLoading,
261266
refetch,
262267
};
263-
}
268+
}

‎apps/dashboard/app/(main)/settings/integrations/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -176,13 +176,13 @@ export default function IntegrationsPage() {
176176
<CardContent className="p-6">
177177
<div className="space-y-4">
178178
<div className="flex items-start justify-between">
179-
<div className="flex h-12 w-12 items-center justify-center rounded-lg border bg-white shadow-sm">
179+
<div className="flex h-12 w-12 items-center justify-center rounded-lg border bg-white shadow-sm dark:bg-gray-800">
180180
<Image
181181
src={integration.logo}
182182
alt={`${integration.name} logo`}
183183
width={28}
184184
height={28}
185-
className="h-7 w-7 not-dark:brightness-0"
185+
className="h-7 w-7 brightness-0 dark:brightness-100"
186186
/>
187187
</div>
188188
{integration.connected && (

‎apps/dashboard/components/analytics/map-component.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -323,7 +323,7 @@ export function MapComponent({
323323
return () => window.removeEventListener('resize', updateHeight);
324324
}, []);
325325

326-
const zoom = resolvedHeight ? Math.log2(resolvedHeight / 400) + 1 : 1;
326+
const zoom = 2.2;
327327

328328
useEffect(() => {
329329
if (mapRef.current) {
@@ -437,6 +437,10 @@ export function MapComponent({
437437
attributionControl={false}
438438
center={[40, 3]}
439439
className={resolvedTheme === 'dark' ? 'map-dark' : 'map-light'}
440+
maxBounds={[[-85, -180], [85, 180]]}
441+
maxBoundsViscosity={1.0}
442+
maxZoom={5}
443+
minZoom={2.2}
440444
preferCanvas
441445
ref={mapRef}
442446
style={{

0 commit comments

Comments
 (0)