Updated front-end to match back-end and better styling

src/layout/views/Lobby/Lobby.tsx

@@ -0,0 +1,46 @@
+import {FunctionComponent} from "react";
+import {Connection} from "../../pages/Room";
+import {Button} from "../../components/Button";
+
+interface Props {
+    winner: string | undefined;
+    handleLobbyAction: (action: string) => void;
+    playerList: Connection[];
+    onKickClick: (playerId: string) => void;
+}
+
+const Lobby: FunctionComponent<Props> = ({winner, handleLobbyAction, playerList, onKickClick}) => {
+
+    const onStartClick = () => {
+        console.log('Start Game');
+        handleLobbyAction("START");
+    }
+
+    return (
+        <main className={"game-lobby"}>
+            <h1>Waiting for host to start the game</h1>
+            <section>
+                <h2>Players</h2>
+                <ol className={"game-lobby__player-list"}>
+                    {
+                        playerList.map((player) => {
+                            return <li key={player.Id}>
+                                <p>{player.Name}</p>
+                                <Button className={"button-danger"} onClick={() => onKickClick(player.Id)}>Kick</Button>
+                            </li>
+                        })
+                    }
+                </ol>
+            </section>
+            <section>
+                <h2>Game Settings</h2>
+                <i>Not available... yet?</i>
+            </section>
+            <Button className={"button-success game-lobby__start-game"} onClick={onStartClick}>
+                <strong>Start Game</strong>
+            </Button>
+        </main>
+    );
+}
+
+export default Lobby;