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

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

No files matched your search

+1 -1
View File
@@ -20,7 +20,7 @@ schema in [docs/DATABASE.md](docs/DATABASE.md), le procedure in
`foto_path`: il codice che non la legge più (1.2.2) va rilasciato. `foto_path`: il codice che non la legge più (1.2.2) va rilasciato.
- **Su `develop`, non ancora rilasciato:** obiettivi cliccabili con card di dettaglio, presenze del mese - **Su `develop`, non ancora rilasciato:** obiettivi cliccabili con card di dettaglio, presenze del mese
calcolate sui convocati, obiettivi «Presenze collettive» e «evento di squadra al mese» (ora dell'evento), calcolate sui convocati, obiettivi «Presenze collettive» e «evento di squadra al mese» (ora dell'evento),
tessera CSI tolta dalla dashboard (DD-048), notifica di compleanno (DD-047, migration `m31`). Dettaglio in tessera CSI tolta dalla dashboard (DD-048), avvisi in Home ridisegnati e caratteri più grandi in tutta l'app (DD-049), notifica di compleanno (DD-047, migration `m31`). Dettaglio in
[docs/CHANGELOG.md](docs/CHANGELOG.md). [docs/CHANGELOG.md](docs/CHANGELOG.md).
- **Worker delle notifiche** (`mailer/`): in funzione su un Raspberry Pi con Docker dal 29/09/2026 - **Worker delle notifiche** (`mailer/`): in funzione su un Raspberry Pi con Docker dal 29/09/2026
([docs/WORKER_EMAIL.md](docs/WORKER_EMAIL.md)). Il codice con l'interruttore «Email» in Profilo ([docs/WORKER_EMAIL.md](docs/WORKER_EMAIL.md)). Il codice con l'interruttore «Email» in Profilo
+4
View File
@@ -88,6 +88,10 @@ Componenti condivisi in `src/components/crapp/` (`ui-bits.tsx` per `Card`, `Page
`Section`, `StatTile`; `Avviso.tsx` per gli avvisi colorati in Home; i drawer di dettaglio `BadgeDrawer` e `ObiettivoDrawer`), animazioni in `src/components/motion/`. Mobile-first (DD-005): poche `Section`, `StatTile`; `Avviso.tsx` per gli avvisi colorati in Home; i drawer di dettaglio `BadgeDrawer` e `ObiettivoDrawer`), animazioni in `src/components/motion/`. Mobile-first (DD-005): poche
schermate, pochi click. schermate, pochi click.
**Caratteri** (DD-049): niente testo sotto i 13 px, tranne la navigazione a pillola e i badge
da 10-11 px. Scala in uso: 13 px note, 15 px corpo, 16 px titoli di card; si usano le misure
fisse `text-[13px]`…`text-[16px]`, non `text-xs` e `text-sm`.
In `src/components/ui/` restano solo le due primitive shadcn davvero usate, `drawer` (vaul) e In `src/components/ui/` restano solo le due primitive shadcn davvero usate, `drawer` (vaul) e
`sonner`: le altre 43 non erano importate da nessuna parte (DD-021). Il resto dell'interfaccia `sonner`: le altre 43 non erano importate da nessuna parte (DD-021). Il resto dell'interfaccia
è composto con Tailwind e la primitiva `Card`, che è l'unica definizione di raggio, sfondo e è composto con Tailwind e la primitiva `Card`, che è l'unica definizione di raggio, sfondo e
+3
View File
@@ -25,6 +25,9 @@ versioni `0.y.z` erano pre-release.
### Modificato ### Modificato
- **Caratteri più grandi in tutta l'app** — ogni testo sotto i 16 px sale di un passo (12→13, 14→15, ecc.), nelle
card, negli elenchi, nelle statistiche e nei drawer. Restano uguali le barre a pillola dei menu (navigazione in
basso e sottosezioni) e i badge minuscoli. Solo aspetto, nessuna migration (DD-049).
- **Avvisi in Home più leggibili** — certificati e turno palloni usano lo stesso componente (`Avviso`): icona - **Avvisi in Home più leggibili** — certificati e turno palloni usano lo stesso componente (`Avviso`): icona
propria per ogni caso (non solo il colore), titolo e testo più grandi, elenchi di persone in righe con il dettaglio propria per ogni caso (non solo il colore), titolo e testo più grandi, elenchi di persone in righe con il dettaglio
a destra e il conteggio, freccia dove la card porta ai documenti, comparsa graduale. Solo aspetto: testi e regole a destra e il conteggio, freccia dove la card porta ai documenti, comparsa graduale. Solo aspetto: testi e regole
+53
View File
@@ -0,0 +1,53 @@
# DD-049 — Caratteri più grandi in tutta l'app
**Data:** 6 ottobre 2026
**Stato:** Accettata (solo interfaccia, nessuna migration)
**Contesto**
L'app si usa soprattutto dal telefono, anche da chi non è pratico. Molti testi erano a 12 px
(`text-xs`) e 14 px (`text-sm`): faticosi da leggere, soprattutto in Home, dove le card di
avvisi, eventi e statistiche hanno quasi solo testo piccolo.
**Decisione**
1. Tutti i testi sotto i 16 px salgono di **un passo**, in ogni pagina:
| Prima | Dopo |
| ----------------- | ----- |
| `text-xs` (12 px) | 13 px |
| 13 px | 14 px |
| 14 px | 15 px |
| `text-sm` (14 px) | 15 px |
| 15 px | 16 px |
Si usano le misure fisse `text-[13px]`, `text-[14px]`, `text-[15px]`, `text-[16px]`, già
presenti nel codice. `text-base` (16 px) e i titoli grandi non cambiano.
2. **Restano invariati** i testi delle barre a pillola dei menu, cioè la navigazione in basso
(`BottomNav`) e le sottosezioni (`BarraSottosezioni`), e i testi minuscoli da 10 e 11 px
(conteggio sulla campanella).
3. **Avvisi in Home** (certificati e turno palloni): un solo componente, `Avviso`
(`src/components/crapp/Avviso.tsx`), con titolo da 18 px, testi da 15 px, icona propria per
ogni caso (il colore non è l'unico segnale), elenchi in righe con il dettaglio a destra. Il
turno palloni ha in più la pillola «Oggi» o «In arrivo» e i messaggi in riquadri. Cambia solo
l'aspetto, non i testi né le regole su quando un avviso compare.
**Alternative scartate**
- Alzare la dimensione base del browser (`rem`) → scartata: ingrandirebbe anche icone, spazi e
barre a pillola, e ogni schermata andrebbe ricontrollata.
- Ingrandire solo la Home → scartata: le altre pagine avevano gli stessi testi piccoli.
- Salire di due passi → scartata: in contenitori stretti (badge, tessere, righe di classifica)
il testo andrebbe a capo o verrebbe troncato.
**Conseguenze**
- Un testo che stava stretto può andare a capo o troncarsi: non c'è un controllo visivo
automatico, va guardato sul telefono. Chi vede un punto rotto segnala la schermata.
- Per un testo nuovo, la scala di partenza è 13 px per le note, 15 px per il corpo, 16 px per i
titoli di card.
- Le card degli eventi sono condivise tra Home e Calendario: crescono insieme.
**Riesame**
Se dopo l'uso sul telefono compaiono testi troncati in più punti, tornare a un passo solo nei
contenitori stretti, senza toccare il resto.
+1
View File
@@ -86,6 +86,7 @@ Una decisione sostituita non si cancella: si cambia il suo **Stato** e si rimand
| [DD-038](DD-038.md) | Tre canali per ogni notifica | | [DD-038](DD-038.md) | Tre canali per ogni notifica |
| [DD-039](DD-039.md) | Niente promemoria all'allenatore | | [DD-039](DD-039.md) | Niente promemoria all'allenatore |
| [DD-040](DD-040.md) | Palloni e solleciti automatici | | [DD-040](DD-040.md) | Palloni e solleciti automatici |
| [DD-049](DD-049.md) | Caratteri più grandi in tutta l'app |
| [DD-048](DD-048.md) | Via la tessera dalla dashboard | | [DD-048](DD-048.md) | Via la tessera dalla dashboard |
| [DD-047](DD-047.md) | Notifica di compleanno | | [DD-047](DD-047.md) | Notifica di compleanno |
| [DD-046](DD-046.md) | Avviso certificati mancanti | | [DD-046](DD-046.md) | Avviso certificati mancanti |
+1 -1
View File
@@ -97,7 +97,7 @@ nessuna schermata:
| Dove | Cosa si nasconde all'allenatore | | Dove | Cosa si nasconde all'allenatore |
| ----------------------------------- | -------------------------------------------------------------------------------- | | ----------------------------------- | -------------------------------------------------------------------------------- |
| `/squadra` → Stats | il criterio di ordinamento «Cacche» (`cacchePartita`) | | `/squadra` → Stats | il criterio di ordinamento «Cacche» (`cacchePartita`) |
| `/squadra` → Rosa, scheda giocatore | la riga «Cacche/partita 💩» | | `/squadra` → Rosa, scheda giocatore | la riga «Cacche 💩» |
| `/partita/$id` | la sezione «Badge votati dai compagni» e il sondaggio cacche (`SondaggioCacche`) | | `/partita/$id` | la sezione «Badge votati dai compagni» e il sondaggio cacche (`SondaggioCacche`) |
| push «Sondaggio pre-partita aperto» | non parte verso i dispositivi degli allenatori (`apri-sondaggio.ts`) | | push «Sondaggio pre-partita aperto» | non parte verso i dispositivi degli allenatori (`apri-sondaggio.ts`) |
| `/profilo`, `/squadra` | le tab Badge (già escluse sopra) | | `/profilo`, `/squadra` | le tab Badge (già escluse sopra) |
+1 -1
View File
@@ -48,7 +48,7 @@ gli allenatori (`tipo = 'allenatore'`, DD-034): hanno uno slot ma non giocano.
Nella tab Rosa gli allenatori attivi compaiono in cima, con foto, nome e la dicitura Nella tab Rosa gli allenatori attivi compaiono in cima, con foto, nome e la dicitura
«Allenatore» dove i giocatori hanno il ruolo in campo (`ruoloVisibile()`); niente numero, «Allenatore» dove i giocatori hanno il ruolo in campo (`ruoloVisibile()`); niente numero,
statistiche né badge, e niente posto nella tab Stats. Chi usa l'app da allenatore vede solo statistiche né badge, e niente posto nella tab Stats. Chi usa l'app da allenatore vede solo
Rosa e Stats, senza badge e senza cacche (criterio «Cacche» e riga «Cacche/partita»). La Rosa e Stats, senza badge e senza cacche (criterio «Cacche» e riga «Cacche»). La
specifica completa sta in [allenatore.md](allenatore.md). specifica completa sta in [allenatore.md](allenatore.md).
## Gestione dati squadra (solo amministratore) ## Gestione dati squadra (solo amministratore)
+13 -11
View File
@@ -33,7 +33,7 @@ function DettaglioBadge({ def, stato }: { def: BadgeDef; stato?: BadgeStato }) {
</span> </span>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<DrawerTitle className="text-xl font-bold leading-tight">{def.nome}</DrawerTitle> <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} {def.descrizione}
</DrawerDescription> </DrawerDescription>
</div> </div>
@@ -42,13 +42,15 @@ function DettaglioBadge({ def, stato }: { def: BadgeDef; stato?: BadgeStato }) {
{stato ? ( {stato ? (
<div className="rounded-2xl bg-card p-4 shadow-card ring-1 ring-border"> <div className="rounded-2xl bg-card p-4 shadow-card ring-1 ring-border">
<div className="flex items-center justify-between"> <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 Stato attuale
</p> </p>
{grado ? ( {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 In progresso
</span> </span>
)} )}
@@ -59,19 +61,19 @@ function DettaglioBadge({ def, stato }: { def: BadgeDef; stato?: BadgeStato }) {
{stato.prossimaSoglia ? ( {stato.prossimaSoglia ? (
<> <>
<Barra percentuale={stato.progresso} trackClassName="mt-3" /> <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{" "} Mancano {stato.prossimaSoglia - stato.valore} {def.unita} per il{" "}
{gradoMeta[stato.prossimo as Grado].label.toLowerCase()} {gradoMeta[stato.prossimo as Grado].label.toLowerCase()}
</p> </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> </div>
) : null} ) : null}
<div> <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 Soglie
</p> </p>
<div className="grid grid-cols-3 gap-2"> <div className="grid grid-cols-3 gap-2">
@@ -88,7 +90,7 @@ function DettaglioBadge({ def, stato }: { def: BadgeDef; stato?: BadgeStato }) {
> >
<p <p
className={cn( className={cn(
"text-xs font-bold uppercase", "text-[13px] font-bold uppercase",
raggiunto ? gm.text : "text-muted-foreground", raggiunto ? gm.text : "text-muted-foreground",
)} )}
> >
@@ -102,7 +104,7 @@ function DettaglioBadge({ def, stato }: { def: BadgeDef; stato?: BadgeStato }) {
> >
{def.soglie[g]} {def.soglie[g]}
</p> </p>
<p className="text-xs text-muted-foreground">{def.unita}</p> <p className="text-[13px] text-muted-foreground">{def.unita}</p>
</div> </div>
); );
})} })}
@@ -110,7 +112,7 @@ function DettaglioBadge({ def, stato }: { def: BadgeDef; stato?: BadgeStato }) {
</div> </div>
{def.celebrazione ? ( {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}” “{def.celebrazione}”
</p> </p>
) : null} ) : null}
@@ -142,7 +144,7 @@ export function BadgeDrawer({
<DrawerClose asChild> <DrawerClose asChild>
<button <button
type="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 Indietro
</button> </button>
+3 -3
View File
@@ -51,11 +51,11 @@ export function CelebrazioneBadge() {
{notifica.emoji} {notifica.emoji}
</span> </span>
<div className="min-w-0 flex-1"> <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"} {notifica.tono === "segreto" ? "Badge segreto sbloccato" : "Traguardo raggiunto"}
</p> </p>
<p className="mt-0.5 font-display text-2xl leading-none">{notifica.titolo}</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> </div>
<button <button
type="button" type="button"
@@ -69,7 +69,7 @@ export function CelebrazioneBadge() {
<button <button
type="button" type="button"
onClick={chiudi} 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!"} {restanti > 0 ? `Avanti (${restanti})` : "Grande!"}
</button> </button>
+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"> <div className="flex items-center justify-between">
<Icon className={cn("h-6 w-6", meta ? meta.text : "text-muted-foreground/50")} /> <Icon className={cn("h-6 w-6", meta ? meta.text : "text-muted-foreground/50")} />
{meta ? ( {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} ) : null}
</div> </div>
<p className="mt-1.5 text-sm font-bold leading-tight">{b.def.nome}</p> <p className="mt-1.5 text-[15px] font-bold leading-tight">{b.def.nome}</p>
<p className="text-xs text-muted-foreground"> <p className="text-[13px] text-muted-foreground">
{b.valore} {b.def.unita} {b.valore} {b.def.unita}
</p> </p>
{b.prossimaSoglia ? ( {b.prossimaSoglia ? (
<> <>
<Barra percentuale={b.progresso} altezza="h-1.5" trackClassName="mt-2" /> <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="mt-1 text-[13px] font-semibold text-accent">{mancanoPer(b)}</p>
<p className="text-xs text-muted-foreground">{microcopyBadge(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> </Reveal>
); );
@@ -90,13 +90,15 @@ function SocialDrawer({
</span> </span>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<DrawerTitle className="text-xl font-bold leading-tight">{cat.nome}</DrawerTitle> <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} {cat.descrizione}
</DrawerDescription> </DrawerDescription>
</div> </div>
</div> </div>
<div className="rounded-2xl bg-card p-4 shadow-card ring-1 ring-border"> <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"> <p className="mt-1 font-display text-3xl leading-none">
{conteggio}{" "} {conteggio}{" "}
<span className="text-lg text-muted-foreground"> <span className="text-lg text-muted-foreground">
@@ -109,7 +111,7 @@ function SocialDrawer({
<DrawerClose asChild> <DrawerClose asChild>
<button <button
type="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 Indietro
</button> </button>
@@ -139,7 +141,7 @@ export function CollezioneBadge({
<div className="rounded-3xl bg-hero p-4 text-primary-foreground shadow-card"> <div className="rounded-3xl bg-hero p-4 text-primary-foreground shadow-card">
<div className="flex items-end justify-between gap-3"> <div className="flex items-end justify-between gap-3">
<div className="min-w-0"> <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 Collezione badge
</p> </p>
<p className="font-display text-4xl leading-none"> <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> <span className="text-2xl text-primary-foreground/50">/{c.totali}</span>
</p> </p>
</div> </div>
<p className="text-xs text-primary-foreground/70"> <p className="text-[13px] text-primary-foreground/70">
<Numero valore={pct} suffisso="%" /> completata <Numero valore={pct} suffisso="%" /> completata
</p> </p>
</div> </div>
@@ -156,12 +158,12 @@ export function CollezioneBadge({
{vicino ? ( {vicino ? (
<div className="rounded-3xl bg-card p-4 shadow-card ring-1 ring-accent/30"> <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 Prossimo traguardo
</p> </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" /> <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)} {mancanoPer(vicino)} · {microcopyBadge(vicino)}
</p> </p>
</div> </div>
@@ -169,7 +171,7 @@ export function CollezioneBadge({
{c.sbloccati.length > 0 ? ( {c.sbloccati.length > 0 ? (
<div> <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}) Sbloccati ({c.sbloccati.length})
</p> </p>
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-2 gap-2">
@@ -184,7 +186,7 @@ export function CollezioneBadge({
{c.inProgresso.length > 0 ? ( {c.inProgresso.length > 0 ? (
<div> <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}) In progresso ({c.inProgresso.length})
</p> </p>
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-2 gap-2">
@@ -199,7 +201,7 @@ export function CollezioneBadge({
{socialVinti.length > 0 ? ( {socialVinti.length > 0 ? (
<div> <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 Votati dai compagni
</p> </p>
<div className="grid grid-cols-2 gap-2"> <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}> <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"> <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="text-lg leading-none">{cat.emoji}</p>
<p className="mt-1 text-sm font-bold leading-tight">{cat.nome}</p> <p className="mt-1 text-[15px] font-bold leading-tight">{cat.nome}</p>
<p className="text-xs text-muted-foreground"> <p className="text-[13px] text-muted-foreground">
Vinto {social[cat.id]} {social[cat.id] === 1 ? "volta" : "volte"} Vinto {social[cat.id]} {social[cat.id] === 1 ? "volta" : "volte"}
</p> </p>
</div> </div>
@@ -219,7 +221,7 @@ export function CollezioneBadge({
) : null} ) : null}
<div> <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 Badge segreti
</p> </p>
<div className="grid grid-cols-2 gap-2"> <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}> <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"> <div className="rounded-2xl bg-card p-3 shadow-card ring-1 ring-oro/40">
<Icon className="h-6 w-6 text-oro" /> <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="mt-1.5 text-[15px] font-bold leading-tight">{b.def.nome}</p>
<p className="text-xs text-muted-foreground"> <p className="text-[13px] text-muted-foreground">
{b.def.celebrazione ?? "Badge segreto sbloccato."} {b.def.celebrazione ?? "Badge segreto sbloccato."}
</p> </p>
</div> </div>
@@ -243,8 +245,10 @@ export function CollezioneBadge({
className="grid place-items-center rounded-2xl bg-secondary/60 p-3 text-center" className="grid place-items-center rounded-2xl bg-secondary/60 p-3 text-center"
> >
<Lucchetto className="h-6 w-6 text-muted-foreground/50" /> <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="mt-1.5 text-[15px] font-bold leading-tight text-muted-foreground">
<p className="text-xs text-muted-foreground/70">Badge segreto da scoprire</p> ???
</p>
<p className="text-[13px] text-muted-foreground/70">Badge segreto da scoprire</p>
</div> </div>
))} ))}
</div> </div>
+19 -17
View File
@@ -49,7 +49,7 @@ export function MetaPartitaCsi({
.join(" · "); .join(" · ");
if (!voci && !link) return null; if (!voci && !link) return null;
return ( 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} {voci ? <span>{voci}</span> : null}
{link ? ( {link ? (
<a <a
@@ -68,17 +68,17 @@ export function MetaPartitaCsi({
function ListaFormazione({ squadra }: { squadra: FormazioneSquadra }) { function ListaFormazione({ squadra }: { squadra: FormazioneSquadra }) {
return ( return (
<div> <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} {squadra.squadra}
</p> </p>
<div className="mt-2 space-y-1"> <div className="mt-2 space-y-1">
{squadra.titolari.map((g, i) => ( {squadra.titolari.map((g, i) => (
<div key={i} className="flex items-center gap-2 text-sm"> <div key={i} className="flex items-center gap-2 text-[15px]">
<span className="w-6 shrink-0 text-center font-display text-xs text-accent"> <span className="w-6 shrink-0 text-center font-display text-[13px] text-accent">
{g.numero} {g.numero}
</span> </span>
<span className="min-w-0 flex-1 truncate">{g.nome}</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>
))} ))}
</div> </div>
@@ -89,7 +89,7 @@ function ListaFormazione({ squadra }: { squadra: FormazioneSquadra }) {
</p> </p>
<div className="mt-1 space-y-1"> <div className="mt-1 space-y-1">
{squadra.panchina.map((g, i) => ( {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="w-6 shrink-0 text-center">{g.numero}</span>
<span className="min-w-0 flex-1 truncate">{g.nome}</span> <span className="min-w-0 flex-1 truncate">{g.nome}</span>
</div> </div>
@@ -98,7 +98,7 @@ function ListaFormazione({ squadra }: { squadra: FormazioneSquadra }) {
</> </>
) : null} ) : null}
{squadra.staff.length > 0 ? ( {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) => ( {squadra.staff.map((s, i) => (
<div key={i}> <div key={i}>
{s.nome} · {s.ruolo} {s.nome} · {s.ruolo}
@@ -121,7 +121,7 @@ function BarraPrecedenti({
}) { }) {
const totale = noi + avversario || 1; const totale = noi + avversario || 1;
return ( return (
<div className="text-xs"> <div className="text-[13px]">
<div className="flex items-center justify-between text-muted-foreground"> <div className="flex items-center justify-between text-muted-foreground">
<span className="font-bold text-foreground">{noi}</span> <span className="font-bold text-foreground">{noi}</span>
<span>{label}</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. */ /** Intestazione con i nomi delle due squadre, per non dover ripeterli su ogni barra sotto. */
function TestataSquadre({ avversario }: { avversario: string }) { function TestataSquadre({ avversario }: { avversario: string }) {
return ( 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-accent">{NOME_NOI}</span>
<span className="truncate text-right text-muted-foreground">{avversario}</span> <span className="truncate text-right text-muted-foreground">{avversario}</span>
</div> </div>
@@ -158,7 +158,7 @@ function BarraProbabilita({
const favoritaNoi = noi >= avversarioPct; const favoritaNoi = noi >= avversarioPct;
return ( return (
<div> <div>
<p className="mb-2 text-xs text-muted-foreground"> <p className="mb-2 text-[13px] text-muted-foreground">
Probabilità di vittoria (calcolo CSI):{" "} Probabilità di vittoria (calcolo CSI):{" "}
<span className="font-bold text-foreground">{favoritaNoi ? NOME_NOI : avversario}</span>{" "} <span className="font-bold text-foreground">{favoritaNoi ? NOME_NOI : avversario}</span>{" "}
favorita al {Math.max(noi, avversarioPct).toFixed(0)}%. favorita al {Math.max(noi, avversarioPct).toFixed(0)}%.
@@ -171,13 +171,13 @@ function BarraProbabilita({
</div> </div>
<div className="flex h-7 overflow-hidden rounded-full"> <div className="flex h-7 overflow-hidden rounded-full">
<div <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}%` }} style={{ width: `${noi}%` }}
> >
{noi.toFixed(0)}% {noi.toFixed(0)}%
</div> </div>
<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}%` }} style={{ width: `${avversarioPct}%` }}
> >
{avversarioPct.toFixed(0)}% {avversarioPct.toFixed(0)}%
@@ -197,7 +197,7 @@ function BloccoPrecedenti({
return ( return (
<div className="space-y-3"> <div className="space-y-3">
<TestataSquadre avversario={avversario} /> <TestataSquadre avversario={avversario} />
<p className="text-xs text-muted-foreground"> <p className="text-[13px] text-muted-foreground">
{precedenti.totale > 0 {precedenti.totale > 0
? `${precedenti.totale} precedenti in archivio sul portale CSI.` ? `${precedenti.totale} precedenti in archivio sul portale CSI.`
: "Nessun precedente in archivio sul portale CSI: primo confronto tra le due squadre."} : "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); const { data, isLoading } = useCsiPartita(matchId);
if (isLoading) { 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; if (!data || (!data.formazioni && !data.precedenti)) return null;
return ( return (
<div className="space-y-4"> <div className="space-y-4">
{data.giornata || data.nota ? ( {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(" · ")} {[data.giornata, data.nota].filter(Boolean).join(" · ")}
</p> </p>
) : null} ) : null}
{data.formazioni ? ( {data.formazioni ? (
<Card> <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 <Users2 className="h-4 w-4 text-accent" /> Formazioni
</div> </div>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2"> <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
@@ -272,7 +274,7 @@ export function DettaglioCsiEsteso({
) : null} ) : null}
{data.precedenti ? ( {data.precedenti ? (
<Card> <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 <ShieldAlert className="h-4 w-4 text-accent" /> Scontri diretti
</div> </div>
<BloccoPrecedenti precedenti={data.precedenti} avversario={avversario} /> <BloccoPrecedenti precedenti={data.precedenti} avversario={avversario} />
+9 -9
View File
@@ -101,10 +101,10 @@ export function EventoCard({
<Cake className="h-5 w-5" /> <Cake className="h-5 w-5" />
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<h3 className="truncate text-sm font-bold leading-tight">{evento.titolo}</h3> <h3 className="truncate text-[15px] font-bold leading-tight">{evento.titolo}</h3>
<p className="text-xs text-muted-foreground">{evento.luogo}</p> <p className="text-[13px] text-muted-foreground">{evento.luogo}</p>
</div> </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)} {etichettaData(evento.data)}
</div> </div>
</Card> </Card>
@@ -139,13 +139,13 @@ export function EventoCard({
<div className="flex items-start justify-between gap-3"> <div className="flex items-start justify-between gap-3">
<span <span
className={cn( 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.className,
)} )}
> >
{tipo.label} {tipo.label}
</span> </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)} {etichettaData(evento.data)}
{linkTo ? <ChevronRight className="h-4 w-4" aria-hidden /> : null} {linkTo ? <ChevronRight className="h-4 w-4" aria-hidden /> : null}
</span> </span>
@@ -153,10 +153,10 @@ export function EventoCard({
<h3 className="mt-2 text-base font-bold leading-tight">{evento.titolo}</h3> <h3 className="mt-2 text-base font-bold leading-tight">{evento.titolo}</h3>
{sottotitoloPartita ? ( {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} ) : 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"> <span className="inline-flex items-center gap-1">
<Clock className="h-3.5 w-3.5 shrink-0" aria-hidden /> <Clock className="h-3.5 w-3.5 shrink-0" aria-hidden />
<span>{evento.ora}</span> <span>{evento.ora}</span>
@@ -174,12 +174,12 @@ export function EventoCard({
</div> </div>
{noteCard ? ( {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} ) : null}
{metaStato ? ( {metaStato ? (
<p <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" aria-live="polite"
> >
<span aria-hidden>{metaStato.emoji}</span> <span aria-hidden>{metaStato.emoji}</span>
+11 -11
View File
@@ -17,12 +17,12 @@ import {
function Elenco({ titolo, voci, segno }: { titolo: string; voci: string[]; segno: string }) { function Elenco({ titolo, voci, segno }: { titolo: string; voci: string[]; segno: string }) {
return ( return (
<div> <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} {titolo}
</p> </p>
<ul className="space-y-1.5"> <ul className="space-y-1.5">
{voci.map((v) => ( {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"> <span aria-hidden className="shrink-0 font-bold text-accent">
{segno} {segno}
</span> </span>
@@ -37,10 +37,10 @@ function Elenco({ titolo, voci, segno }: { titolo: string; voci: string[]; segno
function Blocco({ titolo, testo }: { titolo: string; testo: string }) { function Blocco({ titolo, testo }: { titolo: string; testo: string }) {
return ( return (
<div> <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} {titolo}
</p> </p>
<p className="text-sm leading-relaxed">{testo}</p> <p className="text-[15px] leading-relaxed">{testo}</p>
</div> </div>
); );
} }
@@ -58,7 +58,7 @@ export function SchedaObiettivo({ o }: { o: ObiettivoSquadra }) {
</span> </span>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<DrawerTitle className="text-xl font-bold leading-tight">{o.titolo}</DrawerTitle> <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} {o.descrizione}
</DrawerDescription> </DrawerDescription>
</div> </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="rounded-2xl bg-card p-4 shadow-card ring-1 ring-border">
<div className="flex items-center justify-between"> <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 Stato attuale
</p> </p>
<span <span
className={cn( className={cn(
"text-xs font-bold uppercase", "text-[13px] font-bold uppercase",
fatto ? "text-success" : "text-muted-foreground", 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> <span className="text-lg text-muted-foreground">{o.unita}</span>
</p> </p>
<Barra percentuale={pct} trackClassName="mt-3" /> <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)}` : ""} {pct}%{o.scadenza ? ` · entro il ${formatData(o.scadenza)}` : ""}
</p> </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> </div>
<Blocco titolo="Come si calcola" testo={d.comeSiCalcola} /> <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="Da dove arrivano i dati" testo={d.fonte} />
<Blocco titolo="Un esempio" testo={d.esempio} /> <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} {o.impatto}
</p> </p>
</div> </div>
@@ -130,7 +130,7 @@ export function ObiettivoDrawer({
<DrawerClose asChild> <DrawerClose asChild>
<button <button
type="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 Indietro
</button> </button>
+12 -10
View File
@@ -45,19 +45,19 @@ export function Pagelle({
return ( return (
<Card> <Card>
<div className="flex items-center justify-between gap-2"> <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 <ClipboardCheck className="h-3.5 w-3.5" /> Pagelle anonime
</p> </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`} {chiuse ? "Votazioni chiuse" : `${fatti}/${daVotare.length} votati`}
</span> </span>
</div> </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. Dai un voto da 1 a 10 ai compagni: nessuno vedrà chi ha votato cosa, solo la media.
</p> </p>
{isPending ? ( {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… Carico le pagelle…
</p> </p>
) : ( ) : (
@@ -70,15 +70,17 @@ export function Pagelle({
return ( return (
<div key={g.id} className="rounded-2xl bg-secondary/60 p-2.5"> <div key={g.id} className="rounded-2xl bg-secondary/60 p-2.5">
<div className="flex items-center gap-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="min-w-0 flex-1">
<span className="block truncate text-sm font-bold leading-tight">{g.nome}</span> <span className="block truncate text-[15px] font-bold leading-tight">
<span className="text-xs text-muted-foreground"> {g.nome}
</span>
<span className="text-[13px] text-muted-foreground">
{media ? `Media ${media.media} · ${media.voti} voti` : "Nessun voto"} {media ? `Media ${media.media} · ${media.voti} voti` : "Nessun voto"}
</span> </span>
</span> </span>
{sonoIo ? ( {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 Sei tu
</span> </span>
) : chiuse ? ( ) : chiuse ? (
@@ -89,7 +91,7 @@ export function Pagelle({
disabled={!io || vota.isPending} disabled={!io || vota.isPending}
onClick={() => setApertoPer(aperto ? null : g.id)} onClick={() => setApertoPer(aperto ? null : g.id)}
className={cn( 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 mio !== undefined
? "bg-accent text-accent-foreground" ? "bg-accent text-accent-foreground"
: "bg-card text-foreground", : "bg-card text-foreground",
@@ -107,7 +109,7 @@ export function Pagelle({
type="button" type="button"
onClick={() => invia(g.id, v)} onClick={() => invia(g.id, v)}
className={cn( 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 mio === v
? "bg-accent text-accent-foreground" ? "bg-accent text-accent-foreground"
: "bg-card text-foreground", : "bg-card text-foreground",
+13 -11
View File
@@ -27,7 +27,7 @@ const TIPI_DOCUMENTO = ["Carta d'identità", "Patente", "Passaporto"];
function Intestazione({ titolo, completa }: { titolo: string; completa: boolean }) { function Intestazione({ titolo, completa }: { titolo: string; completa: boolean }) {
return ( return (
<div className="flex items-center gap-2 pt-2"> <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} {completa ? <Check className="h-4 w-4 text-success" /> : null}
</div> </div>
); );
@@ -67,7 +67,7 @@ function CampoFile({
return ( return (
<div className="flex items-center justify-between gap-3 py-2"> <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 <span
className={cn( className={cn(
"grid h-6 w-6 shrink-0 place-items-center rounded-lg", "grid h-6 w-6 shrink-0 place-items-center rounded-lg",
@@ -93,7 +93,7 @@ function CampoFile({
type="button" type="button"
onClick={() => input.current?.click()} onClick={() => input.current?.click()}
disabled={inCorso} 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"} {inCorso ? <Loader2 className="h-4 w-4 animate-spin" /> : path ? "Sostituisci" : "Carica"}
</button> </button>
@@ -336,7 +336,7 @@ export function ProfiloAllenatore({ g }: { g: GiocatoreSquadra }) {
style={{ width: `${perc}%` }} style={{ width: `${perc}%` }}
/> />
</div> </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}% {perc}%
</span> </span>
</div> </div>
@@ -366,7 +366,7 @@ export function ProfiloAllenatore({ g }: { g: GiocatoreSquadra }) {
type="button" type="button"
onClick={() => void salva()} onClick={() => void salva()}
disabled={!sporco || inCorso} 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} {inCorso ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
{sporco ? "Salva" : "Salvato"} {sporco ? "Salva" : "Salvato"}
@@ -430,7 +430,7 @@ export function ProfiloAmministrativo({
style={{ width: `${perc}%` }} style={{ width: `${perc}%` }}
/> />
</div> </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}% {perc}%
</span> </span>
</div> </div>
@@ -472,7 +472,7 @@ export function ProfiloAmministrativo({
type="button" type="button"
onClick={salvaBozza} onClick={salvaBozza}
disabled={!sporco || salva.isPending} 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} {salva.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
{sporco ? "Salva" : "Salvato"} {sporco ? "Salva" : "Salvato"}
@@ -486,7 +486,9 @@ export function ProfiloAmministrativo({
<SezioneTendina <SezioneTendina
titolo="Dati per il tesseramento" titolo="Dati per il tesseramento"
indice={indice} 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} {corpo}
</SezioneTendina> </SezioneTendina>
@@ -521,10 +523,10 @@ export function CompletaProfilo({
className="premi block rounded-3xl bg-card p-4 shadow-card" className="premi block rounded-3xl bg-card p-4 shadow-card"
> >
<div className="flex items-center justify-between gap-3"> <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 Completa il tuo profilo
</span> </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>
<div className="mt-2 h-1.5 overflow-hidden rounded-full bg-secondary"> <div className="mt-2 h-1.5 overflow-hidden rounded-full bg-secondary">
<div <div
@@ -532,7 +534,7 @@ export function CompletaProfilo({
style={{ width: `${perc}%` }} style={{ width: `${perc}%` }}
/> />
</div> </div>
<p className="mt-2 text-[13px] text-muted-foreground"> <p className="mt-2 text-[14px] text-muted-foreground">
{allenatore {allenatore
? "Data e luogo di nascita, telefono ed email." ? "Data e luogo di nascita, telefono ed email."
: "Documento e certificato medico servono per il tesseramento CSI."} : "Documento e certificato medico servono per il tesseramento CSI."}
+11 -11
View File
@@ -70,7 +70,7 @@ export function RosaPresenze({
<div className="space-y-3"> <div className="space-y-3">
<Card> <Card>
<div className="flex items-baseline justify-between"> <div className="flex items-baseline justify-between">
<p className="text-sm font-bold"> <p className="text-[15px] font-bold">
Hanno risposto {risposteN}/{rosa.length} Hanno risposto {risposteN}/{rosa.length}
</p> </p>
<span className="font-display text-xl leading-none">{perc}%</span> <span className="font-display text-xl leading-none">{perc}%</span>
@@ -84,7 +84,7 @@ export function RosaPresenze({
<span <span
key={s} key={s}
className={cn( 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", n > 0 ? statoMeta[s].className : "bg-secondary text-muted-foreground",
)} )}
> >
@@ -92,14 +92,14 @@ export function RosaPresenze({
</span> </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 ❔ {mancanti.length} da rispondere
</span> </span>
</div> </div>
{io ? ( {io ? (
<div className="mt-4 border-t border-border pt-3"> <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 La tua risposta
</p> </p>
<div className="mt-2 flex flex-wrap gap-1.5"> <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 }) salva.mutate({ eventoId, giocatoreId: io.id, stato: attivo ? null : s })
} }
className={cn( 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 attivo
? cn(statoMeta[s].className, "border-transparent shadow-card") ? cn(statoMeta[s].className, "border-transparent shadow-card")
: "bg-background text-muted-foreground", : "bg-background text-muted-foreground",
@@ -133,7 +133,7 @@ export function RosaPresenze({
type="button" type="button"
onClick={sollecita} onClick={sollecita}
disabled={sollecito || daSollecitare === 0 || passato} 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 ? ( {sollecito ? (
<Loader2 className="h-4 w-4 animate-spin" /> <Loader2 className="h-4 w-4 animate-spin" />
@@ -146,7 +146,7 @@ export function RosaPresenze({
</Card> </Card>
{isPending ? ( {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… Carico le risposte…
</p> </p>
) : null} ) : null}
@@ -194,16 +194,16 @@ function Gruppo({
attenzione && "border border-dashed border-warning", 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} {titolo} · {n}
{attenzione ? <HelpCircle className="h-3.5 w-3.5 text-warning" /> : null} {attenzione ? <HelpCircle className="h-3.5 w-3.5 text-warning" /> : null}
</p> </p>
<div className="mt-3 space-y-2"> <div className="mt-3 space-y-2">
{lista.map((g) => ( {lista.map((g) => (
<div key={g.id} className="flex items-center gap-3"> <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" /> <Avatar id={g.id} fallback={String(g.numero)} className="h-8 w-8 text-[13px]" />
<span className="min-w-0 flex-1 truncate text-sm font-semibold">{g.nome}</span> <span className="min-w-0 flex-1 truncate text-[15px] font-semibold">{g.nome}</span>
<span className="shrink-0 text-xs text-muted-foreground">{g.ruolo}</span> <span className="shrink-0 text-[13px] text-muted-foreground">{g.ruolo}</span>
</div> </div>
))} ))}
</div> </div>
+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" />} {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="min-w-0 flex-1">
<span className="block font-display text-lg uppercase leading-none">{titolo}</span> <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> </span>
{disponibile ? <ChevronRight className="h-5 w-5 shrink-0" /> : null} {disponibile ? <ChevronRight className="h-5 w-5 shrink-0" /> : null}
</> </>
+6 -6
View File
@@ -28,8 +28,8 @@ export function SerieGriglia({ g }: { g: Giocatore }) {
<Icon className="h-5 w-5" /> <Icon className="h-5 w-5" />
</span> </span>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="text-sm font-bold leading-tight">{s.def.label}</p> <p className="text-[15px] font-bold leading-tight">{s.def.label}</p>
<p className="text-xs text-muted-foreground">{s.def.descrizione}</p> <p className="text-[13px] text-muted-foreground">{s.def.descrizione}</p>
</div> </div>
<span className="inline-flex items-center gap-1 font-display text-2xl leading-none"> <span className="inline-flex items-center gap-1 font-display text-2xl leading-none">
<Flame <Flame
@@ -39,7 +39,7 @@ export function SerieGriglia({ g }: { g: Giocatore }) {
</span> </span>
</div> </div>
<Barra percentuale={s.progresso} trackClassName="mt-3" /> <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.prossimo ? `${s.valore}/${s.prossimo} · ` : ""}
{s.messaggio} {s.messaggio}
</p> </p>
@@ -61,17 +61,17 @@ export function SerieHome({ g }: { g: Giocatore }) {
<Icon className="h-5 w-5" /> <Icon className="h-5 w-5" />
</span> </span>
<div className="min-w-0 flex-1"> <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} Serie {top.def.label.toLowerCase()}: {top.valore}
</p> </p>
<p className="text-xs text-muted-foreground">{top.messaggio}</p> <p className="text-[13px] text-muted-foreground">{top.messaggio}</p>
</div> </div>
</div> </div>
<div className="mt-3 grid grid-cols-3 gap-2"> <div className="mt-3 grid grid-cols-3 gap-2">
{serieGiocatore(g).map((s) => ( {serieGiocatore(g).map((s) => (
<div key={s.def.tipo} className="rounded-2xl bg-secondary p-2 text-center"> <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="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} {s.def.label}
</p> </p>
</div> </div>
+8 -8
View File
@@ -81,10 +81,10 @@ export function SondaggioCacche({
if (!sondaggioAperto(dataEvento, oraEvento)) { if (!sondaggioAperto(dataEvento, oraEvento)) {
return ( return (
<Card> <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 💩 Sondaggio pre-partita
</p> </p>
<p className="mt-1 text-xs text-muted-foreground"> <p className="mt-1 text-[13px] text-muted-foreground">
{sondaggioTerminato(dataEvento, oraEvento) {sondaggioTerminato(dataEvento, oraEvento)
? "Sondaggio chiuso: era aperto fino al fischio d'inizio." ? "Sondaggio chiuso: era aperto fino al fischio d'inizio."
: "Apre alle 8:00 del giorno della partita: riceverai una notifica."} : "Apre alle 8:00 del giorno della partita: riceverai una notifica."}
@@ -96,14 +96,14 @@ export function SondaggioCacche({
return ( return (
<Card> <Card>
<div className="flex items-center justify-between gap-2"> <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 💩 Sondaggio pre-partita
</p> </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 {dellaPartita.length} risposte
</span> </span>
</div> </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. Quante cacche hai fatto prima di questa partita? Dato scientifico fondamentale.
</p> </p>
@@ -115,7 +115,7 @@ export function SondaggioCacche({
disabled={!io || salva.isPending} disabled={!io || salva.isPending}
onClick={() => rispondi(n)} onClick={() => rispondi(n)}
className={cn( 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 mia?.quantita === n
? "bg-accent text-accent-foreground shadow-pop" ? "bg-accent text-accent-foreground shadow-pop"
: "bg-secondary text-foreground", : "bg-secondary text-foreground",
@@ -126,7 +126,7 @@ export function SondaggioCacche({
))} ))}
</div> </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"> <span className="rounded-full bg-secondary px-2.5 py-1 font-semibold">
Media squadra {media} Media squadra {media}
</span> </span>
@@ -145,7 +145,7 @@ export function SondaggioCacche({
type="button" type="button"
onClick={avvisaTutti} onClick={avvisaTutti}
disabled={avviso} 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" />} {avviso ? <Loader2 className="h-4 w-4 animate-spin" /> : <BellRing className="h-4 w-4" />}
Avvisa tutti del sondaggio Avvisa tutti del sondaggio
+6 -6
View File
@@ -74,16 +74,16 @@ export function TurnoPalloni({ eventoId }: { eventoId: string }) {
<CircleDot className="h-4 w-4" /> <CircleDot className="h-4 w-4" />
</span> </span>
<span className="min-w-0 flex-1"> <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 Palloni
</span> </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 ? ( {isPending || assegna.isPending ? (
<Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" /> <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
) : null} ) : null}
<span className="truncate">{giocatore ? nomeCompleto(giocatore) : "Da assegnare"}</span> <span className="truncate">{giocatore ? nomeCompleto(giocatore) : "Da assegnare"}</span>
{proposto && giocatore ? ( {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 proposto
</span> </span>
) : null} ) : null}
@@ -100,11 +100,11 @@ export function TurnoPalloni({ eventoId }: { eventoId: string }) {
type="button" type="button"
onClick={() => scegli(g.id)} onClick={() => scegli(g.id)}
className={cn( 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", 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> <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} {g.id === id ? <Check className="h-4 w-4 shrink-0 text-accent" /> : null}
</button> </button>
@@ -117,7 +117,7 @@ export function TurnoPalloni({ eventoId }: { eventoId: string }) {
type="button" type="button"
onClick={avvisa} onClick={avvisa}
disabled={avviso} 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 ? ( {avviso ? (
<Loader2 className="h-3.5 w-3.5 animate-spin" /> <Loader2 className="h-3.5 w-3.5 animate-spin" />
+9 -9
View File
@@ -46,10 +46,10 @@ export function VotazioneMvp({ evento }: { evento: Evento }) {
if (!votoMvpAperto(evento.data, evento.ora)) { if (!votoMvpAperto(evento.data, evento.ora)) {
return ( return (
<div className="mt-3 rounded-2xl bg-secondary/60 p-3"> <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 <Vote className="h-3.5 w-3.5" /> Voto MVP
</p> </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. Apre {ORE_ATTESA_MVP} ore dopo l'inizio della partita.
</p> </p>
</div> </div>
@@ -75,20 +75,20 @@ export function VotazioneMvp({ evento }: { evento: Evento }) {
return ( return (
<div className="mt-3 rounded-2xl bg-secondary/60 p-3"> <div className="mt-3 rounded-2xl bg-secondary/60 p-3">
<div className="flex items-center justify-between gap-2"> <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"} <Vote className="h-3.5 w-3.5" /> Voto MVP · {totale} {totale === 1 ? "voto" : "voti"}
</p> </p>
<button <button
type="button" type="button"
onClick={() => setAperto((v) => !v)} onClick={() => setAperto((v) => !v)}
disabled={!puoVotare} 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"} {mio ? "Cambia voto" : "Vota"}
</button> </button>
</div> </div>
<p className="mt-2 text-xs"> <p className="mt-2 text-[13px]">
{testa && !pareggio ? ( {testa && !pareggio ? (
<span className="inline-flex items-center gap-1 font-bold"> <span className="inline-flex items-center gap-1 font-bold">
<Crown className="h-3.5 w-3.5 text-warning" /> {testa.nome} ({testa.voti}) <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> </p>
{mio ? ( {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 ? ( ) : !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. Vota chi era presente a questa partita.
</p> </p>
) : null} ) : null}
@@ -120,7 +120,7 @@ export function VotazioneMvp({ evento }: { evento: Evento }) {
disabled={vota.isPending} disabled={vota.isPending}
onClick={() => invia(g.id, nomeCompleto(g))} onClick={() => invia(g.id, nomeCompleto(g))}
className={cn( 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 mio?.votato_id === g.id
? "bg-accent text-accent-foreground" ? "bg-accent text-accent-foreground"
: "bg-card text-foreground", : "bg-card text-foreground",
@@ -133,7 +133,7 @@ export function VotazioneMvp({ evento }: { evento: Evento }) {
) : conteggio.length > 0 ? ( ) : conteggio.length > 0 ? (
<div className="mt-2 flex flex-wrap gap-1.5"> <div className="mt-2 flex flex-wrap gap-1.5">
{conteggio.map((c) => ( {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} {c.nome} · {c.voti}
</span> </span>
))} ))}
+10 -8
View File
@@ -51,7 +51,7 @@ export function VotoSocial({ matchId }: { matchId: string }) {
return ( return (
<div className="space-y-2"> <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"> <span className="inline-flex items-center gap-1.5">
<Sparkles className="h-3.5 w-3.5 text-accent" /> <Sparkles className="h-3.5 w-3.5 text-accent" />
Hai votato {fatti}/{categorieSocial.length} categorie · un solo voto per categoria Hai votato {fatti}/{categorieSocial.length} categorie · un solo voto per categoria
@@ -79,14 +79,16 @@ export function VotoSocial({ matchId }: { matchId: string }) {
{cat.emoji} {cat.emoji}
</span> </span>
<span className="min-w-0 flex-1"> <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-[15px] font-bold leading-tight">
<span className="block truncate text-xs text-muted-foreground"> {cat.nome}
</span>
<span className="block truncate text-[13px] text-muted-foreground">
{mio ? `Hai votato ${mio.votato_nome}` : cat.descrizione} {mio ? `Hai votato ${mio.votato_nome}` : cat.descrizione}
</span> </span>
</span> </span>
<span <span
className={cn( 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", mio ? "bg-success text-success-foreground" : "bg-accent text-accent-foreground",
)} )}
> >
@@ -105,7 +107,7 @@ export function VotoSocial({ matchId }: { matchId: string }) {
disabled={vota.isPending} disabled={vota.isPending}
onClick={() => invia(cat.id, g.id, nomeCompleto(g))} onClick={() => invia(cat.id, g.id, nomeCompleto(g))}
className={cn( 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 mio?.votato_id === g.id
? "bg-accent text-accent-foreground" ? "bg-accent text-accent-foreground"
: "bg-secondary text-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"> <div className="border-t border-border px-3 py-2">
{totale === 0 ? ( {totale === 0 ? (
<p className="text-xs text-muted-foreground"> <p className="text-[13px] text-muted-foreground">
Nessun voto ancora: apri e scegli un compagno. Nessun voto ancora: apri e scegli un compagno.
</p> </p>
) : vincitore ? ( ) : 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" /> <Crown className="h-3.5 w-3.5 text-oro" />
<Icon className="h-3.5 w-3.5 text-accent" /> <Icon className="h-3.5 w-3.5 text-accent" />
{vincitore.nome} · {vincitore.voti} {vincitore.voti === 1 ? "voto" : "voti"} {vincitore.nome} · {vincitore.voti} {vincitore.voti === 1 ? "voto" : "voti"}
</p> </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. Parità con {totale} voti: servono altri voti per assegnare il badge.
</p> </p>
)} )}
+8 -8
View File
@@ -107,13 +107,13 @@ function RigaNotifica({
const arrivo = info.offset.x + proietta(info.velocity.x); const arrivo = info.offset.x + proietta(info.velocity.x);
if (arrivo < -60) onElimina(notifica.id); 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> <p className="font-semibold">{notifica.titolo}</p>
{notifica.corpo ? ( {notifica.corpo ? (
<p className="mt-0.5 whitespace-pre-line text-muted-foreground">{notifica.corpo}</p> <p className="mt-0.5 whitespace-pre-line text-muted-foreground">{notifica.corpo}</p>
) : null} ) : 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> </motion.div>
<button <button
type="button" type="button"
@@ -254,7 +254,7 @@ export function PageHeader({
<div className="min-w-0"> <div className="min-w-0">
<h1 className="truncate font-display-lg text-3xl uppercase">{titolo}</h1> <h1 className="truncate font-display-lg text-3xl uppercase">{titolo}</h1>
{sottotitolo ? ( {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} ) : null}
</div> </div>
{azione ?? <LinkProfilo />} {azione ?? <LinkProfilo />}
@@ -338,7 +338,7 @@ export function SezioneTendina({
* parità di padding — un'altezza esplicita allinea tutti i campi tra loro. * parità di padding — un'altezza esplicita allinea tutti i campi tra loro.
*/ */
export const classiInput = 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 * 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 }) { export function Campo({ label, children }: { label: string; children: ReactNode }) {
return ( return (
<label className="block min-w-0"> <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} {label}
</span> </span>
<span className="mt-1 block">{children}</span> <span className="mt-1 block">{children}</span>
@@ -378,7 +378,7 @@ export function StatoBadge({ stato, className }: { stato: Stato; className?: str
return ( return (
<span <span
className={cn( 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, meta.className,
className, className,
)} )}
@@ -402,10 +402,10 @@ export function StatTile({
<p className="font-display text-2xl leading-none"> <p className="font-display text-2xl leading-none">
{typeof valore === "number" ? <Numero valore={valore} /> : valore} {typeof valore === "number" ? <Numero valore={valore} /> : valore}
</p> </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} {label}
</p> </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> </div>
); );
} }
+1 -1
View File
@@ -78,7 +78,7 @@ const DrawerDescription = React.forwardRef<
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<DrawerPrimitive.Description <DrawerPrimitive.Description
ref={ref} ref={ref}
className={cn("text-sm text-muted-foreground", className)} className={cn("text-[15px] text-muted-foreground", className)}
{...props} {...props}
/> />
)); ));
+5 -5
View File
@@ -27,13 +27,13 @@ function NotFoundComponent() {
<div className="max-w-md text-center"> <div className="max-w-md text-center">
<h1 className="font-display-lg text-7xl text-foreground">404</h1> <h1 className="font-display-lg text-7xl text-foreground">404</h1>
<h2 className="mt-4 text-xl font-semibold text-foreground">Pagina non trovata</h2> <h2 className="mt-4 text-xl font-semibold text-foreground">Pagina non trovata</h2>
<p className="mt-2 text-sm text-muted-foreground"> <p className="mt-2 text-[15px] text-muted-foreground">
La pagina che cerchi non esiste o è stata spostata. La pagina che cerchi non esiste o è stata spostata.
</p> </p>
<div className="mt-6"> <div className="mt-6">
<Link <Link
to="/" to="/"
className="premi inline-flex min-h-11 items-center justify-center rounded-2xl bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground" className="premi inline-flex min-h-11 items-center justify-center rounded-2xl bg-primary px-4 py-2 text-[15px] font-semibold text-primary-foreground"
> >
Torna alla home Torna alla home
</Link> </Link>
@@ -53,7 +53,7 @@ function ErrorComponent({ error, reset }: { error: unknown; reset: () => void })
<h1 className="text-xl font-semibold tracking-tight text-foreground"> <h1 className="text-xl font-semibold tracking-tight text-foreground">
Questa pagina non si è caricata Questa pagina non si è caricata
</h1> </h1>
<p className="mt-2 text-sm text-muted-foreground"> <p className="mt-2 text-[15px] text-muted-foreground">
Qualcosa è andato storto da parte nostra. Puoi riprovare o tornare alla home. Qualcosa è andato storto da parte nostra. Puoi riprovare o tornare alla home.
</p> </p>
<div className="mt-6 flex flex-wrap justify-center gap-2"> <div className="mt-6 flex flex-wrap justify-center gap-2">
@@ -63,13 +63,13 @@ function ErrorComponent({ error, reset }: { error: unknown; reset: () => void })
router.invalidate(); router.invalidate();
reset(); reset();
}} }}
className="premi inline-flex min-h-11 items-center justify-center rounded-2xl bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground" className="premi inline-flex min-h-11 items-center justify-center rounded-2xl bg-primary px-4 py-2 text-[15px] font-semibold text-primary-foreground"
> >
Riprova Riprova
</button> </button>
<a <a
href="/" href="/"
className="premi inline-flex min-h-11 items-center justify-center rounded-2xl border border-border bg-card px-4 py-2 text-sm font-semibold text-foreground" className="premi inline-flex min-h-11 items-center justify-center rounded-2xl border border-border bg-card px-4 py-2 text-[15px] font-semibold text-foreground"
> >
Torna alla home Torna alla home
</a> </a>
+23 -23
View File
@@ -184,7 +184,7 @@ function ModificaGiocatore({ g, profilo }: { g: GiocatoreSquadra; profilo: Profi
return ( return (
<div className="mt-3 space-y-3 border-t border-border pt-3"> <div className="mt-3 space-y-3 border-t border-border pt-3">
<h3 className="font-display text-sm uppercase tracking-wide">Dati squadra</h3> <h3 className="font-display text-[15px] uppercase tracking-wide">Dati squadra</h3>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<Campo label="Nome"> <Campo label="Nome">
<input <input
@@ -244,14 +244,14 @@ function ModificaGiocatore({ g, profilo }: { g: GiocatoreSquadra; profilo: Profi
type="button" type="button"
onClick={confermaSquadra} onClick={confermaSquadra}
disabled={!datiSquadra || salvaSquadra.isPending} disabled={!datiSquadra || salvaSquadra.isPending}
className="premi w-full rounded-2xl bg-primary py-2.5 text-xs font-bold uppercase text-primary-foreground disabled:opacity-50" className="premi w-full rounded-2xl bg-primary py-2.5 text-[13px] font-bold uppercase text-primary-foreground disabled:opacity-50"
> >
Salva dati squadra Salva dati squadra
</button> </button>
{allenatore ? ( {allenatore ? (
<> <>
<h3 className="font-display text-sm uppercase tracking-wide">Dati personali</h3> <h3 className="font-display text-[15px] uppercase tracking-wide">Dati personali</h3>
<CampiAllenatore <CampiAllenatore
corrente={profiloCorrente} corrente={profiloCorrente}
aggiorna={(patch) => setBozza({ ...profiloCorrente, ...patch })} aggiorna={(patch) => setBozza({ ...profiloCorrente, ...patch })}
@@ -268,12 +268,12 @@ function ModificaGiocatore({ g, profilo }: { g: GiocatoreSquadra; profilo: Profi
type="button" type="button"
onClick={confermaProfilo} onClick={confermaProfilo}
disabled={!bozza || salvaProfilo.isPending} disabled={!bozza || salvaProfilo.isPending}
className="premi w-full rounded-2xl bg-primary py-2.5 text-xs font-bold uppercase text-primary-foreground disabled:opacity-50" className="premi w-full rounded-2xl bg-primary py-2.5 text-[13px] font-bold uppercase text-primary-foreground disabled:opacity-50"
> >
Salva dati personali Salva dati personali
</button> </button>
<div className="flex items-center justify-between gap-3 border-t border-border pt-3 text-xs"> <div className="flex items-center justify-between gap-3 border-t border-border pt-3 text-[13px]">
<span className="min-w-0 text-muted-foreground"> <span className="min-w-0 text-muted-foreground">
{g.authUserId ? "Account collegato" : "Nessun account collegato"} {g.authUserId ? "Account collegato" : "Nessun account collegato"}
</span> </span>
@@ -344,7 +344,7 @@ function Documento({
onClick={scarica} onClick={scarica}
disabled={!path || inCorso} disabled={!path || inCorso}
className={cn( className={cn(
"premi flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-bold uppercase disabled:opacity-60", "premi flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[13px] font-bold uppercase disabled:opacity-60",
statoClasse[stato], statoClasse[stato],
)} )}
> >
@@ -382,12 +382,12 @@ function SchedaGiocatore({
return ( return (
<Reveal indice={indice} className="rounded-2xl bg-card p-4 shadow-card"> <Reveal indice={indice} className="rounded-2xl bg-card p-4 shadow-card">
<button type="button" onClick={onToggle} className="flex w-full items-center gap-3 text-left"> <button type="button" onClick={onToggle} className="flex w-full items-center gap-3 text-left">
<div className="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-secondary font-display text-sm tabular-nums"> <div className="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-secondary font-display text-[15px] tabular-nums">
{allenatore ? "All" : numero} {allenatore ? "All" : numero}
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="truncate font-semibold leading-tight">{nome}</p> <p className="truncate font-semibold leading-tight">{nome}</p>
<p className="text-xs text-muted-foreground"> <p className="text-[13px] text-muted-foreground">
{ruoloVisibile(g)} · profilo {perc}% {ruoloVisibile(g)} · profilo {perc}%
</p> </p>
</div> </div>
@@ -480,7 +480,7 @@ function AggiungiGiocatore({ righe }: { righe: GiocatoreSquadra[] }) {
<button <button
type="button" type="button"
onClick={() => setAperto(true)} onClick={() => setAperto(true)}
className="premi mt-3 flex w-full items-center justify-center gap-2 rounded-2xl bg-secondary py-3 text-sm font-bold uppercase" className="premi mt-3 flex w-full items-center justify-center gap-2 rounded-2xl bg-secondary py-3 text-[15px] font-bold uppercase"
> >
<UserPlus className="h-4 w-4" /> Aggiungi giocatore o allenatore <UserPlus className="h-4 w-4" /> Aggiungi giocatore o allenatore
</button> </button>
@@ -489,7 +489,7 @@ function AggiungiGiocatore({ righe }: { righe: GiocatoreSquadra[] }) {
return ( return (
<div className="mt-3 space-y-3 rounded-2xl bg-card p-4 shadow-card"> <div className="mt-3 space-y-3 rounded-2xl bg-card p-4 shadow-card">
<h3 className="font-display text-sm uppercase tracking-wide"> <h3 className="font-display text-[15px] uppercase tracking-wide">
{allenatore ? "Nuovo allenatore" : "Nuovo giocatore"} {allenatore ? "Nuovo allenatore" : "Nuovo giocatore"}
</h3> </h3>
<Campo label="Tipo"> <Campo label="Tipo">
@@ -563,7 +563,7 @@ function AggiungiGiocatore({ righe }: { righe: GiocatoreSquadra[] }) {
setAperto(false); setAperto(false);
setDati(datiVuoti); setDati(datiVuoti);
}} }}
className="premi flex-1 rounded-2xl bg-secondary py-2.5 text-xs font-bold uppercase" className="premi flex-1 rounded-2xl bg-secondary py-2.5 text-[13px] font-bold uppercase"
> >
Annulla Annulla
</button> </button>
@@ -571,7 +571,7 @@ function AggiungiGiocatore({ righe }: { righe: GiocatoreSquadra[] }) {
type="button" type="button"
onClick={() => void conferma()} onClick={() => void conferma()}
disabled={aggiungi.isPending} disabled={aggiungi.isPending}
className="premi flex-1 rounded-2xl bg-primary py-2.5 text-xs font-bold uppercase text-primary-foreground disabled:opacity-50" className="premi flex-1 rounded-2xl bg-primary py-2.5 text-[13px] font-bold uppercase text-primary-foreground disabled:opacity-50"
> >
Aggiungi Aggiungi
</button> </button>
@@ -598,7 +598,7 @@ function GiocatoreDisattivato({ g }: { g: GiocatoreSquadra }) {
<div className="flex items-center justify-between gap-3 rounded-2xl bg-card p-3 shadow-card"> <div className="flex items-center justify-between gap-3 rounded-2xl bg-card p-3 shadow-card">
<div className="min-w-0"> <div className="min-w-0">
<p className="truncate font-semibold leading-tight">{nomeCompleto(g)}</p> <p className="truncate font-semibold leading-tight">{nomeCompleto(g)}</p>
<p className="text-xs text-muted-foreground"> <p className="text-[13px] text-muted-foreground">
{isAllenatore(g) ? ruoloVisibile(g) : `#${g.numero} · ${g.ruolo}`} {isAllenatore(g) ? ruoloVisibile(g) : `#${g.numero} · ${g.ruolo}`}
</p> </p>
</div> </div>
@@ -606,7 +606,7 @@ function GiocatoreDisattivato({ g }: { g: GiocatoreSquadra }) {
type="button" type="button"
onClick={() => void riattiva()} onClick={() => void riattiva()}
disabled={impostaAttivo.isPending} disabled={impostaAttivo.isPending}
className="premi flex shrink-0 items-center gap-1.5 rounded-xl bg-success px-3 py-2 text-xs font-bold text-success-foreground disabled:opacity-50" className="premi flex shrink-0 items-center gap-1.5 rounded-xl bg-success px-3 py-2 text-[13px] font-bold text-success-foreground disabled:opacity-50"
> >
<UserCheck className="h-3.5 w-3.5" /> Riattiva <UserCheck className="h-3.5 w-3.5" /> Riattiva
</button> </button>
@@ -653,7 +653,7 @@ function Dashboard() {
<> <>
<PageHeader titolo="Dashboard" sottotitolo="Area riservata" /> <PageHeader titolo="Dashboard" sottotitolo="Area riservata" />
<div className="px-5 pt-4"> <div className="px-5 pt-4">
<p className="flex items-center justify-center gap-2 rounded-3xl bg-card p-5 text-center text-sm text-muted-foreground shadow-card"> <p className="flex items-center justify-center gap-2 rounded-3xl bg-card p-5 text-center text-[15px] text-muted-foreground shadow-card">
<Lock className="h-4 w-4 shrink-0" /> <Lock className="h-4 w-4 shrink-0" />
Riservata agli amministratori della squadra. Riservata agli amministratori della squadra.
</p> </p>
@@ -689,7 +689,7 @@ function Dashboard() {
<button <button
type="button" type="button"
onClick={() => scaricaCsv(`tesseramento-csi-${oggi}.csv`, csvTesseramento(attivi, profili))} onClick={() => scaricaCsv(`tesseramento-csi-${oggi}.csv`, csvTesseramento(attivi, profili))}
className="premi mt-3 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" className="premi mt-3 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"
> >
<Download className="h-4 w-4" /> Esporta CSV tesseramento <Download className="h-4 w-4" /> Esporta CSV tesseramento
</button> </button>
@@ -698,7 +698,7 @@ function Dashboard() {
); );
const contenutoProfili = isPending ? ( const contenutoProfili = isPending ? (
<p className="rounded-2xl bg-card p-5 text-center text-sm text-muted-foreground shadow-card"> <p className="rounded-2xl bg-card p-5 text-center text-[15px] text-muted-foreground shadow-card">
Caricamento… Caricamento…
</p> </p>
) : ( ) : (
@@ -715,7 +715,7 @@ function Dashboard() {
/> />
))} ))}
{allenatori.length > 0 ? ( {allenatori.length > 0 ? (
<h3 className="pt-2 font-display text-sm uppercase tracking-wide">Allenatori</h3> <h3 className="pt-2 font-display text-[15px] uppercase tracking-wide">Allenatori</h3>
) : null} ) : null}
{allenatori.map((g, i) => ( {allenatori.map((g, i) => (
<SchedaGiocatore <SchedaGiocatore
@@ -748,7 +748,7 @@ function Dashboard() {
<button <button
type="button" type="button"
onClick={() => setDestinatarioMessaggio({ nome: "tutta la squadra" })} onClick={() => setDestinatarioMessaggio({ nome: "tutta la squadra" })}
className="premi mt-3 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" className="premi mt-3 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"
> >
<Send className="h-4 w-4" /> Invia messaggio a tutti <Send className="h-4 w-4" /> Invia messaggio a tutti
</button> </button>
@@ -764,7 +764,7 @@ function Dashboard() {
)} )}
<p <p
className={cn( className={cn(
"min-w-0 flex-1 truncate text-sm font-semibold leading-tight", "min-w-0 flex-1 truncate text-[15px] font-semibold leading-tight",
!attiva && "text-muted-foreground", !attiva && "text-muted-foreground",
)} )}
> >
@@ -784,7 +784,7 @@ function Dashboard() {
</div> </div>
</> </>
) : ( ) : (
<p className="rounded-2xl bg-card p-5 text-center text-sm text-muted-foreground shadow-card"> <p className="rounded-2xl bg-card p-5 text-center text-[15px] text-muted-foreground shadow-card">
Caricamento… Caricamento…
</p> </p>
); );
@@ -838,7 +838,7 @@ function Dashboard() {
type="button" type="button"
onClick={inviaMessaggio} onClick={inviaMessaggio}
disabled={inviaNotifica.isPending || !messaggio.trim()} disabled={inviaNotifica.isPending || !messaggio.trim()}
className="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="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"
> >
{inviaNotifica.isPending ? ( {inviaNotifica.isPending ? (
<Loader2 className="h-4 w-4 animate-spin" /> <Loader2 className="h-4 w-4 animate-spin" />
@@ -850,7 +850,7 @@ function Dashboard() {
<DrawerClose asChild> <DrawerClose asChild>
<button <button
type="button" type="button"
className="w-full rounded-2xl bg-secondary py-3 text-sm font-bold uppercase text-foreground" className="w-full rounded-2xl bg-secondary py-3 text-[15px] font-bold uppercase text-foreground"
> >
Annulla Annulla
</button> </button>
+7 -5
View File
@@ -43,7 +43,9 @@ function AllenamentoDetail() {
if (!evento) { if (!evento) {
return ( return (
<div className="px-5 pt-8"> <div className="px-5 pt-8">
<p className="mt-8 text-center text-sm text-muted-foreground">Allenamento non trovato</p> <p className="mt-8 text-center text-[15px] text-muted-foreground">
Allenamento non trovato
</p>
</div> </div>
); );
} }
@@ -59,14 +61,14 @@ function AllenamentoDetail() {
<Dumbbell className="h-6 w-6" /> <Dumbbell className="h-6 w-6" />
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="text-xs font-bold uppercase tracking-wide text-muted-foreground"> <p className="text-[13px] font-bold uppercase tracking-wide text-muted-foreground">
Allenamento di squadra Allenamento di squadra
</p> </p>
<p className="truncate text-lg font-bold leading-tight">{evento.titolo}</p> <p className="truncate text-lg font-bold leading-tight">{evento.titolo}</p>
</div> </div>
</div> </div>
<div className="mt-4 space-y-2 text-sm text-muted-foreground"> <div className="mt-4 space-y-2 text-[15px] text-muted-foreground">
<span className="inline-flex items-center gap-2"> <span className="inline-flex items-center gap-2">
<Clock className="h-4 w-4" /> {evento.ora} <Clock className="h-4 w-4" /> {evento.ora}
</span> </span>
@@ -76,12 +78,12 @@ function AllenamentoDetail() {
</div> </div>
{evento.note ? ( {evento.note ? (
<p className="mt-3 whitespace-pre-line rounded-2xl bg-secondary px-3 py-2 text-sm"> <p className="mt-3 whitespace-pre-line rounded-2xl bg-secondary px-3 py-2 text-[15px]">
{evento.note} {evento.note}
</p> </p>
) : null} ) : null}
<div className="mt-4 inline-flex items-center gap-2 rounded-full bg-secondary px-3 py-1.5 text-xs font-semibold"> <div className="mt-4 inline-flex items-center gap-2 rounded-full bg-secondary px-3 py-1.5 text-[13px] font-semibold">
<Users className="h-4 w-4" /> <Users className="h-4 w-4" />
Conferme: {presentiVeri}/{convocatiEvento(evento, rosa).length} Conferme: {presentiVeri}/{convocatiEvento(evento, rosa).length}
</div> </div>
+5 -5
View File
@@ -107,34 +107,34 @@ function Benvenuto() {
{!pronta ? null : !utenteId ? ( {!pronta ? null : !utenteId ? (
<> <>
<p className="mt-2 text-center text-sm text-muted-foreground"> <p className="mt-2 text-center text-[15px] text-muted-foreground">
Accedi con il tuo account Google per collegare il profilo giocatore. Accedi con il tuo account Google per collegare il profilo giocatore.
</p> </p>
<button <button
type="button" type="button"
onClick={accedi} onClick={accedi}
disabled={inCorso} disabled={inCorso}
className="premi mt-8 flex w-full max-w-sm items-center justify-center gap-2 rounded-2xl bg-accent-grad py-3.5 text-sm font-bold uppercase text-accent-foreground shadow-pop disabled:opacity-60" className="premi mt-8 flex w-full max-w-sm items-center justify-center gap-2 rounded-2xl bg-accent-grad py-3.5 text-[15px] font-bold uppercase text-accent-foreground shadow-pop disabled:opacity-60"
> >
<LogIn className="h-4 w-4" /> Accedi con Google <LogIn className="h-4 w-4" /> Accedi con Google
</button> </button>
</> </>
) : erroreCollegamento ? ( ) : erroreCollegamento ? (
<> <>
<p className="mt-2 text-center text-sm text-muted-foreground"> <p className="mt-2 text-center text-[15px] text-muted-foreground">
Nessun profilo trovato per la tua email. Contatta un amministratore per collegare il tuo Nessun profilo trovato per la tua email. Contatta un amministratore per collegare il tuo
account. account.
</p> </p>
<button <button
type="button" type="button"
onClick={() => void esciERiprova()} onClick={() => void esciERiprova()}
className="premi mt-8 flex w-full max-w-sm items-center justify-center gap-2 rounded-2xl bg-secondary py-3.5 text-sm font-bold uppercase shadow-card" className="premi mt-8 flex w-full max-w-sm items-center justify-center gap-2 rounded-2xl bg-secondary py-3.5 text-[15px] font-bold uppercase shadow-card"
> >
<LogOut className="h-4 w-4" /> Esci <LogOut className="h-4 w-4" /> Esci
</button> </button>
</> </>
) : inAttesaCollegamento ? ( ) : inAttesaCollegamento ? (
<p className="mt-2 text-center text-sm text-muted-foreground"> <p className="mt-2 text-center text-[15px] text-muted-foreground">
Ti stiamo collegando al tuo profilo... Ti stiamo collegando al tuo profilo...
</p> </p>
) : null} ) : null}
+8 -8
View File
@@ -119,7 +119,7 @@ function Calendario() {
</button> </button>
</div> </div>
<div className="grid grid-cols-7 gap-1 text-center text-xs font-bold text-muted-foreground"> <div className="grid grid-cols-7 gap-1 text-center text-[13px] font-bold text-muted-foreground">
{giorniIT.map((g, i) => ( {giorniIT.map((g, i) => (
<span key={i}>{g}</span> <span key={i}>{g}</span>
))} ))}
@@ -192,7 +192,7 @@ function Calendario() {
onClick={haEventi ? () => apriGiorno(giorno) : undefined} onClick={haEventi ? () => apriGiorno(giorno) : undefined}
style={sfondo ? { backgroundImage: sfondo } : undefined} style={sfondo ? { backgroundImage: sfondo } : undefined}
className={cn( className={cn(
"relative grid aspect-square place-items-center rounded-xl text-sm font-semibold", "relative grid aspect-square place-items-center rounded-xl text-[15px] font-semibold",
tipo === "partita" && "bg-accent text-accent-foreground", tipo === "partita" && "bg-accent text-accent-foreground",
tipo === "allenamento" && "bg-training text-training-foreground", tipo === "allenamento" && "bg-training text-training-foreground",
tipo === "evento" && "bg-warning text-warning-foreground", tipo === "evento" && "bg-warning text-warning-foreground",
@@ -224,10 +224,10 @@ function Calendario() {
</motion.div> </motion.div>
</AnimatePresence> </AnimatePresence>
</div> </div>
<p className="mt-2 text-xs text-muted-foreground"> <p className="mt-2 text-[13px] text-muted-foreground">
Scorri a destra o sinistra per cambiare mese. Scorri a destra o sinistra per cambiare mese.
</p> </p>
<div className="mt-3 flex flex-wrap gap-3 text-xs font-semibold text-muted-foreground"> <div className="mt-3 flex flex-wrap gap-3 text-[13px] font-semibold text-muted-foreground">
<span className="inline-flex items-center gap-1"> <span className="inline-flex items-center gap-1">
<i className="h-2.5 w-2.5 rounded-full bg-accent" /> Partita <i className="h-2.5 w-2.5 rounded-full bg-accent" /> Partita
</span> </span>
@@ -248,7 +248,7 @@ function Calendario() {
<div className="px-5 pt-4"> <div className="px-5 pt-4">
<Link <Link
to="/eventi" to="/eventi"
className="premi flex items-center justify-center gap-2 rounded-2xl bg-accent-grad py-3 text-[14px] font-bold uppercase text-accent-foreground shadow-pop" className="premi flex items-center justify-center gap-2 rounded-2xl bg-accent-grad py-3 text-[15px] font-bold uppercase text-accent-foreground shadow-pop"
> >
<CalendarPlus className="h-4 w-4" /> Gestisci eventi <CalendarPlus className="h-4 w-4" /> Gestisci eventi
</Link> </Link>
@@ -263,7 +263,7 @@ function Calendario() {
return <EventoCard key={e.id} evento={e} {...(link ? { linkTo: link } : {})} />; return <EventoCard key={e.id} evento={e} {...(link ? { linkTo: link } : {})} />;
}) })
) : ( ) : (
<p className="rounded-3xl bg-card p-4 text-center text-sm text-muted-foreground shadow-card"> <p className="rounded-3xl bg-card p-4 text-center text-[15px] text-muted-foreground shadow-card">
Nessun evento in programma Nessun evento in programma
</p> </p>
)} )}
@@ -275,7 +275,7 @@ function Calendario() {
{compleanniMese.length > 0 ? ( {compleanniMese.length > 0 ? (
compleanniMese.map((c) => <EventoCard key={c.id} evento={c} />) compleanniMese.map((c) => <EventoCard key={c.id} evento={c} />)
) : ( ) : (
<p className="rounded-3xl bg-card p-4 text-center text-sm text-muted-foreground shadow-card"> <p className="rounded-3xl bg-card p-4 text-center text-[15px] text-muted-foreground shadow-card">
Nessun compleanno in {mesiIT[mese]!.toLowerCase()} Nessun compleanno in {mesiIT[mese]!.toLowerCase()}
</p> </p>
)} )}
@@ -300,7 +300,7 @@ function Calendario() {
return <EventoCard key={e.id} evento={e} {...(link ? { linkTo: link } : {})} />; return <EventoCard key={e.id} evento={e} {...(link ? { linkTo: link } : {})} />;
}) })
) : ( ) : (
<p className="rounded-3xl bg-card p-4 text-center text-sm text-muted-foreground shadow-card"> <p className="rounded-3xl bg-card p-4 text-center text-[15px] text-muted-foreground shadow-card">
Nessun evento in questa data Nessun evento in questa data
</p> </p>
)} )}
+15 -15
View File
@@ -82,7 +82,7 @@ export const Route = createFileRoute("/classifica")({
function TabellaClassifica({ righe, vuoto }: { righe: RigaClassifica[]; vuoto: string }) { function TabellaClassifica({ righe, vuoto }: { righe: RigaClassifica[]; vuoto: string }) {
return ( return (
<div className="overflow-hidden rounded-3xl bg-card shadow-card"> <div className="overflow-hidden rounded-3xl bg-card shadow-card">
<div className="grid grid-cols-[2rem_minmax(0,1fr)_2rem_2.5rem_2.5rem] gap-2 border-b border-border px-3 py-2 text-xs font-bold uppercase text-muted-foreground"> <div className="grid grid-cols-[2rem_minmax(0,1fr)_2rem_2.5rem_2.5rem] gap-2 border-b border-border px-3 py-2 text-[13px] font-bold uppercase text-muted-foreground">
<span>#</span> <span>#</span>
<span>Squadra</span> <span>Squadra</span>
<span className="text-center">G</span> <span className="text-center">G</span>
@@ -90,7 +90,7 @@ function TabellaClassifica({ righe, vuoto }: { righe: RigaClassifica[]; vuoto: s
<span className="text-center">Pt</span> <span className="text-center">Pt</span>
</div> </div>
{righe.length === 0 ? ( {righe.length === 0 ? (
<p className="px-3 py-4 text-center text-xs text-muted-foreground">{vuoto}</p> <p className="px-3 py-4 text-center text-[13px] text-muted-foreground">{vuoto}</p>
) : ( ) : (
righe.map((r) => { righe.map((r) => {
const noi = isNostraSquadra(r.squadra) || r.squadra === "CRAP Volley"; const noi = isNostraSquadra(r.squadra) || r.squadra === "CRAP Volley";
@@ -98,14 +98,14 @@ function TabellaClassifica({ righe, vuoto }: { righe: RigaClassifica[]; vuoto: s
<div <div
key={r.pos} key={r.pos}
className={cn( className={cn(
"grid grid-cols-[2rem_minmax(0,1fr)_2rem_2.5rem_2.5rem] items-center gap-2 border-b border-border px-3 py-2.5 text-sm last:border-0", "grid grid-cols-[2rem_minmax(0,1fr)_2rem_2.5rem_2.5rem] items-center gap-2 border-b border-border px-3 py-2.5 text-[15px] last:border-0",
noi && "bg-accent/10", noi && "bg-accent/10",
)} )}
> >
<span className={cn("font-display text-base", noi && "text-accent")}>{r.pos}</span> <span className={cn("font-display text-base", noi && "text-accent")}>{r.pos}</span>
<span className={cn("truncate", noi ? "font-bold" : "font-medium")}>{r.squadra}</span> <span className={cn("truncate", noi ? "font-bold" : "font-medium")}>{r.squadra}</span>
<span className="text-center text-xs text-muted-foreground">{r.giocate}</span> <span className="text-center text-[13px] text-muted-foreground">{r.giocate}</span>
<span className="text-center text-xs tabular-nums text-muted-foreground"> <span className="text-center text-[13px] tabular-nums text-muted-foreground">
{r.setFatti}:{r.setSubiti} {r.setFatti}:{r.setSubiti}
</span> </span>
<span className="text-center font-bold tabular-nums">{r.punti}</span> <span className="text-center font-bold tabular-nums">{r.punti}</span>
@@ -171,7 +171,7 @@ function Classifica() {
<> <>
<div <div
className={cn( className={cn(
"mb-3 flex items-center gap-2 rounded-2xl px-3 py-2 text-xs", "mb-3 flex items-center gap-2 rounded-2xl px-3 py-2 text-[13px]",
csi?.formatoSospetto csi?.formatoSospetto
? "bg-warning/15 text-warning" ? "bg-warning/15 text-warning"
: "bg-secondary text-muted-foreground", : "bg-secondary text-muted-foreground",
@@ -190,9 +190,9 @@ function Classifica() {
</div> </div>
{classificaCoppa.length > 0 ? ( {classificaCoppa.length > 0 ? (
<> <>
<h3 className="mb-2 px-1 text-sm font-bold text-foreground">Coppa</h3> <h3 className="mb-2 px-1 text-[15px] font-bold text-foreground">Coppa</h3>
<TabellaClassifica righe={classificaCoppa} vuoto="Classifica non disponibile." /> <TabellaClassifica righe={classificaCoppa} vuoto="Classifica non disponibile." />
<h3 className="mb-2 mt-4 px-1 text-sm font-bold text-foreground">Girone</h3> <h3 className="mb-2 mt-4 px-1 text-[15px] font-bold text-foreground">Girone</h3>
</> </>
) : null} ) : null}
<TabellaClassifica righe={classifica} vuoto="Classifica non ancora disponibile." /> <TabellaClassifica righe={classifica} vuoto="Classifica non ancora disponibile." />
@@ -204,14 +204,14 @@ function Classifica() {
const contenutoStorico = useMemo( const contenutoStorico = useMemo(
() => () =>
tuttiMatch.length === 0 ? ( tuttiMatch.length === 0 ? (
<p className="rounded-3xl bg-card p-4 text-center text-xs text-muted-foreground shadow-card"> <p className="rounded-3xl bg-card p-4 text-center text-[13px] text-muted-foreground shadow-card">
Nessuna partita disponibile. Nessuna partita disponibile.
</p> </p>
) : ( ) : (
<div className="space-y-5"> <div className="space-y-5">
{raggruppaPerStagione(tuttiMatch).map(({ stagione, match }) => ( {raggruppaPerStagione(tuttiMatch).map(({ stagione, match }) => (
<section key={stagione} className="space-y-3"> <section key={stagione} className="space-y-3">
<h3 className="px-1 text-sm font-bold text-foreground">Stagione {stagione}</h3> <h3 className="px-1 text-[15px] font-bold text-foreground">Stagione {stagione}</h3>
{match.map((m) => { {match.map((m) => {
const vinta = m.setNostri > m.setLoro; const vinta = m.setNostri > m.setLoro;
const eventoId = eventoIdPerData.get(m.data); const eventoId = eventoIdPerData.get(m.data);
@@ -237,7 +237,7 @@ function Classifica() {
logoAvversario={m.logoAvversario} logoAvversario={m.logoAvversario}
avversario={m.avversario} avversario={m.avversario}
/> />
<p className="truncate text-sm font-bold">{casa.nome}</p> <p className="truncate text-[15px] font-bold">{casa.nome}</p>
</div> </div>
<div className="flex min-w-0 items-center gap-2"> <div className="flex min-w-0 items-center gap-2">
<LogoPartita <LogoPartita
@@ -245,9 +245,9 @@ function Classifica() {
logoAvversario={m.logoAvversario} logoAvversario={m.logoAvversario}
avversario={m.avversario} avversario={m.avversario}
/> />
<p className="truncate text-sm font-bold">{trasferta.nome}</p> <p className="truncate text-[15px] font-bold">{trasferta.nome}</p>
</div> </div>
<p className="text-xs text-muted-foreground"> <p className="text-[13px] text-muted-foreground">
{formatData(m.data)} · MVP {m.mvp || "da votare"} {formatData(m.data)} · MVP {m.mvp || "da votare"}
{m.scout ? " · scoutata" : ""} {m.scout ? " · scoutata" : ""}
</p> </p>
@@ -278,7 +278,7 @@ function Classifica() {
<span <span
key={i} key={i}
className={cn( className={cn(
"rounded-lg px-2 py-1 text-xs font-semibold tabular-nums", "rounded-lg px-2 py-1 text-[13px] font-semibold tabular-nums",
setVintoDaNoi ? "bg-secondary" : "bg-muted text-muted-foreground", setVintoDaNoi ? "bg-secondary" : "bg-muted text-muted-foreground",
)} )}
> >
@@ -287,7 +287,7 @@ function Classifica() {
); );
})} })}
{eventoId && !m.mvp ? ( {eventoId && !m.mvp ? (
<span className="ml-auto inline-flex items-center gap-0.5 text-xs font-bold uppercase text-accent"> <span className="ml-auto inline-flex items-center gap-0.5 text-[13px] font-bold uppercase text-accent">
Vota MVP <ChevronRight className="h-3.5 w-3.5" aria-hidden /> Vota MVP <ChevronRight className="h-3.5 w-3.5" aria-hidden />
</span> </span>
) : null} ) : null}
+26 -24
View File
@@ -91,7 +91,7 @@ function GestioneEventi() {
<> <>
<PageHeader titolo="Gestione eventi" sottotitolo="Area riservata" /> <PageHeader titolo="Gestione eventi" sottotitolo="Area riservata" />
<div className="px-5"> <div className="px-5">
<p className="rounded-3xl bg-card p-5 text-center text-sm text-muted-foreground shadow-card"> <p className="rounded-3xl bg-card p-5 text-center text-[15px] text-muted-foreground shadow-card">
Solo i referenti della squadra possono creare o modificare gli eventi. Solo i referenti della squadra possono creare o modificare gli eventi.
</p> </p>
</div> </div>
@@ -207,7 +207,7 @@ function GestioneEventi() {
</button> </button>
</div> </div>
<div className="grid grid-cols-7 gap-1 text-center text-xs font-bold text-muted-foreground"> <div className="grid grid-cols-7 gap-1 text-center text-[13px] font-bold text-muted-foreground">
{giorniIT.map((g, i) => ( {giorniIT.map((g, i) => (
<span key={i}>{g}</span> <span key={i}>{g}</span>
))} ))}
@@ -248,7 +248,7 @@ function GestioneEventi() {
type="button" type="button"
onClick={() => apriGiorno(giorno)} onClick={() => apriGiorno(giorno)}
className={cn( className={cn(
"relative grid aspect-square place-items-center rounded-xl text-sm font-semibold transition-transform active:scale-90", "relative grid aspect-square place-items-center rounded-xl text-[15px] font-semibold transition-transform active:scale-90",
haEventi haEventi
? "bg-accent text-accent-foreground" ? "bg-accent text-accent-foreground"
: "bg-secondary text-foreground", : "bg-secondary text-foreground",
@@ -265,11 +265,11 @@ function GestioneEventi() {
</AnimatePresence> </AnimatePresence>
</div> </div>
{isPending ? ( {isPending ? (
<p aria-busy="true" className="mt-2 text-xs text-muted-foreground"> <p aria-busy="true" className="mt-2 text-[13px] text-muted-foreground">
Carico gli eventi… Carico gli eventi…
</p> </p>
) : isError ? ( ) : isError ? (
<div className="mt-3 space-y-2 text-center text-sm"> <div className="mt-3 space-y-2 text-center text-[15px]">
<p className="text-destructive"> <p className="text-destructive">
Non sono riuscito a caricare gli eventi Non sono riuscito a caricare gli eventi
{error instanceof Error ? `: ${error.message}` : ""}. {error instanceof Error ? `: ${error.message}` : ""}.
@@ -277,13 +277,13 @@ function GestioneEventi() {
<button <button
type="button" type="button"
onClick={() => refetch()} onClick={() => refetch()}
className="rounded-2xl bg-secondary px-4 py-2 text-xs font-bold uppercase" className="rounded-2xl bg-secondary px-4 py-2 text-[13px] font-bold uppercase"
> >
Riprova Riprova
</button> </button>
</div> </div>
) : ( ) : (
<p className="mt-2 text-xs text-muted-foreground"> <p className="mt-2 text-[13px] text-muted-foreground">
Scorri a destra o sinistra per cambiare mese. Tocca un giorno per aggiungere, Scorri a destra o sinistra per cambiare mese. Tocca un giorno per aggiungere,
modificare o eliminare. modificare o eliminare.
</p> </p>
@@ -303,7 +303,7 @@ function GestioneEventi() {
type="button" type="button"
onClick={() => aggiorna(daCategoria(t.id))} onClick={() => aggiorna(daCategoria(t.id))}
className={cn( className={cn(
"rounded-full py-2 text-xs font-bold uppercase transition-colors", "rounded-full py-2 text-[13px] font-bold uppercase transition-colors",
categoriaEvento(bozza) === t.id categoriaEvento(bozza) === t.id
? "bg-card shadow-card text-foreground" ? "bg-card shadow-card text-foreground"
: "text-muted-foreground", : "text-muted-foreground",
@@ -337,15 +337,17 @@ function GestioneEventi() {
</Campo> </Campo>
) : ( ) : (
<div className="min-w-0"> <div className="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">
Giorno Giorno
</span> </span>
<div className="mt-1 flex h-10 items-center justify-between gap-1"> <div className="mt-1 flex h-10 items-center justify-between gap-1">
<span className="truncate text-sm font-semibold">{formatData(bozza.data)}</span> <span className="truncate text-[15px] font-semibold">
{formatData(bozza.data)}
</span>
<button <button
type="button" type="button"
onClick={() => setCambiaGiorno(true)} onClick={() => setCambiaGiorno(true)}
className="shrink-0 rounded-full px-2 py-1 text-xs font-bold uppercase text-accent active:scale-95" className="shrink-0 rounded-full px-2 py-1 text-[13px] font-bold uppercase text-accent active:scale-95"
> >
Cambia Cambia
</button> </button>
@@ -394,7 +396,7 @@ function GestioneEventi() {
type="button" type="button"
onClick={() => aggiorna({ casa: o.casa })} onClick={() => aggiorna({ casa: o.casa })}
className={cn( className={cn(
"flex-1 rounded-full py-2 text-xs font-bold uppercase transition-colors", "flex-1 rounded-full py-2 text-[13px] font-bold uppercase transition-colors",
bozza.casa === o.casa bozza.casa === o.casa
? "bg-card shadow-card text-foreground" ? "bg-card shadow-card text-foreground"
: "text-muted-foreground", : "text-muted-foreground",
@@ -433,7 +435,7 @@ function GestioneEventi() {
}) })
} }
className={cn( 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",
scelto scelto
? "bg-accent text-accent-foreground" ? "bg-accent text-accent-foreground"
: "bg-secondary text-muted-foreground", : "bg-secondary text-muted-foreground",
@@ -450,7 +452,7 @@ function GestioneEventi() {
<button <button
type="button" type="button"
onClick={() => setBozza(null)} onClick={() => setBozza(null)}
className="flex-1 rounded-2xl bg-secondary py-3 text-sm font-bold uppercase" className="flex-1 rounded-2xl bg-secondary py-3 text-[15px] font-bold uppercase"
> >
Annulla Annulla
</button> </button>
@@ -458,7 +460,7 @@ function GestioneEventi() {
type="button" type="button"
onClick={chiediConferma} onClick={chiediConferma}
disabled={salva.isPending} disabled={salva.isPending}
className="flex flex-1 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="flex flex-1 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} Salva {salva.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : null} Salva
</button> </button>
@@ -489,8 +491,8 @@ function GestioneEventi() {
className="flex items-center gap-2 rounded-2xl bg-card p-3 shadow-card" className="flex items-center gap-2 rounded-2xl bg-card p-3 shadow-card"
> >
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="truncate text-sm font-bold leading-tight">{e.titolo}</p> <p className="truncate text-[15px] font-bold leading-tight">{e.titolo}</p>
<p className="text-xs text-muted-foreground"> <p className="text-[13px] text-muted-foreground">
{e.ora} · {e.luogo || "luogo da definire"} {e.ora} · {e.luogo || "luogo da definire"}
</p> </p>
</div> </div>
@@ -513,7 +515,7 @@ function GestioneEventi() {
</div> </div>
)) ))
) : ( ) : (
<p className="rounded-2xl bg-card p-4 text-center text-sm text-muted-foreground shadow-card"> <p className="rounded-2xl bg-card p-4 text-center text-[15px] text-muted-foreground shadow-card">
Nessun evento in programma Nessun evento in programma
</p> </p>
)} )}
@@ -521,7 +523,7 @@ function GestioneEventi() {
<button <button
type="button" type="button"
onClick={nuovoNelGiorno} onClick={nuovoNelGiorno}
className="premi mt-1 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" className="premi mt-1 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"
> >
<CalendarPlus className="h-4 w-4" /> Nuovo evento in questo giorno <CalendarPlus className="h-4 w-4" /> Nuovo evento in questo giorno
</button> </button>
@@ -544,14 +546,14 @@ function GestioneEventi() {
type="button" type="button"
onClick={conferma} onClick={conferma}
disabled={salva.isPending} disabled={salva.isPending}
className="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="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} Conferma {salva.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : null} Conferma
</button> </button>
<DrawerClose asChild> <DrawerClose asChild>
<button <button
type="button" type="button"
className="w-full rounded-2xl bg-secondary py-3 text-sm font-bold uppercase text-foreground" className="w-full rounded-2xl bg-secondary py-3 text-[15px] font-bold uppercase text-foreground"
> >
Annulla Annulla
</button> </button>
@@ -573,14 +575,14 @@ function GestioneEventi() {
type="button" type="button"
onClick={() => daEliminare && rimuovi(daEliminare.id)} onClick={() => daEliminare && rimuovi(daEliminare.id)}
disabled={elimina.isPending} disabled={elimina.isPending}
className="flex w-full items-center justify-center gap-2 rounded-2xl bg-destructive py-3 text-sm font-bold uppercase text-destructive-foreground disabled:opacity-50" className="flex w-full items-center justify-center gap-2 rounded-2xl bg-destructive py-3 text-[15px] font-bold uppercase text-destructive-foreground disabled:opacity-50"
> >
{elimina.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : null} Elimina {elimina.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : null} Elimina
</button> </button>
<DrawerClose asChild> <DrawerClose asChild>
<button <button
type="button" type="button"
className="w-full rounded-2xl bg-secondary py-3 text-sm font-bold uppercase text-foreground" className="w-full rounded-2xl bg-secondary py-3 text-[15px] font-bold uppercase text-foreground"
> >
Annulla Annulla
</button> </button>
@@ -606,7 +608,7 @@ function Interruttore({
type="button" type="button"
onClick={onClick} onClick={onClick}
className={cn( className={cn(
"rounded-full px-3 py-1.5 text-xs font-bold uppercase transition-colors", "rounded-full px-3 py-1.5 text-[13px] font-bold uppercase transition-colors",
attivo ? "bg-accent text-accent-foreground" : "bg-secondary text-muted-foreground", attivo ? "bg-accent text-accent-foreground" : "bg-secondary text-muted-foreground",
)} )}
> >
+5 -5
View File
@@ -42,7 +42,7 @@ function EventoDetail() {
if (!evento) { if (!evento) {
return ( return (
<div className="px-5 pt-8"> <div className="px-5 pt-8">
<p className="mt-8 text-center text-sm text-muted-foreground">Evento non trovato</p> <p className="mt-8 text-center text-[15px] text-muted-foreground">Evento non trovato</p>
</div> </div>
); );
} }
@@ -58,14 +58,14 @@ function EventoDetail() {
<PartyPopper className="h-6 w-6" /> <PartyPopper className="h-6 w-6" />
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="text-xs font-bold uppercase tracking-wide text-muted-foreground"> <p className="text-[13px] font-bold uppercase tracking-wide text-muted-foreground">
Evento extra-campo Evento extra-campo
</p> </p>
<p className="truncate text-lg font-bold leading-tight">{evento.titolo}</p> <p className="truncate text-lg font-bold leading-tight">{evento.titolo}</p>
</div> </div>
</div> </div>
<div className="mt-4 space-y-2 text-sm text-muted-foreground"> <div className="mt-4 space-y-2 text-[15px] text-muted-foreground">
<span className="inline-flex items-center gap-2"> <span className="inline-flex items-center gap-2">
<Clock className="h-4 w-4" /> {evento.ora} <Clock className="h-4 w-4" /> {evento.ora}
</span> </span>
@@ -75,12 +75,12 @@ function EventoDetail() {
</div> </div>
{evento.note ? ( {evento.note ? (
<p className="mt-3 whitespace-pre-line rounded-2xl bg-secondary px-3 py-2 text-sm"> <p className="mt-3 whitespace-pre-line rounded-2xl bg-secondary px-3 py-2 text-[15px]">
{evento.note} {evento.note}
</p> </p>
) : null} ) : null}
<div className="mt-4 inline-flex items-center gap-2 rounded-full bg-secondary px-3 py-1.5 text-xs font-semibold"> <div className="mt-4 inline-flex items-center gap-2 rounded-full bg-secondary px-3 py-1.5 text-[13px] font-semibold">
<Users className="h-4 w-4" /> <Users className="h-4 w-4" />
Conferme: {presentiVeri}/{convocatiEvento(evento, rosa).length} Conferme: {presentiVeri}/{convocatiEvento(evento, rosa).length}
</div> </div>
+20 -18
View File
@@ -86,7 +86,7 @@ function Index() {
className="h-14 w-14 rounded-full shadow-pop ring-2 ring-primary-foreground/25" className="h-14 w-14 rounded-full shadow-pop ring-2 ring-primary-foreground/25"
/> />
<div className="min-w-0"> <div className="min-w-0">
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary-foreground/80"> <p className="text-[13px] font-semibold uppercase tracking-[0.2em] text-primary-foreground/80">
Ciao {nome.split(" ")[0]} Ciao {nome.split(" ")[0]}
</p> </p>
<h1 className="font-display-lg text-4xl uppercase leading-none">CRAP Volley</h1> <h1 className="font-display-lg text-4xl uppercase leading-none">CRAP Volley</h1>
@@ -100,13 +100,13 @@ function Index() {
> >
<div className="rounded-2xl bg-primary-foreground/10 p-3"> <div className="rounded-2xl bg-primary-foreground/10 p-3">
<p className="font-display text-2xl leading-none">{noi ? `${noi.pos}º` : "—"}</p> <p className="font-display text-2xl leading-none">{noi ? `${noi.pos}º` : "—"}</p>
<p className="text-xs uppercase text-primary-foreground/80">In classifica</p> <p className="text-[13px] uppercase text-primary-foreground/80">In classifica</p>
</div> </div>
<div className="rounded-2xl bg-primary-foreground/10 p-3"> <div className="rounded-2xl bg-primary-foreground/10 p-3">
<p className="font-display text-2xl leading-none"> <p className="font-display text-2xl leading-none">
{noi ? `${noi.vinte}-${noi.perse}` : "—"} {noi ? `${noi.vinte}-${noi.perse}` : "—"}
</p> </p>
<p className="text-xs uppercase text-primary-foreground/80">Bilancio W-L</p> <p className="text-[13px] uppercase text-primary-foreground/80">Bilancio W-L</p>
</div> </div>
{giocatore ? ( {giocatore ? (
<div className="rounded-2xl bg-primary-foreground/10 p-3"> <div className="rounded-2xl bg-primary-foreground/10 p-3">
@@ -114,7 +114,7 @@ function Index() {
<Flame className="h-4 w-4 text-accent" /> <Flame className="h-4 w-4 text-accent" />
{giocatore.streak} {giocatore.streak}
</p> </p>
<p className="text-xs uppercase text-primary-foreground/80">Streak</p> <p className="text-[13px] uppercase text-primary-foreground/80">Streak</p>
</div> </div>
) : null} ) : null}
</div> </div>
@@ -132,7 +132,7 @@ function Index() {
azione={ azione={
<Link <Link
to="/calendario" to="/calendario"
className="inline-flex items-center text-[14px] font-semibold text-accent" className="inline-flex items-center text-[15px] font-semibold text-accent"
> >
Calendario <ChevronRight className="h-4 w-4" /> Calendario <ChevronRight className="h-4 w-4" />
</Link> </Link>
@@ -141,7 +141,7 @@ function Index() {
{prossimo ? ( {prossimo ? (
<EventoCard evento={prossimo} {...(linkProssimo ? { linkTo: linkProssimo } : {})} /> <EventoCard evento={prossimo} {...(linkProssimo ? { linkTo: linkProssimo } : {})} />
) : ( ) : (
<p className="rounded-3xl bg-card p-4 text-xs text-muted-foreground shadow-card"> <p className="rounded-3xl bg-card p-4 text-[13px] text-muted-foreground shadow-card">
Nessun impegno in programma. Nessun impegno in programma.
</p> </p>
)} )}
@@ -156,7 +156,7 @@ function Index() {
return <EventoCard key={e.id} evento={e} {...(link ? { linkTo: link } : {})} />; return <EventoCard key={e.id} evento={e} {...(link ? { linkTo: link } : {})} />;
}) })
) : ( ) : (
<p className="rounded-3xl bg-card p-4 text-xs text-muted-foreground shadow-card"> <p className="rounded-3xl bg-card p-4 text-[13px] text-muted-foreground shadow-card">
Nient'altro da confermare: sei in pari. Nient'altro da confermare: sei in pari.
</p> </p>
)} )}
@@ -171,7 +171,7 @@ function Index() {
<Link <Link
to="/classifica" to="/classifica"
search={{ tab: "storico" }} search={{ tab: "storico" }}
className="inline-flex items-center text-[14px] font-semibold text-accent" className="inline-flex items-center text-[15px] font-semibold text-accent"
> >
Storico <ChevronRight className="h-4 w-4" /> Storico <ChevronRight className="h-4 w-4" />
</Link> </Link>
@@ -183,8 +183,10 @@ function Index() {
<> <>
<div className="flex items-center justify-between gap-3"> <div className="flex items-center justify-between gap-3">
<div className="min-w-0"> <div className="min-w-0">
<p className="truncate text-sm font-bold">CRAP Volley vs {ultima.avversario}</p> <p className="truncate text-[15px] font-bold">
<p className="text-xs text-muted-foreground"> CRAP Volley vs {ultima.avversario}
</p>
<p className="text-[13px] text-muted-foreground">
{ultima.casa ? "In casa" : "Trasferta"} {ultima.casa ? "In casa" : "Trasferta"}
{ultima.mvp ? ` · MVP ${ultima.mvp}` : " · MVP da votare"} {ultima.mvp ? ` · MVP ${ultima.mvp}` : " · MVP da votare"}
</p> </p>
@@ -197,7 +199,7 @@ function Index() {
{ultima.parziali.map((p, i) => ( {ultima.parziali.map((p, i) => (
<span <span
key={i} key={i}
className="rounded-lg bg-secondary px-2 py-1 text-xs font-semibold tabular-nums" className="rounded-lg bg-secondary px-2 py-1 text-[13px] font-semibold tabular-nums"
> >
{p[0]}-{p[1]} {p[0]}-{p[1]}
</span> </span>
@@ -218,7 +220,7 @@ function Index() {
); );
})() })()
) : ( ) : (
<p className="rounded-3xl bg-card p-4 text-xs text-muted-foreground shadow-card"> <p className="rounded-3xl bg-card p-4 text-[13px] text-muted-foreground shadow-card">
Nessun risultato disponibile. Nessun risultato disponibile.
</p> </p>
)} )}
@@ -231,7 +233,7 @@ function Index() {
azione={ azione={
<Link <Link
to="/squadra" to="/squadra"
className="inline-flex items-center text-[14px] font-semibold text-accent" className="inline-flex items-center text-[15px] font-semibold text-accent"
> >
Tutti <ChevronRight className="h-4 w-4" /> Tutti <ChevronRight className="h-4 w-4" />
</Link> </Link>
@@ -245,20 +247,20 @@ function Index() {
className="block w-full text-left" className="block w-full text-left"
> >
<Card> <Card>
<div className="flex items-center gap-2 text-sm font-bold"> <div className="flex items-center gap-2 text-[15px] font-bold">
<span className="text-base leading-none">{obiettivo.emoji}</span>{" "} <span className="text-base leading-none">{obiettivo.emoji}</span>{" "}
{obiettivo.titolo} {obiettivo.titolo}
</div> </div>
<Barra percentuale={progressoObiettivo(obiettivo)} trackClassName="mt-3" /> <Barra percentuale={progressoObiettivo(obiettivo)} trackClassName="mt-3" />
<p className="mt-2 text-xs text-muted-foreground"> <p className="mt-2 text-[13px] text-muted-foreground">
Siamo al <Numero valore={progressoObiettivo(obiettivo)} suffisso="%" /> —{" "} Siamo al <Numero valore={progressoObiettivo(obiettivo)} suffisso="%" /> —{" "}
{obiettivo.valore}/{obiettivo.target} {obiettivo.unita}. {obiettivo.valore}/{obiettivo.target} {obiettivo.unita}.
</p> </p>
<p className="mt-1 text-xs font-semibold text-accent"> <p className="mt-1 text-[13px] font-semibold text-accent">
{microcopyObiettivo(obiettivo)} {microcopyObiettivo(obiettivo)}
</p> </p>
<p className="mt-1 text-xs text-muted-foreground">{obiettivo.impatto}</p> <p className="mt-1 text-[13px] text-muted-foreground">{obiettivo.impatto}</p>
<p className="mt-2 inline-flex items-center text-xs font-semibold text-accent"> <p className="mt-2 inline-flex items-center text-[13px] font-semibold text-accent">
Come funziona <ChevronRight className="h-3.5 w-3.5" /> Come funziona <ChevronRight className="h-3.5 w-3.5" />
</p> </p>
</Card> </Card>
+3 -3
View File
@@ -40,7 +40,7 @@ function PartitaCsiDetail() {
if (!partita) { if (!partita) {
return ( return (
<div className="px-5 pt-8"> <div className="px-5 pt-8">
<p className="mt-8 text-center text-sm text-muted-foreground">Partita non trovata</p> <p className="mt-8 text-center text-[15px] text-muted-foreground">Partita non trovata</p>
</div> </div>
); );
} }
@@ -69,7 +69,7 @@ function PartitaCsiDetail() {
className="h-10 w-10" className="h-10 w-10"
/> />
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="text-xs font-bold uppercase tracking-wide text-muted-foreground"> <p className="text-[13px] font-bold uppercase tracking-wide text-muted-foreground">
{partita.casa ? "In casa" : "Fuori casa"} {partita.casa ? "In casa" : "Fuori casa"}
</p> </p>
<p className="truncate text-lg font-bold leading-tight">{partita.avversario}</p> <p className="truncate text-lg font-bold leading-tight">{partita.avversario}</p>
@@ -93,7 +93,7 @@ function PartitaCsiDetail() {
{partita.parziali.map(([noi, loro], i) => ( {partita.parziali.map(([noi, loro], i) => (
<span <span
key={i} key={i}
className="rounded-lg bg-secondary px-2 py-1 text-xs font-semibold tabular-nums" className="rounded-lg bg-secondary px-2 py-1 text-[13px] font-semibold tabular-nums"
> >
{noi}-{loro} {noi}-{loro}
</span> </span>
+15 -13
View File
@@ -60,7 +60,7 @@ function PartitaDetail() {
if (!evento) { if (!evento) {
return ( return (
<div className="px-5 pt-8"> <div className="px-5 pt-8">
<p className="mt-8 text-center text-sm text-muted-foreground">Partita non trovata</p> <p className="mt-8 text-center text-[15px] text-muted-foreground">Partita non trovata</p>
</div> </div>
); );
} }
@@ -118,7 +118,7 @@ function PartitaDetail() {
<LogoSquadra src={match.logoAvversario} alt={avversario} className="h-10 w-10" /> <LogoSquadra src={match.logoAvversario} alt={avversario} className="h-10 w-10" />
) : null} ) : null}
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="text-xs font-bold uppercase tracking-wide text-muted-foreground"> <p className="text-[13px] font-bold uppercase tracking-wide text-muted-foreground">
{casa ? "In casa" : "Fuori casa"} {casa ? "In casa" : "Fuori casa"}
{evento.campionato ? " · Campionato" : " · Amichevole"} {evento.campionato ? " · Campionato" : " · Amichevole"}
</p> </p>
@@ -126,7 +126,7 @@ function PartitaDetail() {
</div> </div>
</div> </div>
<div className="mt-4 space-y-2 text-sm text-muted-foreground"> <div className="mt-4 space-y-2 text-[15px] text-muted-foreground">
<span className="inline-flex items-center gap-2"> <span className="inline-flex items-center gap-2">
<Clock className="h-4 w-4" /> {evento.ora} <Clock className="h-4 w-4" /> {evento.ora}
</span> </span>
@@ -136,12 +136,12 @@ function PartitaDetail() {
</div> </div>
{evento.note ? ( {evento.note ? (
<p className="mt-3 whitespace-pre-line rounded-2xl bg-secondary px-3 py-2 text-sm"> <p className="mt-3 whitespace-pre-line rounded-2xl bg-secondary px-3 py-2 text-[15px]">
{evento.note} {evento.note}
</p> </p>
) : null} ) : null}
<div className="mt-4 inline-flex items-center gap-2 rounded-full bg-secondary px-3 py-1.5 text-xs font-semibold"> <div className="mt-4 inline-flex items-center gap-2 rounded-full bg-secondary px-3 py-1.5 text-[13px] font-semibold">
<Users className="h-4 w-4" /> <Users className="h-4 w-4" />
Conferme: {presentiVeri}/{convocati.length} Conferme: {presentiVeri}/{convocati.length}
</div> </div>
@@ -163,7 +163,7 @@ function PartitaDetail() {
<Section titolo="Risultato"> <Section titolo="Risultato">
<div className="rounded-3xl bg-card p-5 shadow-card"> <div className="rounded-3xl bg-card p-5 shadow-card">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-sm font-bold">CRAP Volley</span> <span className="text-[15px] font-bold">CRAP Volley</span>
<span <span
className={cn( className={cn(
"rounded-full px-3 py-1 text-lg font-display font-bold", "rounded-full px-3 py-1 text-lg font-display font-bold",
@@ -174,7 +174,7 @@ function PartitaDetail() {
> >
{match.setNostri} - {match.setLoro} {match.setNostri} - {match.setLoro}
</span> </span>
<span className="text-right text-sm font-bold">{avversario}</span> <span className="text-right text-[15px] font-bold">{avversario}</span>
</div> </div>
<div className="mt-4 space-y-2"> <div className="mt-4 space-y-2">
{match.parziali.map(([noi, loro], i) => ( {match.parziali.map(([noi, loro], i) => (
@@ -183,7 +183,9 @@ function PartitaDetail() {
className="flex items-center justify-between rounded-xl bg-secondary px-3 py-2" className="flex items-center justify-between rounded-xl bg-secondary px-3 py-2"
> >
<span className="font-display text-lg">{noi}</span> <span className="font-display text-lg">{noi}</span>
<span className="text-xs font-semibold text-muted-foreground">Set {i + 1}</span> <span className="text-[13px] font-semibold text-muted-foreground">
Set {i + 1}
</span>
<span className="font-display text-lg">{loro}</span> <span className="font-display text-lg">{loro}</span>
</div> </div>
))} ))}
@@ -213,7 +215,7 @@ function PartitaDetail() {
) )
) : ( ) : (
<Section titolo="In programma"> <Section titolo="In programma">
<p className="rounded-3xl bg-card p-5 text-center text-sm text-muted-foreground shadow-card"> <p className="rounded-3xl bg-card p-5 text-center text-[15px] text-muted-foreground shadow-card">
La partita non è ancora stata disputata. Torna qui dopo il fischio finale per vedere il La partita non è ancora stata disputata. Torna qui dopo il fischio finale per vedere il
risultato. risultato.
</p> </p>
@@ -248,13 +250,13 @@ function PartitaDetail() {
].map((t) => ( ].map((t) => (
<div key={t.l} className="rounded-2xl bg-secondary p-2.5"> <div key={t.l} className="rounded-2xl bg-secondary p-2.5">
<p className="font-display text-xl leading-none">{t.v}</p> <p className="font-display text-xl leading-none">{t.v}</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">
{t.l} {t.l}
</p> </p>
</div> </div>
))} ))}
</div> </div>
<p className="mt-4 text-xs font-bold uppercase tracking-wide text-muted-foreground"> <p className="mt-4 text-[13px] font-bold uppercase tracking-wide text-muted-foreground">
Dettaglio giocatori (uso interno allenatori) Dettaglio giocatori (uso interno allenatori)
</p> </p>
<div className="mt-2 space-y-1"> <div className="mt-2 space-y-1">
@@ -264,7 +266,7 @@ function PartitaDetail() {
return ( return (
<div <div
key={gid} key={gid}
className="flex items-center gap-2 rounded-xl bg-secondary/60 px-3 py-2 text-xs" className="flex items-center gap-2 rounded-xl bg-secondary/60 px-3 py-2 text-[13px]"
> >
<span className="min-w-0 flex-1 truncate font-semibold"> <span className="min-w-0 flex-1 truncate font-semibold">
#{g.numero} {g.nome} #{g.numero} {g.nome}
@@ -285,7 +287,7 @@ function PartitaDetail() {
csvScoutMatch(scout, rosa), csvScoutMatch(scout, rosa),
) )
} }
className="premi mt-4 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" className="premi mt-4 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"
> >
<Download className="h-4 w-4" /> Esporta CSV <Download className="h-4 w-4" /> Esporta CSV
</button> </button>
+10 -10
View File
@@ -220,7 +220,7 @@ function CardAvatar({ id, fallback }: { id: string; fallback: string }) {
<button <button
type="button" type="button"
onClick={() => inputRef.current?.click()} onClick={() => inputRef.current?.click()}
className="premi min-h-11 flex-1 rounded-xl bg-secondary px-3 text-xs font-bold uppercase tracking-wide" className="premi min-h-11 flex-1 rounded-xl bg-secondary px-3 text-[13px] font-bold uppercase tracking-wide"
> >
Cambia immagine profilo Cambia immagine profilo
</button> </button>
@@ -312,11 +312,11 @@ function TabOpzioni({ giocatoreId }: { giocatoreId: string }) {
type="button" type="button"
onClick={cambiaNotifiche} onClick={cambiaNotifiche}
disabled={!supportate || inCorso} disabled={!supportate || inCorso}
className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-left text-sm disabled:opacity-60" className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-left text-[15px] disabled:opacity-60"
> >
<span className="min-w-0"> <span className="min-w-0">
<span className="block truncate">Notifiche</span> <span className="block truncate">Notifiche</span>
<span className="block text-xs text-muted-foreground"> <span className="block text-[13px] text-muted-foreground">
{supportate {supportate
? notifiche ? notifiche
? "Attive su questo dispositivo" ? "Attive su questo dispositivo"
@@ -339,11 +339,11 @@ function TabOpzioni({ giocatoreId }: { giocatoreId: string }) {
type="button" type="button"
onClick={cambiaEmail} onClick={cambiaEmail}
disabled={!email.pronta || email.imposta.isPending} disabled={!email.pronta || email.imposta.isPending}
className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-left text-sm disabled:opacity-60" className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-left text-[15px] disabled:opacity-60"
> >
<span className="min-w-0"> <span className="min-w-0">
<span className="block truncate">Email</span> <span className="block truncate">Email</span>
<span className="block text-xs text-muted-foreground"> <span className="block text-[13px] text-muted-foreground">
{email.attive {email.attive
? "Le notifiche arrivano anche via email" ? "Le notifiche arrivano anche via email"
: "Nessuna email, solo notifiche in app"} : "Nessuna email, solo notifiche in app"}
@@ -363,7 +363,7 @@ function TabOpzioni({ giocatoreId }: { giocatoreId: string }) {
{admin ? ( {admin ? (
<Link <Link
to="/admin" to="/admin"
className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-sm transition-colors hover:bg-accent/5" className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-[15px] transition-colors hover:bg-accent/5"
> >
<span className="min-w-0 truncate">Dashboard amministratore</span> <span className="min-w-0 truncate">Dashboard amministratore</span>
<ShieldCheck className="h-4 w-4 text-muted-foreground" /> <ShieldCheck className="h-4 w-4 text-muted-foreground" />
@@ -373,7 +373,7 @@ function TabOpzioni({ giocatoreId }: { giocatoreId: string }) {
href="https://github.com/ivancacciari1995-a11y/CRAPP/issues/new?template=bug_report.yml" href="https://github.com/ivancacciari1995-a11y/CRAPP/issues/new?template=bug_report.yml"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-sm transition-colors hover:bg-accent/5" className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-[15px] transition-colors hover:bg-accent/5"
> >
<span className="min-w-0 truncate">Segnala un bug</span> <span className="min-w-0 truncate">Segnala un bug</span>
<Bug className="h-4 w-4 text-muted-foreground" /> <Bug className="h-4 w-4 text-muted-foreground" />
@@ -382,17 +382,17 @@ function TabOpzioni({ giocatoreId }: { giocatoreId: string }) {
href="https://github.com/ivancacciari1995-a11y/CRAPP/issues/new?template=feature_request.yml" href="https://github.com/ivancacciari1995-a11y/CRAPP/issues/new?template=feature_request.yml"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-sm transition-colors hover:bg-accent/5" className="flex min-h-11 w-full items-center justify-between gap-3 px-4 py-3 text-[15px] transition-colors hover:bg-accent/5"
> >
<span className="min-w-0 truncate">Suggerisci una nuova funzionalità</span> <span className="min-w-0 truncate">Suggerisci una nuova funzionalità</span>
<Lightbulb className="h-4 w-4 text-muted-foreground" /> <Lightbulb className="h-4 w-4 text-muted-foreground" />
</a> </a>
</div> </div>
<p className="text-center text-xs text-muted-foreground">CrAPP v{APP_VERSION}</p> <p className="text-center text-[13px] text-muted-foreground">CrAPP v{APP_VERSION}</p>
<button <button
type="button" type="button"
onClick={logout} onClick={logout}
className="premi flex min-h-11 w-full items-center justify-center gap-2 rounded-3xl bg-destructive/15 px-4 py-3 text-sm font-bold text-destructive shadow-card" className="premi flex min-h-11 w-full items-center justify-center gap-2 rounded-3xl bg-destructive/15 px-4 py-3 text-[15px] font-bold text-destructive shadow-card"
> >
<LogOut className="h-4 w-4" /> <LogOut className="h-4 w-4" />
Esci Esci
+23 -23
View File
@@ -72,7 +72,7 @@ function Blocco({
{icona} {icona}
</div> </div>
<h1 className="mt-4 font-display text-2xl uppercase leading-none">{titolo}</h1> <h1 className="mt-4 font-display text-2xl uppercase leading-none">{titolo}</h1>
<p className="mt-2 text-sm text-muted-foreground">{testo}</p> <p className="mt-2 text-[15px] text-muted-foreground">{testo}</p>
{children} {children}
</div> </div>
</div> </div>
@@ -138,7 +138,7 @@ function Scout() {
<button <button
type="button" type="button"
onClick={() => sessione.refetch()} onClick={() => sessione.refetch()}
className="mt-5 w-full rounded-2xl bg-secondary py-3 text-sm font-bold uppercase" className="mt-5 w-full rounded-2xl bg-secondary py-3 text-[15px] font-bold uppercase"
> >
Aggiorna Aggiorna
</button> </button>
@@ -156,7 +156,7 @@ function Scout() {
if (ok) setControllo(true); if (ok) setControllo(true);
else toast.error("Un altro compagno ha appena preso lo scout"); else toast.error("Un altro compagno ha appena preso lo scout");
}} }}
className="mt-5 w-full rounded-2xl bg-accent-grad py-3 text-sm font-bold uppercase text-accent-foreground shadow-pop disabled:opacity-50" className="mt-5 w-full rounded-2xl bg-accent-grad py-3 text-[15px] font-bold uppercase text-accent-foreground shadow-pop disabled:opacity-50"
> >
{ripresa ? "Riprendi lo scout" : "Prendi il controllo"} {ripresa ? "Riprendi lo scout" : "Prendi il controllo"}
</button> </button>
@@ -313,7 +313,7 @@ function ScoutBoard({
<> <>
<header className="sticky top-0 z-30 bg-hero px-5 pb-4 pt-6 text-primary-foreground"> <header className="sticky top-0 z-30 bg-hero px-5 pb-4 pt-6 text-primary-foreground">
<div className="flex items-center justify-between gap-3"> <div className="flex items-center justify-between gap-3">
<span className="inline-flex items-center gap-1.5 rounded-full bg-primary-foreground/10 px-2.5 py-1 text-xs font-bold uppercase tracking-wide"> <span className="inline-flex items-center gap-1.5 rounded-full bg-primary-foreground/10 px-2.5 py-1 text-[13px] font-bold uppercase tracking-wide">
<Radio className="h-3 w-3 text-accent" /> Scout live · Set {setCorrente} <Radio className="h-3 w-3 text-accent" /> Scout live · Set {setCorrente}
</span> </span>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -321,14 +321,14 @@ function ScoutBoard({
type="button" type="button"
onClick={annulla} onClick={annulla}
disabled={azioniSet.length === 0} disabled={azioniSet.length === 0}
className="inline-flex items-center gap-1 rounded-full bg-primary-foreground/10 px-3 py-1.5 text-xs font-bold disabled:opacity-40" className="inline-flex items-center gap-1 rounded-full bg-primary-foreground/10 px-3 py-1.5 text-[13px] font-bold disabled:opacity-40"
> >
<Undo2 className="h-3.5 w-3.5" /> Annulla <Undo2 className="h-3.5 w-3.5" /> Annulla
</button> </button>
<button <button
type="button" type="button"
onClick={onFine} onClick={onFine}
className="inline-flex items-center gap-1 rounded-full bg-primary-foreground/10 px-3 py-1.5 text-xs font-bold" className="inline-flex items-center gap-1 rounded-full bg-primary-foreground/10 px-3 py-1.5 text-[13px] font-bold"
> >
<LogOut className="h-3.5 w-3.5" /> Rilascia <LogOut className="h-3.5 w-3.5" /> Rilascia
</button> </button>
@@ -337,14 +337,14 @@ function ScoutBoard({
<div className="mt-3 grid grid-cols-[1fr_auto_1fr] items-center gap-2 text-center"> <div className="mt-3 grid grid-cols-[1fr_auto_1fr] items-center gap-2 text-center">
<div className="min-w-0"> <div className="min-w-0">
<p className="truncate text-xs uppercase text-primary-foreground/60">CRAP Volley</p> <p className="truncate text-[13px] uppercase text-primary-foreground/60">CRAP Volley</p>
<p className="font-display text-5xl leading-none text-accent">{puntiNoi}</p> <p className="font-display text-5xl leading-none text-accent">{puntiNoi}</p>
</div> </div>
<p className="font-display text-2xl leading-none text-primary-foreground/50"> <p className="font-display text-2xl leading-none text-primary-foreground/50">
{setNostri}-{setLoro} {setNostri}-{setLoro}
</p> </p>
<div className="min-w-0"> <div className="min-w-0">
<p className="truncate text-xs uppercase text-primary-foreground/60"> <p className="truncate text-[13px] uppercase text-primary-foreground/60">
{avversario || "Avversario"} {avversario || "Avversario"}
</p> </p>
<p className="font-display text-5xl leading-none">{puntiLoro}</p> <p className="font-display text-5xl leading-none">{puntiLoro}</p>
@@ -356,7 +356,7 @@ function ScoutBoard({
{setChiusi.map((p, i) => ( {setChiusi.map((p, i) => (
<span <span
key={i} key={i}
className="rounded-lg bg-primary-foreground/10 px-2 py-0.5 text-xs font-semibold tabular-nums" className="rounded-lg bg-primary-foreground/10 px-2 py-0.5 text-[13px] font-semibold tabular-nums"
> >
{p[0]}-{p[1]} {p[0]}-{p[1]}
</span> </span>
@@ -366,7 +366,7 @@ function ScoutBoard({
</header> </header>
<section className="px-5 pt-4"> <section className="px-5 pt-4">
<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">
1. Tocca il giocatore 1. Tocca il giocatore
</p> </p>
<div className="grid grid-cols-4 gap-2"> <div className="grid grid-cols-4 gap-2">
@@ -384,10 +384,10 @@ function ScoutBoard({
)} )}
> >
<p className="font-display text-2xl leading-none">{g.numero}</p> <p className="font-display text-2xl leading-none">{g.numero}</p>
<p className="mt-1 text-xs font-bold leading-tight">{g.nome}</p> <p className="mt-1 text-[13px] font-bold leading-tight">{g.nome}</p>
<p <p
className={cn( className={cn(
"text-xs tabular-nums", "text-[13px] tabular-nums",
attivo ? "text-accent-foreground/70" : "text-muted-foreground", attivo ? "text-accent-foreground/70" : "text-muted-foreground",
)} )}
> >
@@ -400,7 +400,7 @@ function ScoutBoard({
</section> </section>
<section className="px-5 pt-4"> <section className="px-5 pt-4">
<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">
2. Tocca l'azione 2. Tocca l'azione
</p> </p>
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-2 gap-2">
@@ -426,7 +426,7 @@ function ScoutBoard({
type="button" type="button"
onClick={() => registra(tipo)} onClick={() => registra(tipo)}
className={cn( className={cn(
"rounded-2xl py-3 text-sm font-bold uppercase shadow-card transition-transform active:scale-95", "rounded-2xl py-3 text-[15px] font-bold uppercase shadow-card transition-transform active:scale-95",
azioniMeta[tipo].className, azioniMeta[tipo].className,
)} )}
> >
@@ -438,11 +438,11 @@ function ScoutBoard({
<section className="px-5 pt-4"> <section className="px-5 pt-4">
<div className="rounded-3xl bg-card p-3 shadow-card"> <div className="rounded-3xl bg-card p-3 shadow-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">
Ultime azioni Ultime azioni
</p> </p>
{ultime.length === 0 ? ( {ultime.length === 0 ? (
<p className="mt-2 text-xs text-muted-foreground">Nessuna azione registrata.</p> <p className="mt-2 text-[13px] text-muted-foreground">Nessuna azione registrata.</p>
) : ( ) : (
<ul className="mt-2 space-y-1.5"> <ul className="mt-2 space-y-1.5">
{ultime.map((a, i) => { {ultime.map((a, i) => {
@@ -451,14 +451,14 @@ function ScoutBoard({
<li <li
key={a.id} key={a.id}
className={cn( className={cn(
"flex items-center justify-between gap-2 px-1 text-xs", "flex items-center justify-between gap-2 px-1 text-[13px]",
i === 0 && "anim-riga", i === 0 && "anim-riga",
)} )}
> >
<span className="truncate">{g ? `#${g.numero} ${g.nome}` : "Avversario"}</span> <span className="truncate">{g ? `#${g.numero} ${g.nome}` : "Avversario"}</span>
<span <span
className={cn( className={cn(
"shrink-0 rounded-full px-2 py-0.5 text-xs font-bold uppercase", "shrink-0 rounded-full px-2 py-0.5 text-[13px] font-bold uppercase",
azioniMeta[a.tipo].className, azioniMeta[a.tipo].className,
)} )}
> >
@@ -474,14 +474,14 @@ function ScoutBoard({
<section className="px-5 pt-4"> <section className="px-5 pt-4">
<Card> <Card>
<label className="text-xs font-bold uppercase tracking-wide text-muted-foreground"> <label className="text-[13px] font-bold uppercase tracking-wide text-muted-foreground">
Avversario Avversario
</label> </label>
<input <input
value={avversario} value={avversario}
maxLength={40} maxLength={40}
onChange={(e) => setAvversario(e.target.value)} onChange={(e) => setAvversario(e.target.value)}
className="mt-1 w-full rounded-xl border border-border bg-background px-3 py-2 text-sm" className="mt-1 w-full rounded-xl border border-border bg-background px-3 py-2 text-[15px]"
/> />
<div className="mt-3 flex rounded-full bg-secondary p-1"> <div className="mt-3 flex rounded-full bg-secondary p-1">
{[true, false].map((v) => ( {[true, false].map((v) => (
@@ -490,7 +490,7 @@ function ScoutBoard({
type="button" type="button"
onClick={() => setCasa(v)} onClick={() => setCasa(v)}
className={cn( className={cn(
"flex-1 rounded-full py-1.5 text-xs font-bold uppercase", "flex-1 rounded-full py-1.5 text-[13px] font-bold uppercase",
casa === v ? "bg-card text-foreground shadow-card" : "text-muted-foreground", casa === v ? "bg-card text-foreground shadow-card" : "text-muted-foreground",
)} )}
> >
@@ -505,7 +505,7 @@ function ScoutBoard({
<button <button
type="button" type="button"
onClick={chiudiSet} onClick={chiudiSet}
className="inline-flex items-center justify-center gap-2 rounded-2xl bg-secondary py-3 text-sm font-bold uppercase" className="inline-flex items-center justify-center gap-2 rounded-2xl bg-secondary py-3 text-[15px] font-bold uppercase"
> >
<CheckCircle2 className="h-4 w-4" /> Chiudi set <CheckCircle2 className="h-4 w-4" /> Chiudi set
</button> </button>
@@ -513,7 +513,7 @@ function ScoutBoard({
type="button" type="button"
onClick={finePartita} onClick={finePartita}
disabled={salvaMatch.isPending} disabled={salvaMatch.isPending}
className="inline-flex 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="inline-flex 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"
> >
<Save className="h-4 w-4" /> Fine partita <Save className="h-4 w-4" /> Fine partita
</button> </button>
+40 -33
View File
@@ -51,7 +51,7 @@ import {
function RuoloBadge({ ruolo }: { ruolo: string }) { function RuoloBadge({ ruolo }: { ruolo: string }) {
return ( return (
<span className="inline-flex items-center rounded-full bg-accent px-2 py-0.5 text-xs font-bold uppercase tracking-wide text-accent-foreground"> <span className="inline-flex items-center rounded-full bg-accent px-2 py-0.5 text-[13px] font-bold uppercase tracking-wide text-accent-foreground">
{ruolo} {ruolo}
</span> </span>
); );
@@ -147,7 +147,7 @@ function Squadra() {
className="h-11 w-11 text-lg" className="h-11 w-11 text-lg"
/> />
<span className="min-w-0 flex-1"> <span className="min-w-0 flex-1">
<span className="block truncate text-sm font-bold leading-tight"> <span className="block truncate text-[15px] font-bold leading-tight">
{nomeCompleto(a)} {nomeCompleto(a)}
</span> </span>
<span className="mt-1 flex items-center gap-2"> <span className="mt-1 flex items-center gap-2">
@@ -164,7 +164,7 @@ function Squadra() {
{isOpen && a.nascita ? ( {isOpen && a.nascita ? (
<div className="border-t border-border px-4 pb-4 pt-3"> <div className="border-t border-border px-4 pb-4 pt-3">
<p className="inline-flex items-center gap-1.5 text-xs text-muted-foreground"> <p className="inline-flex items-center gap-1.5 text-[13px] text-muted-foreground">
<Cake className="h-3.5 w-3.5" /> {formatData(a.nascita)} <Cake className="h-3.5 w-3.5" /> {formatData(a.nascita)}
</p> </p>
</div> </div>
@@ -192,10 +192,12 @@ function Squadra() {
className="h-11 w-11 text-lg" className="h-11 w-11 text-lg"
/> />
<span className="min-w-0 flex-1"> <span className="min-w-0 flex-1">
<span className="block truncate text-sm font-bold leading-tight">{g.nome}</span> <span className="block truncate text-[15px] font-bold leading-tight">
{g.nome}
</span>
<span className="mt-1 flex items-center gap-2"> <span className="mt-1 flex items-center gap-2">
<RuoloBadge ruolo={g.ruolo} /> <RuoloBadge ruolo={g.ruolo} />
<span className="text-xs text-muted-foreground"> <span className="text-[13px] text-muted-foreground">
{g.numero ? `#${g.numero}` : "n° da definire"} {g.numero ? `#${g.numero}` : "n° da definire"}
</span> </span>
</span> </span>
@@ -230,7 +232,7 @@ function Squadra() {
<div className="border-t border-border px-4 pb-4 pt-3"> <div className="border-t border-border px-4 pb-4 pt-3">
{g.nascita ? ( {g.nascita ? (
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
<p className="inline-flex items-center gap-1.5 text-xs text-muted-foreground"> <p className="inline-flex items-center gap-1.5 text-[13px] text-muted-foreground">
<Cake className="h-3.5 w-3.5" /> {formatData(g.nascita)}{" "} <Cake className="h-3.5 w-3.5" /> {formatData(g.nascita)}{" "}
{g.nascita.slice(0, 4)} {g.nascita.slice(0, 4)}
</p> </p>
@@ -244,13 +246,11 @@ function Squadra() {
{ l: "Presenze di fila", v: g.streak }, { l: "Presenze di fila", v: g.streak },
{ l: "Media voto", v: g.mediaVoto || "—" }, { l: "Media voto", v: g.mediaVoto || "—" },
{ l: "MVP", v: g.mvp }, { l: "MVP", v: g.mvp },
...(sonoAllenatore ...(sonoAllenatore ? [] : [{ l: "Cacche 💩", v: g.cacchePartita || "—" }]),
? []
: [{ l: "Cacche/partita 💩", v: g.cacchePartita || "—" }]),
].map((s) => ( ].map((s) => (
<div key={s.l} className="rounded-2xl bg-secondary p-2.5 text-center"> <div key={s.l} className="rounded-2xl bg-secondary p-2.5 text-center">
<p className="font-display text-xl leading-none">{s.v}</p> <p className="font-display text-xl leading-none">{s.v}</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.l} {s.l}
</p> </p>
</div> </div>
@@ -259,11 +259,11 @@ function Squadra() {
{sonoAllenatore ? null : ( {sonoAllenatore ? null : (
<> <>
<p className="mt-4 text-xs font-bold uppercase tracking-wide text-muted-foreground"> <p className="mt-4 text-[13px] font-bold uppercase tracking-wide text-muted-foreground">
Badge sbloccati · {collezioneBadge(g).ottenuti}/{collezioneBadge(g).totali} Badge sbloccati · {collezioneBadge(g).ottenuti}/{collezioneBadge(g).totali}
</p> </p>
{sbloccati.length === 0 ? ( {sbloccati.length === 0 ? (
<p className="mt-2 rounded-2xl bg-secondary/50 p-3 text-xs text-muted-foreground"> <p className="mt-2 rounded-2xl bg-secondary/50 p-3 text-[13px] text-muted-foreground">
Nessun badge sbloccato per ora. Nessun badge sbloccato per ora.
</p> </p>
) : ( ) : (
@@ -275,17 +275,20 @@ function Squadra() {
<BadgeDrawer key={b.def.id} def={b.def} stato={b}> <BadgeDrawer key={b.def.id} def={b.def} stato={b}>
<div className={cn("rounded-2xl p-2.5 ring-1", meta.bg, meta.ring)}> <div className={cn("rounded-2xl p-2.5 ring-1", meta.bg, meta.ring)}>
<Icon className={cn("h-4 w-4", meta.text)} /> <Icon className={cn("h-4 w-4", meta.text)} />
<p className="mt-1 text-xs font-bold leading-tight"> <p className="mt-1 text-[13px] font-bold leading-tight">
{b.def.nome} {b.def.nome}
</p> </p>
<p className="text-xs text-muted-foreground"> <p className="text-[13px] text-muted-foreground">
{b.valore} {b.def.unita} {b.valore} {b.def.unita}
{b.prossimaSoglia {b.prossimaSoglia
? ` · ${b.prossimaSoglia} per ${gradoMeta[b.prossimo!].label.toLowerCase()}` ? ` · ${b.prossimaSoglia} per ${gradoMeta[b.prossimo!].label.toLowerCase()}`
: ""} : ""}
</p> </p>
<p <p
className={cn("mt-1.5 text-xs font-bold uppercase", meta.text)} className={cn(
"mt-1.5 text-[13px] font-bold uppercase",
meta.text,
)}
> >
{meta.label} {meta.label}
</p> </p>
@@ -327,8 +330,8 @@ function Squadra() {
className="flex w-full min-w-0 items-center gap-2 rounded-2xl bg-card px-3 py-2.5 text-left shadow-card" className="flex w-full min-w-0 items-center gap-2 rounded-2xl bg-card px-3 py-2.5 text-left shadow-card"
> >
<Trophy className="h-5 w-5 shrink-0 text-warning" aria-hidden /> <Trophy className="h-5 w-5 shrink-0 text-warning" aria-hidden />
<span className="shrink-0 text-[14px] text-foreground/80">Classifica per</span> <span className="shrink-0 text-[15px] text-foreground/80">Classifica per</span>
<span className="min-w-0 flex-1 truncate text-right text-[14px] font-bold"> <span className="min-w-0 flex-1 truncate text-right text-[15px] font-bold">
{criteri.find((c) => c.id === criterio)?.label} {criteri.find((c) => c.id === criterio)?.label}
</span> </span>
<ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden /> <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
@@ -346,7 +349,7 @@ function Squadra() {
type="button" type="button"
onClick={() => setCriterio(c.id)} onClick={() => setCriterio(c.id)}
className={cn( className={cn(
"flex min-h-11 w-full items-center rounded-xl px-3 text-left text-sm font-bold", "flex min-h-11 w-full items-center rounded-xl px-3 text-left text-[15px] font-bold",
criterio === c.id criterio === c.id
? "bg-accent text-accent-foreground" ? "bg-accent text-accent-foreground"
: "bg-secondary text-foreground", : "bg-secondary text-foreground",
@@ -369,13 +372,13 @@ function Squadra() {
{rank[i]} {rank[i]}
</span> </span>
<div className="min-w-0"> <div className="min-w-0">
<p className="truncate text-sm font-bold"> <p className="truncate text-[15px] font-bold">
{g.nome} {g.nome}
{rank[i] === 1 ? ( {rank[i] === 1 ? (
<Crown className="ml-1 inline h-3.5 w-3.5 text-warning" /> <Crown className="ml-1 inline h-3.5 w-3.5 text-warning" />
) : null} ) : null}
</p> </p>
<p className="truncate text-xs text-muted-foreground"> <p className="truncate text-[13px] text-muted-foreground">
#{g.numero} · {g.ruolo} · {dettaglioClassifica(g, criterio)} #{g.numero} · {g.ruolo} · {dettaglioClassifica(g, criterio)}
</p> </p>
</div> </div>
@@ -415,14 +418,14 @@ function Squadra() {
<div className="mb-3 rounded-3xl bg-hero p-4 text-primary-foreground shadow-card"> <div className="mb-3 rounded-3xl bg-hero p-4 text-primary-foreground shadow-card">
<div className="flex items-end justify-between gap-3"> <div className="flex items-end justify-between gap-3">
<div> <div>
<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">
Progresso collettivo Progresso collettivo
</p> </p>
<p className="font-display text-4xl leading-none"> <p className="font-display text-4xl leading-none">
<Numero valore={mediaObiettivi} suffisso="%" /> <Numero valore={mediaObiettivi} suffisso="%" />
</p> </p>
</div> </div>
<p className="text-xs text-primary-foreground/70"> <p className="text-[13px] text-primary-foreground/70">
{completati}/{obiettivi.length} completati {completati}/{obiettivi.length} completati
</p> </p>
</div> </div>
@@ -446,12 +449,12 @@ function Squadra() {
<div className="flex items-start gap-2"> <div className="flex items-start gap-2">
<span className="text-lg leading-none">{o.emoji}</span> <span className="text-lg leading-none">{o.emoji}</span>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="text-sm font-bold leading-tight">{o.titolo}</p> <p className="text-[15px] font-bold leading-tight">{o.titolo}</p>
<p className="text-xs text-muted-foreground">{o.descrizione}</p> <p className="text-[13px] text-muted-foreground">{o.descrizione}</p>
</div> </div>
<span <span
className={cn( className={cn(
"rounded-full px-2 py-0.5 text-xs font-bold uppercase tracking-wide", "rounded-full px-2 py-0.5 text-[13px] font-bold uppercase tracking-wide",
fatto fatto
? "bg-success text-success-foreground" ? "bg-success text-success-foreground"
: "bg-secondary text-muted-foreground", : "bg-secondary text-muted-foreground",
@@ -461,15 +464,15 @@ function Squadra() {
</span> </span>
</div> </div>
<Barra percentuale={pct} trackClassName="mt-3" /> <Barra percentuale={pct} trackClassName="mt-3" />
<p className="mt-2 text-xs text-muted-foreground"> <p className="mt-2 text-[13px] text-muted-foreground">
{o.valore}/{o.target} {o.unita} · {pct}% {o.valore}/{o.target} {o.unita} · {pct}%
{o.scadenza ? ` · entro il ${formatData(o.scadenza)}` : ""} {o.scadenza ? ` · entro il ${formatData(o.scadenza)}` : ""}
</p> </p>
<p className="mt-1 text-xs font-semibold text-accent"> <p className="mt-1 text-[13px] font-semibold text-accent">
{microcopyObiettivo(o)} {microcopyObiettivo(o)}
</p> </p>
<p className="mt-0.5 text-xs text-muted-foreground">{o.impatto}</p> <p className="mt-0.5 text-[13px] text-muted-foreground">{o.impatto}</p>
<p className="mt-2 inline-flex items-center text-xs font-semibold text-accent"> <p className="mt-2 inline-flex items-center text-[13px] font-semibold text-accent">
Come funziona <ChevronRight className="h-3.5 w-3.5" /> Come funziona <ChevronRight className="h-3.5 w-3.5" />
</p> </p>
</button> </button>
@@ -493,8 +496,10 @@ function Squadra() {
<div className="rounded-3xl bg-card p-3 shadow-card"> <div className="rounded-3xl bg-card p-3 shadow-card">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Icon className="h-5 w-5 text-accent" /> <Icon className="h-5 w-5 text-accent" />
<p className="text-sm font-bold leading-tight">{b.nome}</p> <p className="text-[15px] font-bold leading-tight">{b.nome}</p>
<p className="ml-auto text-xs text-muted-foreground">{descrizioneSoglie(b)}</p> <p className="ml-auto text-[13px] text-muted-foreground">
{descrizioneSoglie(b)}
</p>
</div> </div>
<div className="mt-2 grid grid-cols-3 gap-1.5"> <div className="mt-2 grid grid-cols-3 gap-1.5">
{gradiOrdine.map((grado) => { {gradiOrdine.map((grado) => {
@@ -510,9 +515,11 @@ function Squadra() {
key={grado} key={grado}
className={cn("rounded-2xl p-2 text-center ring-1", meta.bg, meta.ring)} className={cn("rounded-2xl p-2 text-center ring-1", meta.bg, meta.ring)}
> >
<p className={cn("text-xs font-bold uppercase", meta.text)}>{meta.label}</p> <p className={cn("text-[13px] font-bold uppercase", meta.text)}>
{meta.label}
</p>
<p className="font-display text-lg leading-none">{b.soglie[grado]}</p> <p className="font-display text-lg leading-none">{b.soglie[grado]}</p>
<p className="text-xs text-muted-foreground"> <p className="text-[13px] text-muted-foreground">
{quanti}/{rosa.length} {quanti}/{rosa.length}
</p> </p>
</div> </div>