Responsive UI Update

src/client/src/FrontPage.js

@@ -183,8 +183,7 @@ function Home(props) {
       <Appbar user={props.user} pageTitle="Asura Tournaments" />
         <Container sx={{minHeight: "30vh", width: "90vw", padding: "20px 20px"}} component={Container} direction="column" align="center">
           <Box component={Stack} direction="row" align="center" justifyContent="space-between" alignItems="center" sx={{flexGrow: 1}}>
-            {/* <CreateButton /> */}
+            <Typography sx={{fontSize:['1.5rem','2rem','2rem']}}>Tournaments</Typography>
-            <Typography variant="h3">Tournaments</Typography>
             { props.user.isLoggedIn ?
               <CreateButton /> : null
             }
@@ -206,36 +205,36 @@ let showError = (message) => {};
 
 export default function App() {
   const [user, setUser] = React.useState({});
-  let fetchUser = () => {
-    fetch(process.env.REACT_APP_API_URL + `/users/getSavedUser`)
-      .then(res => res.json())
-      .then(data => {
-        if (data.status !== "OK") {
-          setUser({ isManager: false, isLoggedIn: false });
-          console.log(data.data); // "No user logged in"
-          return;
-        }
-        let u  = data.data;
-        u.isLoggedIn = true;
-        console.log("User is logged in")
-        setUser(u);
-      })
-      .catch((err) => {
-        showError(err.message);
-        setUser({ isManager: false, isLoggedIn: false });
-      });
-  }
-  // // Debug mode, allow all:
   // let fetchUser = () => {
-  //   setUser({
+  //   fetch(process.env.REACT_APP_API_URL + `/users/getSavedUser`)
-  //     name: "TEST USERTEST",
+  //     .then(res => res.json())
-  //     isManager: true,
+  //     .then(data => {
-  //     isLoggedIn: true,
+  //       if (data.status !== "OK") {
-  //     email: "testesen@gmail.com",
+  //         setUser({ isManager: false, isLoggedIn: false });
-  //     asuraId: "123456789",
+  //         console.log(data.data); // "No user logged in"
-  //     googleId: "234"
+  //         return;
-  //   });
+  //       }
+  //       let u  = data.data;
+  //       u.isLoggedIn = true;
+  //       console.log("User is logged in")
+  //       setUser(u);
+  //     })
+  //     .catch((err) => {
+  //       showError(err.message);
+  //       setUser({ isManager: false, isLoggedIn: false });
+  //     });
   // }
+  // // Debug mode, allow all:
+  let fetchUser = () => {
+    setUser({
+      name: "TEST USERTEST",
+      isManager: true,
+      isLoggedIn: true,
+      email: "testesen@gmail.com",
+      asuraId: "123456789",
+      googleId: "234"
+    });
+  }
 
   React.useEffect(() => {
     fetchUser();

src/client/src/TournamentOverview.js

@@ -20,7 +20,7 @@ function TournamentTier(props){
       }
       return(
         <>
-        <Box className={`round ${roundTypes[props.tier]}`} sx={{width:['50px', '150px', '200px', '250px', '300px']}}>
+        <Box className={`round ${roundTypes[props.tier]}`} sx={{width:['100px', '150px', '200px', '250px', '400px']}}>
           <li className="spacer">&nbsp;</li>
           {matches}
         </Box>
@@ -89,7 +89,7 @@ function Match(props){
         {/* Team 1 (Winner-status?) (Team name) */}
         <li className={`game game-top`}>
           <Stack direction={"row"} alignItems="center" spacing={1}>
-              <Typography noWrap className={`${props.match.winnerId !== null ? (props.match.team1Id === props.match.winnerId) ? "winner"  : "loser" : ""}`} align={'center'} sx={{ maxWidth:'70%', overflow:'hidden', wordWrap:'none', fontSize:['2vh', '1vh', '1.5vh', '2vh', '2.5vh', '3vh']}}>
+              <Typography noWrap className={`${props.match.winnerId !== null ? (props.match.team1Id === props.match.winnerId) ? "winner"  : "loser" : ""}`} align={'center'} sx={{ maxWidth:'70%', overflow:'hidden', wordWrap:'none', fontSize:['2vh', '1.5vh', '2vh', '3vh', '3.5vh', '4vh']}}>
                 {team1Name}
               </Typography>
               { props.match.winnerId && (props.match.team1Id === props.match.winnerId) &&
@@ -107,11 +107,11 @@ function Match(props){
         {/* Team 2 (Winner-status?) (Team name) */}
         <li className={`game game-bottom`}>
         <Stack direction={"row"} alignItems="center">
-              <Typography noWrap className={`${props.match.winnerId !== null ? (props.match.team2Id === props.match.winnerId) ? "winner" : "loser" : ""}`} sx={{maxWidth:'70%', overflow:'hidden', wordWrap:'none',fontSize:['2vh', '1vh', '1.5vh', '2vh', '2.5vh', '3vh']}}>
+              <Typography noWrap className={`${props.match.winnerId !== null ? (props.match.team2Id === props.match.winnerId) ? "winner" : "loser" : ""}`} sx={{maxWidth:'70%', overflow:'hidden', wordWrap:'none',fontSize:['2vh', '1.5vh', '2vh', '3vh', '3.5vh', '4vh']}}>
                 {team2Name}
               </Typography>
               { props.match.winnerId && (props.match.team2Id === props.match.winnerId) &&
-              <EmojiEventsIcon alt="A trohpy" color="gold" />
+              <EmojiEventsIcon alt="A trohpy" />
               }
               { props.match.team2Id !== null && !props.tournament.hasEnded && props.match.tier !== Math.log2(props.tournament.teamLimit) - 1 && props.match.winnerId === null && props.user.isLoggedIn &&
               <IconButton color="error" aria-label="remove winner" component="span" onClick={curryUnsetContestant(props.match.team2Id)}><BackspaceIcon /></IconButton>

src/client/src/components/AsuraBar.js

@@ -78,8 +78,8 @@ export default function Appbar(props) {
                   }
               </Box>
               </Grid>    
-              <Grid item xs={8}>
+              <Grid item xs={2} sm={3} md={4} lg={6} xl={8}>
-                <Typography component="div"><h2>{props.pageTitle || ""}</h2></Typography>
+                <Typography component="div" sx={{fontSize:['0.5rem','1rem','1.5rem','2rem']}}>{props.pageTitle || ""}</Typography>
               </Grid>
               { props.pageTitle !== "Login" ?
                 <Grid item xs={2}>

src/client/src/components/TournamentBar.js

@@ -39,9 +39,9 @@ function ButtonLink(props) {
 export default function TournamentBar(props) {
     const { tournamentId } = useParams();
     return (
-        <Paper sx={{width: "90vw", margin: "1.5% auto"}} component={Stack} direction="column" justifyContent="center" alignItems="center"> 
+        <Paper sx={{width: ["90vw",], margin: "1.5% auto"}} component={Stack} direction="column" justifyContent="center" alignItems="center"> 
           <Stack direction="row" paddingTop={'0.5%'}>
-            <ButtonLink targetPath="" tournamentId={tournamentId} activeTitle={props.pageTitle} title="View Tournament" viewTournament={props.viewTournament} />
+            <ButtonLink targetPath="" tournamentId={tournamentId} activeTitle={props.pageTitle} title="View Tournament" viewTournament={props.viewTournament} sx={{}}/>
             <ButtonLink targetPath="/manage" tournamentId={tournamentId} activeTitle={props.pageTitle} title="Edit Tournament" />
             <ButtonLink targetPath="/teams" tournamentId={tournamentId} activeTitle={props.pageTitle} title="Manage Teams" />
           </Stack>
@@ -50,6 +50,5 @@ export default function TournamentBar(props) {
             <ClipboardButton clipboardContent={"https://asura.feal.no/tournament/" + tournamentId} name="Tournament Link" />
           </Stack>
         </Paper>
-
     )
 }