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
@@ -55,23 +55,25 @@ export function MitbringselList({
};
return (
<div className="flex flex-col gap-3 rounded-md bg-muted/50 p-3">
<div className="flex items-center gap-2 font-medium text-sm mb-1">
<Utensils className="h-4 w-4 text-muted-foreground" />
<div className="flex flex-col gap-3 rounded-lg bg-[var(--surface-2)] p-3">
<div className="mb-1 flex items-center gap-2 text-sm font-medium text-[var(--ink)]">
<Utensils className="h-4 w-4 text-[var(--ink-muted)] [stroke-width:1.7]" />
Mitbring-Liste
</div>
<div className="flex flex-col gap-2 max-h-40 overflow-y-auto">
{items.length === 0 ? (
<p className="text-xs text-muted-foreground italic">Noch keine Einträge vorhanden.</p>
<p className="text-xs italic text-[var(--ink-faint)]">
Noch keine Einträge vorhanden.
</p>
) : (
items.map((item) => (
<div
key={item.id}
className="flex items-center justify-between gap-2 rounded-sm bg-background p-2 text-sm shadow-sm"
className="flex items-center justify-between gap-2 rounded-md border border-[var(--hairline-soft)] bg-[var(--surface)] p-2 text-sm text-[var(--ink)]"
>
<div className="flex flex-col">
<span className="font-medium text-xs text-primary">
<span className="text-xs font-medium text-[var(--accent-deep)]">
{item.user.firstName} {item.user.lastName}
</span>
<span>{item.content}</span>
@@ -80,11 +82,11 @@ export function MitbringselList({
<Button
variant="ghost"
size="icon"
className="h-6 w-6 text-muted-foreground hover:text-destructive shrink-0"
className="h-6 w-6 shrink-0 text-[var(--ink-muted)] hover:bg-[var(--danger-soft)] hover:text-[var(--danger)]"
onClick={() => handleDelete(item.id)}
disabled={isPending}
>
<Trash2 className="h-4 w-4" />
<Trash2 className="h-4 w-4 [stroke-width:1.7]" />
</Button>
)}
</div>
@@ -112,7 +114,7 @@ export function MitbringselList({
onClick={handleAdd}
disabled={!content.trim() || isPending}
>
<Plus className="h-4 w-4 mr-1" />
<Plus className="mr-1 h-4 w-4 [stroke-width:1.7]" />
Hinzufügen
</Button>
</div>