Jakob WennbergandClaude Opus 4.8
b800dcd403
* style(ui): system-wide UX/UI polish pass — design-system conformance + copy cleanup Multi-agent scan of all 404 UI files against the locked design system, then 141 verified surgical fixes across 109 files (net -32 lines): - Remove forbidden elevation/motion: shadow-* and rounded-xl on cards, active:scale bounce, hover:shadow on list items, transition-all -> transition-colors. - Drop font-medium from single-weight Hedvig display headings/numerals. - Replace raw rainbow Tailwind status colors with Badge variants / brand tokens / neutral surfaces (achromatic chrome, semantic colors stay data-only). - Route raw dates through formatDate(), hand-rolled currency through formatCurrency(), add tabular-nums to financial figures; text-gray-* -> text-foreground tokens. - Swap hand-rolled skeletons for the Skeleton primitive; off-scale spacing -> token scale. - Fix copy: mislabeled "Leverantörsfakturor" -> "Utgifter" on bank-import outflow total, collapse no-op identical-branch ternaries, broken Swedish diacritics (mojibake), correct mismatch-password toast, correct supplier currency-field label. - Remove PII-leaking debug console.log on register, stray console.logs. Verified: tsc clean on all changed files, eslint clean, production build passes. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(auth): sanitize residual error logs in register flow Follow-up to PR review (compliance swarm V16 / GDPR Art.5(1)(f)): the remaining console.error calls in the register flow passed raw error objects, which Supabase may populate with PII (email) in nested fields. Log only sanitized message strings instead. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import { Skeleton } from '@/components/ui/skeleton'
|
|
|
|
export default function DashboardLoading() {
|
|
return (
|
|
<div className="space-y-8">
|
|
{/* Metrics row */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<div key={i} className="rounded-lg border border-border bg-card p-4 space-y-2">
|
|
<Skeleton className="h-3.5 w-20" />
|
|
<Skeleton className="h-7 w-28" />
|
|
<Skeleton className="h-3 w-16" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Income / Expenses */}
|
|
<div className="grid md:grid-cols-2 gap-4">
|
|
{[1, 2].map((i) => (
|
|
<div key={i} className="rounded-lg border border-border bg-card p-6 space-y-3">
|
|
<Skeleton className="h-4 w-20" />
|
|
<Skeleton className="h-8 w-32" />
|
|
<Skeleton className="h-3 w-24" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Alerts + deadlines */}
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<div className="rounded-lg border border-border bg-card p-4 space-y-3">
|
|
<Skeleton className="h-5 w-24" />
|
|
<Skeleton className="h-4 w-full" />
|
|
<Skeleton className="h-4 w-3/4" />
|
|
</div>
|
|
<div className="rounded-lg border border-border bg-card p-4 space-y-3">
|
|
<Skeleton className="h-5 w-32" />
|
|
{[1, 2, 3].map((i) => (
|
|
<div key={i} className="flex items-center justify-between">
|
|
<Skeleton className="h-4 w-36" />
|
|
<Skeleton className="h-4 w-20" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|