convert most of the city to mui

src/Locations/ui/RamButton.tsx

@@ -1,11 +1,11 @@
 import React from "react";
+import Button from "@mui/material/Button";
+import Tooltip from "@mui/material/Tooltip";
 
 import { CONSTANTS } from "../../Constants";
 import { IPlayer } from "../../PersonObjects/IPlayer";
 import { purchaseRamForHomeComputer } from "../../Server/ServerPurchases";
 
-import { StdButtonPurchased } from "../../ui/React/StdButtonPurchased";
-import { StdButton } from "../../ui/React/StdButton";
 import { Money } from "../../ui/React/Money";
 import { MathComponent } from "mathjax-react";
 
@@ -15,11 +15,9 @@ type IProps = {
 };
 
 export function RamButton(props: IProps): React.ReactElement {
-  const btnStyle = { display: "block" };
-
   const homeComputer = props.p.getHomeComputer();
   if (homeComputer.maxRam >= CONSTANTS.HomeComputerMaxRam) {
-    return <StdButtonPurchased style={btnStyle} text={"Upgrade 'home' RAM - MAX"} />;
+    return <Button>Upgrade 'home' RAM - MAX</Button>;
   }
 
   const cost = props.p.getUpgradeHomeRamCost();
@@ -30,17 +28,11 @@ export function RamButton(props: IProps): React.ReactElement {
   }
 
   return (
-    <StdButton
-      disabled={!props.p.canAfford(cost)}
-      onClick={buy}
-      style={btnStyle}
-      text={
-        <>
-          Upgrade 'home' RAM ({homeComputer.maxRam}GB -&gt; {homeComputer.maxRam * 2}GB) -{" "}
-          <Money money={cost} player={props.p} />
-        </>
-      }
-      tooltip={<MathComponent tex={String.raw`\large{cost = 3.2 \times 10^3 \times 1.58^{log_2{(ram)}}}`} />}
-    />
+    <Tooltip title={<MathComponent tex={String.raw`\large{cost = 3.2 \times 10^3 \times 1.58^{log_2{(ram)}}}`} />}>
+      <Button disabled={!props.p.canAfford(cost)} onClick={buy}>
+        Upgrade 'home' RAM ({homeComputer.maxRam}GB -&gt;&nbsp;{homeComputer.maxRam * 2}GB) -&nbsp;
+        <Money money={cost} player={props.p} />
+      </Button>
+    </Tooltip>
   );
 }