Apply linen design system across app

This commit is contained in:
t.indorf
2026-05-20 22:47:52 +02:00
parent 99ff978116
commit 1c5d2f10ac
56 changed files with 4698 additions and 2159 deletions
@@ -163,7 +163,7 @@ export function EditFamilyDialog({ family }: { family: EditableFamily }) {
<Dialog onOpenChange={(open) => !open && resetState()}>
<DialogTrigger asChild>
<Button variant="ghost" size="sm" className="h-8 gap-1">
<Pencil className="h-4 w-4" />
<Pencil className="h-3.5 w-3.5" />
<span className="hidden sm:inline">Details</span>
</Button>
</DialogTrigger>
@@ -189,11 +189,13 @@ export function EditFamilyDialog({ family }: { family: EditableFamily }) {
<fieldset className="grid gap-3">
<div className="flex items-center justify-between gap-3">
<legend className="text-sm font-semibold">Elternteile</legend>
<legend className="text-[11px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.12em]">
Elternteile
</legend>
{parents.length < 2 && (
<Button
type="button"
variant="outline"
variant="pill"
size="sm"
className="h-8 gap-1"
onClick={addParent}
@@ -206,9 +208,12 @@ export function EditFamilyDialog({ family }: { family: EditableFamily }) {
</div>
{parents.map((parent, index) => (
<div key={parent.id} className="rounded-md border p-3">
<div
key={parent.id}
className="rounded-lg border border-[var(--hairline)] bg-[var(--surface-2)] p-3"
>
<div className="mb-3 flex items-center justify-between gap-3">
<p className="text-xs font-medium text-muted-foreground">
<p className="text-[11px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.12em]">
Elternteil {index + 1}
</p>
{parent.kind === "new" && (
@@ -216,7 +221,7 @@ export function EditFamilyDialog({ family }: { family: EditableFamily }) {
type="button"
variant="ghost"
size="sm"
className="h-7 gap-1 px-2 text-destructive hover:text-destructive"
className="h-7 gap-1 px-2 text-[var(--danger)] hover:bg-[var(--danger-soft)] hover:text-[var(--danger)]"
onClick={() => removeNewParent(parent)}
disabled={isPending}
>
@@ -254,10 +259,12 @@ export function EditFamilyDialog({ family }: { family: EditableFamily }) {
<fieldset className="grid gap-3">
<div className="flex items-center justify-between gap-3">
<legend className="text-sm font-semibold">Kinder</legend>
<legend className="text-[11px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.12em]">
Kinder
</legend>
<Button
type="button"
variant="outline"
variant="pill"
size="sm"
className="h-8 gap-1"
onClick={addChild}
@@ -269,21 +276,24 @@ export function EditFamilyDialog({ family }: { family: EditableFamily }) {
</div>
{children.length === 0 ? (
<p className="text-sm text-muted-foreground">
<p className="rounded-lg border border-dashed border-[var(--hairline)] bg-[var(--surface-2)] px-4 py-5 text-sm italic text-[var(--ink-faint)]">
Keine Kinder verknüpft.
</p>
) : (
children.map((child, index) => (
<div key={child.id} className="rounded-md border p-3">
<div
key={child.id}
className="rounded-lg border border-[var(--hairline)] bg-[var(--surface-2)] p-3"
>
<div className="mb-3 flex items-center justify-between gap-3">
<p className="text-xs font-medium text-muted-foreground">
<p className="text-[11px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.12em]">
Kind {index + 1}
</p>
<Button
type="button"
variant="ghost"
size="sm"
className="h-7 gap-1 px-2 text-destructive hover:text-destructive"
className="h-7 gap-1 px-2 text-[var(--danger)] hover:bg-[var(--danger-soft)] hover:text-[var(--danger)]"
onClick={() => removeChild(child)}
disabled={isPending}
>