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>
</div>
{view === 'lobby' && (
<div className="flex items-center gap-4 bg-black/50 px-4 py-2 rounded border border-white/10">
<span className="text-sm text-gray-400">AGENTE:</span>
<span className="font-bold text-yellow-500">{fullPlayerName}</span>
<div className="flex items-center gap-3 bg-black/50 px-4 py-2 rounded border border-white/10">
<div className="flex flex-col">
<span className="text-xs text-gray-400">AGENTE:</span>
<span className="font-bold text-yellow-500">{fullPlayerName}</span>
</div>
<LogoutButton onClick={handleLogout} />
</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">
<AnimatePresence mode="wait">

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

@@ -10,24 +10,23 @@ export default function LogoutButton({ onClick }: LogoutButtonProps) {
onClick={onClick}
whileHover={{ scale: 1.05 }}
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"
>
<div className="flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
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"
clipRule="evenodd"
/>
</svg>
<span className="text-xs font-bold uppercase tracking-wider hidden md:inline">Salir</span>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={2.5}
stroke="currentColor"
className="w-5 h-5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M5.636 5.636a9 9 0 1012.728 0M12 3v9"
/>
</svg>
</motion.button>
);
}