src/pages/SpeedFlowchartPage.tsx

@@ -4,14 +4,8 @@ import { useParams } from 'react-router-dom';
 import {
   convertResultsToSpeedFlowchartResult,
   SpeedFlowchartResult,
-  SpeedRoundPair,
 } from '../data/SpeedFlowchart';
 import { Card, CardContent, Grid, Skeleton, Typography } from '@mui/material';
-import { theme } from '../utils/Theme';
-
-interface SpeedRoundPairDummy extends SpeedRoundPair {
-  dummy: boolean;
-}
 
 /**
  *
@@ -43,17 +37,7 @@ export default function SpeedFlowchartPage() {
       console.log('loading false');
 
       const flowchartResult = convertResultsToSpeedFlowchartResult(r);
-      const l = flowchartResult.rounds.length;
-      const dummy: SpeedRoundPairDummy = { dummy: true };
-      flowchartResult.rounds[l - 2].pairs = [
-        dummy,
-        ...flowchartResult.rounds[l - 1].pairs,
-        ...flowchartResult.rounds[l - 2].pairs,
-      ];
-      flowchartResult.rounds[l - 2].roundName = `${
-        flowchartResult.rounds[l - 1].roundName
-      } / ${flowchartResult.rounds[l - 2].roundName}`;
-      flowchartResult.rounds.pop();
+      console.log(flowchartResult);
       setFlowchartResult(flowchartResult);
     });
   }, []);
@@ -72,7 +56,7 @@ export default function SpeedFlowchartPage() {
             xs={12}
             md={12 / flowchartResult.rounds.length}
           >
-            <Grid item className='center-children' xs={12}>
+            <Grid item xs={12}>
               <Typography variant='h6' fontWeight={'bold'} gutterBottom>
                 {round.roundName}
               </Typography>
@@ -86,18 +70,7 @@ export default function SpeedFlowchartPage() {
             >
               {round.pairs.map((pair, pairKey) => (
                 <Grid key={`flowchart-column-${roundKey}-pair-${pairKey}`} item>
-                  <Card
-                    sx={{
-                      opacity: (pair as SpeedRoundPairDummy).dummy ? 0 : 1,
-                      [theme.breakpoints.down('md')]: (
-                        pair as SpeedRoundPairDummy
-                      ).dummy
-                        ? {
-                            display: 'none',
-                          }
-                        : undefined,
-                    }}
-                  >
+                  <Card>
                     <CardContent>
                       <Typography
                         sx={{

src/utils/Theme.tsx

@@ -1,19 +1,6 @@
 import { CssBaseline } from '@mui/material';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 
-export const theme = createTheme({
-  components: {
-    MuiToggleButton: {
-      defaultProps: {
-        disableRipple: true,
-      },
-    },
-  },
-  palette: {
-    mode: 'dark',
-  },
-});
-
 /**
  * Sets a MaterialUi theme for its children
  * @param  {any} props accepts JSX elements to wrap theme in
@@ -21,8 +8,21 @@ export const theme = createTheme({
  */
 export default function Theme(props: { children: JSX.Element }) {
   const { children } = props;
+
+  const Theme = createTheme({
+    components: {
+      MuiToggleButton: {
+        defaultProps: {
+          disableRipple: true,
+        },
+      },
+    },
+    palette: {
+      mode: 'dark',
+    },
+  });
   return (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={Theme}>
       <CssBaseline />
       {children}
     </ThemeProvider>