removing some of the classes

src/Infiltration/ui/BackwardGame.tsx

@@ -6,6 +6,7 @@ import { GameTimer } from "./GameTimer";
 import { random } from "../utils";
 import { interpolate } from "./Difficulty";
 import { BlinkingCursor } from "./BlinkingCursor";
+import Typography from "@mui/material/Typography";
 
 interface Difficulty {
   [key: string]: number;
@@ -46,17 +47,17 @@ export function BackwardGame(props: IMinigameProps): React.ReactElement {
     <Grid container spacing={3}>
       <GameTimer millis={timer} onExpire={props.onFailure} />
       <Grid item xs={12}>
-        <h1 className={"noselect"}>Type it backward</h1>
+        <Typography variant="h4">Type it backward</Typography>
         <KeyHandler onKeyDown={press} onFailure={props.onFailure} />
       </Grid>
       <Grid item xs={6}>
-        <p style={{ transform: "scaleX(-1)" }}>{answer}</p>
+        <Typography style={{ transform: "scaleX(-1)" }}>{answer}</Typography>
       </Grid>
       <Grid item xs={6}>
-        <p>
+        <Typography>
           {guess}
           <BlinkingCursor />
-        </p>
+        </Typography>
       </Grid>
     </Grid>
   );

src/Infiltration/ui/BracketGame.tsx

@@ -6,6 +6,7 @@ import { GameTimer } from "./GameTimer";
 import { random } from "../utils";
 import { interpolate } from "./Difficulty";
 import { BlinkingCursor } from "./BlinkingCursor";
+import Typography from "@mui/material/Typography";
 
 interface Difficulty {
   [key: string]: number;
@@ -79,11 +80,11 @@ export function BracketGame(props: IMinigameProps): React.ReactElement {
     <Grid container spacing={3}>
       <GameTimer millis={timer} onExpire={props.onFailure} />
       <Grid item xs={12}>
-        <h1 className={"noselect"}>Close the brackets</h1>
-        <p style={{ fontSize: "5em" }}>
+        <Typography variant="h4">Close the brackets</Typography>
+        <Typography style={{ fontSize: "5em" }}>
           {`${left}${right}`}
           <BlinkingCursor />
-        </p>
+        </Typography>
         <KeyHandler onKeyDown={press} onFailure={props.onFailure} />
       </Grid>
     </Grid>

src/Infiltration/ui/BribeGame.tsx

@@ -4,6 +4,7 @@ import { IMinigameProps } from "./IMinigameProps";
 import { KeyHandler } from "./KeyHandler";
 import { GameTimer } from "./GameTimer";
 import { interpolate } from "./Difficulty";
+import Typography from "@mui/material/Typography";
 
 interface Difficulty {
   [key: string]: number;
@@ -51,13 +52,19 @@ export function BribeGame(props: IMinigameProps): React.ReactElement {
     <Grid container spacing={3}>
       <GameTimer millis={timer} onExpire={props.onFailure} />
       <Grid item xs={12}>
-        <h1>Say something nice about the guard.</h1>
+        <Typography variant="h4">Say something nice about the guard.</Typography>
         <KeyHandler onKeyDown={press} onFailure={props.onFailure} />
       </Grid>
       <Grid item xs={6}>
-        <h2 style={{ fontSize: "2em" }}>↑</h2>
-        <h2 style={{ fontSize: "2em" }}>{choices[index]}</h2>
-        <h2 style={{ fontSize: "2em" }}>↓</h2>
+        <Typography variant="h5" color="primary">
+          ↑
+        </Typography>
+        <Typography variant="h5" color="primary">
+          {choices[index]}
+        </Typography>
+        <Typography variant="h5" color="primary">
+          ↓
+        </Typography>
       </Grid>
     </Grid>
   );

src/Infiltration/ui/CheatCodeGame.tsx

@@ -5,6 +5,7 @@ import { KeyHandler } from "./KeyHandler";
 import { GameTimer } from "./GameTimer";
 import { random, getArrow } from "../utils";
 import { interpolate } from "./Difficulty";
+import Typography from "@mui/material/Typography";
 
 interface Difficulty {
   [key: string]: number;
@@ -46,8 +47,8 @@ export function CheatCodeGame(props: IMinigameProps): React.ReactElement {
     <Grid container spacing={3}>
       <GameTimer millis={timer} onExpire={props.onFailure} />
       <Grid item xs={12}>
-        <h1 className={"noselect"}>Enter the Code!</h1>
-        <p style={{ fontSize: "5em" }}>{code[index]}</p>
+        <Typography variant="h4">Enter the Code!</Typography>
+        <Typography variant="h4">{code[index]}</Typography>
         <KeyHandler onKeyDown={press} onFailure={props.onFailure} />
       </Grid>
     </Grid>

src/Infiltration/ui/Countdown.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import Grid from "@mui/material/Grid";
 
+import Typography from "@mui/material/Typography";
 interface IProps {
   onFinish: () => void;
 }
@@ -19,8 +20,8 @@ export function Countdown(props: IProps): React.ReactElement {
     <>
       <Grid container spacing={3}>
         <Grid item xs={12}>
-          <h1>Get Ready!</h1>
-          <h1>{x}</h1>
+          <Typography variant="h4">Get Ready!</Typography>
+          <Typography variant="h4">{x}</Typography>
         </Grid>
       </Grid>
     </>

src/Infiltration/ui/Cyberpunk2077Game.tsx

@@ -5,6 +5,7 @@ import { KeyHandler } from "./KeyHandler";
 import { GameTimer } from "./GameTimer";
 import { interpolate } from "./Difficulty";
 import { getArrow } from "../utils";
+import Typography from "@mui/material/Typography";
 
 interface Difficulty {
   [key: string]: number;
@@ -75,8 +76,8 @@ export function Cyberpunk2077Game(props: IMinigameProps): React.ReactElement {
     <Grid container spacing={3}>
       <GameTimer millis={timer} onExpire={props.onFailure} />
       <Grid item xs={12}>
-        <h1 className={"noselect"}>Match the symbols!</h1>
-        <h2 style={{ fontSize: fontSize }}>
+        <Typography variant="h4">Match the symbols!</Typography>
+        <Typography variant="h5" color="primary">
           Targets:{" "}
           {answer.map((a, i) => {
             if (i == index)
@@ -91,7 +92,7 @@ export function Cyberpunk2077Game(props: IMinigameProps): React.ReactElement {
               </span>
             );
           })}
-        </h2>
+        </Typography>
         <br />
         {grid.map((line, y) => (
           <div key={y}>

src/Infiltration/ui/Game.tsx

@@ -11,6 +11,7 @@ import { Cyberpunk2077Game } from "./Cyberpunk2077Game";
 import { MinesweeperGame } from "./MinesweeperGame";
 import { WireCuttingGame } from "./WireCuttingGame";
 import { Victory } from "./Victory";
+import Typography from "@mui/material/Typography";
 
 interface IProps {
   StartingDifficulty: number;
@@ -130,9 +131,9 @@ export function Game(props: IProps): React.ReactElement {
     <>
       <Grid container spacing={3}>
         <Grid item xs={3}>
-          <h3>
+          <Typography>
             Level: {level}&nbsp;/&nbsp;{props.MaxLevel}
-          </h3>
+          </Typography>
           <Progress />
         </Grid>
 

src/Infiltration/ui/Intro.tsx

@@ -1,7 +1,8 @@
 import React from "react";
-import { StdButton } from "../../ui/React/StdButton";
 import { Location } from "../../Locations/Location";
 import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
 
 interface IProps {
   Location: Location;
@@ -52,37 +53,45 @@ export function Intro(props: IProps): React.ReactElement {
     <>
       <Grid container spacing={3}>
         <Grid item xs={10}>
-          <h1>Infiltrating {props.Location.name}</h1>
+          <Typography variant="h4">Infiltrating {props.Location.name}</Typography>
         </Grid>
         <Grid item xs={10}>
-          <h2>Maximum level: {props.MaxLevel}</h2>
+          <Typography variant="h5" color="primary">
+            Maximum level: {props.MaxLevel}
+          </Typography>
         </Grid>
         <Grid item xs={10}>
-          <pre>[{coloredArrow(props.Difficulty)}]</pre>
-          <pre>{` ^            ^            ^           ^`}</pre>
-          <pre>{` Trivial    Normal        Hard    Impossible`}</pre>
+          <Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>[{coloredArrow(props.Difficulty)}]</Typography>
+          <Typography
+            sx={{ lineHeight: "1em", whiteSpace: "pre" }}
+          >{` ^            ^            ^           ^`}</Typography>
+          <Typography
+            sx={{ lineHeight: "1em", whiteSpace: "pre" }}
+          >{` Trivial    Normal        Hard    Impossible`}</Typography>
         </Grid>
         <Grid item xs={10}>
-          <p>
+          <Typography>
             Infiltration is a series of short minigames that get progressively harder. You take damage for failing them.
             Reaching the maximum level rewards you with intel you can trade for money or reputation.
-          </p>
+          </Typography>
           <br />
-          <p>The minigames you play are randomly selected. It might take you few tries to get used to them.</p>
+          <Typography>
+            The minigames you play are randomly selected. It might take you few tries to get used to them.
+          </Typography>
           <br />
-          <p>No game require use of the mouse.</p>
+          <Typography>No game require use of the mouse.</Typography>
           <br />
-          <p>Spacebar is the default action/confirm button.</p>
+          <Typography>Spacebar is the default action/confirm button.</Typography>
           <br />
-          <p>Everything that uses arrow can also use WASD</p>
+          <Typography>Everything that uses arrow can also use WASD</Typography>
           <br />
-          <p>Sometimes the rest of the keyboard is used.</p>
+          <Typography>Sometimes the rest of the keyboard is used.</Typography>
         </Grid>
         <Grid item xs={3}>
-          <StdButton onClick={props.start} text={"Start"} />
+          <Button onClick={props.start}>Start</Button>
         </Grid>
         <Grid item xs={3}>
-          <StdButton onClick={props.cancel} text={"Cancel"} />
+          <Button onClick={props.cancel}>Cancel</Button>
         </Grid>
       </Grid>
     </>

src/Infiltration/ui/MinesweeperGame.tsx

@@ -5,6 +5,7 @@ import { KeyHandler } from "./KeyHandler";
 import { GameTimer } from "./GameTimer";
 import { interpolate } from "./Difficulty";
 import { getArrow } from "../utils";
+import Typography from "@mui/material/Typography";
 
 interface Difficulty {
   [key: string]: number;
@@ -81,7 +82,7 @@ export function MinesweeperGame(props: IMinigameProps): React.ReactElement {
     <Grid container spacing={3}>
       <GameTimer millis={timer} onExpire={props.onFailure} />
       <Grid item xs={12}>
-        <h1 className={"noselect"}>{memoryPhase ? "Remember all the mines!" : "Mark all the mines!"}</h1>
+        <Typography variant="h4">{memoryPhase ? "Remember all the mines!" : "Mark all the mines!"}</Typography>
         {minefield.map((line, y) => (
           <div key={y}>
             <pre>

src/Infiltration/ui/SlashGame.tsx

@@ -4,6 +4,7 @@ import { IMinigameProps } from "./IMinigameProps";
 import { KeyHandler } from "./KeyHandler";
 import { GameTimer } from "./GameTimer";
 import { interpolate } from "./Difficulty";
+import Typography from "@mui/material/Typography";
 
 interface Difficulty {
   [key: string]: number;
@@ -53,8 +54,8 @@ export function SlashGame(props: IMinigameProps): React.ReactElement {
     <Grid container spacing={3}>
       <GameTimer millis={5000} onExpire={props.onFailure} />
       <Grid item xs={12}>
-        <h1 className={"noselect"}>Slash when his guard is down!</h1>
-        <p style={{ fontSize: "5em" }}>{guarding ? "!Guarding!" : "!ATTACKING!"}</p>
+        <Typography variant="h4">Slash when his guard is down!</Typography>
+        <Typography variant="h4">{guarding ? "!Guarding!" : "!ATTACKING!"}</Typography>
         <KeyHandler onKeyDown={press} onFailure={props.onFailure} />
       </Grid>
     </Grid>

src/Infiltration/ui/Victory.tsx

@@ -1,11 +1,14 @@
 import { Factions } from "../../Faction/Factions";
 import React, { useState } from "react";
-import { StdButton } from "../../ui/React/StdButton";
 import Grid from "@mui/material/Grid";
 import { Money } from "../../ui/React/Money";
 import { Reputation } from "../../ui/React/Reputation";
 import { BitNodeMultipliers } from "../../BitNode/BitNodeMultipliers";
 import { use } from "../../ui/Context";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+import MenuItem from "@mui/material/MenuItem";
+import Select, { SelectChangeEvent } from "@mui/material/Select";
 
 interface IProps {
   StartingDifficulty: number;
@@ -50,7 +53,7 @@ export function Victory(props: IProps): React.ReactElement {
     quitInfiltration();
   }
 
-  function changeDropdown(event: React.ChangeEvent<HTMLSelectElement>): void {
+  function changeDropdown(event: SelectChangeEvent<string>): void {
     setFaction(event.target.value);
   }
 
@@ -58,46 +61,36 @@ export function Victory(props: IProps): React.ReactElement {
     <>
       <Grid container spacing={3}>
         <Grid item xs={10}>
-          <h1>Infiltration successful!</h1>
+          <Typography variant="h4">Infiltration successful!</Typography>
         </Grid>
         <Grid item xs={10}>
-          <h2>You can trade the confidential information you found for money or reputation.</h2>
-          <select className={"dropdown"} onChange={changeDropdown}>
-            <option key={"none"} value={"none"}>
+          <Typography variant="h5" color="primary">
+            You can trade the confidential information you found for money or reputation.
+          </Typography>
+          <Select value={faction} onChange={changeDropdown}>
+            <MenuItem key={"none"} value={"none"}>
               {"none"}
-            </option>
+            </MenuItem>
             {player.factions
               .filter((f) => Factions[f].getInfo().offersWork())
               .map((f) => (
-                <option key={f} value={f}>
+                <MenuItem key={f} value={f}>
                   {f}
-                </option>
+                </MenuItem>
               ))}
-          </select>
-          <StdButton
-            onClick={trade}
-            text={
-              <>
-                {"Trade for "}
-                {Reputation(repGain)}
-                {" reputation"}
-              </>
-            }
-          />
+          </Select>
+          <Button onClick={trade}>
+            Trade for <Reputation reputation={repGain} /> reputation
+          </Button>
         </Grid>
         <Grid item xs={3}>
-          <StdButton
-            onClick={sell}
-            text={
-              <>
-                {"Sell for "}
-                <Money money={moneyGain} />
-              </>
-            }
-          />
+          <Button onClick={sell}>
+            Sell for&nbsp;
+            <Money money={moneyGain} />
+          </Button>
         </Grid>
         <Grid item xs={3}>
-          <StdButton onClick={quitInfiltration} text={"Quit"} />
+          <Button onClick={quitInfiltration}>Quit</Button>
         </Grid>
       </Grid>
     </>