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

fix: Mejorar diseño del botón de logout

Browse Source 
- Cambiar icono a power button (Heroicons)
- Mover botón debajo del nombre del agente en el lobby
- Hacer botón más compacto (circular)
- Mejorar layout del header del lobby
This commit is contained in:
Resistencia Dev
2025-12-22 17:08:07 +01:00
parent 53a5e3886e
commit 1c03149bbd
2 changed files with 21 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
client/src/app/page.tsx
View File

@@ -220,16 +220,16 @@ export default function Home() {
</h1> </h1>
</div> </div>
{view === 'lobby' && ( {view === 'lobby' && (
<div className="flex items-center gap-4 bg-black/50 px-4 py-2 rounded border border-white/10"> <div className="flex items-center gap-3 bg-black/50 px-4 py-2 rounded border border-white/10">
<span className="text-sm text-gray-400">AGENTE:</span> <div className="flex flex-col">
<span className="font-bold text-yellow-500">{fullPlayerName}</span> <span className="text-xs text-gray-400">AGENTE:</span>
<span className="font-bold text-yellow-500">{fullPlayerName}</span>
</div>
<LogoutButton onClick={handleLogout} />
</div> </div>
)} )}
</div> </div>
{/* Botón de Logout - solo en lobby */}
{view === 'lobby' && <LogoutButton onClick={handleLogout} />}
<div className="z-10 w-full flex-1 flex flex-col items-center justify-center p-4"> <div className="z-10 w-full flex-1 flex flex-col items-center justify-center p-4">
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">

31
client/src/components/LogoutButton.tsx
View File

@@ -10,24 +10,23 @@ export default function LogoutButton({ onClick }: LogoutButtonProps) {
onClick={onClick} onClick={onClick}
whileHover={{ scale: 1.05 }} whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
className="fixed top-4 left-4 z-50 bg-red-900/80 hover:bg-red-800 text-white p-3 rounded-lg border border-red-700/50 backdrop-blur-sm shadow-lg transition-all group" className="fixed top-4 left-4 z-50 bg-red-900/80 hover:bg-red-800 text-white p-2 rounded-full border border-red-700/50 backdrop-blur-sm shadow-lg transition-all"
title="Salir del juego" title="Salir del juego"
> >
<div className="flex items-center gap-2"> <svg
<svg xmlns="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" fill="none"
className="h-5 w-5" viewBox="0 0 24 24"
viewBox="0 0 20 20" strokeWidth={2.5}
fill="currentColor" stroke="currentColor"
> className="w-5 h-5"
<path >
fillRule="evenodd" <path
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z" strokeLinecap="round"
clipRule="evenodd" strokeLinejoin="round"
/> d="M5.636 5.636a9 9 0 1012.728 0M12 3v9"
</svg> />
<span className="text-xs font-bold uppercase tracking-wider hidden md:inline">Salir</span> </svg>
</div>
</motion.button> </motion.button>
); );
} }