diff --git a/client/src/Board.css b/client/src/Board.css
index fddafa7..0447a41 100755
--- a/client/src/Board.css
+++ b/client/src/Board.css
@@ -137,17 +137,30 @@
user-select: none;
}
-.Players .PlayerSelector {
+.PlayerSelector {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.PlayerSelector .PlayerEntry {
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ width: 50%;
+}
+
+.Players .PlayerEntry {
border: 1px solid rgba(0,0,0,0);
border-radius: 0.5em;
}
-.Players .PlayerSelector[data-selectable=true]:hover {
+.Players .PlayerEntry[data-selectable=true]:hover {
border-color: rgba(0,0,0,0.5);
cursor: pointer;
}
-.Players .PlayerSelector[data-selected=true] {
+.Players .PlayerEntry[data-selected=true] {
background-color: rgba(255, 255, 0, 0.5);
}
diff --git a/client/src/Board.js b/client/src/Board.js
index e5a16c9..734cb34 100755
--- a/client/src/Board.js
+++ b/client/src/Board.js
@@ -438,10 +438,10 @@ const Players = ({ board }) => {
selectable = board.game.state === 'lobby' && (item.status === 'Not active' || board.game.color === color);
let toggleText = name ? name : "Available";
players.push((
-
{ selectable && toggleSelected(color) }} color={color}/>
{ selectable && toggleSelected(color) }}primary={toggleText} secondary={(
@@ -452,13 +452,13 @@ const Players = ({ board }) => {
{ board.game.state !== 'lobby' && board.game.color === color &&
}
-
+
));
}
return (
-
+
{ players }