refactor(web): migrate feature screens to design tokens + radius token (#49)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-07 14:15:54 +02:00
parent 04ed0c50e2
commit cde7be9f2a
24 changed files with 90 additions and 90 deletions
+12 -12
View File
@@ -138,10 +138,10 @@ export function ObjectsTable() {
<button
type="button"
onClick={() => toggleSort(col)}
className="flex items-center gap-1 hover:text-neutral-900"
className="flex items-center gap-1 hover:text-foreground"
>
{t(COLUMN_KEYS[col])}
<Icon className="size-3.5 text-neutral-400" aria-hidden="true" />
<Icon className="size-3.5 text-muted-foreground" aria-hidden="true" />
</button>
</th>
);
@@ -170,7 +170,7 @@ export function ObjectsTable() {
type="button"
aria-pressed={active}
onClick={() => setVisibility(value)}
className={`rounded px-2 py-1 ${active ? "bg-indigo-600 text-white" : "border"}`}
className={`rounded-md px-2 py-1 ${active ? "bg-primary text-primary-foreground" : "border"}`}
>
{value === "all" ? t("search.all") : t(`visibility.${value}`)}
</button>
@@ -184,7 +184,7 @@ export function ObjectsTable() {
);
const columns = (
<thead className="border-b bg-neutral-50 text-xs text-neutral-500">
<thead className="border-b bg-muted text-xs text-muted-foreground">
<tr>
{headerCell("object_number")}
{headerCell("object_name")}
@@ -220,7 +220,7 @@ export function ObjectsTable() {
body = (
<tbody>
<tr>
<td colSpan={6} className="px-3 py-6 text-center text-sm text-red-600">
<td colSpan={6} className="px-3 py-6 text-center text-sm text-destructive">
{t("objects.loadError")}
</td>
</tr>
@@ -230,7 +230,7 @@ export function ObjectsTable() {
body = (
<tbody>
<tr>
<td colSpan={6} className="px-3 py-6 text-center text-sm text-neutral-500">
<td colSpan={6} className="px-3 py-6 text-center text-sm text-muted-foreground">
{t("objects.empty")}
</td>
</tr>
@@ -254,17 +254,17 @@ export function ObjectsTable() {
if (event.key === "Enter") navigate(`/objects/${object.id}?${params}`);
}}
className={`cursor-pointer border-b text-sm ${
selected ? "bg-indigo-50" : "hover:bg-neutral-50"
selected ? "bg-primary/10" : "hover:bg-muted"
}`}
>
<td className="px-3 py-2 text-neutral-500">{object.object_number}</td>
<td className="px-3 py-2 text-muted-foreground">{object.object_number}</td>
<td className="px-3 py-2 font-medium">{object.object_name}</td>
<td className="px-3 py-2">
<VisibilityBadge visibility={object.visibility} />
</td>
<td className="px-3 py-2 text-neutral-600">{object.current_location ?? "—"}</td>
<td className="px-3 py-2 text-muted-foreground">{object.current_location ?? "—"}</td>
<td className="px-3 py-2 text-right tabular-nums">{object.number_of_objects}</td>
<td className="px-3 py-2 text-neutral-600">{formatUpdated(object.updated_at)}</td>
<td className="px-3 py-2 text-muted-foreground">{formatUpdated(object.updated_at)}</td>
</tr>
);
})}
@@ -281,14 +281,14 @@ export function ObjectsTable() {
{body}
</table>
</div>
<div className="flex items-center justify-between gap-2 border-t px-3 py-2 text-xs text-neutral-500">
<div className="flex items-center justify-between gap-2 border-t px-3 py-2 text-xs text-muted-foreground">
<label className="flex items-center gap-1">
<span>{t("objects.pageSize")}</span>
<select
value={limit}
onChange={(event) => setLimit(Number(event.target.value))}
aria-label={t("objects.pageSize")}
className="rounded border bg-white px-1 py-0.5"
className="rounded-md border bg-white px-1 py-0.5"
>
{PAGE_SIZES.map((size) => (
<option key={size} value={size}>