From 51a41ab2b7993d60e7bbf24050fa1a8892dd5ecf Mon Sep 17 00:00:00 2001
From: Kristoffer Juelsen <kristoju@stud.ntnu.no>
Date: Thu, 21 Apr 2022 14:47:13 +0200
Subject: [PATCH] Lines working, time to merge

---
 src/client/src/TournamentOverview.js          | 32 +++++++++++++------
 .../src/components/tournamentBracket.css      | 19 ++++-------
 2 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/src/client/src/TournamentOverview.js b/src/client/src/TournamentOverview.js
index 83852ad..732b02a 100644
--- a/src/client/src/TournamentOverview.js
+++ b/src/client/src/TournamentOverview.js
@@ -74,25 +74,37 @@ function Match(props){
         {/* Team 1 (Winner-status?) (Team name) */}
         <li className={`game game-top ${props.match.winnerId && (props.match.team1Id === props.match.winnerId) ? "winner"  : "loser"}`}>
           <Stack direction={"row"}>
-              <Typography className={`teamName`}>
+              <Typography className={`teamName`} align={'center'} sx={{fontSize:'1.5rem'}}>
                 {team1Name}
               </Typography>
-              {/* <IconButton className="removeWinner" color="error" aria-label="remmove winner" component="span"><BackspaceIcon /></IconButton> */}
-              <IconButton onClick={setWinner(props.match.team1Id)} className="selectWinner" color="success" aria-label="select winner" component="span"><AddCircleIcon /></IconButton>
-              {/* <Box className="winnerTrophy"><EmojiEventsIcon alt="A trohpy" color="gold" /></Box> */}
+              { props.match.winnerId && (props.match.team1Id === props.match.winnerId) &&
+              <IconButton color="error" aria-label="remmove winner" component="span"><BackspaceIcon /></IconButton>
+              }
+              { props.match.team1Id !== null &&
+              <IconButton onClick={setWinner(props.match.team1Id)} color="success" aria-label="select winner" component="span"><AddCircleIcon /></IconButton>
+              }
+              {/* { props.match.winnerId && (props.match.team1Id === props.match.winnerId) &&
+              <EmojiEventsIcon alt="A trohpy" color="gold" />
+              } */}
           </Stack>
         </li>
         <li className="game game-spacer">&nbsp;</li>
         {/* Team 2 (Winner-status?) (Team name) */}
         <li className={`game game-bottom ${props.match.winnerId && (props.match.team2Id === props.match.winnerId) ? "winner" : "loser"}`}>
-        <Stack direction={"row"}>
-              <Typography className={`teamName`}>
+        <Stack direction={"row"} sx={{alignItems:'center'}}>
+              <Typography className={`teamName`} sx={{fontSize:'1.5rem'}}>
                 {team2Name}
               </Typography>
-              {/* <IconButton className="removeWinner" color="error" aria-label="remmove winner" component="span"><BackspaceIcon /></IconButton> */}
-              <IconButton onClick={setWinner(props.match.team1Id)} className="selectWinner" color="success" aria-label="select winner" component="span"><AddCircleIcon /></IconButton>
-              {/* <Box className="winnerTrophy"><EmojiEventsIcon alt="A trohpy" color="gold" /></Box> */}
-          </Stack>
+              { props.match.winnerId && (props.match.team2Id === props.match.winnerId) &&
+              <IconButton color="error" aria-label="remmove winner" component="span"><BackspaceIcon /></IconButton>
+              }
+              { props.match.team2Id !== null &&
+              <IconButton onClick={setWinner(props.match.team2Id)} color="success" aria-label="select winner" component="span"><AddCircleIcon /></IconButton>
+              }
+              {/* { props.match.winnerId && (props.match.team2Id === props.match.winnerId) &&
+              <EmojiEventsIcon alt="A trohpy" color="gold" />
+              } */}
+            </Stack>
         </li>
         <li className="spacer">&nbsp;</li>
     </>
diff --git a/src/client/src/components/tournamentBracket.css b/src/client/src/components/tournamentBracket.css
index b80c01a..844f186 100644
--- a/src/client/src/components/tournamentBracket.css
+++ b/src/client/src/components/tournamentBracket.css
@@ -13,11 +13,11 @@
 	width:200px;
 	list-style:none;
 	padding:0;
+	font-size: 2rem;
   }
-	.round .spacer{ flex-grow:1; }
+	.round .spacer{ flex-grow:1;}
 	.round .spacer:first-child,
 	.round .spacer:last-child{ flex-grow:.5; }
-  
 	.round .game-spacer{
 	  flex-grow:1;
 	}
@@ -25,15 +25,15 @@
   /*
    *  General Styles
   */
-  /* body{
+/* body{
 	font-family:sans-serif;
-	font-size:small;
+	font-size:medium;
 	padding:10px;
 	line-height:1.4em;
   } */
 
   .teamName{
-	  max-width: 5vw;
+	  max-width: 7.5vw;
 	  overflow: hidden;
 	  word-wrap: none;
   }
@@ -44,13 +44,6 @@
   .winnerTrophy{
 	visibility: hidden;
   }
-  li.game > .removeWinner{
-	  display: none;
-  }
-
-	li.game.winner > .removeWinner{
-		display:inline-flex;
-	}
 	
 	.teamName.winner{
 	  font-weight:bold;
@@ -67,7 +60,7 @@
   
 	li.game-spacer{ 
 	  border-right:1px solid #aaa;
-	  min-height:40px;
+	  min-height:10vh;
 	}
   
 	li.game-bottom{