Feat: better style

src/components/Header.tsx

@@ -16,10 +16,10 @@ import { Context } from '../data/Context';
  * @return {JSX.Element}
  */
 export default function Header() {
-  const { title } = useContext(Context);
+  const { title, containerMaxWidth } = useContext(Context);
   return (
     <AppBar position='sticky'>
-      <Container maxWidth='lg'>
+      <Container maxWidth={containerMaxWidth} className='header-container'>
         <Toolbar className='header-container'>
           <Link to='/' style={{ textDecoration: 'none', color: 'inherit' }}>
             <img src='/logo192.png' className='header-icon'></img>

src/data/Context.tsx

@@ -1,3 +1,4 @@
+import { Breakpoint } from '@mui/material/styles';
 import { createContext } from 'react';
 import { DigitalrockAPi } from './DigitalrockApi';
 
@@ -10,6 +11,9 @@ export const Context = createContext<{
 
   title: string;
   setTitle: (title: string) => void;
+
+  containerMaxWidth: false | Breakpoint | undefined;
+  setContainerMaxWidth: (maxWidth: false | Breakpoint | undefined) => void;
 }>({
   api: new DigitalrockAPi(),
 
@@ -17,4 +21,9 @@ export const Context = createContext<{
   setTitle: () => {
     return;
   },
+
+  containerMaxWidth: 'lg',
+  setContainerMaxWidth: () => {
+    return;
+  },
 });

src/pages/CalendarPage.tsx

@@ -23,11 +23,12 @@ export default function CalendarPage() {
     React.useState<Competiton[]>();
   const [filter, setFilter] = React.useState<string>();
 
-  const { api, setTitle } = React.useContext(Context);
+  const { api, setTitle, setContainerMaxWidth } = React.useContext(Context);
   const navigate = useNavigate();
 
   React.useEffect(() => {
     setTitle('DAV calendar');
+    setContainerMaxWidth('lg');
   }, []);
 
   React.useEffect(() => {
@@ -62,8 +63,8 @@ export default function CalendarPage() {
 
   return (
     <>
-      <Grid container spacing={2}>
+      <Grid container spacing={2} direction={'column'}>
-        <Grid item xs={12}>
+        <Grid item>
           <TextField
             label='search for competition'
             variant='outlined'
@@ -72,7 +73,7 @@ export default function CalendarPage() {
           />
         </Grid>
         {filteredCompetitions?.map(competition => (
-          <Grid item key={`competition-card-${competition.WetId}`} xs={12}>
+          <Grid item key={`competition-card-${competition.WetId}`}>
             <Card>
               <CardContent>
                 <Typography gutterBottom variant='h5' component='div'>

src/pages/SpeedFlowchartPage.tsx

@@ -13,7 +13,7 @@ import { Card, CardContent, Grid, Skeleton, Typography } from '@mui/material';
  */
 export default function SpeedFlowchartPage() {
   const { competitionId, categoryId } = useParams();
-  const { api, setTitle } = useContext(Context);
+  const { api, setTitle, setContainerMaxWidth } = useContext(Context);
 
   const [loading, setLoading] = useState(true);
   const [flowchartResult, setFlowchartResult] =
@@ -24,6 +24,7 @@ export default function SpeedFlowchartPage() {
       return;
     }
     setTitle('');
+    setContainerMaxWidth(false);
 
     api.getCompetitionResults(competitionId, categoryId).then(r => {
       setTitle(
@@ -55,19 +56,26 @@ export default function SpeedFlowchartPage() {
             xs={12}
             md={12 / flowchartResult.rounds.length}
           >
-            <h3>{round.roundName}</h3>
+            <Grid item xs={12}>
-            <Grid container spacing={2}>
+              <Typography variant='h6' fontWeight={'bold'} gutterBottom>
-              {round.pairs.map((pair, pairKey) => (
+                {round.roundName}
+              </Typography>
+            </Grid>
+
             <Grid
-                  key={`flowchart-column-${roundKey}-pair-${pairKey}`}
+              container
-                  item
+              spacing={2}
-                  xs={12}
+              sx={{ height: '100%', justifyContent: 'space-around' }}
+              direction={'column'}
             >
+              {round.pairs.map((pair, pairKey) => (
+                <Grid key={`flowchart-column-${roundKey}-pair-${pairKey}`} item>
                   <Card>
                     <CardContent>
                       <Typography
                         sx={{
                           fontWeight: pair.winner === 'A' ? 'bold' : 'plain',
+                          color: pair.winner === 'A' ? '#4CAF50' : '',
                         }}
                       >
                         A: {pair.laneA?.participant.firstName}{' '}
@@ -77,6 +85,7 @@ export default function SpeedFlowchartPage() {
                       <Typography
                         sx={{
                           fontWeight: pair.winner === 'B' ? 'bold' : 'plain',
+                          color: pair.winner === 'B' ? '#4CAF50' : '',
                         }}
                       >
                         B: {pair.laneB?.participant.firstName}{' '}

src/utils/ContextWrapper.tsx

@@ -1,3 +1,4 @@
+import { Breakpoint } from '@mui/material/styles';
 import React from 'react';
 import { Context } from '../data/Context';
 import { DigitalrockAPi } from '../data/DigitalrockApi';
@@ -12,9 +13,14 @@ export default function ContextWrapper(props: { children: JSX.Element }) {
 
   const api = new DigitalrockAPi();
   const [title, setTitle] = React.useState('');
+  const [containerMaxWidth, setContainerMaxWidth] = React.useState<
+    false | Breakpoint | undefined
+  >('lg');
 
   return (
-    <Context.Provider value={{ api, title, setTitle }}>
+    <Context.Provider
+      value={{ api, title, setTitle, containerMaxWidth, setContainerMaxWidth }}
+    >
       {children}
     </Context.Provider>
   );

src/utils/PageTemplate.tsx

@@ -1,4 +1,6 @@
 import Container from '@mui/material/Container';
+import React from 'react';
+import { Context } from '../data/Context';
 import LocalizationProviderWrapper from './LocalizationProviderWrapper';
 
 /**
@@ -8,13 +10,14 @@ import LocalizationProviderWrapper from './LocalizationProviderWrapper';
  */
 export default function PageTemplate(props: { children: JSX.Element }) {
   const { children } = props;
+  const { containerMaxWidth } = React.useContext(Context);
 
   return (
     <LocalizationProviderWrapper>
       <Container
         sx={{ marginTop: '16px', marginBottom: '16px' }}
         className='root-container'
-        maxWidth='lg'
+        maxWidth={containerMaxWidth}
       >
         {children}
       </Container>