Apply linen design system across app
This commit is contained in:
@@ -58,12 +58,12 @@ export function NewsTicker({ items }: { items: NewsTickerItemDto[] }) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card className="mb-8 border-emerald-200 bg-emerald-50/60">
|
||||
<Card className="mb-8 border-[var(--good)] bg-[var(--good-soft)]">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<CardTitle className="flex items-center gap-2 text-lg">
|
||||
<Megaphone className="h-5 w-5 text-emerald-700" />
|
||||
<Megaphone className="h-5 w-5 text-[var(--good)] [stroke-width:1.7]" />
|
||||
Schwarzes Brett
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
@@ -81,26 +81,26 @@ export function NewsTicker({ items }: { items: NewsTickerItemDto[] }) {
|
||||
key={item.id}
|
||||
type="button"
|
||||
onClick={() => openAnnouncement(item)}
|
||||
className="rounded-md border bg-background p-4 text-left shadow-sm transition hover:-translate-y-0.5 hover:border-emerald-300 hover:shadow-md"
|
||||
className="rounded-lg border border-[var(--hairline)] bg-[var(--surface)] p-4 text-left transition hover:border-[var(--accent-mid)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--focus-ring)]"
|
||||
>
|
||||
<div className="mb-3 flex items-start justify-between gap-2">
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<Bell className="h-3.5 w-3.5" />
|
||||
<div className="flex items-center gap-2 text-xs text-[var(--ink-muted)]">
|
||||
<Bell className="h-3.5 w-3.5 [stroke-width:1.7]" />
|
||||
{item.createdAt}
|
||||
</div>
|
||||
{isUnread && (
|
||||
<Badge className="bg-emerald-600 text-white">NEU</Badge>
|
||||
<Badge variant="success">NEU</Badge>
|
||||
)}
|
||||
</div>
|
||||
<h3 className="line-clamp-2 font-semibold leading-snug">
|
||||
<h3 className="line-clamp-2 font-semibold leading-snug text-[var(--ink)]">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="mt-2 line-clamp-3 text-sm leading-6 text-muted-foreground">
|
||||
<p className="mt-2 line-clamp-3 text-sm leading-6 text-[var(--ink-soft)]">
|
||||
{item.content}
|
||||
</p>
|
||||
{item.attachments.length > 0 && (
|
||||
<p className="mt-3 flex items-center gap-1 text-xs font-medium text-emerald-700">
|
||||
<FileText className="h-3.5 w-3.5" />
|
||||
<p className="mt-3 flex items-center gap-1 text-xs font-medium text-[var(--accent-deep)]">
|
||||
<FileText className="h-3.5 w-3.5 [stroke-width:1.7]" />
|
||||
{item.attachments.length} Anhang
|
||||
{item.attachments.length === 1 ? "" : "e"}
|
||||
</p>
|
||||
@@ -122,7 +122,7 @@ export function NewsTicker({ items }: { items: NewsTickerItemDto[] }) {
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="rounded-md border bg-muted/30 p-4 text-sm">
|
||||
<div className="rounded-lg border border-[var(--hairline)] bg-[var(--surface-2)] p-4 text-sm">
|
||||
<MarkdownContent content={selected.content} />
|
||||
</div>
|
||||
|
||||
@@ -138,7 +138,7 @@ export function NewsTicker({ items }: { items: NewsTickerItemDto[] }) {
|
||||
className="justify-start"
|
||||
>
|
||||
<a href={attachment.fileUrl} target="_blank" rel="noreferrer">
|
||||
<FileText className="h-4 w-4" />
|
||||
<FileText className="h-4 w-4 [stroke-width:1.7]" />
|
||||
{attachment.fileName}
|
||||
</a>
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user