zv/wtr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: calm down frontend visual system

Browse Source
This commit is contained in:
zv
2026-06-04 19:54:26 +02:00
parent 2aaa93e03f
commit 9395659f07
31 changed files with 255 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
components/warnings/dashboard-warnings.tsx
View File

@@ -73,28 +73,28 @@ export function DashboardWarnings() {
return (
<motion.section
aria-label={t("warnings.dashboard.title")}
className="rounded-[1.75rem] border border-amber-200/60 bg-amber-50/55 p-4 shadow-[0_18px_50px_-34px_rgba(146,64,14,0.45)] backdrop-blur-xl dark:border-amber-300/15 dark:bg-amber-950/15 sm:p-5"
className="rounded-panel border border-warning/25 bg-warning/10 p-4 shadow-soft backdrop-blur-xl sm:p-5"
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.35, ease: "easeOut" }}
>
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div className="flex items-start gap-3">
<div className="rounded-full border border-amber-300/60 bg-amber-100/70 p-2 text-amber-700 dark:border-amber-300/20 dark:bg-amber-300/10 dark:text-amber-200">
<div className="rounded-control border border-warning/30 bg-warning/10 p-2 text-warning">
<AlertTriangle className="size-4" aria-hidden="true" />
</div>
<div>
<p className="text-[0.68rem] font-semibold uppercase tracking-[0.2em] text-amber-800/70 dark:text-amber-100/65">
<p className="text-[0.68rem] font-semibold uppercase tracking-[0.2em] text-warning">
IMGW · {formatProvinceName(province, language)}
</p>
<h2 className="mt-1 text-base font-semibold text-slate-900 dark:text-white">
<h2 className="mt-1 text-base font-semibold text-foreground">
{t("warnings.dashboard.title")}
</h2>
</div>
</div>
<Link
href="/warnings"
className="inline-flex w-fit items-center gap-1.5 rounded-full px-2 py-1 text-xs font-semibold text-amber-800 transition hover:bg-amber-100/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-500 dark:text-amber-100 dark:hover:bg-amber-300/10"
className="inline-flex w-fit items-center gap-1.5 rounded-control px-2 py-1 text-xs font-semibold text-warning transition hover:bg-warning/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-warning"
>
{t("warnings.dashboard.viewAll")}
<ArrowRight className="size-3.5" aria-hidden="true" />
@@ -111,17 +111,17 @@ export function DashboardWarnings() {
return (
<article
key={warning.id}
className="rounded-2xl border border-amber-200/60 bg-white/45 px-3.5 py-3 dark:border-amber-200/10 dark:bg-slate-950/15"
className="rounded-card border border-warning/20 bg-surface/60 px-3.5 py-3"
>
<p className="text-[0.68rem] font-semibold uppercase tracking-[0.16em] text-amber-800/70 dark:text-amber-100/65">
<p className="text-[0.68rem] font-semibold uppercase tracking-[0.16em] text-warning">
{t(active ? "warnings.dashboard.active" : "warnings.dashboard.upcoming")}
{warning.level !== null && ` · ${t("warnings.level", { level: warning.level })}`}
</p>
<p className="mt-1 text-sm font-semibold text-slate-900 dark:text-white">
<p className="mt-1 text-sm font-semibold text-foreground">
{warning.title || t("warnings.genericMeteo")}
</p>
{validityLabel && (
<p className="mt-1.5 flex items-center gap-1.5 text-xs text-slate-600 dark:text-slate-300">
<p className="mt-1.5 flex items-center gap-1.5 text-xs text-muted">
<CalendarClock className="size-3.5" aria-hidden="true" />
{validityLabel}
</p>
@@ -132,7 +132,7 @@ export function DashboardWarnings() {
</div>
{hiddenWarningsCount > 0 && (
<p className="mt-3 text-xs font-medium text-amber-800/75 dark:text-amber-100/70">
<p className="mt-3 text-xs font-medium text-warning">
{t("warnings.dashboard.more", { count: hiddenWarningsCount })}
</p>
)}