Add 'QuickChess' label to top of page

package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "chess",
+  "name": "quickchess",
   "version": "0.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "chess",
+      "name": "quickchess",
       "version": "0.1.0",
       "dependencies": {
         "@testing-library/jest-dom": "^5.11.4",

src/index.css

@@ -10,6 +10,13 @@ body {
   justify-content: center;
 }
 
+#root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+}
+
 ol, ul {
   padding-left: 30px;
 }
@@ -54,6 +61,11 @@ ol, ul {
   }
 }
 
+.game {
+  height: 100%;
+  display: flex;
+}
+
 .square {
   background: #fff;
   border: none;
@@ -94,6 +106,7 @@ ol, ul {
 
 .game-board {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
 }

src/index.js

@@ -78,11 +78,14 @@ class Game extends React.Component {
 
   render() {
     return (
-      <div className="game">
+      <>
-        <div className="game-board">
+        <h2 className="white-on-light">QuickChess</h2>
-          {this.state.gameKey ? this.state.board : <NameForm onSubmit={this.setGameKey.bind(this)} />}
+        <div className="game">
+          <div className="game-board">
+            {this.state.gameKey ? this.state.board : <NameForm onSubmit={this.setGameKey.bind(this)} />}
+          </div>
         </div>
-      </div>
+      </>
     );
   }
 }