Update Bracket Game

src/Infiltration/ui/BracketGame.tsx

@@ -6,10 +6,10 @@ import { GameTimer } from "./GameTimer";
 import { random } from "../utils";
 import { interpolate } from "./Difficulty";
 import { BlinkingCursor } from "./BlinkingCursor";
-import Typography from "@mui/material/Typography";
 import { Player } from "../../Player";
 import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
 import { KEY } from "../../utils/helpers/keyCodes";
+import { Paper, Box, Typography } from "@mui/material";
 
 interface Difficulty {
   [key: string]: number;
@@ -84,16 +84,16 @@ export function BracketGame(props: IMinigameProps): React.ReactElement {
   }
 
   return (
-    <Grid container spacing={3}>
+    <>
       <GameTimer millis={timer} onExpire={props.onFailure} />
-      <Grid item xs={12}>
+      <Paper sx={{ display: "grid", justifyItems: "center" }}>
         <Typography variant="h4">Close the brackets</Typography>
         <Typography style={{ fontSize: "5em" }}>
           {`${left}${right}`}
           <BlinkingCursor />
         </Typography>
         <KeyHandler onKeyDown={press} onFailure={props.onFailure} />
-      </Grid>
+      </Paper>
-    </Grid>
+    </>
   );
 }

src/Infiltration/ui/SlashGame.tsx

@@ -60,7 +60,7 @@ export function SlashGame(props: IMinigameProps): React.ReactElement {
   return (
     <>
       <GameTimer millis={5000} onExpire={props.onFailure} />
-      <Paper sx={{ display: "grid", gridTemplateColumns: "1fr", justifyItems: "center" }}>
+      <Paper sx={{ display: "grid", justifyItems: "center" }}>
         <Typography variant="h4">Slash when his guard is down!</Typography>
 
         {hasAugment ? (