removing some of the classes

src/Faction/ui/DonateOption.tsx

@@ -57,7 +57,7 @@ export function DonateOption(props: IProps): React.ReactElement {
     props.faction.playerReputation += repGain;
     dialogBoxCreate(
       <>
-        You just donated <Money money={amt} /> to {fac.name} to gain {Reputation(repGain)} reputation.
+        You just donated <Money money={amt} /> to {fac.name} to gain <Reputation reputation={repGain} /> reputation.
       </>,
     );
     props.rerender();
@@ -71,7 +71,7 @@ export function DonateOption(props: IProps): React.ReactElement {
     }
     return (
       <Typography>
-        This donation will result in {Reputation(repFromDonation(donateAmt, props.p))} reputation gain
+        This donation will result in <Reputation reputation={repFromDonation(donateAmt, props.p)} /> reputation gain
       </Typography>
     );
   }
@@ -81,7 +81,7 @@ export function DonateOption(props: IProps): React.ReactElement {
       <Status />
       {props.disabled ? (
         <Typography>
-          Unlock donations at {Favor(props.favorToDonate)} favor with {props.faction.name}
+          Unlock donations at <Favor favor={props.favorToDonate} /> favor with {props.faction.name}
         </Typography>
       ) : (
         <>

src/Faction/ui/Info.tsx

@@ -54,7 +54,8 @@ export function Info(props: IProps): React.ReactElement {
           title={
             <>
               <Typography>
-                You will have {Favor(props.faction.favor + favorGain)} faction favor after installing an Augmentation.
+                You will have <Favor favor={props.faction.favor + favorGain} /> faction favor after installing an
+                Augmentation.
               </Typography>
               <MathComponent tex={String.raw`\large{r = \text{total faction reputation}}`} />
               <MathComponent
@@ -63,7 +64,9 @@ export function Info(props: IProps): React.ReactElement {
             </>
           }
         >
-          <Typography>Reputation: {Reputation(props.faction.playerReputation)}</Typography>
+          <Typography>
+            Reputation: <Reputation reputation={props.faction.playerReputation} />
+          </Typography>
         </Tooltip>
       </Box>
 
@@ -83,7 +86,9 @@ export function Info(props: IProps): React.ReactElement {
             </>
           }
         >
-          <Typography>Faction Favor: {Favor(props.faction.favor)}</Typography>
+          <Typography>
+            Faction Favor: <Favor favor={props.faction.favor} />
+          </Typography>
         </Tooltip>
       </Box>
 

src/Faction/ui/InvitationModal.tsx

@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from "react";
+import { joinFaction } from "../FactionHelpers";
+import { Faction } from "../Faction";
+import { Modal } from "../../ui/React/Modal";
+import { use } from "../../ui/Context";
+import { EventEmitter } from "../../utils/EventEmitter";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+
+export const InvitationEvent = new EventEmitter<[Faction]>();
+
+export function InvitationModal(): React.ReactElement {
+  const [faction, setFaction] = useState<Faction | null>(null);
+  const player = use.Player();
+  function join(): void {
+    if (faction === null) return;
+    //Remove from invited factions
+    const i = player.factionInvitations.findIndex((facName) => facName === faction.name);
+    if (i === -1) {
+      console.error("Could not find faction in Player.factionInvitations");
+    }
+    joinFaction(faction);
+    setFaction(null);
+  }
+
+  useEffect(() => InvitationEvent.subscribe((faction) => setFaction(faction)), []);
+
+  return (
+    <Modal open={faction !== null} onClose={() => setFaction(null)}>
+      <Typography variant="h4">You have received a faction invitation.</Typography>
+      <Typography>
+        Would you like to join {(faction || { name: "" }).name}? <br />
+        <br />
+        Warning: Joining this faction may prevent you from joining other factions during this run!
+      </Typography>
+      <Button onClick={join}>Join!</Button>
+      <Button onClick={() => setFaction(null)}>Decide later</Button>
+    </Modal>
+  );
+}

src/Faction/ui/InvitationPopup.tsx

@@ -1,40 +0,0 @@
-import React from "react";
-import { joinFaction } from "../../Faction/FactionHelpers";
-import { Faction } from "../../Faction/Faction";
-import { IPlayer } from "../../PersonObjects/IPlayer";
-import { removePopup } from "../../ui/React/createPopup";
-
-interface IProps {
-  player: IPlayer;
-  faction: Faction;
-  popupId: string;
-}
-
-export function InvitationPopup(props: IProps): React.ReactElement {
-  function join(): void {
-    //Remove from invited factions
-    const i = props.player.factionInvitations.findIndex((facName) => facName === props.faction.name);
-    if (i === -1) {
-      console.error("Could not find faction in Player.factionInvitations");
-    }
-    joinFaction(props.faction);
-    removePopup(props.popupId);
-  }
-
-  return (
-    <>
-      <h1>You have received a faction invitation.</h1>
-      <p>
-        Would you like to join {props.faction.name}? <br />
-        <br />
-        Warning: Joining this faction may prevent you from joining other factions during this run!
-      </p>
-      <button className="std-button" onClick={join}>
-        Join!
-      </button>
-      <button className="std-button" onClick={() => removePopup(props.popupId)}>
-        Decide later
-      </button>
-    </>
-  );
-}

src/Faction/ui/PurchaseableAugmentation.tsx

@@ -57,7 +57,7 @@ function Requirements(props: IReqProps): React.ReactElement {
       </TableCell>
       <TableCell key={2}>
         <Typography color={props.hasRep ? "primary" : "error"}>
-          Requires {Reputation(props.rep)} faction reputation
+          Requires <Reputation reputation={props.rep} /> faction reputation
         </Typography>
       </TableCell>
     </React.Fragment>