janpeter/inspannings-monitor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refine Dusk system layer and card spacing

Browse source
This commit is contained in:
Janpeter Visser 2026-04-19 17:17:15 +02:00
parent 645d2b8b3b
commit 3170cfda18
24 changed files with 237 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

2
components/auth/auth-panel.tsx
View file

@ -47,7 +47,7 @@ export function AuthPanel({
</section>
<section className="flex items-center">
<Card elevation="raised" className="w-full rounded-[var(--radius-4xl)] py-0 backdrop-blur">
<Card elevation="raised" className="w-full rounded-[var(--radius-4xl)] pb-0 backdrop-blur">
<CardContent className="p-6 sm:p-8">
<div className="mb-6 flex items-center justify-between gap-3">
<Link

2
components/check-in/check-in-card.tsx
View file

@ -34,7 +34,7 @@ export function CheckInCard({ todayCheckIn }: CheckInCardProps) {
: "Leg je energiestart en slaapkwaliteit van vandaag vast.";
return (
<Card className="py-0">
<Card className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Ochtendcheck-in

2
components/check-in/check-in-form.tsx
View file

@ -58,7 +58,7 @@ export function CheckInForm({ todayCheckIn }: CheckInFormProps) {
<input type="hidden" name="energyScore" value={energyScore ?? ""} />
<input type="hidden" name="sleepQuality" value={sleepQuality ?? ""} />
<Card elevation="raised" className="py-0">
<Card elevation="raised" className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Ochtendcheck-in

4
components/onboarding/onboarding-step-intro.tsx
View file

@ -9,7 +9,7 @@ import {
export function OnboardingStepIntro() {
return (
<div className="space-y-4">
<Card tone="subtle" className="py-0 shadow-none">
<Card tone="subtle" className="pb-0 shadow-none">
<CardHeader className="pb-0">
<CardTitle className="font-[family-name:var(--font-display)] text-2xl">
Wat je hier wél krijgt
@ -23,7 +23,7 @@ export function OnboardingStepIntro() {
</CardContent>
</Card>
<Card tone="subtle" className="py-0 shadow-none">
<Card tone="subtle" className="pb-0 shadow-none">
<CardHeader className="pb-0">
<CardTitle className="font-[family-name:var(--font-display)] text-2xl">
Wat deze app niet doet

6
components/onboarding/onboarding-step-preferences.tsx
View file

@ -21,7 +21,7 @@ export function OnboardingStepPreferences({
}: OnboardingStepPreferencesProps) {
return (
<div className="space-y-4">
<Card tone="subtle" className="py-0 shadow-none">
<Card tone="subtle" className="pb-0 shadow-none">
<CardContent className="flex items-start justify-between gap-4 py-5">
<div className="space-y-1">
<Label className="text-sm font-semibold text-foreground">
@ -39,7 +39,7 @@ export function OnboardingStepPreferences({
</CardContent>
</Card>
<Card tone="subtle" className="py-0 shadow-none">
<Card tone="subtle" className="pb-0 shadow-none">
<CardContent className="space-y-4 py-5">
<div className="flex items-start justify-between gap-4">
<div className="space-y-1">
@ -82,7 +82,7 @@ export function OnboardingStepPreferences({
</CardContent>
</Card>
<Card tone="subtle" className="py-0 shadow-none">
<Card tone="subtle" className="pb-0 shadow-none">
<CardContent className="flex items-start justify-between gap-4 py-5">
<div className="space-y-1">
<Label className="text-sm font-semibold text-foreground">

4
components/planning/activity-form.tsx
View file

@ -104,7 +104,7 @@ export function ActivityForm({
<input type="hidden" name="impactLevel" value={impactLevel} />
<input type="hidden" name="priorityLevel" value={priorityLevel} />
<Card elevation="raised" className="py-0">
<Card elevation="raised" className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Dagplanning
@ -215,7 +215,7 @@ export function ActivityForm({
<Separator />
<Card tone="subtle" className="py-0 shadow-none">
<Card tone="subtle" className="pb-0 shadow-none">
<CardContent className="space-y-2 py-5">
<p className="text-sm font-semibold text-foreground">Vooruitblik op de meter</p>
<p className="text-sm leading-7 text-muted-foreground" aria-live="polite">

4
components/planning/ad-hoc-activity-form.tsx
View file

@ -102,7 +102,7 @@ export function AdHocActivityForm({
<input type="hidden" name="categoryId" value={categoryId} />
<input type="hidden" name="impactLevel" value={impactLevel} />
<Card tone="subtle" className="py-0">
<Card tone="subtle" className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Ongepland
@ -252,7 +252,7 @@ export function AdHocActivityForm({
</div>
</div>
<Card tone="subtle" className="py-0 shadow-none">
<Card tone="subtle" className="pb-0 shadow-none">
<CardContent className="space-y-2 py-5">
<p className="text-sm font-semibold text-foreground">Effect op je dagtotaal</p>
<p className="text-sm leading-7 text-muted-foreground" aria-live="polite">

12
components/planning/day-overview-card.tsx
View file

@ -50,7 +50,7 @@ function getStatusAccentClassName(key: "planned" | "completed" | "adjusted" | "s
export function DayOverviewCard({ overview }: DayOverviewCardProps) {
return (
<Card className="py-0">
<Card className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Dagoverzicht
@ -62,7 +62,7 @@ export function DayOverviewCard({ overview }: DayOverviewCardProps) {
</CardHeader>
<CardContent className="space-y-5 pb-6">
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
<Card tone="subtle" size="sm" className="py-0">
<Card tone="subtle" size="sm" className="pb-0">
<CardContent className="space-y-1 py-4">
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
Vooraf gepland
@ -76,7 +76,7 @@ export function DayOverviewCard({ overview }: DayOverviewCardProps) {
</CardContent>
</Card>
<Card tone="subtle" size="sm" className="py-0">
<Card tone="subtle" size="sm" className="pb-0">
<CardContent className="space-y-1 py-4">
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
Werkelijk gedaan
@ -90,7 +90,7 @@ export function DayOverviewCard({ overview }: DayOverviewCardProps) {
</CardContent>
</Card>
<Card tone="subtle" size="sm" className="py-0">
<Card tone="subtle" size="sm" className="pb-0">
<CardContent className="space-y-1 py-4">
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
Ongepland erbij
@ -104,7 +104,7 @@ export function DayOverviewCard({ overview }: DayOverviewCardProps) {
</CardContent>
</Card>
<Card tone="subtle" size="sm" className="py-0">
<Card tone="subtle" size="sm" className="pb-0">
<CardContent className="space-y-1 py-4">
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
Nog open
@ -151,7 +151,7 @@ export function DayOverviewCard({ overview }: DayOverviewCardProps) {
)}
>
{item.label}
<span className="rounded-full bg-black/12 px-1.5 py-0.5 text-[0.7rem] font-semibold text-current">
<span className="rounded-full bg-black/12 px-1.5 pb-0.5 text-[0.7rem] font-semibold text-current">
{item.value}
</span>
</span>

2
components/planning/energy-meter-card.tsx
View file

@ -50,7 +50,7 @@ export function EnergyMeterCard({
meter.dailyBudget === null ? null : Math.min(100, Math.max(0, meter.progressPercent ?? 0));
return (
<Card tone={tone === "default" ? "default" : "subtle"} className="py-0">
<Card tone={tone === "default" ? "default" : "subtle"} className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
EnergyMeter

2
components/planning/today-activities-list.tsx
View file

@ -103,7 +103,7 @@ export function TodayActivitiesList({
skipReasons,
}: TodayActivitiesListProps) {
return (
<Card className="py-0">
<Card className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Vandaag in beeld

20
components/settings/settings-form.tsx
View file

@ -60,7 +60,7 @@ export function SettingsForm({ profileBundle }: SettingsFormProps) {
<input type="hidden" name="locale" value={locale} />
<PreferenceHiddenFields draft={draft} />
<Card elevation="raised" className="py-0">
<Card elevation="raised" className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Account
@ -83,7 +83,7 @@ export function SettingsForm({ profileBundle }: SettingsFormProps) {
</CardContent>
</Card>
<Card className="py-0">
<Card className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Profiel
@ -97,7 +97,7 @@ export function SettingsForm({ profileBundle }: SettingsFormProps) {
</CardDescription>
</CardHeader>
<CardContent className="grid gap-6 pb-6 lg:grid-cols-[16rem_1fr]">
<Card tone="subtle" className="py-0 shadow-none">
<Card tone="subtle" className="pb-0 shadow-none">
<CardContent className="flex h-full flex-col items-center gap-4 px-5 py-5 text-center">
<ProfileAvatar
avatarUrl={profileBundle.profile.avatarUrl}
@ -182,7 +182,7 @@ export function SettingsForm({ profileBundle }: SettingsFormProps) {
</Card>
<section className="grid gap-5 lg:grid-cols-2">
<Card className="py-0">
<Card className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Taal en tijd
@ -235,14 +235,14 @@ export function SettingsForm({ profileBundle }: SettingsFormProps) {
</CardContent>
</Card>
<Card className="py-0">
<Card className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Interface
</p>
</CardHeader>
<CardContent className="space-y-4 pb-6">
<Card tone="subtle" className="py-0 shadow-none">
<Card tone="subtle" className="pb-0 shadow-none">
<CardContent className="flex items-start justify-between gap-4 py-5">
<div className="space-y-1">
<Label htmlFor="show-energy-points" className="text-sm font-semibold text-foreground">
@ -267,14 +267,14 @@ export function SettingsForm({ profileBundle }: SettingsFormProps) {
</section>
<section className="grid gap-5 lg:grid-cols-2">
<Card className="py-0">
<Card className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
Reminders
</p>
</CardHeader>
<CardContent className="space-y-4 pb-6">
<Card tone="subtle" className="py-0 shadow-none">
<Card tone="subtle" className="pb-0 shadow-none">
<CardContent className="space-y-4 py-5">
<div className="flex items-start justify-between gap-4">
<div className="space-y-1">
@ -318,7 +318,7 @@ export function SettingsForm({ profileBundle }: SettingsFormProps) {
</CardContent>
</Card>
<Card tone="subtle" className="py-0 shadow-none">
<Card tone="subtle" className="pb-0 shadow-none">
<CardContent className="flex items-start justify-between gap-4 py-5">
<div className="space-y-1">
<Label htmlFor="reflection-reminder-enabled" className="text-sm font-semibold text-foreground">
@ -341,7 +341,7 @@ export function SettingsForm({ profileBundle }: SettingsFormProps) {
</CardContent>
</Card>
<Card tone="primary" elevation="raised" className="py-0">
<Card tone="primary" elevation="raised" className="pb-0">
<CardHeader className="pb-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-primary-foreground/75">
Bewuste grenzen

8
components/ui/alert.tsx
View file

@ -8,8 +8,8 @@ const alertVariants = cva(
{
variants: {
variant: {
default: "border-border/70 bg-card/92 text-card-foreground",
info: "border-primary/15 bg-secondary text-foreground",
default: "border-outline-variant/70 bg-surface-container-high text-card-foreground",
info: "border-primary/16 bg-primary-container text-primary-container-foreground",
success: "border-success/30 bg-success/14 text-foreground",
warning: "border-warning/32 bg-warning/16 text-foreground",
destructive:
@ -42,7 +42,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="alert-title"
className={cn(
"font-medium leading-6 group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
"type-title-medium font-medium leading-6 group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
className
)}
{...props}
@ -58,7 +58,7 @@ function AlertDescription({
<div
data-slot="alert-description"
className={cn(
"text-sm text-balance leading-7 text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
"type-body-medium text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
className
)}
{...props}

6
components/ui/button.tsx
View file

@ -4,16 +4,16 @@ import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const buttonVariants = cva(
"group/button inline-flex shrink-0 items-center justify-center rounded-[var(--radius-full,9999px)] border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all duration-150 ease-[cubic-bezier(.2,.7,.2,1)] outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[1.125rem]",
"state-layer group/button inline-flex shrink-0 items-center justify-center rounded-[var(--radius-full,9999px)] border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all duration-150 ease-[cubic-bezier(.2,.7,.2,1)] outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[1.125rem]",
{
variants: {
variant: {
default:
"bg-primary !text-white shadow-[var(--shadow-1)] hover:bg-primary/90 hover:shadow-[var(--shadow-2)] [a]:hover:bg-primary/90 [&_svg]:!text-white",
outline:
"border-border bg-background/88 hover:bg-muted hover:text-foreground hover:shadow-[var(--shadow-1)] aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
"border-outline-variant bg-surface-container-low/92 hover:bg-surface-container hover:text-foreground hover:shadow-[var(--shadow-1)] aria-expanded:bg-surface-container aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
secondary:
"bg-secondary text-secondary-foreground shadow-[var(--shadow-1)] hover:bg-secondary/85 hover:shadow-[var(--shadow-2)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
"bg-secondary-container text-secondary-container-foreground shadow-[var(--shadow-1)] hover:bg-secondary-container/88 hover:shadow-[var(--shadow-2)] aria-expanded:bg-secondary-container aria-expanded:text-secondary-container-foreground",
success:
"bg-success !text-white shadow-[var(--shadow-1)] hover:brightness-[0.98] hover:shadow-[var(--shadow-2)] [&_svg]:!text-white",
warning:

12
components/ui/card.tsx
View file

@ -4,12 +4,12 @@ import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const cardVariants = cva(
"group/card flex flex-col gap-4 overflow-hidden rounded-[var(--radius-xl)] py-4 text-sm text-card-foreground ring-1 ring-border/75 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-[var(--radius-xl)] *:[img:last-child]:rounded-b-[var(--radius-xl)]",
"group/card flex flex-col gap-4 overflow-hidden rounded-[var(--radius-xl)] py-4 text-sm text-card-foreground ring-1 ring-outline-variant/70 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-[var(--radius-xl)] *:[img:last-child]:rounded-b-[var(--radius-xl)]",
{
variants: {
tone: {
default: "bg-card/92",
subtle: "bg-background/78",
default: "bg-surface-container text-card-foreground",
subtle: "bg-surface-container-low text-card-foreground",
primary: "bg-primary text-primary-foreground ring-primary/10",
},
elevation: {
@ -64,7 +64,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="card-title"
className={cn(
"font-heading text-base leading-snug font-semibold tracking-[-0.02em] group-data-[size=sm]/card:text-sm",
"type-title-large font-heading group-data-[size=sm]/card:text-sm",
className
)}
{...props}
@ -76,7 +76,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-description"
className={cn("text-sm text-muted-foreground", className)}
className={cn("type-body-medium text-muted-foreground", className)}
{...props}
/>
)
@ -110,7 +110,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="card-footer"
className={cn(
"flex items-center rounded-b-[var(--radius-xl)] border-t border-border/65 bg-muted/60 p-4 group-data-[size=sm]/card:p-3",
"flex items-center rounded-b-[var(--radius-xl)] border-t border-outline-variant/60 bg-surface-container-high p-4 group-data-[size=sm]/card:p-3",
className
)}
{...props}

2
components/wizard/test-wizard-flow.tsx
View file

@ -129,7 +129,7 @@ export function TestWizardFlow() {
backAction={backAction}
nextAction={nextAction}
>
<Card tone="subtle" className="py-0 shadow-none">
<Card tone="subtle" className="pb-0 shadow-none">
<CardHeader className="pb-0">
<CardTitle className="font-[family-name:var(--font-display)] text-2xl">
{wizard.currentStep.title}