Merge pull request #17 from hatchways/create-ui-new-game_tony_13

Create UI for New Game

.gitignore

@@ -13,6 +13,7 @@ node_modules/
 .env.development.local
 .env.test.local
 .env.production.local
+.vscode/*
 
 npm-debug.log*
 yarn-debug.log*

client/src/App.js

@@ -4,14 +4,16 @@ import { BrowserRouter, Route } from "react-router-dom";
 
 import { theme } from "./themes/theme";
 import LandingPage from "./pages/Landing";
+import CreateGame from "./pages/create_game/CreateGame";
 
 import "./App.css";
 
 function App() {
   return (
     <MuiThemeProvider theme={theme}>
       <BrowserRouter>
-        <Route path="/" component={LandingPage} />
+        <Route exact path="/" component={LandingPage} />
+        <Route path="/create_game" component={CreateGame} />
       </BrowserRouter>
     </MuiThemeProvider>
   );

client/src/pages/common/Header.js

@@ -0,0 +1,30 @@
+import React from "react";
+import Grid from "@material-ui/core/Grid";
+import Typography from "@material-ui/core/Typography";
+
+import "../common/common.css";
+
+function Header(props) {
+  return (
+    <>
+      <Grid
+        container
+        className="header"
+        direction="column"
+        justify="center"
+        alignItems="center"
+      >
+        <Grid item>
+          <Typography className="title" align="center" variant="h4">
+            {props.title}
+          </Typography>
+        </Grid>
+        <Grid item>
+          <div className="underscore" />
+        </Grid>
+      </Grid>
+    </>
+  );
+}
+
+export default Header;

client/src/pages/common/common.css

@@ -0,0 +1,9 @@
+.header .title {
+  padding: 15px;
+}
+
+.header .underscore {
+  height: 3px;
+  width: 75px;
+  background-color: limegreen;
+}

client/src/pages/create_game/CreateGame.css

@@ -0,0 +1,12 @@
+.header {
+  margin-bottom: 15px;
+}
+
+.panel {
+  padding: 25px 40px;
+  min-width: 350px;
+}
+
+.panel .grid-input {
+  margin-right: 8px;
+}

client/src/pages/create_game/CreateGame.js

@@ -0,0 +1,68 @@
+import React from "react";
+import Button from "@material-ui/core/Button";
+import Container from "@material-ui/core/Container";
+import Grid from "@material-ui/core/Grid";
+import Input from "@material-ui/core/Input";
+import Typography from "@material-ui/core/Typography";
+
+import Header from "../common/Header";
+import "./CreateGame.css";
+
+function CreateGame() {
+  return (
+    <Container>
+      <Grid container direction="column" justify="center" alignItems="center">
+        <Grid item className="header">
+          <Header title="Welcome" />
+        </Grid>
+        <Grid item>
+          <Grid container justify="center" alignItems="center">
+            <Grid item className="panel">
+              <Grid container direction="column">
+                <Grid item>
+                  <Grid container direction="column">
+                    <Grid item>
+                      <Typography variant="h6" gutterBottom>
+                        Join a Game:
+                      </Typography>
+                    </Grid>
+                    <Grid item>
+                      <Grid container alignItems="center">
+                        <Grid item className="grid-input">
+                          <Input placeholder="Enter Game ID" />
+                        </Grid>
+                        <Grid item>
+                          <Button variant="contained" color="primary">
+                            Join
+                          </Button>
+                        </Grid>
+                      </Grid>
+                    </Grid>
+                  </Grid>
+                </Grid>
+              </Grid>
+            </Grid>
+            <Grid item className="panel">
+              <Grid container direction="column">
+                <Grid item>
+                  <Grid container direction="column">
+                    <Grid item>
+                      <Typography variant="h6" gutterBottom>
+                        New Game:
+                      </Typography>
+                    </Grid>
+                    <Grid item>
+                      <Button variant="contained">Create</Button>
+                    </Grid>
+                  </Grid>
+                </Grid>
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}
+
+export default CreateGame;