UI: Add tooltip for reputation/favor in page of faction's augmentation list (#2268)

src/Faction/ui/AugmentationsPage.tsx

@@ -10,13 +10,13 @@ import { PurchaseAugmentationsOrderSetting } from "../../Settings/SettingEnums";
 import { Settings } from "../../Settings/Settings";
 import { Player } from "@player";
 import { formatBigNumber } from "../../ui/formatNumber";
-import { Favor } from "../../ui/React/Favor";
-import { Reputation } from "../../ui/React/Reputation";
 import { Router } from "../../ui/GameRoot";
 import { Faction } from "../Faction";
 import { getFactionAugmentationsFiltered, hasAugmentationPrereqs, purchaseAugmentation } from "../FactionHelpers";
 import { CONSTANTS } from "../../Constants";
 import { useRerender } from "../../ui/React/hooks";
+import { ReputationInfo } from "../../ui/React/ReputationInfo";
+import { FavorInfo } from "../../ui/React/FavorInfo";
 
 /** Root React Component for displaying a faction's "Purchase Augmentations" page */
 export function AugmentationsPage({ faction }: { faction: Faction }): React.ReactElement {
@@ -202,12 +202,11 @@ export function AugmentationsPage({ faction }: { faction: Faction }): React.Reac
               my: 1,
             }}
           >
-            <>{multiplierComponent}</>
-            <Typography>
-              <b>Reputation:</b> <Reputation reputation={faction.playerReputation} />
-              <br />
-              <b>Favor:</b> <Favor favor={faction.favor} />
-            </Typography>
+            {multiplierComponent}
+            <Box>
+              <ReputationInfo favor={faction.favor} playerReputation={faction.playerReputation} boldLabel={true} />
+              <FavorInfo favor={faction.favor} boldLabel={true} />
+            </Box>
           </Box>
           <Box sx={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)" }}>
             <Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Cost)}>Sort by Cost</Button>

src/Faction/ui/Info.tsx

@@ -7,39 +7,17 @@ import React from "react";
 import { Faction } from "../Faction";
 import { FactionInfo } from "../FactionInfo";
 
-import { Reputation } from "../../ui/React/Reputation";
-import { Favor } from "../../ui/React/Favor";
-import { MathJax } from "better-react-mathjax";
-
-import { makeStyles } from "tss-react/mui";
 import Typography from "@mui/material/Typography";
-import Tooltip from "@mui/material/Tooltip";
-import Box from "@mui/material/Box";
-import InfoIcon from "@mui/icons-material/Info";
 import { useCycleRerender } from "../../ui/React/hooks";
-import { addRepToFavor } from "../formulas/favor";
 import { knowAboutBitverse } from "../../BitNode/BitNodeUtils";
+import { ReputationInfo } from "../../ui/React/ReputationInfo";
+import { FavorInfo } from "../../ui/React/FavorInfo";
 
 interface IProps {
   faction: Faction;
   factionInfo: FactionInfo;
 }
 
-const useStyles = makeStyles()({
-  noformat: {
-    whiteSpace: "pre-wrap",
-  },
-  repFavorRow: {
-    display: "flex",
-    alignItems: "center",
-    whiteSpace: "pre-wrap",
-  },
-  infoIcon: {
-    fontSize: "1.1em",
-    marginLeft: "10px",
-  },
-});
-
 function DefaultAssignment(): React.ReactElement {
   return (
     <Typography>
@@ -55,13 +33,12 @@ function DefaultAssignment(): React.ReactElement {
 
 export function Info(props: IProps): React.ReactElement {
   useCycleRerender();
-  const { classes } = useStyles();
 
   const Assignment = props.factionInfo.assignment ?? DefaultAssignment;
 
   return (
     <>
-      <Typography classes={{ root: classes.noformat }}>{props.factionInfo.infoText}</Typography>
+      <Typography sx={{ whiteSpace: "pre-wrap" }}>{props.factionInfo.infoText}</Typography>
       {props.factionInfo.enemies.length > 0 && (
         <Typography component="div">
           <br />
@@ -69,50 +46,9 @@ export function Info(props: IProps): React.ReactElement {
         </Typography>
       )}
       <Typography>-------------------------</Typography>
-      <Box display="flex">
-        <Tooltip
-          title={
-            <>
-              <Typography>
-                You will have <Favor favor={addRepToFavor(props.faction.favor, props.faction.playerReputation)} />{" "}
-                faction favor after installing an Augmentation.
-              </Typography>
-              <MathJax>{"\\(\\huge{r = \\text{total faction reputation}}\\)"}</MathJax>
-              <MathJax>{"\\(\\huge{favor=\\log_{1.02}\\left(1+\\frac{r}{25000}\\right)}\\)"}</MathJax>
-            </>
-          }
-        >
-          <Typography className={classes.repFavorRow}>
-            Reputation: <Reputation reputation={props.faction.playerReputation} />
-            <InfoIcon className={classes.infoIcon} />
-          </Typography>
-        </Tooltip>
-      </Box>
-
+      <ReputationInfo favor={props.faction.favor} playerReputation={props.faction.playerReputation} />
       <Typography>-------------------------</Typography>
-
-      <Box display="flex">
-        <Tooltip
-          title={
-            <>
-              <Typography>
-                Faction favor increases the rate at which you earn reputation for this faction by 1% per favor. Faction
-                favor is gained whenever you install an Augmentation. The amount of favor you gain depends on the total
-                amount of reputation you earned with this faction across all resets.
-              </Typography>
-
-              <MathJax>{"\\(\\huge{r = reputation}\\)"}</MathJax>
-              <MathJax>{"\\(\\huge{\\Delta r = \\Delta r \\times \\frac{100+favor}{100}}\\)"}</MathJax>
-            </>
-          }
-        >
-          <Typography className={classes.repFavorRow}>
-            Faction Favor: <Favor favor={props.faction.favor} />
-            <InfoIcon className={classes.infoIcon} />
-          </Typography>
-        </Tooltip>
-      </Box>
-
+      <FavorInfo favor={props.faction.favor} />
       <Typography>-------------------------</Typography>
       <Assignment />
     </>

src/ui/React/FavorInfo.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { MathJax } from "better-react-mathjax";
+
+import InfoIcon from "@mui/icons-material/Info";
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+
+import { Favor } from "../../ui/React/Favor";
+
+export function FavorInfo({ favor, boldLabel }: { favor: number; boldLabel?: boolean }): React.ReactElement {
+  return (
+    <Tooltip
+      title={
+        <>
+          <Typography>
+            Faction favor increases the rate at which you earn reputation for this faction by 1% per favor. Faction
+            favor is gained whenever you install an Augmentation. The amount of favor you gain depends on the total
+            amount of reputation you earned with this faction across all resets.
+          </Typography>
+          <MathJax>{"\\(\\huge{r = reputation}\\)"}</MathJax>
+          <MathJax>{"\\(\\huge{\\Delta r = \\Delta r \\times \\frac{100+favor}{100}}\\)"}</MathJax>
+        </>
+      }
+    >
+      <Typography component="div" sx={{ display: "flex", alignItems: "center", whiteSpace: "pre-wrap" }}>
+        <Typography sx={{ fontWeight: `${boldLabel ? "bold" : "normal"}` }}>Favor: </Typography>
+        <Favor favor={favor} />
+        <InfoIcon sx={{ fontSize: "1.1em", marginLeft: "10px" }} />
+      </Typography>
+    </Tooltip>
+  );
+}

src/ui/React/ReputationInfo.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { MathJax } from "better-react-mathjax";
+
+import InfoIcon from "@mui/icons-material/Info";
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+
+import { addRepToFavor } from "../../Faction/formulas/favor";
+import { Favor } from "../../ui/React/Favor";
+import { Reputation } from "./Reputation";
+
+export function ReputationInfo({
+  favor,
+  playerReputation,
+  boldLabel,
+}: {
+  favor: number;
+  playerReputation: number;
+  boldLabel?: boolean;
+}): React.ReactElement {
+  return (
+    <Tooltip
+      title={
+        <>
+          <Typography>
+            You will have <Favor favor={addRepToFavor(favor, playerReputation)} /> faction favor after installing an
+            Augmentation.
+          </Typography>
+          <MathJax>{"\\(\\huge{r = \\text{total faction reputation}}\\)"}</MathJax>
+          <MathJax>{"\\(\\huge{favor=\\log_{1.02}\\left(1+\\frac{r}{25000}\\right)}\\)"}</MathJax>
+        </>
+      }
+    >
+      <Typography component="div" sx={{ display: "flex", alignItems: "center", whiteSpace: "pre-wrap" }}>
+        <Typography sx={{ fontWeight: `${boldLabel ? "bold" : "normal"}` }}>Reputation: </Typography>
+        <Reputation reputation={playerReputation} />
+        <InfoIcon sx={{ fontSize: "1.1em", marginLeft: "10px" }} />
+      </Typography>
+    </Tooltip>
+  );
+}