learned and implemented default props

src/Bladeburner/ui/ActionLevel.tsx

@@ -54,18 +54,12 @@ export function ActionLevel({ action, isActive, bladeburner, rerender }: IProps)
           </Typography>
         </Tooltip>
       </Box>
-      <Tooltip
+      <Tooltip title={isActive ? <Typography>WARNING: changing the level will restart the Operation</Typography> : ""}>
-        disableInteractive
-        title={isActive ? <Typography>WARNING: changing the level will restart the Operation</Typography> : ""}
-      >
         <IconButton disabled={!canIncrease} onClick={increaseLevel}>
           <ArrowDropUpIcon />
         </IconButton>
       </Tooltip>
-      <Tooltip
+      <Tooltip title={isActive ? <Typography>WARNING: changing the level will restart the Operation</Typography> : ""}>
-        disableInteractive
-        title={isActive ? <Typography>WARNING: changing the level will restart the Operation</Typography> : ""}
-      >
         <IconButton disabled={!canDecrease} onClick={decreaseLevel}>
           <ArrowDropDownIcon />
         </IconButton>

src/Bladeburner/ui/Console.tsx

@@ -148,7 +148,6 @@ export function Console(props: IProps): React.ReactElement {
           <TextField
             classes={{ root: classes.textfield }}
             autoFocus
-            variant="standard"
             tabIndex={1}
             type="text"
             value={command}

src/Bladeburner/ui/KillIcon.tsx

@@ -5,9 +5,5 @@ import Typography from "@mui/material/Typography";
 import Tooltip from "@mui/material/Tooltip";
 
 export function KillIcon(): React.ReactElement {
-  return (
+  return <Tooltip title={<Typography>This action involves retirement</Typography>}>{killIcon}</Tooltip>;
-    <Tooltip disableInteractive title={<Typography>This action involves retirement</Typography>}>
-      {killIcon}
-    </Tooltip>
-  );
 }

src/Bladeburner/ui/Stats.tsx

@@ -46,14 +46,13 @@ export function Stats(props: IProps): React.ReactElement {
   return (
     <Paper sx={{ p: 1 }}>
       <Box display="flex">
-        <Tooltip disableInteractive title={<Typography>Your rank within the Bladeburner division.</Typography>}>
+        <Tooltip title={<Typography>Your rank within the Bladeburner division.</Typography>}>
           <Typography>Rank: {formatNumber(props.bladeburner.rank, 2)}</Typography>
         </Tooltip>
       </Box>
       <br />
       <Box display="flex">
         <Tooltip
-          disableInteractive
           title={
             <Typography>
               Performing actions will use up your stamina.
@@ -97,7 +96,6 @@ export function Stats(props: IProps): React.ReactElement {
       <Typography>Current City: {props.bladeburner.city}</Typography>
       <Box display="flex">
         <Tooltip
-          disableInteractive
           title={
             <Typography>
               This is your Bladeburner division's estimate of how many Synthoids exist in your current city. An accurate
@@ -113,7 +111,6 @@ export function Stats(props: IProps): React.ReactElement {
       <br />
       <Box display="flex">
         <Tooltip
-          disableInteractive
           title={
             <Typography>
               This is your Bladeburner divison's estimate of how many Synthoid communities exist in your current city.
@@ -128,7 +125,6 @@ export function Stats(props: IProps): React.ReactElement {
       <br />
       <Box display="flex">
         <Tooltip
-          disableInteractive
           title={
             <Typography>
               The city's chaos level due to tensions and conflicts between humans and Synthoids. Having too high of a
@@ -144,7 +140,6 @@ export function Stats(props: IProps): React.ReactElement {
         <>
           <Box display="flex">
             <Tooltip
-              disableInteractive
               title={
                 <Typography>
                   You gain bonus time while offline or when the game is inactive (e.g. when the tab is throttled by

src/Bladeburner/ui/StealthIcon.tsx

@@ -5,9 +5,5 @@ import Typography from "@mui/material/Typography";
 import Tooltip from "@mui/material/Tooltip";
 
 export function StealthIcon(): React.ReactElement {
-  return (
+  return <Tooltip title={<Typography>This action involves stealth</Typography>}>{stealthIcon}</Tooltip>;
-    <Tooltip disableInteractive title={<Typography>This action involves stealth</Typography>}>
-      {stealthIcon}
-    </Tooltip>
-  );
 }

src/Bladeburner/ui/TeamSizeModal.tsx

@@ -40,14 +40,7 @@ export function TeamSizeModal(props: IProps): React.ReactElement {
         Enter the amount of team members you would like to take on this Op. If you do not have the specified number of
         team members, then as many as possible will be used. Note that team members may be lost during operations.
       </Typography>
-      <TextField
+      <TextField autoFocus type="number" placeholder="Team size" value={teamSize} onChange={onTeamSize} />
-        autoFocus
-        variant="standard"
-        type="number"
-        placeholder="Team size"
-        value={teamSize}
-        onChange={onTeamSize}
-      />
       <Button sx={{ mx: 2 }} onClick={confirmTeamSize}>
         Confirm
       </Button>

src/Corporation/ui/BribeFactionModal.tsx

@@ -89,7 +89,7 @@ export function BribeFactionModal(props: IProps): React.ReactElement {
       </Typography>
       <Box display="flex" alignItems="center">
         <Typography>Faction:</Typography>
-        <Select variant="standard" value={selectedFaction} onChange={changeFaction}>
+        <Select value={selectedFaction} onChange={changeFaction}>
           {player.factions.map((name: string) => {
             const info = Factions[name].getInfo();
             if (!info.offersWork()) return;
@@ -102,8 +102,8 @@ export function BribeFactionModal(props: IProps): React.ReactElement {
         </Select>
       </Box>
       <Typography>{getRepText(money ? money : 0, stock ? stock : 0)}</Typography>
-      <TextField variant="standard" onChange={onMoneyChange} placeholder="Corporation funds" />
+      <TextField onChange={onMoneyChange} placeholder="Corporation funds" />
-      <TextField sx={{ mx: 1 }} variant="standard" onChange={onStockChange} placeholder="Stock Shares" />
+      <TextField sx={{ mx: 1 }} onChange={onStockChange} placeholder="Stock Shares" />
       <Button sx={{ mx: 1 }} onClick={() => bribe(money ? money : 0, stock ? stock : 0)}>
         Bribe
       </Button>

src/Corporation/ui/CityTab.tsx

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

src/Corporation/ui/CityTabs.tsx

@@ -1,87 +1,47 @@
 // React Components for the Corporation UI's City navigation tabs
 // These allow player to navigate between different cities for each industry
 import React, { useState } from "react";
-import { CityTab } from "./CityTab";
-import { ExpandNewCityPopup } from "./ExpandNewCityPopup";
-import { createPopup } from "../../ui/React/createPopup";
-import { ICorporation } from "../ICorporation";
-import { IIndustry } from "../IIndustry";
 import { OfficeSpace } from "../OfficeSpace";
 import { Industry } from "./Industry";
-import { IPlayer } from "../../PersonObjects/IPlayer";
+import { ExpandNewCity } from "./ExpandNewCity";
-
+import { useDivision } from "./Context";
-interface IExpandButtonProps {
+import Tabs from "@mui/material/Tabs";
-  corp: ICorporation;
+import Tab from "@mui/material/Tab";
-  division: IIndustry;
-  setCity: (name: string) => void;
-}
-
-function ExpandButton(props: IExpandButtonProps): React.ReactElement {
-  function openExpandNewCityModal(): void {
-    const popupId = "cmpy-mgmt-expand-city-popup";
-    createPopup(popupId, ExpandNewCityPopup, {
-      popupId: popupId,
-      corp: props.corp,
-      division: props.division,
-      cityStateSetter: props.setCity,
-    });
-  }
-
-  const possibleCities = Object.keys(props.division.offices).filter(
-    (cityName: string) => props.division.offices[cityName] === 0,
-  );
-  if (possibleCities.length === 0) return <></>;
-
-  return (
-    <CityTab
-      current={false}
-      key={"Expand into new City"}
-      name={"Expand into new City"}
-      onClick={openExpandNewCityModal}
-    />
-  );
-}
 
 interface IProps {
   city: string;
-  division: IIndustry;
-  corp: ICorporation;
-  player: IPlayer;
   rerender: () => void;
 }
 
 export function CityTabs(props: IProps): React.ReactElement {
+  const division = useDivision();
   const [city, setCity] = useState(props.city);
 
-  const office = props.division.offices[city];
+  const office = division.offices[city];
   if (office === 0) {
     setCity("Sector-12");
     return <></>;
   }
 
+  const canExpand =
+    Object.keys(division.offices).filter((cityName: string) => division.offices[cityName] === 0).length > 0;
+  function handleChange(event: React.SyntheticEvent, tab: string): void {
+    setCity(tab);
+  }
   return (
     <>
-      {Object.values(props.division.offices).map(
+      <Tabs variant="fullWidth" value={city} onChange={handleChange}>
-        (office: OfficeSpace | 0) =>
+        {Object.values(division.offices).map(
-          office !== 0 && (
+          (office: OfficeSpace | 0) => office !== 0 && <Tab key={office.loc} label={office.loc} value={office.loc} />,
-            <CityTab
+        )}
-              current={city === office.loc}
+        {canExpand && <Tab label={"Expand"} value={"Expand"} />}
-              key={office.loc}
+      </Tabs>
-              name={office.loc}
+
-              onClick={() => setCity(office.loc)}
+      {city !== "Expand" ? (
-            />
+        <Industry rerender={props.rerender} city={city} warehouse={division.warehouses[city]} office={office} />
-          ),
+      ) : (
+        <ExpandNewCity cityStateSetter={setCity} />
       )}
-      <ExpandButton corp={props.corp} division={props.division} setCity={setCity} />
-      <Industry
-        rerender={props.rerender}
-        corp={props.corp}
-        division={props.division}
-        city={city}
-        warehouse={props.division.warehouses[city]}
-        office={office}
-        player={props.player}
-      />
     </>
   );
 }

src/Corporation/ui/Context.ts

@@ -1,10 +1,14 @@
 import React, { useContext } from "react";
 import { ICorporation } from "../ICorporation";
+import { IIndustry } from "../IIndustry";
 
 export const Context: {
   Corporation: React.Context<ICorporation>;
+  Division: React.Context<IIndustry>;
 } = {
   Corporation: React.createContext<ICorporation>({} as ICorporation),
+  Division: React.createContext<IIndustry>({} as IIndustry),
 };
 
 export const useCorporation = () => useContext(Context.Corporation);
+export const useDivision = () => useContext(Context.Division);

src/Corporation/ui/CorporationRoot.tsx

@@ -38,7 +38,6 @@ export function CorporationRoot(): React.ReactElement {
 
   return (
     <Context.Corporation.Provider value={corporation}>
-      <div className="cmpy-mgmt-container">
       <Tabs variant="fullWidth" value={divisionName} onChange={handleChange}>
         <Tab label={corporation.name} value={"Overview"} />
         {corporation.divisions.map((div) => (
@@ -51,7 +50,6 @@ export function CorporationRoot(): React.ReactElement {
       {typeof divisionName === "string" && divisionName !== "Overview" && (
         <MainPanel rerender={rerender} divisionName={divisionName + ""} />
       )}
-      </div>
     </Context.Corporation.Provider>
   );
 }

src/Corporation/ui/CreateCorporationModal.tsx

@@ -63,7 +63,7 @@ export function CreateCorporationModal(props: IProps): React.ReactElement {
         <br />
         If you would like to start one, please enter a name for your corporation below:
       </Typography>
-      <TextField autoFocus={true} variant="standard" placeholder="Corporation Name" onChange={onChange} value={name} />
+      <TextField autoFocus={true} placeholder="Corporation Name" onChange={onChange} value={name} />
       <Button onClick={seed} disabled={name == ""}>
         Use seed money
       </Button>

src/Corporation/ui/ExpandIndustryTab.tsx

@@ -59,7 +59,7 @@ export function ExpandIndustryTab(props: IProps): React.ReactElement {
   return (
     <>
       <Typography>Create a new division to expand into a new industry:</Typography>
-      <Select variant="standard" value={industry} onChange={onIndustryChange}>
+      <Select value={industry} onChange={onIndustryChange}>
         {possibleIndustries.map((industry: string) => (
           <MenuItem key={industry} value={industry}>
             {industry}
@@ -73,14 +73,7 @@ export function ExpandIndustryTab(props: IProps): React.ReactElement {
       <Typography>Division name:</Typography>
 
       <Box display="flex" alignItems="center">
-        <TextField
+        <TextField autoFocus={true} value={name} onChange={onNameChange} onKeyDown={onKeyDown} type="text" />
-          variant="standard"
-          autoFocus={true}
-          value={name}
-          onChange={onNameChange}
-          onKeyDown={onKeyDown}
-          type="text"
-        />
         <Button sx={{ mx: 1 }} onClick={newIndustry}>
           Create Division
         </Button>

src/Corporation/ui/ExpandNewCity.tsx

@@ -1,26 +1,27 @@
 import React, { useRef } from "react";
-import { IIndustry } from "../IIndustry";
 import { CorporationConstants } from "../data/Constants";
-import { removePopup } from "../../ui/React/createPopup";
 import { dialogBoxCreate } from "../../ui/React/DialogBox";
-import { ICorporation } from "../ICorporation";
 import { NewCity } from "../Actions";
 import { MoneyCost } from "./MoneyCost";
+import { useCorporation, useDivision } from "./Context";
+import Typography from "@mui/material/Typography";
+import MenuItem from "@mui/material/MenuItem";
+import Select, { SelectChangeEvent } from "@mui/material/Select";
+import Button from "@mui/material/Button";
 
 interface IProps {
-  popupId: string;
-  corp: ICorporation;
-  division: IIndustry;
   cityStateSetter: (city: string) => void;
 }
 
-export function ExpandNewCityPopup(props: IProps): React.ReactElement {
+export function ExpandNewCity(props: IProps): React.ReactElement {
+  const corp = useCorporation();
+  const division = useDivision();
   const dropdown = useRef<HTMLSelectElement>(null);
 
   function expand(): void {
     if (dropdown.current === null) return;
     try {
-      NewCity(props.corp, props.division, dropdown.current.value);
+      NewCity(corp, division, dropdown.current.value);
     } catch (err) {
       dialogBoxCreate(err + "");
       return;
@@ -29,31 +30,25 @@ export function ExpandNewCityPopup(props: IProps): React.ReactElement {
     dialogBoxCreate(`Opened a new office in ${dropdown.current.value}!`);
 
     props.cityStateSetter(dropdown.current.value);
-    removePopup(props.popupId);
   }
   return (
     <>
-      <p>
+      <Typography>
         Would you like to expand into a new city by opening an office? This would cost{" "}
-        <MoneyCost money={CorporationConstants.OfficeInitialCost} corp={props.corp} />
+        <MoneyCost money={CorporationConstants.OfficeInitialCost} corp={corp} />
-      </p>
+      </Typography>
-      <select ref={dropdown} className="dropdown" style={{ margin: "5px" }}>
+      <Select ref={dropdown}>
-        {Object.keys(props.division.offices)
+        {Object.keys(division.offices)
-          .filter((cityName: string) => props.division.offices[cityName] === 0)
+          .filter((cityName: string) => division.offices[cityName] === 0)
           .map((cityName: string) => (
-            <option key={cityName} value={cityName}>
+            <MenuItem key={cityName} value={cityName}>
               {cityName}
-            </option>
+            </MenuItem>
           ))}
-      </select>
+      </Select>
-      <button
+      <Button onClick={expand} disabled={corp.funds.lt(0)}>
-        className="std-button"
-        style={{ display: "inline-block" }}
-        onClick={expand}
-        disabled={props.corp.funds.lt(0)}
-      >
         Confirm
-      </button>
+      </Button>
     </>
   );
 }

src/Corporation/ui/GoPublicModal.tsx

@@ -64,7 +64,6 @@ export function GoPublicModal(props: IProps): React.ReactElement {
       </Typography>
       <Box display="flex" alignItems="center">
         <TextField
-          variant="standard"
           value={shares}
           onChange={onChange}
           autoFocus

src/Corporation/ui/Industry.tsx

@@ -6,48 +6,47 @@ import { IndustryOffice } from "./IndustryOffice";
 import { IndustryOverview } from "./IndustryOverview";
 import { IndustryWarehouse } from "./IndustryWarehouse";
 import { Warehouse } from "../Warehouse";
-import { ICorporation } from "../ICorporation";
 import { OfficeSpace } from "../OfficeSpace";
-import { IIndustry } from "../IIndustry";
+import { use } from "../../ui/Context";
-import { IPlayer } from "../../PersonObjects/IPlayer";
+import { useCorporation, useDivision } from "./Context";
 
 interface IProps {
-  corp: ICorporation;
-  division: IIndustry;
   city: string;
   warehouse: Warehouse | 0;
   office: OfficeSpace;
-  player: IPlayer;
   rerender: () => void;
 }
 
 export function Industry(props: IProps): React.ReactElement {
+  const player = use.Player();
+  const corp = useCorporation();
+  const division = useDivision();
   return (
     <div>
       <div className={"cmpy-mgmt-industry-left-panel"}>
         <IndustryOverview
           rerender={props.rerender}
-          player={props.player}
+          player={player}
-          corp={props.corp}
+          corp={corp}
-          division={props.division}
+          division={division}
           currentCity={props.city}
           office={props.office}
         />
         <IndustryOffice
           rerender={props.rerender}
-          player={props.player}
+          player={player}
-          corp={props.corp}
+          corp={corp}
-          division={props.division}
+          division={division}
           office={props.office}
         />
       </div>
       <div className={"cmpy-mgmt-industry-right-panel"}>
         <IndustryWarehouse
           rerender={props.rerender}
-          player={props.player}
+          player={player}
-          corp={props.corp}
+          corp={corp}
           currentCity={props.city}
-          division={props.division}
+          division={division}
           warehouse={props.warehouse}
         />
       </div>

src/Corporation/ui/IssueDividendsModal.tsx

@@ -69,7 +69,6 @@ export function IssueDividendsModal(props: IProps): React.ReactElement {
         per second before taxes.
       </Typography>
       <TextField
-        variant="standard"
         autoFocus
         value={percent}
         onChange={onChange}

src/Corporation/ui/IssueNewSharesModal.tsx

@@ -127,7 +127,7 @@ export function IssueNewSharesModal(props: IProps): React.ReactElement {
         you cannot buy them back.
       </Typography>
       <EffectText shares={shares} />
-      <TextField variant="standard" autoFocus placeholder="# New Shares" onChange={onChange} onKeyDown={onKeyDown} />
+      <TextField autoFocus placeholder="# New Shares" onChange={onChange} onKeyDown={onKeyDown} />
       <Button onClick={issueNewShares} sx={{ mx: 1 }}>
         Issue New Shares
       </Button>

src/Corporation/ui/MainPanel.tsx

@@ -6,7 +6,7 @@ import React from "react";
 import { CityTabs } from "./CityTabs";
 import { IIndustry } from "../IIndustry";
 import { useCorporation } from "./Context";
-import { use } from "../../ui/Context";
+import { Context } from "./Context";
 
 import { CityName } from "../../Locations/data/CityNames";
 
@@ -16,7 +16,6 @@ interface IProps {
 }
 
 export function MainPanel(props: IProps): React.ReactElement {
-  const player = use.Player();
   const corp = useCorporation();
   const division =
     props.divisionName !== "Overview"
@@ -25,8 +24,10 @@ export function MainPanel(props: IProps): React.ReactElement {
 
   if (division === undefined) throw new Error("Cannot find division");
   return (
+    <Context.Division.Provider value={division}>
       <div id="cmpy-mgmt-panel">
-      <CityTabs rerender={props.rerender} division={division} corp={corp} city={CityName.Sector12} player={player} />
+        <CityTabs rerender={props.rerender} city={CityName.Sector12} />
       </div>
+    </Context.Division.Provider>
   );
 }

src/Corporation/ui/Overview.tsx

@@ -51,7 +51,6 @@ export function Overview({ rerender }: IProps): React.ReactElement {
         <br />
       </Typography>
       <Tooltip
-        disableInteractive
         title={
           <Typography>
             Outstanding Shares: {numeralWrapper.format(corp.issuedShares, "0.000a")}
@@ -79,7 +78,6 @@ export function Overview({ rerender }: IProps): React.ReactElement {
       <BonusTime />
       <div>
         <Tooltip
-          disableInteractive
           title={
             <Typography>
               Get a copy of and read 'The Complete Handbook for Creating a Successful Corporation.' This is a .lit file
@@ -116,13 +114,12 @@ function PrivateButtons({ rerender }: IPrivateButtonsProps): React.ReactElement
 
   return (
     <>
-      <Tooltip disableInteractive title={<Typography>{findInvestorsTooltip}</Typography>}>
+      <Tooltip title={<Typography>{findInvestorsTooltip}</Typography>}>
         <Button disabled={!fundingAvailable} onClick={() => setFindInvestorsopen(true)}>
           Find Investors
         </Button>
       </Tooltip>
       <Tooltip
-        disableInteractive
         title={
           <Typography>
             Become a publicly traded and owned entity. Going public involves issuing shares for an IPO. Once you are a
@@ -195,28 +192,24 @@ function PublicButtons({ rerender }: IPublicButtonsProps): React.ReactElement {
 
   return (
     <>
-      <Tooltip disableInteractive title={<Typography>{sellSharesTooltip}</Typography>}>
+      <Tooltip title={<Typography>{sellSharesTooltip}</Typography>}>
         <Button disabled={sellSharesOnCd} onClick={() => setSellSharesOpen(true)}>
           Sell Shares
         </Button>
       </Tooltip>
       <SellSharesModal open={sellSharesOpen} onClose={() => setSellSharesOpen(false)} rerender={rerender} />
-      <Tooltip
+      <Tooltip title={<Typography>Buy back shares you that previously issued or sold at market price.</Typography>}>
-        disableInteractive
-        title={<Typography>Buy back shares you that previously issued or sold at market price.</Typography>}
-      >
         <Button onClick={() => setBuybackSharesOpen(true)}>Buyback shares</Button>
       </Tooltip>
       <BuybackSharesModal open={buybackSharesOpen} onClose={() => setBuybackSharesOpen(false)} rerender={rerender} />
       <br />
-      <Tooltip disableInteractive title={<Typography>{issueNewSharesTooltip}</Typography>}>
+      <Tooltip title={<Typography>{issueNewSharesTooltip}</Typography>}>
         <Button disabled={issueNewSharesOnCd} onClick={() => setIssueNewSharesOpen(true)}>
           Issue New Shares
         </Button>
       </Tooltip>
       <IssueNewSharesModal open={issueNewSharesOpen} onClose={() => setIssueNewSharesOpen(false)} />
       <Tooltip
-        disableInteractive
         title={<Typography>Manage the dividends that are paid out to shareholders (including yourself)</Typography>}
       >
         <Button onClick={() => setIssueDividendsOpen(true)}>Issue Dividends</Button>
@@ -243,7 +236,6 @@ function BribeButton(): React.ReactElement {
   return (
     <>
       <Tooltip
-        disableInteractive
         title={
           canBribe
             ? "Use your Corporations power and influence to bribe Faction leaders in exchange for reputation"

src/DevMenu/ui/Companies.tsx

@@ -81,7 +81,7 @@ export function Companies(): React.ReactElement {
                 <span className="text">Company:</span>
               </td>
               <td colSpan={3}>
-                <Select id="dev-companies-dropdown" className="dropdown" onChange={setCompanyDropdown} value={company}>
+                <Select id="dev-companies-dropdown" onChange={setCompanyDropdown} value={company}>
                   {Object.values(AllCompanies).map((company) => (
                     <MenuItem key={company.name} value={company.name}>
                       {company.name}

src/DevMenu/ui/Factions.tsx

@@ -114,7 +114,6 @@ export function Factions(props: IProps): React.ReactElement {
                   <Select
                     labelId="factions-select"
                     id="factions-dropdown"
-                    className="dropdown exp-input"
                     onChange={setFactionDropdown}
                     value={faction}
                     startAdornment={

src/DevMenu/ui/Servers.tsx

@@ -87,7 +87,7 @@ export function Servers(): React.ReactElement {
                 <span className="text">Server:</span>
               </td>
               <td colSpan={2}>
-                <Select id="dev-servers-dropdown" className="dropdown" onChange={setServerDropdown} value={server}>
+                <Select id="dev-servers-dropdown" onChange={setServerDropdown} value={server}>
                   {Object.values(AllServers).map((server) => (
                     <MenuItem key={server.hostname} value={server.hostname}>
                       {server.hostname}

src/Faction/ui/DonateOption.tsx

@@ -86,7 +86,6 @@ export function DonateOption(props: IProps): React.ReactElement {
       ) : (
         <>
           <TextField
-            variant="standard"
             onChange={onChange}
             placeholder={"Donation amount"}
             disabled={props.disabled}

src/Faction/ui/PurchaseableAugmentation.tsx

@@ -147,13 +147,7 @@ export function PurchaseableAugmentation(props: IProps): React.ReactElement {
       )}
       <TableCell key={1}>
         <Box display="flex">
-          <Tooltip
+          <Tooltip title={<Typography>{tooltip}</Typography>} placement="top">
-            title={<Typography>{tooltip}</Typography>}
-            placement="top"
-            disableFocusListener
-            disableTouchListener
-            disableInteractive
-          >
             <Typography>{btnTxt}</Typography>
           </Tooltip>
         </Box>

src/Locations/ui/ApplyToJobButton.tsx

@@ -36,10 +36,7 @@ export function ApplyToJobButton(props: IProps): React.ReactElement {
 
   return (
     <>
-      <Tooltip
+      <Tooltip title={<span dangerouslySetInnerHTML={{ __html: getJobRequirementTooltip() }}></span>}>
-        title={<span dangerouslySetInnerHTML={{ __html: getJobRequirementTooltip() }}></span>}
-        disableInteractive
-      >
         <Button onClick={props.onClick}>{props.text}</Button>
       </Tooltip>
       <br />

src/Locations/ui/CompanyLocation.tsx

@@ -208,7 +208,6 @@ export function CompanyLocation(props: IProps): React.ReactElement {
                   Augmentations
                 </>
               }
-              disableInteractive
             >
               <Typography>Company reputation: {Reputation(company.playerReputation)}</Typography>
             </Tooltip>
@@ -223,7 +222,6 @@ export function CompanyLocation(props: IProps): React.ReactElement {
                   gain depends on how much reputation you have with the company.
                 </>
               }
-              disableInteractive
             >
               <Typography className={"tooltip"}>Company Favor: {Favor(company.favor)}</Typography>
             </Tooltip>

src/Locations/ui/SlumsLocation.tsx

@@ -114,69 +114,69 @@ export function SlumsLocation(): React.ReactElement {
 
   return (
     <div>
-      <Tooltip title={<>Attempt to shoplift from a low-end retailer</>} disableInteractive>
+      <Tooltip title={<>Attempt to shoplift from a low-end retailer</>}>
         <Button onClick={shoplift}>
           Shoplift ({numeralWrapper.formatPercentage(shopliftChance)} chance of success)
         </Button>
       </Tooltip>
       <br />
-      <Tooltip title={<>Attempt to commit armed robbery on a high-end store</>} disableInteractive>
+      <Tooltip title={<>Attempt to commit armed robbery on a high-end store</>}>
         <Button onClick={robStore}>
           Rob store ({numeralWrapper.formatPercentage(robStoreChance)} chance of success)
         </Button>
       </Tooltip>
       <br />
-      <Tooltip title={<>Attempt to mug a random person on the street</>} disableInteractive>
+      <Tooltip title={<>Attempt to mug a random person on the street</>}>
         <Button onClick={mug}>Mug someone ({numeralWrapper.formatPercentage(mugChance)} chance of success)</Button>
       </Tooltip>
       <br />
-      <Tooltip title={<>Attempt to rob property from someone's house</>} disableInteractive>
+      <Tooltip title={<>Attempt to rob property from someone's house</>}>
         <Button onClick={larceny}>Larceny ({numeralWrapper.formatPercentage(larcenyChance)} chance of success)</Button>
       </Tooltip>
       <br />
-      <Tooltip title={<>Attempt to deal drugs</>} disableInteractive>
+      <Tooltip title={<>Attempt to deal drugs</>}>
         <Button onClick={dealDrugs}>
           Deal Drugs ({numeralWrapper.formatPercentage(drugsChance)} chance of success)
         </Button>
       </Tooltip>
       <br />
-      <Tooltip title={<>Attempt to forge corporate bonds</>} disableInteractive>
+      <Tooltip title={<>Attempt to forge corporate bonds</>}>
         <Button onClick={bondForgery}>
           Bond Forgery ({numeralWrapper.formatPercentage(bondChance)} chance of success)
         </Button>
       </Tooltip>
       <br />
-      <Tooltip title={<>Attempt to smuggle illegal arms into the city</>} disableInteractive>
+      <Tooltip title={<>Attempt to smuggle illegal arms into the city</>}>
         <Button onClick={traffickArms}>
           Traffick illegal Arms ({numeralWrapper.formatPercentage(armsChance)} chance of success)
         </Button>
       </Tooltip>
       <br />
-      <Tooltip title={<>Attempt to murder a random person on the street</>} disableInteractive>
+      <Tooltip title={<>Attempt to murder a random person on the street</>}>
         <Button onClick={homicide}>
           Homicide ({numeralWrapper.formatPercentage(homicideChance)} chance of success)
         </Button>
       </Tooltip>
       <br />
-      <Tooltip title={<>Attempt to commit grand theft auto</>} disableInteractive>
+      <Tooltip title={<>Attempt to commit grand theft auto</>}>
         <Button onClick={grandTheftAuto}>
           Grand theft Auto ({numeralWrapper.formatPercentage(gtaChance)} chance of success)
         </Button>
       </Tooltip>
       <br />
-      <Tooltip title={<>Attempt to kidnap and ransom a high-profile-target</>} disableInteractive>
+      <Tooltip title={<>Attempt to kidnap and ransom a high-profile-target</>}>
         <Button onClick={kidnap}>
           Kidnap and Ransom ({numeralWrapper.formatPercentage(kidnapChance)} chance of success)
         </Button>
       </Tooltip>
       <br />
-      <Tooltip title={<>Attempt to assassinate a high-profile target</>} disableInteractive>
+      <Tooltip title={<>Attempt to assassinate a high-profile target</>}>
         <Button onClick={assassinate}>
           Assassinate ({numeralWrapper.formatPercentage(assassinateChance)} chance of success)
         </Button>
       </Tooltip>
       <br />
-      <Tooltip title={<>Attempt to pull off the ultimate heist</>} disableInteractive>
+      <Tooltip title={<>Attempt to pull off the ultimate heist</>}>
         <Button onClick={heist}>Heist ({numeralWrapper.formatPercentage(heistChance)} chance of success)</Button>
       </Tooltip>
       <br />

src/PersonObjects/Sleeve/ui/CovenantSleeveMemoryUpgrade.tsx

@@ -85,7 +85,7 @@ export function CovenantSleeveMemoryUpgrade(props: IProps): React.ReactElement {
 
       <Box display="flex" flexDirection="row" alignItems="center">
         <Typography>Amount of memory to purchase (must be an integer):&nbsp;</Typography>
-        <TextField variant="standard" onChange={changePurchaseAmount} type={"number"} value={amt} />
+        <TextField onChange={changePurchaseAmount} type={"number"} value={amt} />
       </Box>
       <br />
       <Button disabled={purchaseBtnDisabled} onClick={purchaseMemory}>

src/PersonObjects/Sleeve/ui/SleeveAugmentationsModal.tsx

@@ -70,7 +70,7 @@ export function SleeveAugmentationsModal(props: IProps): React.ReactElement {
                   </TableCell>
                   <TableCell>
                     <Box display="flex">
-                      <Tooltip disableInteractive title={aug.stats || ""}>
+                      <Tooltip title={aug.stats || ""}>
                         <Typography>{aug.name}</Typography>
                       </Tooltip>
                     </Box>
@@ -111,7 +111,7 @@ export function SleeveAugmentationsModal(props: IProps): React.ReactElement {
               }
 
               return (
-                <Tooltip key={augName} disableInteractive title={<Typography>{tooltip}</Typography>}>
+                <Tooltip key={augName} title={<Typography>{tooltip}</Typography>}>
                   <Paper>
                     <Typography>{augName}</Typography>
                   </Paper>

src/PersonObjects/Sleeve/ui/SleeveElem.tsx

@@ -171,10 +171,7 @@ export function SleeveElem(props: IProps): React.ReactElement {
         <Grid item xs={3}>
           <StatsElement sleeve={props.sleeve} />
           <Button onClick={() => setStatsOpen(true)}>More Stats</Button>
-          <Tooltip
+          <Tooltip title={player.money.lt(CONSTANTS.TravelCost) ? <Typography>Insufficient funds</Typography> : ""}>
-            disableInteractive
-            title={player.money.lt(CONSTANTS.TravelCost) ? <Typography>Insufficient funds</Typography> : ""}
-          >
             <span>
               <Button onClick={() => setTravelOpen(true)} disabled={player.money.lt(CONSTANTS.TravelCost)}>
                 Travel
@@ -182,7 +179,6 @@ export function SleeveElem(props: IProps): React.ReactElement {
             </span>
           </Tooltip>
           <Tooltip
-            disableInteractive
             title={props.sleeve.shock < 100 ? <Typography>Unlocked when sleeve has fully recovered</Typography> : ""}
           >
             <span>

src/PersonObjects/Sleeve/ui/TaskSelector.tsx

@@ -275,7 +275,7 @@ export function TaskSelector(props: IProps): React.ReactElement {
 
   return (
     <>
-      <Select variant="standard" onChange={onS0Change} value={s0}>
+      <Select onChange={onS0Change} value={s0}>
         {validActions.map((task) => (
           <MenuItem key={task} value={task}>
             {task}
@@ -285,7 +285,7 @@ export function TaskSelector(props: IProps): React.ReactElement {
       {!(details.first.length === 1 && details.first[0] === "------") && (
         <>
           <br />
-          <Select variant="standard" onChange={onS1Change} value={s1}>
+          <Select onChange={onS1Change} value={s1}>
             {details.first.map((detail) => (
               <MenuItem key={detail} value={detail}>
                 {detail}
@@ -297,7 +297,7 @@ export function TaskSelector(props: IProps): React.ReactElement {
       {!(details2.length === 1 && details2[0] === "------") && (
         <>
           <br />
-          <Select variant="standard" onChange={onS2Change} value={s2}>
+          <Select onChange={onS2Change} value={s2}>
             {details2.map((detail) => (
               <MenuItem key={detail} value={detail}>
                 {detail}

src/Programs/ui/ProgramsRoot.tsx

@@ -33,7 +33,7 @@ export function ProgramsRoot(): React.ReactElement {
 
         return (
           <React.Fragment key={program.name}>
-            <Tooltip title={create.tooltip} disableInteractive>
+            <Tooltip title={create.tooltip}>
               <Button
                 sx={{ my: 1 }}
                 onClick={(event) => {

src/ScriptEditor/ui/OptionsModal.tsx

@@ -32,12 +32,7 @@ export function OptionsModal(props: IProps): React.ReactElement {
     <Modal open={props.open} onClose={props.onClose}>
       <Box display="flex" flexDirection="row" alignItems="center">
         <Typography>Theme: </Typography>
-        <Select
+        <Select onChange={(event) => setTheme(event.target.value)} defaultValue={props.options.theme}>
-          variant="standard"
-          color="primary"
-          onChange={(event) => setTheme(event.target.value)}
-          defaultValue={props.options.theme}
-        >
           <MenuItem value="vs-dark">dark</MenuItem>
           <MenuItem value="light">light</MenuItem>
         </Select>

src/ScriptEditor/ui/Root.tsx

@@ -296,7 +296,7 @@ export function Root(props: IProps): React.ReactElement {
     <>
       <Box display="flex" flexDirection="row" alignItems="center">
         <Typography>Script name: </Typography>
-        <TextField variant="standard" type="text" tabIndex={1} value={filename} onChange={onFilenameChange} />
+        <TextField type="text" tabIndex={1} value={filename} onChange={onFilenameChange} />
         <IconButton onClick={() => setOptionsOpen(true)}>
           <>
             <SettingsIcon />

src/Terminal/ui/TerminalInput.tsx

@@ -341,7 +341,6 @@ export function TerminalInput({ terminal, router, player }: IProps): React.React
         </Paper>
       )}
       <TextField
-        variant="standard"
         color={terminal.action === null ? "primary" : "secondary"}
         autoFocus
         disabled={terminal.action !== null}

src/ui/ActiveScripts/ServerAccordions.tsx

@@ -85,9 +85,7 @@ export function ServerAccordions(props: IProps): React.ReactElement {
       <TextField
         value={filter}
         onChange={handleFilterChange}
-        color="primary"
         autoFocus
-        variant="standard"
         InputProps={{
           startAdornment: <SearchIcon />,
           spellCheck: false,

src/ui/React/GameOptionsRoot.tsx

@@ -211,7 +211,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
           <List>
             <ListItem>
               <Tooltip
-                disableInteractive
                 title={
                   <Typography>
                     The minimum number of milliseconds it takes to execute an operation in Netscript. Setting this too
@@ -232,7 +231,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
             </ListItem>
             <ListItem>
               <Tooltip
-                disableInteractive
                 title={
                   <Typography>
                     The maximum number of lines a script's logs can hold. Setting this too high can cause the game to
@@ -253,7 +251,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
             </ListItem>
             <ListItem>
               <Tooltip
-                disableInteractive
                 title={
                   <Typography>
                     The maximum number of entries that can be written to a port using Netscript's write() function.
@@ -274,7 +271,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
             </ListItem>
             <ListItem>
               <Tooltip
-                disableInteractive
                 title={
                   <Typography>
                     The maximum number of entries that can be written to a the terminal. Setting this too high can cause
@@ -296,7 +292,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
             </ListItem>
             <ListItem>
               <Tooltip
-                disableInteractive
                 title={
                   <Typography>The time (in seconds) between each autosave. Set to 0 to disable autosave.</Typography>
                 }
@@ -318,7 +313,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
                 control={<Switch checked={suppressMessages} onChange={handleSuppressMessagesChange} />}
                 label={
                   <Tooltip
-                    disableInteractive
                     title={
                       <Typography>
                         If this is set, then any messages you receive will not appear as popups on the screen. They will
@@ -337,7 +331,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
                 control={<Switch checked={suppressFactionInvites} onChange={handleSuppressFactionInvitesChange} />}
                 label={
                   <Tooltip
-                    disableInteractive
                     title={
                       <Typography>
                         If this is set, then any faction invites you receive will not appear as popups on the screen.
@@ -357,7 +350,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
                 }
                 label={
                   <Tooltip
-                    disableInteractive
                     title={
                       <Typography>
                         If this is set, the confirmation message before traveling will not show up. You will
@@ -380,7 +372,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
                 }
                 label={
                   <Tooltip
-                    disableInteractive
                     title={
                       <Typography>
                         If this is set, the confirmation message before buying augmentation will not show up.
@@ -399,7 +390,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
                 }
                 label={
                   <Tooltip
-                    disableInteractive
                     title={
                       <Typography>
                         If this is set, a popup message will no longer be shown when you are hospitalized after taking
@@ -420,7 +410,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
                   }
                   label={
                     <Tooltip
-                      disableInteractive
                       title={
                         <Typography>
                           If this is set, then having your Bladeburner actions interrupted by being busy with something
@@ -439,7 +428,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
                 control={<Switch checked={disableHotkeys} onChange={handleDisableHotkeysChange} />}
                 label={
                   <Tooltip
-                    disableInteractive
                     title={
                       <Typography>
                         If this is set, then most hotkeys (keyboard shortcuts) in the game are disabled. This includes
@@ -457,10 +445,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
               <FormControlLabel
                 control={<Switch checked={disableASCIIArt} onChange={handleDisableASCIIArtChange} />}
                 label={
-                  <Tooltip
+                  <Tooltip title={<Typography>If this is set all ASCII art will be disabled.</Typography>}>
-                    disableInteractive
-                    title={<Typography>If this is set all ASCII art will be disabled.</Typography>}
-                  >
                     <Typography>Disable ascii art</Typography>
                   </Tooltip>
                 }
@@ -471,7 +456,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
                 control={<Switch checked={disableTextEffects} onChange={handleDisableTextEffectsChange} />}
                 label={
                   <Tooltip
-                    disableInteractive
                     title={
                       <Typography>
                         If this is set, text effects will not be displayed. This can help if text is difficult to read
@@ -490,7 +474,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
                 control={<Switch checked={enableBashHotkeys} onChange={handleEnableBashHotkeysChange} />}
                 label={
                   <Tooltip
-                    disableInteractive
                     title={
                       <Typography>
                         Improved Bash emulation mode. Setting this to 1 enables several new Terminal shortcuts and
@@ -509,7 +492,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
                 control={<Switch checked={enableTimestamps} onChange={handleEnableTimestampsChange} />}
                 label={
                   <Tooltip
-                    disableInteractive
                     title={
                       <Typography>
                         Terminal commands and log entries will be timestamped. The timestamp will have the format: M/D
@@ -524,7 +506,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
             </ListItem>
 
             <ListItem>
-              <Tooltip disableInteractive title={<Typography>Sets the locale for displaying numbers.</Typography>}>
+              <Tooltip title={<Typography>Sets the locale for displaying numbers.</Typography>}>
                 <Typography>Locale&nbsp;</Typography>
               </Tooltip>
               <Select value={locale} onChange={handleLocaleChange}>
@@ -569,13 +551,13 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
             <Button onClick={() => setDeleteOpen(true)}>Delete Game</Button>
           </Box>
           <Box>
-            <Tooltip disableInteractive title={<Typography>export</Typography>}>
+            <Tooltip title={<Typography>export</Typography>}>
               <Button onClick={() => props.export()}>
                 <DownloadIcon color="primary" />
                 Export
               </Button>
             </Tooltip>
-            <Tooltip disableInteractive title={<Typography>import</Typography>}>
+            <Tooltip title={<Typography>import</Typography>}>
               <Button onClick={startImport}>
                 <UploadIcon color="primary" />
                 Import
@@ -585,7 +567,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
           </Box>
           <Box>
             <Tooltip
-              disableInteractive
               title={
                 <Typography>
                   Forcefully kill all active running scripts, in case there is a bug or some unexpected issue with the
@@ -601,7 +582,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
           </Box>
           <Box>
             <Tooltip
-              disableInteractive
               title={
                 <Typography>
                   Perform a soft reset. Resets everything as if you had just purchased an Augmentation.
@@ -613,7 +593,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
           </Box>
           <Box>
             <Tooltip
-              disableInteractive
               title={
                 <Typography>
                   If your save file is extremely big you can use this button to view a map of all the files on every

src/ui/React/ServerDropdown.tsx

@@ -61,7 +61,7 @@ export function ServerDropdown(props: IProps): React.ReactElement {
   }
 
   return (
-    <Select sx={{ mx: 1 }} variant="standard" value={props.value} onChange={props.onChange}>
+    <Select sx={{ mx: 1 }} value={props.value} onChange={props.onChange}>
       {servers}
     </Select>
   );

src/ui/React/Theme.tsx

@@ -150,6 +150,14 @@ export function refreshTheme(): void {
             color: Settings.theme.primary,
           },
         },
+        defaultProps: {
+          variant: "standard",
+        },
+      },
+      MuiTextField: {
+        defaultProps: {
+          variant: "standard",
+        },
       },
       MuiMenu: {
         styleOverrides: {
@@ -197,6 +205,9 @@ export function refreshTheme(): void {
             maxWidth: "100vh",
           },
         },
+        defaultProps: {
+          disableInteractive: true,
+        },
       },
       MuiSlider: {
         styleOverrides: {

src/ui/React/ThemeEditorModal.tsx

@@ -33,7 +33,6 @@ function ColorEditor({ name, onColorChange, color, defaultColor }: IColorEditorP
         sx={{ mx: 1 }}
         label={name}
         value={color}
-        variant="standard"
         InputProps={{
           startAdornment: (
             <>