Player selection reduced for less real estate

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>

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);
 }
 

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((
-      <ListItem
+      <div
         data-selectable={selectable}
         data-selected={board.game.color === color}
-        className="PlayerSelector"
+        className="PlayerEntry"
         key={`player-${color}`}>
         <PlayerColor onClick={() => { selectable && toggleSelected(color) }} color={color}/>
         <ListItemText onClick={() => { selectable && toggleSelected(color) }}primary={toggleText} secondary={(
@@ -452,13 +452,13 @@ const Players = ({ board }) => {
         { board.game.state !== 'lobby' && board.game.color === color && 
           <Button onClick={() => toggleSelected(color)}>exit to lobby</Button>
         }
-      </ListItem>
+      </div>
     ));
   }
 
   return (
     <Paper className="Players">
-      <List>
+      <List className="PlayerSelector">
         { players }
       </List>
     </Paper>