Small changes

Co-authored-by: krloer
Co-authored-by: SgtPodding

src/client/src/components/save_button.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
+
+export default function Save_Button(props) {
+    return (
+      <Link to="/">
+        <button>Create Tournament!</button>
+      </Link>
+    );
+  }

src/client/src/create_tournament.js

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
+import Save_Button from "./components/save_button";
 import Home_Image from "./components/home_image";
 
 function Format_Selector(props) {
@@ -13,18 +14,28 @@ function Format_Selector(props) {
   );
 }
 
-function Save_Button(props) {
+function Create_Form(props) {
   return (
-    <Link to="/">
-      <button>Create Tournament!</button>
-    </Link>
-  );
+    <form>
+      <label for="organizer">Tournament Organizer:</label><br />
+      <input type="text" id="organizer" /><br />
+      <label for="name">Tournament Name:</label><br />
+      <input type="text" id="name" /><br />
+      <label for="description">Description</label><br />
+      <input type="text" id="description" /><br />
+      <label for="image">Tournament Image:</label><br />
+      <input type="image" id="image" /><br />
+      <label for="date">Start Time:</label><br />
+      <input type="date" id="date" /><br />
+    </form>
+  )
 }
 
 export default function Create_Tournament(props) {
   return (
     <React.Fragment>
       <Home_Image />
+      <Create_Form />
       <Format_Selector />
       <Save_Button />
     </React.Fragment>

src/client/src/front_page.js

@@ -6,33 +6,38 @@ import Tournament_Overview from "./tournament_overview.js";
 import Tournament_Manager from "./manage_tournament.js";
 import Home_Image from "./components/home_image";
 
+import 'bootstrap/dist/css/bootstrap.min.css'
+import Button from 'react-boostrap/Button'
+import Container from 'react-boostrap/Container'
+import Card from 'react-boostrap/Card'
+
 function Create_Button(props) {
   return (
-    <button className="Create_Button">
+    <Button className="Create_Button" variant='primary'>
       <Link to="/create">Create Tournament</Link>
-    </button>
+    </Button>
   );
 }
 
 function Overview_Button(props) {
   return (
-    <button className="Overview_Button">
+    <Button className="Overview_Button" variant='secondary'>
       <Link to="/tournament">View Tournament</Link>
-    </button>
+    </Button>
   );
 }
 
 function ListElement(props) {
   return (
-    <div>
-      <div className="ListElement">
+    <Container>
+      <Card className="ListElement">
         <div className="tournamentDetails">
           {props.name}, {props.competitors} competitors, Date: {props.date}
         </div>
         <Manage_Button />
         <Overview_Button />
-      </div>
-    </div>
+      </Card>
+    </Container>
   );
 }
 
@@ -41,7 +46,7 @@ function Home() {
     <React.StrictMode>
       <Home_Image />
       <Create_Button />
-      <div id="tournamentList">
+      <Card id="tournamentList">
         <ListElement name="Weekend Warmup" competitors="16" date="29.04.2022" />
         <ListElement
           name="Saturday Showdown"
@@ -49,7 +54,7 @@ function Home() {
           date="30.04.2022"
         />
         <ListElement name="Sunday Funday" competitors="64" date="01.05.2022" />
-      </div>
+      </Card>
     </React.StrictMode>
   );
 }

src/client/src/index.css

@@ -17,37 +17,3 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
-
-#tournamentList {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin: auto auto;
-  margin-top: 25vh;
-  width: 80vw;
-}
-.ListElement {
-  background-color: #073b4c;
-  width: 40vw;
-  height: 7vh;
-  display: grid;
-  flex-flow: row;
-  column-gap: 5vw;
-  grid-template-columns: 4fr 1fr 1fr;
-  margin-bottom: 5vh;
-}
-
-.Manage_Button {
-  background-color: #ef476f;
-  width: 10vw;
-  height: 100%;
-  color: #eeeeee;
-}
-
-.Overview_Button {
-  background-color: #118ab2;
-  width: 10vw;
-  height: 100%;
-  color: #eeeeee;
-}

src/client/src/manage_tournament.js

@@ -2,36 +2,32 @@ import * as React from "react";
 import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
 import Home_Image from "./components/home_image";
 
+function Manage_Tournament(props) {
+  return (
+    <form>
+      <label>Edit name: <br />
+        <input type="text" id="edtName" /><br />
+      </label>
+      <label>Edit description: <br />
+        <input type="text" id="edtDesc" /><br />
+      </label>
+      <label>Edit image: <br />
+        <input type="image" id="edtImage" /><br />
+      </label>
+      <label>Edit start time: <br />
+        <input type="date" id="edtTime" /><br />
+      </label>
+    </form>
+  )
+}
+
+
 export default function Tournament_Manager() {
   return (
     <React.Fragment>
       <Home_Image />
-      <h1 className="pageHeader">Tournament</h1>
-      <br></br>
-      <input
-        className="Manage_Input"
-        type="text"
-        id="new_ame"
-        placeholder="Edit Name"
-      ></input>
-      <br></br>
-      <input
-        className="Manage_Input"
-        type="text"
-        id="new_description"
-        placeholder="Edit Name"
-      ></input>
-      <br></br>
-      <input
-        className="Manage_Input"
-        type="image"
-        id="new_image"
-        placeholder="Edit Image"
-      ></input>
-      <br></br>
-      <button>
-        <Link to="/">Save and Exit</Link>
-      </button>
+      <Manage_Tournament />
+      <Save_Button />
     </React.Fragment>
   );
 }