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 4693 additions and 2154 deletions
@@ -116,9 +116,11 @@ export function DutyPlanner({
if (dutyTypes.length === 0) {
return (
<div className="rounded-md border border-dashed p-8 text-center">
<p className="text-sm font-medium">Noch keine Diensttypen</p>
<p className="mt-1 text-sm text-muted-foreground">
<div className="rounded-lg border border-dashed border-[var(--hairline)] bg-[var(--surface-2)] p-8 text-center">
<p className="text-sm font-medium text-[var(--ink)]">
Noch keine Diensttypen
</p>
<p className="mt-1 text-sm text-[var(--ink-soft)]">
Lege zuerst einen Diensttyp an, danach erscheint hier das Planungsgrid.
</p>
</div>
@@ -136,29 +138,29 @@ export function DutyPlanner({
disabled={isPending}
>
{isPending ? (
<Loader2 className="h-4 w-4 animate-spin" />
<Loader2 className="h-4 w-4 animate-spin [stroke-width:1.7]" />
) : (
<BellRing className="h-4 w-4" />
<BellRing className="h-4 w-4 [stroke-width:1.7]" />
)}
Reminder diese Woche senden
</Button>
</div>
<div className="overflow-x-auto rounded-md border">
<table className="w-full min-w-[760px] border-collapse text-sm">
<div className="overflow-x-auto rounded-lg border border-[var(--hairline)]">
<table className="w-full min-w-[760px] border-collapse text-[13.5px] text-[var(--ink)]">
<thead>
<tr className="border-b bg-muted/50">
<th className="sticky left-0 z-10 w-56 bg-muted/95 px-4 py-3 text-left font-medium">
<tr className="border-b border-[var(--hairline-soft)] bg-[var(--surface-2)]">
<th className="sticky left-0 z-10 w-56 bg-[var(--surface-2)] px-4 py-3 text-left text-[11px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.12em]">
Woche
</th>
{dutyTypes.map((dutyType) => (
<th
key={dutyType.id}
className="min-w-56 px-4 py-3 text-left font-medium"
className="min-w-56 px-4 py-3 text-left font-medium text-[var(--ink)]"
>
<div>{dutyType.name}</div>
{dutyType.description && (
<div className="mt-1 line-clamp-1 text-xs font-normal text-muted-foreground">
<div className="mt-1 line-clamp-1 text-xs font-normal text-[var(--ink-muted)]">
{dutyType.description}
</div>
)}
@@ -168,8 +170,11 @@ export function DutyPlanner({
</thead>
<tbody>
{weeks.map((week) => (
<tr key={week.key} className="border-b last:border-b-0">
<td className="sticky left-0 z-10 bg-background px-4 py-3 font-medium">
<tr
key={week.key}
className="border-b border-[var(--hairline-soft)] last:border-b-0 hover:bg-[var(--surface-2)]"
>
<td className="sticky left-0 z-10 bg-[var(--surface)] px-4 py-3 font-medium">
{week.label}
</td>
{dutyTypes.map((dutyType) => {