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:
@@ -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}>
|
||||
|
||||
Reference in New Issue
Block a user