davide/CRAPP
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Caratteri più grandi in tutta l'app (DD-049); etichetta «Cacche» nella rosa

Browse Source 
Ogni testo sotto i 16 px sale di un passo in tutte le pagine (12→13, 13→14,
14→15, 15→16); restano invariate le barre a pillola dei menu (navigazione in
basso e sottosezioni) e i badge da 10-11 px. Nella scheda giocatore di Squadra
l'etichetta «Cacche/partita» diventa «Cacche» (il valore resta la media).
Documentazione: DD-049, CHANGELOG, ARCHITECTURE, PROJECT_STATE, moduli squadra
e allenatore.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
davideandClaude Sonnet 5.5 committed 2026-10-06 11:50:28 +02:00
1 parent 519f9aaff4
commit 77e5daaa7a
38 files changed
+437 -347
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/crapp/BadgeDrawer.tsx
+13 -11
View File
@@ -33,7 +33,7 @@ function DettaglioBadge({ def, stato }: { def: BadgeDef; stato?: BadgeStato }) {
</span>
<div className="min-w-0 flex-1">
<DrawerTitle className="text-xl font-bold leading-tight">{def.nome}</DrawerTitle>
<DrawerDescription className="mt-1 text-sm leading-relaxed">
<DrawerDescription className="mt-1 text-[15px] leading-relaxed">
{def.descrizione}
</DrawerDescription>
</div>
@@ -42,13 +42,15 @@ function DettaglioBadge({ def, stato }: { def: BadgeDef; stato?: BadgeStato }) {
{stato ? (
<div className="rounded-2xl bg-card p-4 shadow-card ring-1 ring-border">
<div className="flex items-center justify-between">
<p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
<p className="text-[13px] font-bold uppercase tracking-wide text-muted-foreground">
Stato attuale
</p>
{grado ? (
<span className={cn("text-xs font-bold uppercase", meta?.text)}>{meta?.label}</span>
<span className={cn("text-[13px] font-bold uppercase", meta?.text)}>
{meta?.label}
</span>
) : (
<span className="text-xs font-bold uppercase text-muted-foreground">
<span className="text-[13px] font-bold uppercase text-muted-foreground">
In progresso
</span>
)}
@@ -59,19 +61,19 @@ function DettaglioBadge({ def, stato }: { def: BadgeDef; stato?: BadgeStato }) {
{stato.prossimaSoglia ? (
<>
<Barra percentuale={stato.progresso} trackClassName="mt-3" />
<p className="mt-2 text-xs text-muted-foreground">
<p className="mt-2 text-[13px] text-muted-foreground">
Mancano {stato.prossimaSoglia - stato.valore} {def.unita} per il{" "}
{gradoMeta[stato.prossimo as Grado].label.toLowerCase()}
</p>
</>
) : (
<p className="mt-2 text-xs text-success">Hai raggiunto il livello massimo.</p>
<p className="mt-2 text-[13px] text-success">Hai raggiunto il livello massimo.</p>
)}
</div>
) : null}
<div>
<p className="mb-2 text-xs font-bold uppercase tracking-wide text-muted-foreground">
<p className="mb-2 text-[13px] font-bold uppercase tracking-wide text-muted-foreground">
Soglie
</p>
<div className="grid grid-cols-3 gap-2">
@@ -88,7 +90,7 @@ function DettaglioBadge({ def, stato }: { def: BadgeDef; stato?: BadgeStato }) {
>
<p
className={cn(
"text-xs font-bold uppercase",
"text-[13px] font-bold uppercase",
raggiunto ? gm.text : "text-muted-foreground",
)}
>
@@ -102,7 +104,7 @@ function DettaglioBadge({ def, stato }: { def: BadgeDef; stato?: BadgeStato }) {
>
{def.soglie[g]}
</p>
<p className="text-xs text-muted-foreground">{def.unita}</p>
<p className="text-[13px] text-muted-foreground">{def.unita}</p>
</div>
);
})}
@@ -110,7 +112,7 @@ function DettaglioBadge({ def, stato }: { def: BadgeDef; stato?: BadgeStato }) {
</div>
{def.celebrazione ? (
<p className="rounded-2xl bg-accent/10 p-3 text-center text-sm font-semibold text-accent">
<p className="rounded-2xl bg-accent/10 p-3 text-center text-[15px] font-semibold text-accent">
“{def.celebrazione}”
</p>
) : null}
@@ -142,7 +144,7 @@ export function BadgeDrawer({
<DrawerClose asChild>
<button
type="button"
className="w-full rounded-2xl bg-secondary py-3 text-sm font-semibold text-foreground transition-colors hover:bg-secondary/80"
className="w-full rounded-2xl bg-secondary py-3 text-[15px] font-semibold text-foreground transition-colors hover:bg-secondary/80"
>
Indietro
</button>
src/components/crapp/CelebrazioneBadge.tsx
+3 -3
View File
@@ -51,11 +51,11 @@ export function CelebrazioneBadge() {
{notifica.emoji}
</span>
<div className="min-w-0 flex-1">
<p className="text-xs font-bold uppercase tracking-wide text-accent">
<p className="text-[13px] font-bold uppercase tracking-wide text-accent">
{notifica.tono === "segreto" ? "Badge segreto sbloccato" : "Traguardo raggiunto"}
</p>
<p className="mt-0.5 font-display text-2xl leading-none">{notifica.titolo}</p>
<p className="mt-1.5 text-sm text-muted-foreground">{notifica.testo}</p>
<p className="mt-1.5 text-[15px] text-muted-foreground">{notifica.testo}</p>
</div>
<button
type="button"
@@ -69,7 +69,7 @@ export function CelebrazioneBadge() {
<button
type="button"
onClick={chiudi}
className="mt-4 w-full rounded-2xl bg-accent-grad px-4 py-3 text-sm font-bold uppercase tracking-wide text-accent-foreground"
className="mt-4 w-full rounded-2xl bg-accent-grad px-4 py-3 text-[15px] font-bold uppercase tracking-wide text-accent-foreground"
>
{restanti > 0 ? `Avanti (${restanti})` : "Grande!"}
</button>
src/components/crapp/CollezioneBadge.tsx
+28 -24
View File
@@ -45,21 +45,21 @@ function CardBadge({ b, opaco, indice = 0 }: { b: BadgeStato; opaco?: boolean; i
<div className="flex items-center justify-between">
<Icon className={cn("h-6 w-6", meta ? meta.text : "text-muted-foreground/50")} />
{meta ? (
<span className={cn("text-xs font-bold uppercase", meta.text)}>{meta.label}</span>
<span className={cn("text-[13px] font-bold uppercase", meta.text)}>{meta.label}</span>
) : null}
</div>
<p className="mt-1.5 text-sm font-bold leading-tight">{b.def.nome}</p>
<p className="text-xs text-muted-foreground">
<p className="mt-1.5 text-[15px] font-bold leading-tight">{b.def.nome}</p>
<p className="text-[13px] text-muted-foreground">
{b.valore} {b.def.unita}
</p>
{b.prossimaSoglia ? (
<>
<Barra percentuale={b.progresso} altezza="h-1.5" trackClassName="mt-2" />
<p className="mt-1 text-xs font-semibold text-accent">{mancanoPer(b)}</p>
<p className="text-xs text-muted-foreground">{microcopyBadge(b)}</p>
<p className="mt-1 text-[13px] font-semibold text-accent">{mancanoPer(b)}</p>
<p className="text-[13px] text-muted-foreground">{microcopyBadge(b)}</p>
</>
) : (
<p className="mt-2 text-xs text-muted-foreground">{microcopyBadge(b)}</p>
<p className="mt-2 text-[13px] text-muted-foreground">{microcopyBadge(b)}</p>
)}
</Reveal>
);
@@ -90,13 +90,15 @@ function SocialDrawer({
</span>
<div className="min-w-0 flex-1">
<DrawerTitle className="text-xl font-bold leading-tight">{cat.nome}</DrawerTitle>
<DrawerDescription className="mt-1 text-sm leading-relaxed">
<DrawerDescription className="mt-1 text-[15px] leading-relaxed">
{cat.descrizione}
</DrawerDescription>
</div>
</div>
<div className="rounded-2xl bg-card p-4 shadow-card ring-1 ring-border">
<p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">Vinto</p>
<p className="text-[13px] font-bold uppercase tracking-wide text-muted-foreground">
Vinto
</p>
<p className="mt-1 font-display text-3xl leading-none">
{conteggio}{" "}
<span className="text-lg text-muted-foreground">
@@ -109,7 +111,7 @@ function SocialDrawer({
<DrawerClose asChild>
<button
type="button"
className="w-full rounded-2xl bg-secondary py-3 text-sm font-semibold text-foreground transition-colors hover:bg-secondary/80"
className="w-full rounded-2xl bg-secondary py-3 text-[15px] font-semibold text-foreground transition-colors hover:bg-secondary/80"
>
Indietro
</button>
@@ -139,7 +141,7 @@ export function CollezioneBadge({
<div className="rounded-3xl bg-hero p-4 text-primary-foreground shadow-card">
<div className="flex items-end justify-between gap-3">
<div className="min-w-0">
<p className="text-xs font-semibold uppercase tracking-wide text-primary-foreground/60">
<p className="text-[13px] font-semibold uppercase tracking-wide text-primary-foreground/60">
Collezione badge
</p>
<p className="font-display text-4xl leading-none">
@@ -147,7 +149,7 @@ export function CollezioneBadge({
<span className="text-2xl text-primary-foreground/50">/{c.totali}</span>
</p>
</div>
<p className="text-xs text-primary-foreground/70">
<p className="text-[13px] text-primary-foreground/70">
<Numero valore={pct} suffisso="%" /> completata
</p>
</div>
@@ -156,12 +158,12 @@ export function CollezioneBadge({
{vicino ? (
<div className="rounded-3xl bg-card p-4 shadow-card ring-1 ring-accent/30">
<p className="text-xs font-bold uppercase tracking-wide text-accent">
<p className="text-[13px] font-bold uppercase tracking-wide text-accent">
Prossimo traguardo
</p>
<p className="mt-1 text-sm font-bold leading-tight">{vicino.def.nome}</p>
<p className="mt-1 text-[15px] font-bold leading-tight">{vicino.def.nome}</p>
<Barra percentuale={vicino.progresso} trackClassName="mt-2" />
<p className="mt-2 text-xs text-muted-foreground">
<p className="mt-2 text-[13px] text-muted-foreground">
{mancanoPer(vicino)} · {microcopyBadge(vicino)}
</p>
</div>
@@ -169,7 +171,7 @@ export function CollezioneBadge({
{c.sbloccati.length > 0 ? (
<div>
<p className="mb-2 text-xs font-bold uppercase tracking-wide text-muted-foreground">
<p className="mb-2 text-[13px] font-bold uppercase tracking-wide text-muted-foreground">
Sbloccati ({c.sbloccati.length})
</p>
<div className="grid grid-cols-2 gap-2">
@@ -184,7 +186,7 @@ export function CollezioneBadge({
{c.inProgresso.length > 0 ? (
<div>
<p className="mb-2 text-xs font-bold uppercase tracking-wide text-muted-foreground">
<p className="mb-2 text-[13px] font-bold uppercase tracking-wide text-muted-foreground">
In progresso ({c.inProgresso.length})
</p>
<div className="grid grid-cols-2 gap-2">
@@ -199,7 +201,7 @@ export function CollezioneBadge({
{socialVinti.length > 0 ? (
<div>
<p className="mb-2 text-xs font-bold uppercase tracking-wide text-muted-foreground">
<p className="mb-2 text-[13px] font-bold uppercase tracking-wide text-muted-foreground">
Votati dai compagni
</p>
<div className="grid grid-cols-2 gap-2">
@@ -207,8 +209,8 @@ export function CollezioneBadge({
<SocialDrawer key={cat.id} cat={cat} conteggio={social[cat.id] ?? 0}>
<div className="rounded-2xl bg-card p-3 shadow-card ring-1 ring-accent/25">
<p className="text-lg leading-none">{cat.emoji}</p>
<p className="mt-1 text-sm font-bold leading-tight">{cat.nome}</p>
<p className="text-xs text-muted-foreground">
<p className="mt-1 text-[15px] font-bold leading-tight">{cat.nome}</p>
<p className="text-[13px] text-muted-foreground">
Vinto {social[cat.id]} {social[cat.id] === 1 ? "volta" : "volte"}
</p>
</div>
@@ -219,7 +221,7 @@ export function CollezioneBadge({
) : null}
<div>
<p className="mb-2 text-xs font-bold uppercase tracking-wide text-muted-foreground">
<p className="mb-2 text-[13px] font-bold uppercase tracking-wide text-muted-foreground">
Badge segreti
</p>
<div className="grid grid-cols-2 gap-2">
@@ -229,8 +231,8 @@ export function CollezioneBadge({
<BadgeDrawer key={b.def.id} def={b.def} stato={b}>
<div className="rounded-2xl bg-card p-3 shadow-card ring-1 ring-oro/40">
<Icon className="h-6 w-6 text-oro" />
<p className="mt-1.5 text-sm font-bold leading-tight">{b.def.nome}</p>
<p className="text-xs text-muted-foreground">
<p className="mt-1.5 text-[15px] font-bold leading-tight">{b.def.nome}</p>
<p className="text-[13px] text-muted-foreground">
{b.def.celebrazione ?? "Badge segreto sbloccato."}
</p>
</div>
@@ -243,8 +245,10 @@ export function CollezioneBadge({
className="grid place-items-center rounded-2xl bg-secondary/60 p-3 text-center"
>
<Lucchetto className="h-6 w-6 text-muted-foreground/50" />
<p className="mt-1.5 text-sm font-bold leading-tight text-muted-foreground">???</p>
<p className="text-xs text-muted-foreground/70">Badge segreto da scoprire</p>
<p className="mt-1.5 text-[15px] font-bold leading-tight text-muted-foreground">
???
</p>
<p className="text-[13px] text-muted-foreground/70">Badge segreto da scoprire</p>
</div>
))}
</div>
src/components/crapp/DettaglioCsi.tsx
+19 -17
View File
@@ -49,7 +49,7 @@ export function MetaPartitaCsi({
.join(" · ");
if (!voci && !link) return null;
return (
<div className="mt-3 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
<div className="mt-3 flex flex-wrap items-center gap-2 text-[13px] text-muted-foreground">
{voci ? <span>{voci}</span> : null}
{link ? (
<a
@@ -68,17 +68,17 @@ export function MetaPartitaCsi({
function ListaFormazione({ squadra }: { squadra: FormazioneSquadra }) {
return (
<div>
<p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
<p className="text-[13px] font-bold uppercase tracking-wide text-muted-foreground">
{squadra.squadra}
</p>
<div className="mt-2 space-y-1">
{squadra.titolari.map((g, i) => (
<div key={i} className="flex items-center gap-2 text-sm">
<span className="w-6 shrink-0 text-center font-display text-xs text-accent">
<div key={i} className="flex items-center gap-2 text-[15px]">
<span className="w-6 shrink-0 text-center font-display text-[13px] text-accent">
{g.numero}
</span>
<span className="min-w-0 flex-1 truncate">{g.nome}</span>
{g.ruolo ? <span className="text-xs text-muted-foreground">{g.ruolo}</span> : null}
{g.ruolo ? <span className="text-[13px] text-muted-foreground">{g.ruolo}</span> : null}
</div>
))}
</div>
@@ -89,7 +89,7 @@ function ListaFormazione({ squadra }: { squadra: FormazioneSquadra }) {
</p>
<div className="mt-1 space-y-1">
{squadra.panchina.map((g, i) => (
<div key={i} className="flex items-center gap-2 text-xs text-muted-foreground">
<div key={i} className="flex items-center gap-2 text-[13px] text-muted-foreground">
<span className="w-6 shrink-0 text-center">{g.numero}</span>
<span className="min-w-0 flex-1 truncate">{g.nome}</span>
</div>
@@ -98,7 +98,7 @@ function ListaFormazione({ squadra }: { squadra: FormazioneSquadra }) {
</>
) : null}
{squadra.staff.length > 0 ? (
<div className="mt-3 space-y-0.5 text-xs text-muted-foreground">
<div className="mt-3 space-y-0.5 text-[13px] text-muted-foreground">
{squadra.staff.map((s, i) => (
<div key={i}>
{s.nome} · {s.ruolo}
@@ -121,7 +121,7 @@ function BarraPrecedenti({
}) {
const totale = noi + avversario || 1;
return (
<div className="text-xs">
<div className="text-[13px]">
<div className="flex items-center justify-between text-muted-foreground">
<span className="font-bold text-foreground">{noi}</span>
<span>{label}</span>
@@ -139,7 +139,7 @@ const NOME_NOI = "CRAP Volley";
/** Intestazione con i nomi delle due squadre, per non dover ripeterli su ogni barra sotto. */
function TestataSquadre({ avversario }: { avversario: string }) {
return (
<div className="flex items-center justify-between text-xs font-bold">
<div className="flex items-center justify-between text-[13px] font-bold">
<span className="truncate text-accent">{NOME_NOI}</span>
<span className="truncate text-right text-muted-foreground">{avversario}</span>
</div>
@@ -158,7 +158,7 @@ function BarraProbabilita({
const favoritaNoi = noi >= avversarioPct;
return (
<div>
<p className="mb-2 text-xs text-muted-foreground">
<p className="mb-2 text-[13px] text-muted-foreground">
Probabilità di vittoria (calcolo CSI):{" "}
<span className="font-bold text-foreground">{favoritaNoi ? NOME_NOI : avversario}</span>{" "}
favorita al {Math.max(noi, avversarioPct).toFixed(0)}%.
@@ -171,13 +171,13 @@ function BarraProbabilita({
</div>
<div className="flex h-7 overflow-hidden rounded-full">
<div
className="flex items-center justify-center bg-success text-xs font-bold text-success-foreground"
className="flex items-center justify-center bg-success text-[13px] font-bold text-success-foreground"
style={{ width: `${noi}%` }}
>
{noi.toFixed(0)}%
</div>
<div
className="flex items-center justify-center bg-destructive text-xs font-bold text-destructive-foreground"
className="flex items-center justify-center bg-destructive text-[13px] font-bold text-destructive-foreground"
style={{ width: `${avversarioPct}%` }}
>
{avversarioPct.toFixed(0)}%
@@ -197,7 +197,7 @@ function BloccoPrecedenti({
return (
<div className="space-y-3">
<TestataSquadre avversario={avversario} />
<p className="text-xs text-muted-foreground">
<p className="text-[13px] text-muted-foreground">
{precedenti.totale > 0
? `${precedenti.totale} precedenti in archivio sul portale CSI.`
: "Nessun precedente in archivio sul portale CSI: primo confronto tra le due squadre."}
@@ -248,20 +248,22 @@ export function DettaglioCsiEsteso({
const { data, isLoading } = useCsiPartita(matchId);
if (isLoading) {
return <p className="px-1 text-center text-xs text-muted-foreground">Carico i dati dal CSI…</p>;
return (
<p className="px-1 text-center text-[13px] text-muted-foreground">Carico i dati dal CSI…</p>
);
}
if (!data || (!data.formazioni && !data.precedenti)) return null;
return (
<div className="space-y-4">
{data.giornata || data.nota ? (
<p className="text-xs text-muted-foreground">
<p className="text-[13px] text-muted-foreground">
{[data.giornata, data.nota].filter(Boolean).join(" · ")}
</p>
) : null}
{data.formazioni ? (
<Card>
<div className="mb-3 flex items-center gap-2 text-sm font-bold">
<div className="mb-3 flex items-center gap-2 text-[15px] font-bold">
<Users2 className="h-4 w-4 text-accent" /> Formazioni
</div>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
@@ -272,7 +274,7 @@ export function DettaglioCsiEsteso({
) : null}
{data.precedenti ? (
<Card>
<div className="mb-3 flex items-center gap-2 text-sm font-bold">
<div className="mb-3 flex items-center gap-2 text-[15px] font-bold">
<ShieldAlert className="h-4 w-4 text-accent" /> Scontri diretti
</div>
<BloccoPrecedenti precedenti={data.precedenti} avversario={avversario} />
src/components/crapp/EventoCard.tsx
+9 -9
View File
@@ -101,10 +101,10 @@ export function EventoCard({
<Cake className="h-5 w-5" />
</div>
<div className="min-w-0 flex-1">
<h3 className="truncate text-sm font-bold leading-tight">{evento.titolo}</h3>
<p className="text-xs text-muted-foreground">{evento.luogo}</p>
<h3 className="truncate text-[15px] font-bold leading-tight">{evento.titolo}</h3>
<p className="text-[13px] text-muted-foreground">{evento.luogo}</p>
</div>
<div className="shrink-0 text-right text-xs font-bold uppercase tracking-wide text-muted-foreground">
<div className="shrink-0 text-right text-[13px] font-bold uppercase tracking-wide text-muted-foreground">
{etichettaData(evento.data)}
</div>
</Card>
@@ -139,13 +139,13 @@ export function EventoCard({
<div className="flex items-start justify-between gap-3">
<span
className={cn(
"inline-block rounded-full px-2.5 py-0.5 text-xs font-bold uppercase tracking-wide",
"inline-block rounded-full px-2.5 py-0.5 text-[13px] font-bold uppercase tracking-wide",
tipo.className,
)}
>
{tipo.label}
</span>
<span className="inline-flex shrink-0 items-center gap-0.5 text-sm font-bold uppercase tracking-wide text-muted-foreground">
<span className="inline-flex shrink-0 items-center gap-0.5 text-[15px] font-bold uppercase tracking-wide text-muted-foreground">
{etichettaData(evento.data)}
{linkTo ? <ChevronRight className="h-4 w-4" aria-hidden /> : null}
</span>
@@ -153,10 +153,10 @@ export function EventoCard({
<h3 className="mt-2 text-base font-bold leading-tight">{evento.titolo}</h3>
{sottotitoloPartita ? (
<p className="mt-0.5 text-xs text-muted-foreground">{sottotitoloPartita}</p>
<p className="mt-0.5 text-[13px] text-muted-foreground">{sottotitoloPartita}</p>
) : null}
<div className="mt-2.5 flex flex-wrap gap-x-3 gap-y-1 text-[13px] text-muted-foreground">
<div className="mt-2.5 flex flex-wrap gap-x-3 gap-y-1 text-[14px] text-muted-foreground">
<span className="inline-flex items-center gap-1">
<Clock className="h-3.5 w-3.5 shrink-0" aria-hidden />
<span>{evento.ora}</span>
@@ -174,12 +174,12 @@ export function EventoCard({
</div>
{noteCard ? (
<p className="mt-2.5 line-clamp-2 text-xs text-muted-foreground">📝 {noteCard}</p>
<p className="mt-2.5 line-clamp-2 text-[13px] text-muted-foreground">📝 {noteCard}</p>
) : null}
{metaStato ? (
<p
className="mt-3 flex items-center gap-1.5 border-t border-border pt-2.5 text-left text-xs font-semibold text-muted-foreground"
className="mt-3 flex items-center gap-1.5 border-t border-border pt-2.5 text-left text-[13px] font-semibold text-muted-foreground"
aria-live="polite"
>
<span aria-hidden>{metaStato.emoji}</span>
src/components/crapp/ObiettivoDrawer.tsx
+11 -11
View File
@@ -17,12 +17,12 @@ import {
function Elenco({ titolo, voci, segno }: { titolo: string; voci: string[]; segno: string }) {
return (
<div>
<p className="mb-2 text-xs font-bold uppercase tracking-wide text-muted-foreground">
<p className="mb-2 text-[13px] font-bold uppercase tracking-wide text-muted-foreground">
{titolo}
</p>
<ul className="space-y-1.5">
{voci.map((v) => (
<li key={v} className="flex gap-2 text-sm leading-snug">
<li key={v} className="flex gap-2 text-[15px] leading-snug">
<span aria-hidden className="shrink-0 font-bold text-accent">
{segno}
</span>
@@ -37,10 +37,10 @@ function Elenco({ titolo, voci, segno }: { titolo: string; voci: string[]; segno
function Blocco({ titolo, testo }: { titolo: string; testo: string }) {
return (
<div>
<p className="mb-1 text-xs font-bold uppercase tracking-wide text-muted-foreground">
<p className="mb-1 text-[13px] font-bold uppercase tracking-wide text-muted-foreground">
{titolo}
</p>
<p className="text-sm leading-relaxed">{testo}</p>
<p className="text-[15px] leading-relaxed">{testo}</p>
</div>
);
}
@@ -58,7 +58,7 @@ export function SchedaObiettivo({ o }: { o: ObiettivoSquadra }) {
</span>
<div className="min-w-0 flex-1">
<DrawerTitle className="text-xl font-bold leading-tight">{o.titolo}</DrawerTitle>
<DrawerDescription className="mt-1 text-sm leading-relaxed">
<DrawerDescription className="mt-1 text-[15px] leading-relaxed">
{o.descrizione}
</DrawerDescription>
</div>
@@ -66,12 +66,12 @@ export function SchedaObiettivo({ o }: { o: ObiettivoSquadra }) {
<div className="rounded-2xl bg-card p-4 shadow-card ring-1 ring-border">
<div className="flex items-center justify-between">
<p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
<p className="text-[13px] font-bold uppercase tracking-wide text-muted-foreground">
Stato attuale
</p>
<span
className={cn(
"text-xs font-bold uppercase",
"text-[13px] font-bold uppercase",
fatto ? "text-success" : "text-muted-foreground",
)}
>
@@ -83,10 +83,10 @@ export function SchedaObiettivo({ o }: { o: ObiettivoSquadra }) {
<span className="text-lg text-muted-foreground">{o.unita}</span>
</p>
<Barra percentuale={pct} trackClassName="mt-3" />
<p className="mt-2 text-xs text-muted-foreground">
<p className="mt-2 text-[13px] text-muted-foreground">
{pct}%{o.scadenza ? ` · entro il ${formatData(o.scadenza)}` : ""}
</p>
<p className="mt-1 text-xs font-semibold text-accent">{microcopyObiettivo(o)}</p>
<p className="mt-1 text-[13px] font-semibold text-accent">{microcopyObiettivo(o)}</p>
</div>
<Blocco titolo="Come si calcola" testo={d.comeSiCalcola} />
@@ -101,7 +101,7 @@ export function SchedaObiettivo({ o }: { o: ObiettivoSquadra }) {
<Blocco titolo="Da dove arrivano i dati" testo={d.fonte} />
<Blocco titolo="Un esempio" testo={d.esempio} />
<p className="rounded-2xl bg-accent/10 p-3 text-center text-sm font-semibold text-accent">
<p className="rounded-2xl bg-accent/10 p-3 text-center text-[15px] font-semibold text-accent">
{o.impatto}
</p>
</div>
@@ -130,7 +130,7 @@ export function ObiettivoDrawer({
<DrawerClose asChild>
<button
type="button"
className="w-full rounded-2xl bg-secondary py-3 text-sm font-semibold text-foreground transition-colors hover:bg-secondary/80"
className="w-full rounded-2xl bg-secondary py-3 text-[15px] font-semibold text-foreground transition-colors hover:bg-secondary/80"
>
Indietro
</button>
src/components/crapp/Pagelle.tsx
+12 -10
View File
@@ -45,19 +45,19 @@ export function Pagelle({
return (
<Card>
<div className="flex items-center justify-between gap-2">
<p className="inline-flex items-center gap-1.5 text-xs font-bold uppercase tracking-wide text-muted-foreground">
<p className="inline-flex items-center gap-1.5 text-[13px] font-bold uppercase tracking-wide text-muted-foreground">
<ClipboardCheck className="h-3.5 w-3.5" /> Pagelle anonime
</p>
<span className="rounded-full bg-secondary px-2.5 py-1 text-xs font-bold uppercase text-muted-foreground">
<span className="rounded-full bg-secondary px-2.5 py-1 text-[13px] font-bold uppercase text-muted-foreground">
{chiuse ? "Votazioni chiuse" : `${fatti}/${daVotare.length} votati`}
</span>
</div>
<p className="mt-1 text-xs text-muted-foreground">
<p className="mt-1 text-[13px] text-muted-foreground">
Dai un voto da 1 a 10 ai compagni: nessuno vedrà chi ha votato cosa, solo la media.
</p>
{isPending ? (
<p aria-busy="true" className="mt-3 text-xs text-muted-foreground">
<p aria-busy="true" className="mt-3 text-[13px] text-muted-foreground">
Carico le pagelle…
</p>
) : (
@@ -70,15 +70,17 @@ export function Pagelle({
return (
<div key={g.id} className="rounded-2xl bg-secondary/60 p-2.5">
<div className="flex items-center gap-2.5">
<Avatar id={g.id} fallback={String(g.numero)} className="h-8 w-8 text-xs" />
<Avatar id={g.id} fallback={String(g.numero)} className="h-8 w-8 text-[13px]" />
<span className="min-w-0 flex-1">
<span className="block truncate text-sm font-bold leading-tight">{g.nome}</span>
<span className="text-xs text-muted-foreground">
<span className="block truncate text-[15px] font-bold leading-tight">
{g.nome}
</span>
<span className="text-[13px] text-muted-foreground">
{media ? `Media ${media.media} · ${media.voti} voti` : "Nessun voto"}
</span>
</span>
{sonoIo ? (
<span className="shrink-0 text-xs font-semibold uppercase text-muted-foreground">
<span className="shrink-0 text-[13px] font-semibold uppercase text-muted-foreground">
Sei tu
</span>
) : chiuse ? (
@@ -89,7 +91,7 @@ export function Pagelle({
disabled={!io || vota.isPending}
onClick={() => setApertoPer(aperto ? null : g.id)}
className={cn(
"shrink-0 rounded-full px-3 py-1 text-xs font-bold uppercase transition-colors disabled:opacity-50",
"shrink-0 rounded-full px-3 py-1 text-[13px] font-bold uppercase transition-colors disabled:opacity-50",
mio !== undefined
? "bg-accent text-accent-foreground"
: "bg-card text-foreground",
@@ -107,7 +109,7 @@ export function Pagelle({
type="button"
onClick={() => invia(g.id, v)}
className={cn(
"rounded-lg py-1.5 text-xs font-bold tabular-nums transition-transform active:scale-90",
"rounded-lg py-1.5 text-[13px] font-bold tabular-nums transition-transform active:scale-90",
mio === v
? "bg-accent text-accent-foreground"
: "bg-card text-foreground",
src/components/crapp/ProfiloAmministrativo.tsx
+13 -11
View File
@@ -27,7 +27,7 @@ const TIPI_DOCUMENTO = ["Carta d'identità", "Patente", "Passaporto"];
function Intestazione({ titolo, completa }: { titolo: string; completa: boolean }) {
return (
<div className="flex items-center gap-2 pt-2">
<h3 className="font-display text-sm uppercase tracking-wide">{titolo}</h3>
<h3 className="font-display text-[15px] uppercase tracking-wide">{titolo}</h3>
{completa ? <Check className="h-4 w-4 text-success" /> : null}
</div>
);
@@ -67,7 +67,7 @@ function CampoFile({
return (
<div className="flex items-center justify-between gap-3 py-2">
<span className="flex min-w-0 items-center gap-2 text-sm">
<span className="flex min-w-0 items-center gap-2 text-[15px]">
<span
className={cn(
"grid h-6 w-6 shrink-0 place-items-center rounded-lg",
@@ -93,7 +93,7 @@ function CampoFile({
type="button"
onClick={() => input.current?.click()}
disabled={inCorso}
className="premi rounded-xl bg-primary px-3 py-2 text-xs font-bold text-primary-foreground disabled:opacity-60"
className="premi rounded-xl bg-primary px-3 py-2 text-[13px] font-bold text-primary-foreground disabled:opacity-60"
>
{inCorso ? <Loader2 className="h-4 w-4 animate-spin" /> : path ? "Sostituisci" : "Carica"}
</button>
@@ -336,7 +336,7 @@ export function ProfiloAllenatore({ g }: { g: GiocatoreSquadra }) {
style={{ width: `${perc}%` }}
/>
</div>
<span className="shrink-0 text-xs font-bold tabular-nums text-muted-foreground">
<span className="shrink-0 text-[13px] font-bold tabular-nums text-muted-foreground">
{perc}%
</span>
</div>
@@ -366,7 +366,7 @@ export function ProfiloAllenatore({ g }: { g: GiocatoreSquadra }) {
type="button"
onClick={() => void salva()}
disabled={!sporco || inCorso}
className="premi flex w-full items-center justify-center gap-2 rounded-2xl bg-accent-grad py-3 text-sm font-bold uppercase text-accent-foreground shadow-pop disabled:opacity-50"
className="premi flex w-full items-center justify-center gap-2 rounded-2xl bg-accent-grad py-3 text-[15px] font-bold uppercase text-accent-foreground shadow-pop disabled:opacity-50"
>
{inCorso ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
{sporco ? "Salva" : "Salvato"}
@@ -430,7 +430,7 @@ export function ProfiloAmministrativo({
style={{ width: `${perc}%` }}
/>
</div>
<span className="shrink-0 text-xs font-bold tabular-nums text-muted-foreground">
<span className="shrink-0 text-[13px] font-bold tabular-nums text-muted-foreground">
{perc}%
</span>
</div>
@@ -472,7 +472,7 @@ export function ProfiloAmministrativo({
type="button"
onClick={salvaBozza}
disabled={!sporco || salva.isPending}
className="premi flex w-full items-center justify-center gap-2 rounded-2xl bg-accent-grad py-3 text-sm font-bold uppercase text-accent-foreground shadow-pop disabled:opacity-50"
className="premi flex w-full items-center justify-center gap-2 rounded-2xl bg-accent-grad py-3 text-[15px] font-bold uppercase text-accent-foreground shadow-pop disabled:opacity-50"
>
{salva.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
{sporco ? "Salva" : "Salvato"}
@@ -486,7 +486,9 @@ export function ProfiloAmministrativo({
<SezioneTendina
titolo="Dati per il tesseramento"
indice={indice}
azione={<span className="text-xs font-bold tabular-nums text-muted-foreground">{perc}%</span>}
azione={
<span className="text-[13px] font-bold tabular-nums text-muted-foreground">{perc}%</span>
}
>
{corpo}
</SezioneTendina>
@@ -521,10 +523,10 @@ export function CompletaProfilo({
className="premi block rounded-3xl bg-card p-4 shadow-card"
>
<div className="flex items-center justify-between gap-3">
<span className="font-display text-[15px] uppercase tracking-wide">
<span className="font-display text-[16px] uppercase tracking-wide">
Completa il tuo profilo
</span>
<span className="text-[13px] font-bold tabular-nums text-muted-foreground">{perc}%</span>
<span className="text-[14px] font-bold tabular-nums text-muted-foreground">{perc}%</span>
</div>
<div className="mt-2 h-1.5 overflow-hidden rounded-full bg-secondary">
<div
@@ -532,7 +534,7 @@ export function CompletaProfilo({
style={{ width: `${perc}%` }}
/>
</div>
<p className="mt-2 text-[13px] text-muted-foreground">
<p className="mt-2 text-[14px] text-muted-foreground">
{allenatore
? "Data e luogo di nascita, telefono ed email."
: "Documento e certificato medico servono per il tesseramento CSI."}
src/components/crapp/RosaPresenze.tsx
+11 -11
View File
@@ -70,7 +70,7 @@ export function RosaPresenze({
<div className="space-y-3">
<Card>
<div className="flex items-baseline justify-between">
<p className="text-sm font-bold">
<p className="text-[15px] font-bold">
Hanno risposto {risposteN}/{rosa.length}
</p>
<span className="font-display text-xl leading-none">{perc}%</span>
@@ -84,7 +84,7 @@ export function RosaPresenze({
<span
key={s}
className={cn(
"rounded-full px-2.5 py-1 text-xs font-bold",
"rounded-full px-2.5 py-1 text-[13px] font-bold",
n > 0 ? statoMeta[s].className : "bg-secondary text-muted-foreground",
)}
>
@@ -92,14 +92,14 @@ export function RosaPresenze({
</span>
);
})}
<span className="rounded-full bg-secondary px-2.5 py-1 text-xs font-bold text-muted-foreground">
<span className="rounded-full bg-secondary px-2.5 py-1 text-[13px] font-bold text-muted-foreground">
❔ {mancanti.length} da rispondere
</span>
</div>
{io ? (
<div className="mt-4 border-t border-border pt-3">
<p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
<p className="text-[13px] font-bold uppercase tracking-wide text-muted-foreground">
La tua risposta
</p>
<div className="mt-2 flex flex-wrap gap-1.5">
@@ -114,7 +114,7 @@ export function RosaPresenze({
salva.mutate({ eventoId, giocatoreId: io.id, stato: attivo ? null : s })
}
className={cn(
"rounded-full border border-border px-2.5 py-1.5 text-xs font-semibold transition-all active:scale-95 disabled:opacity-50",
"rounded-full border border-border px-2.5 py-1.5 text-[13px] font-semibold transition-all active:scale-95 disabled:opacity-50",
attivo
? cn(statoMeta[s].className, "border-transparent shadow-card")
: "bg-background text-muted-foreground",
@@ -133,7 +133,7 @@ export function RosaPresenze({
type="button"
onClick={sollecita}
disabled={sollecito || daSollecitare === 0 || passato}
className="premi mt-4 flex w-full items-center justify-center gap-2 rounded-2xl bg-primary px-4 py-3 text-sm font-bold text-primary-foreground disabled:opacity-50"
className="premi mt-4 flex w-full items-center justify-center gap-2 rounded-2xl bg-primary px-4 py-3 text-[15px] font-bold text-primary-foreground disabled:opacity-50"
>
{sollecito ? (
<Loader2 className="h-4 w-4 animate-spin" />
@@ -146,7 +146,7 @@ export function RosaPresenze({
</Card>
{isPending ? (
<p aria-busy="true" className="text-center text-xs text-muted-foreground">
<p aria-busy="true" className="text-center text-[13px] text-muted-foreground">
Carico le risposte…
</p>
) : null}
@@ -194,16 +194,16 @@ function Gruppo({
attenzione && "border border-dashed border-warning",
)}
>
<p className="flex items-center gap-1.5 text-xs font-bold uppercase tracking-wide text-muted-foreground">
<p className="flex items-center gap-1.5 text-[13px] font-bold uppercase tracking-wide text-muted-foreground">
{titolo} · {n}
{attenzione ? <HelpCircle className="h-3.5 w-3.5 text-warning" /> : null}
</p>
<div className="mt-3 space-y-2">
{lista.map((g) => (
<div key={g.id} className="flex items-center gap-3">
<Avatar id={g.id} fallback={String(g.numero)} className="h-8 w-8 text-xs" />
<span className="min-w-0 flex-1 truncate text-sm font-semibold">{g.nome}</span>
<span className="shrink-0 text-xs text-muted-foreground">{g.ruolo}</span>
<Avatar id={g.id} fallback={String(g.numero)} className="h-8 w-8 text-[13px]" />
<span className="min-w-0 flex-1 truncate text-[15px] font-semibold">{g.nome}</span>
<span className="shrink-0 text-[13px] text-muted-foreground">{g.ruolo}</span>
</div>
))}
</div>
src/components/crapp/ScoutEntry.tsx
+1 -1
View File
@@ -37,7 +37,7 @@ export function ScoutEntry({
{occupato ? <Lock className="h-5 w-5 shrink-0" /> : <Radio className="h-5 w-5 shrink-0" />}
<span className="min-w-0 flex-1">
<span className="block font-display text-lg uppercase leading-none">{titolo}</span>
<span className="block text-xs opacity-80">{sottotitolo}</span>
<span className="block text-[13px] opacity-80">{sottotitolo}</span>
</span>
{disponibile ? <ChevronRight className="h-5 w-5 shrink-0" /> : null}
</>
src/components/crapp/SerieCard.tsx
+6 -6
View File
@@ -28,8 +28,8 @@ export function SerieGriglia({ g }: { g: Giocatore }) {
<Icon className="h-5 w-5" />
</span>
<div className="min-w-0 flex-1">
<p className="text-sm font-bold leading-tight">{s.def.label}</p>
<p className="text-xs text-muted-foreground">{s.def.descrizione}</p>
<p className="text-[15px] font-bold leading-tight">{s.def.label}</p>
<p className="text-[13px] text-muted-foreground">{s.def.descrizione}</p>
</div>
<span className="inline-flex items-center gap-1 font-display text-2xl leading-none">
<Flame
@@ -39,7 +39,7 @@ export function SerieGriglia({ g }: { g: Giocatore }) {
</span>
</div>
<Barra percentuale={s.progresso} trackClassName="mt-3" />
<p className="mt-2 text-xs text-muted-foreground">
<p className="mt-2 text-[13px] text-muted-foreground">
{s.prossimo ? `${s.valore}/${s.prossimo} · ` : ""}
{s.messaggio}
</p>
@@ -61,17 +61,17 @@ export function SerieHome({ g }: { g: Giocatore }) {
<Icon className="h-5 w-5" />
</span>
<div className="min-w-0 flex-1">
<p className="text-sm font-bold leading-tight">
<p className="text-[15px] font-bold leading-tight">
Serie {top.def.label.toLowerCase()}: {top.valore}
</p>
<p className="text-xs text-muted-foreground">{top.messaggio}</p>
<p className="text-[13px] text-muted-foreground">{top.messaggio}</p>
</div>
</div>
<div className="mt-3 grid grid-cols-3 gap-2">
{serieGiocatore(g).map((s) => (
<div key={s.def.tipo} className="rounded-2xl bg-secondary p-2 text-center">
<p className="font-display text-xl leading-none">{s.valore}</p>
<p className="mt-1 text-xs font-semibold uppercase text-muted-foreground">
<p className="mt-1 text-[13px] font-semibold uppercase text-muted-foreground">
{s.def.label}
</p>
</div>
src/components/crapp/SondaggioCacche.tsx
+8 -8
View File
@@ -81,10 +81,10 @@ export function SondaggioCacche({
if (!sondaggioAperto(dataEvento, oraEvento)) {
return (
<Card>
<p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
<p className="text-[13px] font-bold uppercase tracking-wide text-muted-foreground">
💩 Sondaggio pre-partita
</p>
<p className="mt-1 text-xs text-muted-foreground">
<p className="mt-1 text-[13px] text-muted-foreground">
{sondaggioTerminato(dataEvento, oraEvento)
? "Sondaggio chiuso: era aperto fino al fischio d'inizio."
: "Apre alle 8:00 del giorno della partita: riceverai una notifica."}
@@ -96,14 +96,14 @@ export function SondaggioCacche({
return (
<Card>
<div className="flex items-center justify-between gap-2">
<p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
<p className="text-[13px] font-bold uppercase tracking-wide text-muted-foreground">
💩 Sondaggio pre-partita
</p>
<span className="rounded-full bg-secondary px-2.5 py-1 text-xs font-bold uppercase text-muted-foreground">
<span className="rounded-full bg-secondary px-2.5 py-1 text-[13px] font-bold uppercase text-muted-foreground">
{dellaPartita.length} risposte
</span>
</div>
<p className="mt-1 text-xs text-muted-foreground">
<p className="mt-1 text-[13px] text-muted-foreground">
Quante cacche hai fatto prima di questa partita? Dato scientifico fondamentale.
</p>
@@ -115,7 +115,7 @@ export function SondaggioCacche({
disabled={!io || salva.isPending}
onClick={() => rispondi(n)}
className={cn(
"min-w-11 rounded-xl px-3 py-2 text-sm font-bold tabular-nums transition-transform active:scale-90 disabled:opacity-50",
"min-w-11 rounded-xl px-3 py-2 text-[15px] font-bold tabular-nums transition-transform active:scale-90 disabled:opacity-50",
mia?.quantita === n
? "bg-accent text-accent-foreground shadow-pop"
: "bg-secondary text-foreground",
@@ -126,7 +126,7 @@ export function SondaggioCacche({
))}
</div>
<div className="mt-3 flex flex-wrap items-center gap-2 text-xs">
<div className="mt-3 flex flex-wrap items-center gap-2 text-[13px]">
<span className="rounded-full bg-secondary px-2.5 py-1 font-semibold">
Media squadra {media}
</span>
@@ -145,7 +145,7 @@ export function SondaggioCacche({
type="button"
onClick={avvisaTutti}
disabled={avviso}
className="premi mt-4 flex w-full items-center justify-center gap-2 rounded-2xl bg-primary px-4 py-3 text-sm font-bold text-primary-foreground disabled:opacity-50"
className="premi mt-4 flex w-full items-center justify-center gap-2 rounded-2xl bg-primary px-4 py-3 text-[15px] font-bold text-primary-foreground disabled:opacity-50"
>
{avviso ? <Loader2 className="h-4 w-4 animate-spin" /> : <BellRing className="h-4 w-4" />}
Avvisa tutti del sondaggio
src/components/crapp/TurnoPalloni.tsx
+6 -6
View File
@@ -74,16 +74,16 @@ export function TurnoPalloni({ eventoId }: { eventoId: string }) {
<CircleDot className="h-4 w-4" />
</span>
<span className="min-w-0 flex-1">
<span className="block text-xs font-bold uppercase tracking-wide text-muted-foreground">
<span className="block text-[13px] font-bold uppercase tracking-wide text-muted-foreground">
Palloni
</span>
<span className="flex items-center gap-1.5 text-sm font-bold leading-tight">
<span className="flex items-center gap-1.5 text-[15px] font-bold leading-tight">
{isPending || assegna.isPending ? (
<Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
) : null}
<span className="truncate">{giocatore ? nomeCompleto(giocatore) : "Da assegnare"}</span>
{proposto && giocatore ? (
<span className="shrink-0 rounded-full bg-card px-1.5 py-0.5 text-xs font-bold uppercase text-muted-foreground">
<span className="shrink-0 rounded-full bg-card px-1.5 py-0.5 text-[13px] font-bold uppercase text-muted-foreground">
proposto
</span>
) : null}
@@ -100,11 +100,11 @@ export function TurnoPalloni({ eventoId }: { eventoId: string }) {
type="button"
onClick={() => scegli(g.id)}
className={cn(
"flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm transition-colors",
"flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-[15px] transition-colors",
g.id === id ? "bg-accent/10 font-bold" : "hover:bg-secondary",
)}
>
<Avatar id={g.id} fallback={String(g.numero)} className="h-7 w-7 text-xs" />
<Avatar id={g.id} fallback={String(g.numero)} className="h-7 w-7 text-[13px]" />
<span className="min-w-0 flex-1 truncate">{nomeCompleto(g)}</span>
{g.id === id ? <Check className="h-4 w-4 shrink-0 text-accent" /> : null}
</button>
@@ -117,7 +117,7 @@ export function TurnoPalloni({ eventoId }: { eventoId: string }) {
type="button"
onClick={avvisa}
disabled={avviso}
className="premi mt-2.5 flex w-full items-center justify-center gap-2 rounded-xl bg-card px-3 py-2 text-xs font-bold uppercase text-foreground disabled:opacity-50"
className="premi mt-2.5 flex w-full items-center justify-center gap-2 rounded-xl bg-card px-3 py-2 text-[13px] font-bold uppercase text-foreground disabled:opacity-50"
>
{avviso ? (
<Loader2 className="h-3.5 w-3.5 animate-spin" />
src/components/crapp/VotazioneMvp.tsx
+9 -9
View File
@@ -46,10 +46,10 @@ export function VotazioneMvp({ evento }: { evento: Evento }) {
if (!votoMvpAperto(evento.data, evento.ora)) {
return (
<div className="mt-3 rounded-2xl bg-secondary/60 p-3">
<p className="inline-flex items-center gap-1.5 text-xs font-bold uppercase tracking-wide text-muted-foreground">
<p className="inline-flex items-center gap-1.5 text-[13px] font-bold uppercase tracking-wide text-muted-foreground">
<Vote className="h-3.5 w-3.5" /> Voto MVP
</p>
<p className="mt-1 text-xs text-muted-foreground">
<p className="mt-1 text-[13px] text-muted-foreground">
Apre {ORE_ATTESA_MVP} ore dopo l'inizio della partita.
</p>
</div>
@@ -75,20 +75,20 @@ export function VotazioneMvp({ evento }: { evento: Evento }) {
return (
<div className="mt-3 rounded-2xl bg-secondary/60 p-3">
<div className="flex items-center justify-between gap-2">
<p className="inline-flex items-center gap-1.5 text-xs font-bold uppercase tracking-wide text-muted-foreground">
<p className="inline-flex items-center gap-1.5 text-[13px] font-bold uppercase tracking-wide text-muted-foreground">
<Vote className="h-3.5 w-3.5" /> Voto MVP · {totale} {totale === 1 ? "voto" : "voti"}
</p>
<button
type="button"
onClick={() => setAperto((v) => !v)}
disabled={!puoVotare}
className="rounded-full bg-accent px-3 py-1 text-xs font-bold uppercase text-accent-foreground disabled:opacity-50"
className="rounded-full bg-accent px-3 py-1 text-[13px] font-bold uppercase text-accent-foreground disabled:opacity-50"
>
{mio ? "Cambia voto" : "Vota"}
</button>
</div>
<p className="mt-2 text-xs">
<p className="mt-2 text-[13px]">
{testa && !pareggio ? (
<span className="inline-flex items-center gap-1 font-bold">
<Crown className="h-3.5 w-3.5 text-warning" /> {testa.nome} ({testa.voti})
@@ -100,9 +100,9 @@ export function VotazioneMvp({ evento }: { evento: Evento }) {
)}
</p>
{mio ? (
<p className="mt-1 text-xs text-muted-foreground">Hai votato {mio.votato_nome}</p>
<p className="mt-1 text-[13px] text-muted-foreground">Hai votato {mio.votato_nome}</p>
) : !puoVotare ? (
<p className="mt-1 text-xs text-muted-foreground">
<p className="mt-1 text-[13px] text-muted-foreground">
Vota chi era presente a questa partita.
</p>
) : null}
@@ -120,7 +120,7 @@ export function VotazioneMvp({ evento }: { evento: Evento }) {
disabled={vota.isPending}
onClick={() => invia(g.id, nomeCompleto(g))}
className={cn(
"truncate rounded-xl px-2.5 py-2 text-left text-xs font-semibold transition-colors",
"truncate rounded-xl px-2.5 py-2 text-left text-[13px] font-semibold transition-colors",
mio?.votato_id === g.id
? "bg-accent text-accent-foreground"
: "bg-card text-foreground",
@@ -133,7 +133,7 @@ export function VotazioneMvp({ evento }: { evento: Evento }) {
) : conteggio.length > 0 ? (
<div className="mt-2 flex flex-wrap gap-1.5">
{conteggio.map((c) => (
<span key={c.id} className="rounded-lg bg-card px-2 py-1 text-xs font-semibold">
<span key={c.id} className="rounded-lg bg-card px-2 py-1 text-[13px] font-semibold">
{c.nome} · {c.voti}
</span>
))}
src/components/crapp/VotoSocial.tsx
+10 -8
View File
@@ -51,7 +51,7 @@ export function VotoSocial({ matchId }: { matchId: string }) {
return (
<div className="space-y-2">
<div className="rounded-2xl bg-secondary/60 px-3 py-2 text-xs font-semibold text-muted-foreground">
<div className="rounded-2xl bg-secondary/60 px-3 py-2 text-[13px] font-semibold text-muted-foreground">
<span className="inline-flex items-center gap-1.5">
<Sparkles className="h-3.5 w-3.5 text-accent" />
Hai votato {fatti}/{categorieSocial.length} categorie · un solo voto per categoria
@@ -79,14 +79,16 @@ export function VotoSocial({ matchId }: { matchId: string }) {
{cat.emoji}
</span>
<span className="min-w-0 flex-1">
<span className="block truncate text-sm font-bold leading-tight">{cat.nome}</span>
<span className="block truncate text-xs text-muted-foreground">
<span className="block truncate text-[15px] font-bold leading-tight">
{cat.nome}
</span>
<span className="block truncate text-[13px] text-muted-foreground">
{mio ? `Hai votato ${mio.votato_nome}` : cat.descrizione}
</span>
</span>
<span
className={cn(
"shrink-0 rounded-full px-2.5 py-1 text-xs font-bold uppercase",
"shrink-0 rounded-full px-2.5 py-1 text-[13px] font-bold uppercase",
mio ? "bg-success text-success-foreground" : "bg-accent text-accent-foreground",
)}
>
@@ -105,7 +107,7 @@ export function VotoSocial({ matchId }: { matchId: string }) {
disabled={vota.isPending}
onClick={() => invia(cat.id, g.id, nomeCompleto(g))}
className={cn(
"truncate rounded-xl px-2.5 py-2 text-left text-xs font-semibold transition-colors",
"truncate rounded-xl px-2.5 py-2 text-left text-[13px] font-semibold transition-colors",
mio?.votato_id === g.id
? "bg-accent text-accent-foreground"
: "bg-secondary text-foreground",
@@ -118,17 +120,17 @@ export function VotoSocial({ matchId }: { matchId: string }) {
) : (
<div className="border-t border-border px-3 py-2">
{totale === 0 ? (
<p className="text-xs text-muted-foreground">
<p className="text-[13px] text-muted-foreground">
Nessun voto ancora: apri e scegli un compagno.
</p>
) : vincitore ? (
<p className="inline-flex items-center gap-1.5 text-xs font-bold">
<p className="inline-flex items-center gap-1.5 text-[13px] font-bold">
<Crown className="h-3.5 w-3.5 text-oro" />
<Icon className="h-3.5 w-3.5 text-accent" />
{vincitore.nome} · {vincitore.voti} {vincitore.voti === 1 ? "voto" : "voti"}
</p>
) : (
<p className="text-xs text-muted-foreground">
<p className="text-[13px] text-muted-foreground">
Parità con {totale} voti: servono altri voti per assegnare il badge.
</p>
)}
src/components/crapp/ui-bits.tsx
+8 -8
View File
@@ -107,13 +107,13 @@ function RigaNotifica({
const arrivo = info.offset.x + proietta(info.velocity.x);
if (arrivo < -60) onElimina(notifica.id);
}}
className="touch-pan-y bg-card p-3 pr-8 text-sm"
className="touch-pan-y bg-card p-3 pr-8 text-[15px]"
>
<p className="font-semibold">{notifica.titolo}</p>
{notifica.corpo ? (
<p className="mt-0.5 whitespace-pre-line text-muted-foreground">{notifica.corpo}</p>
) : null}
<p className="mt-1 text-xs text-muted-foreground">{tempoRelativo(notifica.creataIl)}</p>
<p className="mt-1 text-[13px] text-muted-foreground">{tempoRelativo(notifica.creataIl)}</p>
</motion.div>
<button
type="button"
@@ -254,7 +254,7 @@ export function PageHeader({
<div className="min-w-0">
<h1 className="truncate font-display-lg text-3xl uppercase">{titolo}</h1>
{sottotitolo ? (
<p className="mt-1 truncate text-sm text-primary-foreground/80">{sottotitolo}</p>
<p className="mt-1 truncate text-[15px] text-primary-foreground/80">{sottotitolo}</p>
) : null}
</div>
{azione ?? <LinkProfilo />}
@@ -338,7 +338,7 @@ export function SezioneTendina({
* parità di padding — un'altezza esplicita allinea tutti i campi tra loro.
*/
export const classiInput =
"h-10 w-full min-w-0 rounded-xl border border-border bg-background px-3 py-2 text-sm";
"h-10 w-full min-w-0 rounded-xl border border-border bg-background px-3 py-2 text-[15px]";
/**
* Etichetta + controllo di un form. `min-w-0`: dentro `grid-cols-2` questa label
@@ -349,7 +349,7 @@ export const classiInput =
export function Campo({ label, children }: { label: string; children: ReactNode }) {
return (
<label className="block min-w-0">
<span className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
<span className="text-[13px] font-bold uppercase tracking-wide text-muted-foreground">
{label}
</span>
<span className="mt-1 block">{children}</span>
@@ -378,7 +378,7 @@ export function StatoBadge({ stato, className }: { stato: Stato; className?: str
return (
<span
className={cn(
"inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-bold uppercase",
"inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-[13px] font-bold uppercase",
meta.className,
className,
)}
@@ -402,10 +402,10 @@ export function StatTile({
<p className="font-display text-2xl leading-none">
{typeof valore === "number" ? <Numero valore={valore} /> : valore}
</p>
<p className="mt-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
<p className="mt-1 text-[13px] font-semibold uppercase tracking-wide text-muted-foreground">
{label}
</p>
{hint ? <p className="mt-0.5 text-xs text-accent">{hint}</p> : null}
{hint ? <p className="mt-0.5 text-[13px] text-accent">{hint}</p> : null}
</div>
);
}