diff --git a/webapp/src/components/game/LobbyGame.css b/webapp/src/components/game/LobbyGame.css index 322f9e0..fbfceca 100644 --- a/webapp/src/components/game/LobbyGame.css +++ b/webapp/src/components/game/LobbyGame.css @@ -1,14 +1,9 @@ -.lobby-container { - border: 1px solid #ccc; - padding: 20px; - border-radius: 5px; - } + + + +/** Deprecated**/ + - .lobby-title { - font-size: 24px; - font-weight: bold; - margin-bottom: 15px; - } .player-item { display: flex; @@ -19,53 +14,7 @@ padding: 10px; } - .add-bot-button { - background-color: #4CAF50; - color: white; - padding: 10px 20px; - border: none; - border-radius: 5px; - cursor: pointer; - margin-top: 10px; - } - .add-bot-button:disabled { - opacity: 0.5; - cursor: default; - } - .delete-button { - background-color: #f44336; - color: white; - padding: 5px 10px; - border: none; - border-radius: 3px; - cursor: pointer; - margin-left: 10px; - } - .delete-button:hover { - opacity: 0.8; - } - - .button-container { - display: flex; - justify-content: space-between; - } - - .start-game-button { - background-color: #007bff; - color: white; - padding: 10px 20px; - border: none; - border-radius: 5px; - cursor: pointer; - margin-left: 10px; - } - - .start-game-button:disabled { - background-color: #cccccc; /* Change background color for disabled state */ - color: #666666; /* Change text color for disabled state */ - cursor: not-allowed; /* Change cursor for disabled state */ - } \ No newline at end of file diff --git a/webapp/src/components/game/LobbyGame.scss b/webapp/src/components/game/LobbyGame.scss new file mode 100644 index 0000000..2e70893 --- /dev/null +++ b/webapp/src/components/game/LobbyGame.scss @@ -0,0 +1,90 @@ +table { + width: 100%; + border-collapse: collapse; + + th, td { + padding: 8px; + text-align: center; + } + + tr:nth-child(even) { + background-color: #f2f2f2; + } + + &:hover { + tr { + background-color: #ddd; + } + } + + img { + max-width: 100px; // Cambia el tamaño máximo de la imagen según sea necesario + height: auto; + display: block; + margin: 0 auto; // Centra la imagen horizontalmente + } + } + + .lobby-title { + font-size: 24px; + font-weight: bold; + margin-bottom: 15px; + } + + .add-bot-button { + background-color: #4CAF50; + color: white; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; + margin-top: 10px; + } + + .add-bot-button:disabled { + opacity: 0.5; + cursor: default; + } + + .delete-button { + background-color: #f44336; + color: white; + padding: 5px 10px; + border: none; + border-radius: 3px; + cursor: pointer; + margin-left: 10px; + } + + .delete-button:hover { + opacity: 0.8; + } + + .button-container { + display: flex; + justify-content: space-between; + } + + .start-game-button { + background-color: #007bff; + color: white; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; + margin-left: 10px; + } + + .start-game-button:disabled { + background-color: #cccccc; /* Change background color for disabled state */ + color: #666666; /* Change text color for disabled state */ + cursor: not-allowed; /* Change cursor for disabled state */ + } + + .lobby-container { + border: 1px solid #ccc; + padding: 20px; + border-radius: 5px; + } + + \ No newline at end of file diff --git a/webapp/src/components/game/LobbyGame.tsx b/webapp/src/components/game/LobbyGame.tsx index 9520bb2..e96d3c0 100644 --- a/webapp/src/components/game/LobbyGame.tsx +++ b/webapp/src/components/game/LobbyGame.tsx @@ -1,6 +1,6 @@ import { FC } from 'react' import { Player } from './GameSinglePlayer'; -import './LobbyGame.css'; +import './LobbyGame.scss'; interface LobbyGameProps { setPlayers: (players:Player[]) => void;