marti/FranciaOcupada
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: MissionReveal con tics blancos y mejor layout

Browse Source 
- Cambiar text-4xl a text-5xl para tics más grandes
- Agregar text-white para que los tics sean blancos
- Agregar font-bold para mejor visibilidad
- Mejorar layout con flex-col
- Agregar mensaje informativo
This commit is contained in:
Resistencia Dev
2025-12-05 23:34:21 +01:00
parent 40565a936b
commit 951098540c
1 changed files with 16 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
client/src/components/MissionReveal.tsx
View File

@@ -7,27 +7,26 @@ interface MissionRevealProps {
export default function MissionReveal({ votes }: MissionRevealProps) { export default function MissionReveal({ votes }: MissionRevealProps) {
return ( return (
<motion.div <motion.div
className="fixed inset-0 flex items-center justify-center bg-black/90 z-50" className="fixed inset-0 flex flex-col items-center justify-center bg-black/90 z-50"
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
> >
<div className="text-center"> <h2 className="text-4xl font-bold text-white mb-8">Resultados de la Misión</h2>
<h2 className="text-4xl font-bold text-white mb-8">Resultados de la Misión</h2> <div className="flex gap-4 justify-center mb-8">
<div className="flex gap-4 justify-center"> {votes.map((vote, idx) => (
{votes.map((vote, idx) => ( <motion.div
<motion.div key={idx}
key={idx} className={`w-24 h-32 rounded-lg flex items-center justify-center text-5xl font-bold text-white ${vote ? 'bg-blue-600' : 'bg-red-600'
className={`w-24 h-32 rounded-lg flex items-center justify-center text-4xl ${vote ? 'bg-blue-600' : 'bg-red-600' }`}
}`} initial={{ scale: 0, rotate: -180 }}
initial={{ scale: 0, rotate: -180 }} animate={{ scale: 1, rotate: 0 }}
animate={{ scale: 1, rotate: 0 }} transition={{ delay: idx * 0.3 }}
transition={{ delay: idx * 0.3 }} >
> {vote ? '✓' : '✗'}
{vote ? '✓' : '✗'} </motion.div>
</motion.div> ))}
))}
</div>
</div> </div>
<p className="text-white text-xl">Los resultados se revelarán automáticamente...</p>
</motion.div> </motion.div>
); );
} }