feat: Mejorar diseño del botón de salir de la partida
- Mover botón de arriba-izquierda a arriba-derecha - Cambiar color de amarillo a verde (bg-green-800) - Cambiar icono de flecha por icono de casita (home) - Cambiar texto de 'Salir' a 'Lobby' - Actualizar tooltip a 'Volver al lobby'
This commit is contained in:
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
@@ -20,23 +20,25 @@ export default function ExitGameButton({ onExit, playerName }: ExitGameButtonPro
|
||||
onClick={() => setShowConfirm(true)}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="fixed top-4 left-4 z-50 bg-yellow-900/80 hover:bg-yellow-800 text-white p-3 rounded-lg border border-yellow-700/50 backdrop-blur-sm shadow-lg transition-all group"
|
||||
title="Abandonar partida"
|
||||
className="fixed top-4 right-4 z-50 bg-green-800/80 hover:bg-green-700 text-white p-3 rounded-lg border border-green-600/50 backdrop-blur-sm shadow-lg transition-all group"
|
||||
title="Volver al lobby"
|
||||
>
|
||||
<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"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={2}
|
||||
stroke="currentColor"
|
||||
className="w-5 h-5"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
|
||||
clipRule="evenodd"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
|
||||
/>
|
||||
</svg>
|
||||
<span className="text-xs font-bold uppercase tracking-wider hidden md:inline">Salir</span>
|
||||
<span className="text-xs font-bold uppercase tracking-wider hidden md:inline">Lobby</span>
|
||||
</div>
|
||||
</motion.button>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user