DRY pass #2, batch 5, F14: the web's repeated class lists become component classes (#5372)

style.css gains the classes the views spelled out in full: .section-label
(17 sites), .hint (20), .form-error (13), .alert-error (5), .row-card (5),
.list-empty (5), .field (5), .page-shell (3), and the small row action
.btn-sm (4) / .btn-sm-danger (3). Only exact runs moved, so nothing renders
differently; spacing a site adds beyond a run stays a utility beside it.

Kept: the Reminders and Timeline small buttons. They carry no text colour
and inherit it, so putting them on .btn-sm would recolour them.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-08 14:41:34 -04:00
co-authored by Claude Opus 5.5
parent 38b94bd57e
commit b481e6857c
19 changed files with 128 additions and 80 deletions
+5 -5
View File
@@ -62,7 +62,7 @@ onMounted(() => {
<template>
<section class="flex flex-col gap-5">
<h2 class="text-xs font-semibold uppercase tracking-wide text-neutral-400">People</h2>
<h2 class="section-label">People</h2>
<OneTimeLink
v-if="fresh"
@@ -71,14 +71,14 @@ onMounted(() => {
@done="fresh = null"
/>
<p v-if="error" class="text-sm text-red-600 dark:text-red-400">{{ error }}</p>
<p v-if="error" class="form-error">{{ error }}</p>
<div v-if="loading" class="py-6 text-center text-sm text-neutral-400">Loading…</div>
<div v-if="loading" class="list-empty">Loading…</div>
<ul v-else class="flex flex-col gap-2">
<li
v-for="a in accounts"
:key="a.id"
class="flex items-center justify-between gap-4 rounded-xl border border-neutral-200 px-4 py-3 dark:border-neutral-800"
class="row-card"
>
<div class="min-w-0">
<p class="truncate text-sm font-medium text-neutral-800 dark:text-neutral-100">{{ a.display_name }}</p>
@@ -86,7 +86,7 @@ onMounted(() => {
</div>
<button
type="button"
class="shrink-0 rounded-md border border-neutral-300 px-2.5 py-1 text-xs text-neutral-700 hover:bg-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand disabled:opacity-50 dark:border-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-800"
class="shrink-0 btn-sm"
:disabled="busy === a.id"
@click="resetLink(a)"
>