Everything except Gang is Muified

src/Casino/CoinFlip.tsx

@@ -53,7 +53,13 @@ export function CoinFlip(props: IProps): React.ReactElement {
     }
     const correct: boolean = guess === letter;
 
-    setResult(<span className={correct ? "text" : "failure"}>{letter}</span>);
+    setResult(
+      <Box display="flex">
+        <Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }} color={correct ? "primary" : "error"}>
+          {letter}
+        </Typography>
+      </Box>,
+    );
     setStatus(correct ? " win!" : "lose!");
     setPlayLock(true);
 
@@ -68,15 +74,7 @@ export function CoinFlip(props: IProps): React.ReactElement {
 
   return (
     <>
-      <Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>{`+———————+`}</Typography>
-      <Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>{`| |   | |`}</Typography>
-      <Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>
-        {`| | `}
-        {result}
-        {` | |`}
-      </Typography>
-      <Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>{`| |   | |`}</Typography>
-      <Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>{`+———————+`}</Typography>
+      <Typography>Result:</Typography> {result}
       <Box display="flex" alignItems="center">
         <TextField
           type="number"
@@ -95,7 +93,6 @@ export function CoinFlip(props: IProps): React.ReactElement {
           }}
         />
       </Box>
-
       <Typography variant="h3">{status}</Typography>
     </>
   );

src/Corporation/ui/HeaderTab.tsx

@@ -1,20 +0,0 @@
-import React from "react";
-
-interface IProps {
-  current: boolean;
-  text: string;
-  onClick: () => void;
-}
-
-export function HeaderTab(props: IProps): React.ReactElement {
-  let className = "cmpy-mgmt-header-tab";
-  if (props.current) {
-    className += " current";
-  }
-
-  return (
-    <button className={className} onClick={props.onClick}>
-      {props.text}
-    </button>
-  );
-}

src/Corporation/ui/MoneyCost.tsx

@@ -1,14 +1,30 @@
 import * as React from "react";
 import { numeralWrapper } from "../../ui/numeralFormat";
 import { ICorporation } from "../ICorporation";
+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;
   corp: ICorporation;
 }
-export function MoneyCost(props: IProps): JSX.Element {
-  if (!props.corp.funds.gt(props.money))
-    return <span className={"unbuyable samefont"}>{numeralWrapper.formatMoney(props.money)}</span>;
 
-  return <span className={"money-gold samefont"}>{numeralWrapper.formatMoney(props.money)}</span>;
+export function MoneyCost(props: IProps): React.ReactElement {
+  const classes = useStyles();
+  if (!props.corp.funds.gt(props.money))
+    return <span className={classes.unbuyable}>{numeralWrapper.formatMoney(props.money)}</span>;
+
+  return <span className={classes.money}>{numeralWrapper.formatMoney(props.money)}</span>;
 }

src/Faction/ui/CreateGangModal.tsx

@@ -0,0 +1,64 @@
+/**
+ * React Component for the popup used to create a new gang.
+ */
+import React from "react";
+import { Modal } from "../../ui/React/Modal";
+import { use } from "../../ui/Context";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+
+interface IProps {
+  open: boolean;
+  onClose: () => void;
+  facName: string;
+}
+
+export function CreateGangModal(props: IProps): React.ReactElement {
+  const player = use.Player();
+  const router = use.Router();
+  const combatGangText =
+    "This is a COMBAT gang. Members in this gang will have different tasks than HACKING gangs. " +
+    "Compared to hacking gangs, progression with combat gangs can be more difficult as territory management " +
+    "is more important. However, well-managed combat gangs can progress faster than hacking ones.";
+
+  const hackingGangText =
+    "This is a HACKING gang. Members in this gang will have different tasks than COMBAT gangs. " +
+    "Compared to combat gangs, progression with hacking gangs is more straightforward as territory warfare " +
+    "is not as important.";
+
+  function isHacking(): boolean {
+    return ["NiteSec", "The Black Hand"].includes(props.facName);
+  }
+
+  function createGang(): void {
+    player.startGang(props.facName, isHacking());
+    props.onClose();
+    router.toGang();
+  }
+
+  function onKeyUp(event: React.KeyboardEvent): void {
+    if (event.keyCode === 13) createGang();
+  }
+
+  return (
+    <Modal open={props.open} onClose={props.onClose}>
+      <Typography>
+        Would you like to create a new Gang with {props.facName}?
+        <br />
+        <br />
+        Note that this will prevent you from creating a Gang with any other Faction until this BitNode is destroyed. It
+        also resets your reputation with this faction.
+        <br />
+        <br />
+        {isHacking() ? hackingGangText : combatGangText}
+        <br />
+        <br />
+        Other than hacking vs combat, there are NO differences between the Factions you can create a Gang with, and each
+        of these Factions have all Augmentations available.
+      </Typography>
+      <Button onClick={createGang} onKeyUp={onKeyUp} autoFocus>
+        Create Gang
+      </Button>
+    </Modal>
+  );
+}

src/Faction/ui/CreateGangPopup.tsx

@@ -1,69 +0,0 @@
-/**
- * React Component for the popup used to create a new gang.
- */
-import React from "react";
-import { removePopup } from "../../ui/React/createPopup";
-import { StdButton } from "../../ui/React/StdButton";
-import { IRouter } from "../../ui/Router";
-import { IPlayer } from "../../PersonObjects/IPlayer";
-
-interface ICreateGangPopupProps {
-  popupId: string;
-  facName: string;
-  player: IPlayer;
-  router: IRouter;
-}
-
-export function CreateGangPopup(props: ICreateGangPopupProps): React.ReactElement {
-  const player = props.player;
-  const router = props.router;
-  const combatGangText =
-    "This is a COMBAT gang. Members in this gang will have different tasks than HACKING gangs. " +
-    "Compared to hacking gangs, progression with combat gangs can be more difficult as territory management " +
-    "is more important. However, well-managed combat gangs can progress faster than hacking ones.";
-
-  const hackingGangText =
-    "This is a HACKING gang. Members in this gang will have different tasks than COMBAT gangs. " +
-    "Compared to combat gangs, progression with hacking gangs is more straightforward as territory warfare " +
-    "is not as important.";
-
-  function isHacking(): boolean {
-    return ["NiteSec", "The Black Hand"].includes(props.facName);
-  }
-
-  function createGang(): void {
-    player.startGang(props.facName, isHacking());
-    removePopup(props.popupId);
-    router.toGang();
-  }
-
-  function onKeyUp(event: React.KeyboardEvent): void {
-    if (event.keyCode === 13) createGang();
-  }
-
-  return (
-    <>
-      Would you like to create a new Gang with {props.facName}?
-      <br />
-      <br />
-      Note that this will prevent you from creating a Gang with any other Faction until this BitNode is destroyed. It
-      also resets your reputation with this faction.
-      <br />
-      <br />
-      {isHacking() ? hackingGangText : combatGangText}
-      <br />
-      <br />
-      Other than hacking vs combat, there are NO differences between the Factions you can create a Gang with, and each
-      of these Factions have all Augmentations available.
-      <div className="popup-box-input-div">
-        <StdButton
-          onClick={createGang}
-          onKeyUp={onKeyUp}
-          text="Create Gang"
-          style={{ float: "right" }}
-          autoFocus={true}
-        />
-      </div>
-    </>
-  );
-}

src/Faction/ui/FactionRoot.tsx

@@ -18,7 +18,7 @@ import { SourceFileFlags } from "../../SourceFile/SourceFileFlags";
 
 import { createPopup } from "../../ui/React/createPopup";
 import { use } from "../../ui/Context";
-import { CreateGangPopup } from "./CreateGangPopup";
+import { CreateGangModal } from "./CreateGangModal";
 
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
@@ -75,22 +75,17 @@ function MainPage({ faction, rerender, onAugmentations }: IMainProps): React.Rea
   const player = use.Player();
   const router = use.Router();
   const [sleevesOpen, setSleevesOpen] = useState(false);
+  const [gangOpen, setGangOpen] = useState(false);
   const p = player;
   const factionInfo = faction.getInfo();
 
-  function manageGang(faction: Faction): void {
+  function manageGang(): void {
     // If player already has a gang, just go to the gang UI
     if (player.inGang()) {
       return router.toGang();
     }
 
-    const popupId = "create-gang-popup";
-    createPopup(popupId, CreateGangPopup, {
-      popupId: popupId,
-      facName: faction.name,
-      player: player,
-      router: router,
-    });
+    setGangOpen(true);
   }
 
   function startFieldWork(faction: Faction): void {
@@ -137,7 +132,12 @@ function MainPage({ faction, rerender, onAugmentations }: IMainProps): React.Rea
         {faction.name}
       </Typography>
       <Info faction={faction} factionInfo={factionInfo} />
-      {canAccessGang && <Option buttonText={"Manage Gang"} infoText={gangInfo} onClick={() => manageGang(faction)} />}
+      {canAccessGang && (
+        <>
+          <Option buttonText={"Manage Gang"} infoText={gangInfo} onClick={manageGang} />
+          <CreateGangModal facName={faction.name} open={gangOpen} onClose={() => setGangOpen(false)} />
+        </>
+      )}
       {!isPlayersGang && factionInfo.offerHackingMission && (
         <Option
           buttonText={"Hacking Mission"}

src/Infiltration/ui/BlinkingCursor.tsx

@@ -1,9 +1,10 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 
 export function BlinkingCursor(): React.ReactElement {
-  return (
-    <span style={{ fontSize: "1em" }} className={"blinking-cursor"}>
-      |
-    </span>
-  );
+  const [on, setOn] = useState(true);
+  useEffect(() => {
+    const i = setInterval(() => setOn((old) => !old), 1000);
+    return () => clearInterval(i);
+  });
+  return <>{on ? "|" : ""}</>;
 }

src/Infiltration/ui/WireCuttingGame.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
 import { IMinigameProps } from "./IMinigameProps";
 import { KeyHandler } from "./KeyHandler";
 import { GameTimer } from "./GameTimer";
@@ -93,9 +94,9 @@ export function WireCuttingGame(props: IMinigameProps): React.ReactElement {
     <Grid container spacing={3}>
       <GameTimer millis={timer} onExpire={props.onFailure} />
       <Grid item xs={12}>
-        <h1 className={"noselect"}>Cut the wires with the following properties! (keyboard 1 to 9)</h1>
+        <Typography variant="h4">Cut the wires with the following properties! (keyboard 1 to 9)</Typography>
         {questions.map((question, i) => (
-          <h3 key={i}>{question.toString()}</h3>
+          <Typography key={i}>{question.toString()}</Typography>
         ))}
         <pre>
           {new Array(wires.length).fill(0).map((_, i) => (

src/ui/React/CodingContractModal.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { KEY } from "../../utils/helpers/keyCodes";
 
 import { CodingContract, CodingContractType, CodingContractTypes } from "../../CodingContracts";
-import { ClickableTag, CopyableText } from "./CopyableText";
+import { CopyableText } from "./CopyableText";
 import { Modal } from "./Modal";
 import { EventEmitter } from "../../utils/EventEmitter";
 import Typography from "@mui/material/Typography";
@@ -55,9 +55,7 @@ export function CodingContractModal(): React.ReactElement {
     description.push(<span key={i} dangerouslySetInnerHTML={{ __html: value + "<br />" }}></span>);
   return (
     <Modal open={props !== null} onClose={close}>
-      <Typography variant="h4">
-        <CopyableText value={props.c.type} />
-      </Typography>
+      <CopyableText variant="h4" value={props.c.type} />
       <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.

src/ui/React/CopyableText.tsx

@@ -1,83 +1,47 @@
-import * as React from "react";
-
-export enum ClickableTag {
-  Tag_span,
-  Tag_h1,
-}
+import React, { useState } from "react";
+import Typography from "@mui/material/Typography";
+import Tooltip from "@mui/material/Tooltip";
 
 type IProps = {
   value: string;
-  tag: ClickableTag;
+  variant?:
+    | "button"
+    | "caption"
+    | "h1"
+    | "h2"
+    | "h3"
+    | "h4"
+    | "h5"
+    | "h6"
+    | "subtitle1"
+    | "subtitle2"
+    | "body1"
+    | "body2"
+    | "overline"
+    | "inherit"
+    | undefined;
 };
 
-type IState = {
-  tooltipVisible: boolean;
-};
+export function CopyableText(props: IProps): React.ReactElement {
+  const [open, setOpen] = useState(false);
 
-export class CopyableText extends React.Component<IProps, IState> {
-  public static defaultProps = {
-    //Default span to prevent destroying current clickables
-    tag: ClickableTag.Tag_span,
-  };
-
-  constructor(props: IProps) {
-    super(props);
-
-    this.copy = this.copy.bind(this);
-    this.tooltipClasses = this.tooltipClasses.bind(this);
-    this.textClasses = this.textClasses.bind(this);
-
-    this.state = {
-      tooltipVisible: false,
-    };
-  }
-
-  copy(): void {
+  function copy(): void {
     const copyText = document.createElement("textarea");
-    copyText.value = this.props.value;
+    copyText.value = props.value;
     document.body.appendChild(copyText);
     copyText.select();
     copyText.setSelectionRange(0, 1e10);
     document.execCommand("copy");
     document.body.removeChild(copyText);
-    this.setState({ tooltipVisible: true });
-    setTimeout(() => this.setState({ tooltipVisible: false }), 1000);
+    setOpen(true);
+    setTimeout(() => setOpen(false), 1000);
   }
 
-  tooltipClasses(): string {
-    let classes = "copy_tooltip_text";
-    if (this.state.tooltipVisible) {
-      classes += " copy_tooltip_text_visible";
-    }
-
-    return classes;
-  }
-
-  textClasses(): string {
-    let classes = "copy_tooltip noselect text";
-    if (this.state.tooltipVisible) {
-      classes += " copy_tooltip_copied";
-    }
-
-    return classes;
-  }
-
-  render(): React.ReactNode {
-    switch (this.props.tag) {
-      case ClickableTag.Tag_h1:
   return (
-          <h1 className={this.textClasses()} onClick={this.copy}>
-            {this.props.value}
-            <span className={this.tooltipClasses()}>Copied!</span>
-          </h1>
+    <Tooltip open={open} title={<Typography>Copied!</Typography>}>
+      <Typography variant={props.variant} onClick={copy}>
+        {props.value}
+      </Typography>
+    </Tooltip>
   );
-      case ClickableTag.Tag_span:
-        return (
-          <span className={this.textClasses()} onClick={this.copy}>
-            <b>{this.props.value}</b>
-            <span className={this.tooltipClasses()}>Copied!</span>
-          </span>
-        );
-    }
-  }
 }