Apply linen design system across app
This commit is contained in:
@@ -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) => {
|
||||
|
||||
Reference in New Issue
Block a user