Contrast styling and bracket cleaning

src/client/src/components/tournamentBracket.css

@@ -29,11 +29,12 @@ html {
 .bracket .round .winners>div.matchups .matchup .participants {
 	border-radius: 0.25rem;
 	overflow: hidden;
+	border: 1px solid gray;
 }
 
 .bracket .round .winners>div.matchups .matchup .participants .participant {
 	box-sizing: border-box;
-	color: #858585;
+	color:  #404040;
 	border-left: 0.25rem solid #858585;
 	background: white;
 	width: 14rem;
@@ -42,7 +43,7 @@ html {
 }
 
 .bracket .round .winners>div.matchups .matchup .participants .participant.winner {
-	color: #60c645;
+	color: green;
 	border-color: #60c645;
 }
 

src/client/src/index.css

@@ -10,7 +10,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: #f0f2f2;
+  background-color: #929292;
 }
 
 code {

src/client/src/tournamentoverview.js

@@ -3,7 +3,6 @@ import { Link } from "react-router-dom";
 import Appbar from './components/appbar';
 import { useParams } from 'react-router-dom'
 import { Button } from "@mui/material";
-import AddCircleIcon from '@mui/icons-material/AddCircle';
 import "./components/tournamentBracket.css";
 
 function MatchPair(props) {
@@ -43,6 +42,7 @@ function TournamentTier(props) {
     for (let i = 0; i < matchPairCount; i++) {
       matchPairs.push(<MatchPair teams={props.teams} matches={props.matches.slice(i * 2, i * 2 + 2)} key={i} />);
     }
+
     return (
       <section className={`round ${roundTypes[props.tier]}`}>
         {matchPairs}
@@ -66,7 +66,7 @@ function Match(props) {
     let teamId = curryTeamId;
     console.log(teamId);
     if (!teamId || teamId == null) {
-      console.log("oops");
+      showError("No team selected");
       return;
     }
     let formData = new FormData();
@@ -122,7 +122,7 @@ function BracketViewer(props) {
         let tournament = data.data;
         setTournament(tournament);
       })
-      .catch((err) => console.log(err.message));
+      .catch(err => showError(err));
 
 
     fetch(process.env.REACT_APP_BACKEND_URL + `/api/tournament/${props.tournamentId}/getMatches`)
@@ -148,7 +148,7 @@ function BracketViewer(props) {
         
         setMatches(tiers);
       })
-      .catch((err) => console.log(err.message));
+      .catch(err => showError(err));
 
     fetch(process.env.REACT_APP_BACKEND_URL + `/api/tournament/${props.tournamentId}/getTeams`)
       .then(res => res.json())
@@ -161,7 +161,7 @@ function BracketViewer(props) {
         let teams = data.data;
         setTeams(teams);
       })
-      .catch((err) => console.log(err.message));
+      .catch(err => showError(err));
   }, []);
 
   return (
@@ -176,42 +176,12 @@ function BracketViewer(props) {
   );
 }
 
-// // api.post("/match/:matchId/setWinner"
-// function SelectWinnerButton(props) {
-//   const setWinner = function() {
-//     let formData = new FormData();
-//     formData.append("winner", props.teamId);
-//     let body = new URLSearchParams(formData);
-
-//     fetch(process.env.REACT_APP_BACKEND_URL + `/api/match/${props.matchId}`, {
-//       method: "POST",
-//       body: body
-//     })
-//       .then(response => response.json())
-//       .then(data => {
-//         if (data.status === "OK") {
-//           alert("Tournament created successfully");
-//           window.location.href = "/";
-//         } else {
-//           showError(data.data)
-//         }
-//       })
-//       .catch(error => showError(error));
-//   }
-//   return (
-//     <Button className="selectWinnerButton" variant="contained" color="success" onClick={setWinner} disabled={props.disableButton} >
-//       +
-//     </Button>
-//   );
-// }
-
 function showError(error) {
   alert("Something went wrong. \n" + error);
   console.error(error);
 }
 
 export default function TournamentOverview(props) {
-  // Use-effect hook here
   const { tournamentId } = useParams();
 
   return (