Created and linked pages for creating tournaments and overview

src/client/src/components/home_image.js

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
+import logo from "./../Asura2222.png";
+
+export default function Home_Image() {
+  return (
+    <Link to="/">
+      <img src={logo} alt="Tournament logo"></img>
+    </Link>
+  );
+}

src/client/src/create_tournament.js

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

src/client/src/front_page.js

@@ -1,7 +1,18 @@
 import * as React from "react";
 import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
 import Manage_Button from "./components/manage_button";
+import Create_Tournament from "./create_tournament.js";
+import Tournament_Overview from "./tournament_overview.js";
 import Tournament_Manager from "./manage_tournament.js";
+import Home_Image from "./components/home_image";
+
+function Create_Button(props) {
+  return (
+    <button className="Create_Button">
+      <Link to="/create">Create Tournament</Link>
+    </button>
+  );
+}
 
 function Overview_Button(props) {
   return (
@@ -28,6 +39,8 @@ function ListElement(props) {
 function Home() {
   return (
     <React.StrictMode>
+      <Home_Image />
+      <Create_Button />
       <div id="tournamentList">
         <ListElement name="Weekend Warmup" competitors="16" date="29.04.2022" />
         <ListElement
@@ -46,6 +59,8 @@ export default function App() {
     <Router>
       <Routes>
         <Route path="/" element={<Home />} />
+        <Route path="/create" element={<Create_Tournament />} />
+        <Route path="/tournament" element={<Tournament_Overview />} />
         <Route path="/tournament/manage" element={<Tournament_Manager />} />
       </Routes>
     </Router>

src/client/src/index.css

@@ -29,26 +29,25 @@ code {
 }
 .ListElement {
   background-color: #073b4c;
-  width: 100%;
+  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;
-  display: inline;
-  width: 100%;
+  width: 10vw;
   height: 100%;
   color: #eeeeee;
-  padding-left: 5vh;
 }
 
 .Overview_Button {
   background-color: #118ab2;
-  display: inline;
-  width: 100%;
+  width: 10vw;
   height: 100%;
   color: #eeeeee;
 }

src/client/src/manage_tournament.js

@@ -1,9 +1,11 @@
 import * as React from "react";
 import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
+import Home_Image from "./components/home_image";
 
 export default function Tournament_Manager() {
   return (
     <React.Fragment>
+      <Home_Image />
       <h1 className="pageHeader">Tournament</h1>
       <br></br>
       <input

src/client/src/tournament_overview.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
+import Home_Image from "./components/home_image";
+
+export default function Tournament_Overview(props) {
+  return <Home_Image />;
+}