Better game list style

package.json

@@ -55,7 +55,7 @@
     "lint": "eslint src/",
     "prettier": "prettier --write src/",
     "eject": "react-scripts eject",
-    "server": "nodemon  --exec babel-node src/server/index.js ",
+    "server": "echo 'The server is now packaged in separate app. See https://github.com/jrmi/airboardgame-back'",
     "i18n:scanner": "i18next-scanner --config i18next-scanner.config.js 'src/**/*.{js,jsx}'",
     "cypress:open": "LANGUAGE=en cypress open",
     "cypress:run": "LANGUAGE=en cypress run",

src/index.css

@@ -1,12 +1,12 @@
 body {
-  max-width: 100vw;
+  /*max-width: 100vw;*/
   margin: 0;
   padding: 0;
   background-color: #202b38;
 }
 
 #root {
-  width: 100vw;
+  /*width: 100vw;
   height: 100vh;
-  overflow: hidden;
+  overflow: hidden;*/
 }

src/views/BoardView.js

@@ -17,6 +17,12 @@ import AutoSave from "../components/AutoSave";
 import ImageDropNPaste from "../components/ImageDropNPaste";
 import { getComponent } from "../components/boardComponents";
 
+const StyledBoardView = styled.div`
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+`;
+
 const BoardContainer = styled.div`
   width: 100%;
   height: 100%;
@@ -37,7 +43,7 @@ export const BoardView = ({ namespace, editMode = false }) => {
   const [edit, setEdit] = React.useState(editMode);
 
   return (
-    <>
+    <StyledBoardView>
       <NavBar
         setMenuOpen={setMenuOpen}
         setShowHelpModal={setShowHelpModal}
@@ -78,7 +84,7 @@ export const BoardView = ({ namespace, editMode = false }) => {
           />
         </BoardContainer>
       </ImageDropNPaste>
-    </>
+    </StyledBoardView>
   );
 };
 

src/views/GamesView.js

@@ -5,6 +5,51 @@ import { useTranslation } from "react-i18next";
 import { IS_PRODUCTION } from "../utils/settings";
 import { getGames, deleteGame } from "../utils/api";
 
+import { confirmAlert } from "react-confirm-alert";
+import "react-confirm-alert/src/react-confirm-alert.css";
+
+import styled from "styled-components";
+
+const GameView = styled.ul`
+  width: 50%;
+  margin: 0 auto;
+  position: relative;
+  & .new-game {
+    position: absolute;
+    top: 1em;
+    right: 2px;
+  }
+  & h1 {
+    color: hsl(210, 14%, 75%);
+  }
+`;
+
+const GameList = styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+
+const Game = styled.li`
+  width: 100%;
+  background-color: hsl(210, 26%, 19%);
+  color: hsl(210, 14%, 75%);
+  display: flex;
+  justify-content: space-between;
+
+  & .game-name {
+    margin: 0 1em;
+  }
+
+  & .button {
+    margin: 0 2px;
+  }
+
+  & .action {
+    padding: 0.6em 0;
+  }
+`;
+
 const GamesView = () => {
   const { t } = useTranslation();
   const [gameList, setGameList] = React.useState([]);
@@ -20,33 +65,50 @@ const GamesView = () => {
   }, [t]);
 
   const handleRemove = (idToRemove) => async () => {
-    deleteGame(idToRemove);
-    setGameList(gameList.filter(({ id }) => id !== idToRemove));
+    confirmAlert({
+      title: t("Confirmation"),
+      message: t("Do you really want to remove selected items ?"),
+      buttons: [
+        {
+          label: t("Yes"),
+          onClick: () => {
+            deleteGame(idToRemove);
+            setGameList(gameList.filter(({ id }) => id !== idToRemove));
+          },
+        },
+        {
+          label: t("No"),
+          onClick: () => {},
+        },
+      ],
+    });
   };
 
   return (
-    <>
-      <ul style={{ color: "#fff" }}>
-        {gameList.map(({ name, id }) => (
-          <li key={id}>
-            {name}
-            <Link to={`/game/${id}/session/`} className="button">
-              play
-            </Link>
-            <Link to={`/game/${id}/edit`} className="button">
-              edit
-            </Link>
-            <button onClick={handleRemove(id)} className="button">
-              remove
-            </button>
-          </li>
-        ))}
-      </ul>
-
-      <Link to={`/game/`} className="button">
-        New game
+    <GameView>
+      <Link to={`/game/`} className="button new-game">
+        Create new game
       </Link>
-    </>
+      <h1>Game list</h1>
+      <GameList>
+        {gameList.map(({ name, id }) => (
+          <Game key={id}>
+            <h2 className="game-name">{name}</h2>
+            <div className="action">
+              <Link to={`/game/${id}/session/`} className="button success">
+                play
+              </Link>
+              <Link to={`/game/${id}/edit`} className="button">
+                edit
+              </Link>
+              <button onClick={handleRemove(id)} className="button error">
+                X
+              </button>
+            </div>
+          </Game>
+        ))}
+      </GameList>
+    </GameView>
   );
 };