feat(05-02): upgrade PageShell spacing to gap-8 and remove rounded-* from DashboardSkeleton
- PageShell: gap-6 → gap-8 for header-to-content spacing on all pages - DashboardSkeleton: gap-6 → gap-8 (outer flex), gap-4 → gap-6 (summary cards), gap-6 → gap-8 (chart grid) - DashboardSkeleton: remove rounded-md from 3 chart skeleton placeholders - DashboardSkeleton: remove rounded-md from collapsible section row divs - DashboardSkeleton: remove rounded-full from 2 badge skeleton placeholders
This commit is contained in:
@@ -17,22 +17,22 @@ function SkeletonStatCard() {
|
|||||||
|
|
||||||
export function DashboardSkeleton() {
|
export function DashboardSkeleton() {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col gap-6">
|
<div className="flex flex-col gap-8">
|
||||||
{/* Summary cards skeleton */}
|
{/* Summary cards skeleton */}
|
||||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||||
<SkeletonStatCard />
|
<SkeletonStatCard />
|
||||||
<SkeletonStatCard />
|
<SkeletonStatCard />
|
||||||
<SkeletonStatCard />
|
<SkeletonStatCard />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 3-column chart area skeleton */}
|
{/* 3-column chart area skeleton */}
|
||||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<Skeleton className="h-5 w-40" />
|
<Skeleton className="h-5 w-40" />
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<Skeleton className="h-[250px] w-full rounded-md" />
|
<Skeleton className="h-[250px] w-full" />
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
<Card>
|
<Card>
|
||||||
@@ -40,7 +40,7 @@ export function DashboardSkeleton() {
|
|||||||
<Skeleton className="h-5 w-40" />
|
<Skeleton className="h-5 w-40" />
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<Skeleton className="h-[250px] w-full rounded-md" />
|
<Skeleton className="h-[250px] w-full" />
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
<Card>
|
<Card>
|
||||||
@@ -48,7 +48,7 @@ export function DashboardSkeleton() {
|
|||||||
<Skeleton className="h-5 w-40" />
|
<Skeleton className="h-5 w-40" />
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<Skeleton className="h-[250px] w-full rounded-md" />
|
<Skeleton className="h-[250px] w-full" />
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
@@ -56,12 +56,12 @@ export function DashboardSkeleton() {
|
|||||||
{/* Collapsible sections skeleton */}
|
{/* Collapsible sections skeleton */}
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
{[1, 2, 3].map((i) => (
|
{[1, 2, 3].map((i) => (
|
||||||
<div key={i} className="flex items-center gap-3 rounded-md border-l-4 border-muted bg-card px-4 py-3">
|
<div key={i} className="flex items-center gap-3 border-l-4 border-muted bg-card px-4 py-3">
|
||||||
<Skeleton className="size-4" />
|
<Skeleton className="size-4" />
|
||||||
<Skeleton className="h-4 w-32" />
|
<Skeleton className="h-4 w-32" />
|
||||||
<div className="ml-auto flex items-center gap-2">
|
<div className="ml-auto flex items-center gap-2">
|
||||||
<Skeleton className="h-5 w-24 rounded-full" />
|
<Skeleton className="h-5 w-24" />
|
||||||
<Skeleton className="h-5 w-24 rounded-full" />
|
<Skeleton className="h-5 w-24" />
|
||||||
<Skeleton className="h-4 w-16" />
|
<Skeleton className="h-4 w-16" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ export function PageShell({
|
|||||||
children,
|
children,
|
||||||
}: PageShellProps) {
|
}: PageShellProps) {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col gap-6">
|
<div className="flex flex-col gap-8">
|
||||||
<div className="flex items-start justify-between gap-4">
|
<div className="flex items-start justify-between gap-4">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
|
<h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
|
||||||
|
|||||||
Reference in New Issue
Block a user