Introduce la primitiva Card e sistema tocco e accessibilità dei componenti
`rounded-3xl bg-card p-4 shadow-card` era ricopiato a mano 22 volte: cambiare raggio od ombra voleva dire toccare venti file. `Card` in `ui-bits.tsx` è ora l'unica definizione delle superfici, con la gerarchia dei raggi scritta invece che implicita (contenitore 3xl, elemento interno 2xl, controllo full). Tocco e tastiera: - i chip presenza di `EventoCard` erano alti ~28 px ed è il controllo più toccato dell'app: ora `min-h-11`, con 8 px di spazio fra l'uno e l'altro; - stessa cura per il link «Apri partita», la chiusura di `CelebrazioneBadge` e il titolo di `SezioneTendina`; - `aria-pressed` sui controlli a stato, `aria-controls` sulle tendine (che avevano `aria-expanded` senza il pannello a cui si riferisce), `aria-busy` sui caricamenti; - `BottomNav`: lo stato attivo era comunicato solo dal colore. Ora cambia anche il peso del testo, compare una barretta sopra l'icona e c'è `aria-current="page"`. La voce «Home» diventa «Oggi», che dice cosa contiene. La barra è un materiale traslucido con bordo sfumato al posto della riga netta. - `Barra` espone `role="progressbar"` con i valori. Il testo sotto i 12 px è sparito (108 occorrenze fra `text-[9px]`, `text-[10px]` e `text-[11px]`): sotto quella soglia la leggibilità cala e su iOS non scala con Dynamic Type. La gerarchia la fanno peso e maiuscolo. `Avatar` aveva `alt="Foto di 12"` quando il fallback è il numero di maglia — non descrive niente e il nome è già scritto accanto, quindi alt vuoto. Aggiunti `width`/`height` per non far saltare il layout al caricamento. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
import { toast } from "sonner";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Card } from "@/components/crapp/ui-bits";
|
||||
import { nomeCompleto, useGiocatoriSquadra } from "@/lib/giocatori-squadra";
|
||||
import { useGiocatoreCorrente } from "@/lib/user-store";
|
||||
import { mediaPartita, useCacche, useSalvaCacche } from "@/lib/cacche";
|
||||
@@ -35,16 +36,16 @@ export function SondaggioCacche({ eventoId }: { eventoId: string }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="rounded-3xl bg-card p-4 shadow-card">
|
||||
<Card>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<p className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
|
||||
<p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
|
||||
💩 Sondaggio pre-partita
|
||||
</p>
|
||||
<span className="rounded-full bg-secondary px-2.5 py-1 text-[10px] font-bold uppercase text-muted-foreground">
|
||||
<span className="rounded-full bg-secondary px-2.5 py-1 text-xs font-bold uppercase text-muted-foreground">
|
||||
{dellaPartita.length} risposte
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-1 text-[11px] text-muted-foreground">
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
Quante cacche hai fatto prima di questa partita? Dato scientifico fondamentale.
|
||||
</p>
|
||||
|
||||
@@ -67,7 +68,7 @@ export function SondaggioCacche({ eventoId }: { eventoId: string }) {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-3 flex flex-wrap items-center gap-2 text-[11px]">
|
||||
<div className="mt-3 flex flex-wrap items-center gap-2 text-xs">
|
||||
<span className="rounded-full bg-secondary px-2.5 py-1 font-semibold">
|
||||
Media squadra {media}
|
||||
</span>
|
||||
@@ -80,6 +81,6 @@ export function SondaggioCacche({ eventoId }: { eventoId: string }) {
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user