removing some of the classes

src/ui/React/Augmentation.tsx

@@ -1,9 +1,17 @@
 import * as React from "react";
+import { Theme } from "@mui/material/styles";
+import makeStyles from "@mui/styles/makeStyles";
+import createStyles from "@mui/styles/createStyles";
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    aug: {
+      color: theme.colors.combat,
+    },
+  }),
+);
 
 export function Augmentation({ name }: { name: string }): JSX.Element {
-  return (
-    <span className={"samefont"} style={{ color: "white" }}>
-      {name}
-    </span>
-  );
+  const classes = useStyles();
+  return <span className={classes.aug}>{name}</span>;
 }

src/ui/React/CharacterOverview.tsx

@@ -60,7 +60,9 @@ function Work(): React.ReactElement {
       </TableRow>
       <TableRow>
         <TableCell component="th" scope="row" colSpan={2} classes={{ root: classes.cellNone }}>
-          <Typography>+{Reputation(player.workRepGained)} rep</Typography>
+          <Typography>
+            +<Reputation reputation={player.workRepGained} /> rep
+          </Typography>
         </TableCell>
       </TableRow>
       <TableRow>

src/ui/React/CinematicText.tsx

@@ -24,12 +24,12 @@ export function CinematicText(props: IProps): React.ReactElement {
   }
 
   return (
-    <div>
+    <>
       {props.lines.slice(0, i).map((line, i) => (
         <Typography key={i}>{line}</Typography>
       ))}
       {props.lines.length > i && <CinematicLine key={i} text={props.lines[i]} onDone={advance} />}
       {!props.auto && props.onDone && done && <Button onClick={props.onDone}>Continue ...</Button>}
-    </div>
+    </>
   );
 }

src/ui/React/CodingContractModal.tsx

@@ -1,24 +1,37 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { KEY } from "../../utils/helpers/keyCodes";
 
 import { CodingContract, CodingContractType, CodingContractTypes } from "../../CodingContracts";
 import { ClickableTag, CopyableText } from "./CopyableText";
+import { Modal } from "./Modal";
+import { EventEmitter } from "../../utils/EventEmitter";
+import Typography from "@mui/material/Typography";
+import TextField from "@mui/material/TextField";
+import Button from "@mui/material/Button";
 
-type IProps = {
+interface IProps {
   c: CodingContract;
-  popupId: string;
   onClose: () => void;
   onAttempt: (answer: string) => void;
-};
+}
 
-export function CodingContractPopup(props: IProps): React.ReactElement {
+export const CodingContractEvent = new EventEmitter<[IProps]>();
+
+export function CodingContractModal(): React.ReactElement {
+  const [props, setProps] = useState<IProps | null>(null);
   const [answer, setAnswer] = useState("");
 
+  useEffect(() => {
+    CodingContractEvent.subscribe((props) => setProps(props));
+  });
+  if (props === null) return <></>;
+
   function onChange(event: React.ChangeEvent<HTMLInputElement>): void {
     setAnswer(event.target.value);
   }
 
   function onKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {
+    if (props === null) return;
     // React just won't cooperate on this one.
     // "React.KeyboardEvent<HTMLInputElement>" seems like the right type but
     // whatever ...
@@ -30,34 +43,47 @@ export function CodingContractPopup(props: IProps): React.ReactElement {
     }
   }
 
+  function close(): void {
+    if (props === null) return;
+    props.onClose();
+    setProps(null);
+  }
+
   const contractType: CodingContractType = CodingContractTypes[props.c.type];
   const description = [];
   for (const [i, value] of contractType.desc(props.c.data).split("\n").entries())
     description.push(<span key={i} dangerouslySetInnerHTML={{ __html: value + "<br />" }}></span>);
   return (
-    <div>
-      <CopyableText value={props.c.type} tag={ClickableTag.Tag_h1} />
-      <br />
-      <br />
-      <p>
+    <Modal open={props !== null} onClose={close}>
+      <Typography variant="h4">
+        <CopyableText value={props.c.type} />
+      </Typography>
+      <Typography>
         You are attempting to solve a Coding Contract. You have {props.c.getMaxNumTries() - props.c.tries} tries
         remaining, after which the contract will self-destruct.
-      </p>
+      </Typography>
       <br />
-      <p>{description}</p>
+      <Typography>{description}</Typography>
       <br />
-      <input
-        className="text-input"
-        style={{ width: "50%", marginTop: "8px" }}
-        autoFocus={true}
+      <TextField
+        autoFocus
         placeholder="Enter Solution here"
         value={answer}
         onChange={onChange}
         onKeyDown={onKeyDown}
+        InputProps={{
+          endAdornment: (
+            <Button
+              onClick={() => {
+                props.onAttempt(answer);
+                close();
+              }}
+            >
+              Solve
+            </Button>
+          ),
+        }}
       />
-      <button className={"std-button"} onClick={() => props.onAttempt(answer)}>
-        Solve
-      </button>
-    </div>
+    </Modal>
   );
 }

src/ui/React/Favor.tsx

@@ -1,10 +1,18 @@
 import * as React from "react";
 import { numeralWrapper } from "../../ui/numeralFormat";
+import { Theme } from "@mui/material/styles";
+import makeStyles from "@mui/styles/makeStyles";
+import createStyles from "@mui/styles/createStyles";
 
-export function Favor(favor: number | string): JSX.Element {
-  return (
-    <span className={"light-yellow samefont"}>
-      {typeof favor === "number" ? numeralWrapper.formatFavor(favor) : favor}
-    </span>
-  );
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    favor: {
+      color: theme.colors.rep,
+    },
+  }),
+);
+
+export function Favor({ favor }: { favor: number | string }): React.ReactElement {
+  const classes = useStyles();
+  return <span className={classes.favor}>{typeof favor === "number" ? numeralWrapper.formatFavor(favor) : favor}</span>;
 }

src/ui/React/HashRate.tsx

@@ -1,6 +1,7 @@
+import React from "react";
 import { numeralWrapper } from "../../ui/numeralFormat";
 import { Hashes } from "../../ui/React/Hashes";
 
-export function HashRate(hashes: number): JSX.Element {
-  return Hashes(`${numeralWrapper.formatHashes(hashes)} / sec`);
+export function HashRate({ hashes }: { hashes: number }): React.ReactElement {
+  return <Hashes hashes={`${numeralWrapper.formatHashes(hashes)} / sec`} />;
 }

src/ui/React/Hashes.tsx

@@ -1,10 +1,20 @@
 import * as React from "react";
 import { numeralWrapper } from "../../ui/numeralFormat";
+import { Theme } from "@mui/material/styles";
+import makeStyles from "@mui/styles/makeStyles";
+import createStyles from "@mui/styles/createStyles";
 
-export function Hashes(hashes: number | string): JSX.Element {
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    money: {
+      color: theme.colors.money,
+    },
+  }),
+);
+
+export function Hashes({ hashes }: { hashes: number | string }): React.ReactElement {
+  const classes = useStyles();
   return (
-    <span className={"money-gold samefont"}>
-      {typeof hashes === "number" ? numeralWrapper.formatHashes(hashes) : hashes}
-    </span>
+    <span className={classes.money}>{typeof hashes === "number" ? numeralWrapper.formatHashes(hashes) : hashes}</span>
   );
 }

src/ui/React/Modal.tsx

@@ -42,6 +42,8 @@ export const Modal = (props: IProps): React.ReactElement => {
     <M
       disableRestoreFocus
       disableScrollLock
+      disableEnforceFocus
+      disableAutoFocus
       open={props.open}
       onClose={props.onClose}
       closeAfterTransition

src/ui/React/Money.tsx

@@ -1,19 +1,34 @@
 import * as React from "react";
 import { numeralWrapper } from "../../ui/numeralFormat";
 import { IPlayer } from "../../PersonObjects/IPlayer";
+import { Theme } from "@mui/material/styles";
+import makeStyles from "@mui/styles/makeStyles";
+import createStyles from "@mui/styles/createStyles";
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    unbuyable: {
+      color: theme.palette.action.disabled,
+    },
+    money: {
+      color: theme.colors.money,
+    },
+  }),
+);
 
 interface IProps {
   money: number | string;
   player?: IPlayer;
 }
-export function Money(props: IProps): JSX.Element {
+export function Money(props: IProps): React.ReactElement {
+  const classes = useStyles();
   if (props.player !== undefined) {
     if (typeof props.money !== "number") throw new Error("if player if provided, money should be number, contact dev");
     if (!props.player.canAfford(props.money))
-      return <span className={"unbuyable samefont"}>{numeralWrapper.formatMoney(props.money)}</span>;
+      return <span className={classes.unbuyable}>{numeralWrapper.formatMoney(props.money)}</span>;
   }
   return (
-    <span className={"money-gold samefont"}>
+    <span className={classes.money}>
       {typeof props.money === "number" ? numeralWrapper.formatMoney(props.money) : props.money}
     </span>
   );

src/ui/React/Reputation.tsx

@@ -1,10 +1,22 @@
 import * as React from "react";
 import { numeralWrapper } from "../../ui/numeralFormat";
+import { Theme } from "@mui/material/styles";
+import makeStyles from "@mui/styles/makeStyles";
+import createStyles from "@mui/styles/createStyles";
 
-export function Reputation(reputation: number | string): JSX.Element {
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    reputation: {
+      color: theme.colors.rep,
+    },
+  }),
+);
+
+export function Reputation({ reputation }: { reputation: number | string }): React.ReactElement {
+  const classes = useStyles();
   return (
-    <span className={"reputation samefont"}>
-      {typeof reputation === "number" ? numeralWrapper.formatReputation(reputation) : reputation}
+    <span className={classes.reputation}>
+      {typeof reputation === "number" ? numeralWrapper.formatFavor(reputation) : reputation}
     </span>
   );
 }

src/ui/React/ReputationRate.tsx

@@ -1,6 +1,7 @@
+import React from "react";
 import { numeralWrapper } from "../../ui/numeralFormat";
 import { Reputation } from "../../ui/React/Reputation";
 
-export function ReputationRate(reputation: number): JSX.Element {
-  return Reputation(`${numeralWrapper.formatReputation(reputation)} / sec`);
+export function ReputationRate({ reputation }: { reputation: number }): React.ReactElement {
+  return <Reputation reputation={`${numeralWrapper.formatReputation(reputation)} / sec`} />;
 }