mui5

dist/engineStyle.bundle.js

@@ -1,2 +1,2 @@
-!function(n){function t(t){for(var e,i,f=t[0],c=t[1],l=t[2],a=0,s=[];a<f.length;a++)i=f[a],Object.prototype.hasOwnProperty.call(r,i)&&r[i]&&s.push(r[i][0]),r[i]=0;for(e in c)Object.prototype.hasOwnProperty.call(c,e)&&(n[e]=c[e]);for(p&&p(t);s.length;)s.shift()();return u.push.apply(u,l||[]),o()}function o(){for(var n,t=0;t<u.length;t++){for(var o=u[t],e=!0,f=1;f<o.length;f++){var c=o[f];0!==r[c]&&(e=!1)}e&&(u.splice(t--,1),n=i(i.s=o[0]))}return n}var e={},r={2:0},u=[];function i(t){if(e[t])return e[t].exports;var o=e[t]={i:t,l:!1,exports:{}};return n[t].call(o.exports,o,o.exports,i),o.l=!0,o.exports}i.m=n,i.c=e,i.d=function(n,t,o){i.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:o})},i.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},i.t=function(n,t){if(1&t&&(n=i(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var o=Object.create(null);if(i.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var e in n)i.d(o,e,function(t){return n[t]}.bind(null,e));return o},i.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return i.d(t,"a",t),t},i.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},i.p="";var f=window.webpackJsonp=window.webpackJsonp||[],c=f.push.bind(f);f.push=t,f=f.slice();for(var l=0;l<f.length;l++)t(f[l]);var p=c;u.push([1045,0]),o()}({1045:function(n,t,o){"use strict";o.r(t);o(1046),o(1048),o(1050),o(1052),o(1054),o(1056),o(1058),o(1060),o(1062),o(1064),o(1066),o(1068),o(1070),o(1072),o(1074),o(1076),o(1078),o(1080),o(1082),o(1084),o(1086),o(1088),o(1090),o(1092),o(1094),o(1096),o(1098),o(1100),o(1102),o(1104),o(1106)},1048:function(n,t,o){},1050:function(n,t,o){},1052:function(n,t,o){},1054:function(n,t,o){},1056:function(n,t,o){},1058:function(n,t,o){},1060:function(n,t,o){},1062:function(n,t,o){},1064:function(n,t,o){},1066:function(n,t,o){},1068:function(n,t,o){},1070:function(n,t,o){},1072:function(n,t,o){},1074:function(n,t,o){},1076:function(n,t,o){},1078:function(n,t,o){},1080:function(n,t,o){},1082:function(n,t,o){},1084:function(n,t,o){},1086:function(n,t,o){},1088:function(n,t,o){},1090:function(n,t,o){},1092:function(n,t,o){},1094:function(n,t,o){},1096:function(n,t,o){},1098:function(n,t,o){},1100:function(n,t,o){},1102:function(n,t,o){},1104:function(n,t,o){},1106:function(n,t,o){}});
+!function(n){function t(t){for(var e,i,f=t[0],c=t[1],l=t[2],a=0,s=[];a<f.length;a++)i=f[a],Object.prototype.hasOwnProperty.call(r,i)&&r[i]&&s.push(r[i][0]),r[i]=0;for(e in c)Object.prototype.hasOwnProperty.call(c,e)&&(n[e]=c[e]);for(p&&p(t);s.length;)s.shift()();return u.push.apply(u,l||[]),o()}function o(){for(var n,t=0;t<u.length;t++){for(var o=u[t],e=!0,f=1;f<o.length;f++){var c=o[f];0!==r[c]&&(e=!1)}e&&(u.splice(t--,1),n=i(i.s=o[0]))}return n}var e={},r={2:0},u=[];function i(t){if(e[t])return e[t].exports;var o=e[t]={i:t,l:!1,exports:{}};return n[t].call(o.exports,o,o.exports,i),o.l=!0,o.exports}i.m=n,i.c=e,i.d=function(n,t,o){i.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:o})},i.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},i.t=function(n,t){if(1&t&&(n=i(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var o=Object.create(null);if(i.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var e in n)i.d(o,e,function(t){return n[t]}.bind(null,e));return o},i.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return i.d(t,"a",t),t},i.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},i.p="";var f=window.webpackJsonp=window.webpackJsonp||[],c=f.push.bind(f);f.push=t,f=f.slice();for(var l=0;l<f.length;l++)t(f[l]);var p=c;u.push([1249,0]),o()}({1249:function(n,t,o){"use strict";o.r(t);o(1250),o(1252),o(1254),o(1256),o(1258),o(1260),o(1262),o(1264),o(1266),o(1268),o(1270),o(1272),o(1274),o(1276),o(1278),o(1280),o(1282),o(1284),o(1286),o(1288),o(1290),o(1292),o(1294),o(1296),o(1298),o(1300),o(1302),o(1304),o(1306),o(1308),o(1310)},1252:function(n,t,o){},1254:function(n,t,o){},1256:function(n,t,o){},1258:function(n,t,o){},1260:function(n,t,o){},1262:function(n,t,o){},1264:function(n,t,o){},1266:function(n,t,o){},1268:function(n,t,o){},1270:function(n,t,o){},1272:function(n,t,o){},1274:function(n,t,o){},1276:function(n,t,o){},1278:function(n,t,o){},1280:function(n,t,o){},1282:function(n,t,o){},1284:function(n,t,o){},1286:function(n,t,o){},1288:function(n,t,o){},1290:function(n,t,o){},1292:function(n,t,o){},1294:function(n,t,o){},1296:function(n,t,o){},1298:function(n,t,o){},1300:function(n,t,o){},1302:function(n,t,o){},1304:function(n,t,o){},1306:function(n,t,o){},1308:function(n,t,o){},1310:function(n,t,o){}});
 //# sourceMappingURL=engineStyle.bundle.js.map

dist/engineStyle.css

@@ -1226,117 +1226,11 @@ button {
 /**
  * Styling for the Character Overview Panel (top-right panel)
  */
-#character-overview-wrapper {
+#character-overview {
   position: fixed;
   top: 0;
   right: 0; }
 
-#character-overview-container {
-  display: none;
-  position: absolute;
-  /* Stay in place */
-  right: 0;
-  top: 0;
-  height: auto;
-  /* Full height */
-  padding: 10px 2px;
-  border: 2px solid var(--my-highlight-color);
-  width: auto;
-  max-width: 280px;
-  overflow: auto;
-  /* Enable scroll if needed */
-  background-color: rgba(57, 54, 54, 0.9);
-  /* Fallback color */
-  z-index: 1; }
-
-#character-overview-text {
-  color: #faffdf; }
-  #character-overview-text table {
-    border-collapse: collapse;
-    margin: auto; }
-  #character-overview-text td {
-    padding: 2px;
-    vertical-align: middle; }
-
-.character-stat-text {
-  color: #fff;
-  background-color: #444; }
-
-.character-stat-cell {
-  text-align: right; }
-
-#character-str-wrapper td,
-#character-cha-wrapper td {
-  padding-top: 10px; }
-
-.character-divider td {
-  border-top: 1px #aaa solid;
-  padding-top: 10px; }
-
-#character-hp-wrapper {
-  color: #dd3434; }
-
-.character-hp-cell {
-  color: #dd3434; }
-
-#character-money-wrapper {
-  color: #ffd700; }
-
-.character-money-cell {
-  color: #ffd700; }
-
-#character-hack-wrapper {
-  color: #adff2f; }
-
-.character-hack-cell {
-  color: #adff2f; }
-
-#character-cha-wrapper {
-  color: #a671d1; }
-
-.character-cha-cell {
-  color: #a671d1; }
-
-#character-int-wrapper {
-  color: #6495ed; }
-
-.character-int-cell {
-  color: #6495ed; }
-
-.character-combat-cell {
-  color: #faffdf; }
-
-#character-work-wrapper {
-  color: #adff2f; }
-
-.character-work-cell {
-  color: #adff2f; }
-
-.character-overview-btn {
-  -webkit-border-radius: 12px;
-  -moz-border-radius: 12px;
-  border-radius: 12px;
-  -webkit-box-shadow: 1px 1px 3px #000;
-  -moz-box-shadow: 1px 1px 3px #000;
-  box-shadow: 1px 1px 3px #000;
-  color: #cecece;
-  display: inline-block;
-  font-size: 14px;
-  font-weight: bold;
-  height: 25px;
-  background-color: #000;
-  padding: 5px 8px; }
-
-.character-quick-options {
-  margin-top: 10px;
-  text-align: center; }
-
-.character-overview-btn:hover,
-.character-overview-btn:focus {
-  color: #fff;
-  text-decoration: none;
-  cursor: pointer; }
-
 /* COLORS */
 /* Attributes */
 #terminal-container {
@@ -1639,17 +1533,15 @@ button {
 /* Attributes */
 /* CSS for different main menu pages, such as character info, script editor, etc (but excluding
     terminal which has its own page) */
-.generic-menupage-container {
-  padding-left: 2px;
+#generic-react-container {
   -ms-overflow-style: none;
   /* for Internet Explorer, Edge */
   scrollbar-width: none;
   /* for Firefox */
-  flex-grow: 1; }
-
-#generic-react-container {
-  padding: 10px;
-  overflow-y: scroll; }
+  flex-grow: 1;
+  overflow-y: scroll;
+  height: 100vh;
+  bottom: 0px; }
 
 #generic-react-container::-webkit-scrollbar {
   display: none;
@@ -3041,7 +2933,9 @@ input[type="checkbox"] {
   overflow-x: auto;
   overflow: visible;
   top: 10px;
-  width: 45%; }
+  width: 45%;
+  vertical-align: top;
+  margin-top: 10px; }
 
 .cmpy-mgmt-industry-overview-panel {
   border: 1px solid #fff;

index.html

@@ -42,22 +42,8 @@
       <div id="mainmenu-container" style="display: flex; flex-direction: row">
         <!-- Main menu -->
         <div id="sidebar" style=""></div>
-        <!-- Terminal page -->
-        <div id="terminal-container" style="flex-grow: 1">
-          <table id="terminal">
-            <tr id="terminal-input">
-              <td id="terminal-input-td" tabindex="2">
-                $
-                <input type="text" id="terminal-input-text-box" class="terminal-input" tabindex="1" onfocus="this.value = this.value;" autocomplete="off"/>
-              </td>
-            </tr>
-          </table>
-        </div>
-
-        <div class="generic-menupage-container">
         <div id="generic-react-container"></div>
       </div>
-      </div>
 
       <div id="infiltration-container" class="generic-fullscreen-container"></div>
       <div id="mission-container" class="generic-fullscreen-container"></div>
@@ -89,16 +75,7 @@
       </div>
 
       <!-- Character Overview Screen -->
-      <div id="character-overview-wrapper">
-        <div id="character-overview-container">
-          <div id="character-overview-text">
-            <!-- ReactJS Component -->
-          </div>
-          <div class="character-quick-options noselect">
-            <button id="character-overview-save-button" class="character-overview-btn">Save Game</button>
-          </div>
-        </div>
-      </div>
+      <div id="character-overview"></div>
 
       <!-- Status text -->
       <div id="status-text-container">

package.json

@@ -10,9 +10,15 @@
     "url": "https://github.com/danielyxie/bitburner/issues"
   },
   "dependencies": {
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
     "@monaco-editor/react": "^4.2.2",
+    "@mui/icons-material": "^5.0.0-rc.1",
+    "@mui/lab": "^5.0.0-alpha.46",
+    "@mui/material": "^5.0.0-rc.1",
+    "@mui/styles": "^5.0.0-rc.1",
     "@types/js-beautify": "^1.13.2",
     "@types/numeral": "0.0.25",
     "@types/react": "^17.0.21",

src/Casino/Blackjack.tsx

@@ -5,7 +5,7 @@ import { Money } from "../ui/React/Money";
 import { Game } from "./Game";
 import { Deck } from "./CardDeck/Deck";
 import { Hand } from "./CardDeck/Hand";
-import { InputAdornment } from "@material-ui/core";
+import { InputAdornment } from "@mui/material";
 import { ReactCard } from "./CardDeck/ReactCard";
 import { MuiTextField } from "../ui/React/MuiTextField";
 import { MuiButton } from "../ui/React/MuiButton";

src/DevMenu.tsx

@@ -3,7 +3,7 @@ import { Bladeburner } from "./Bladeburner/Bladeburner";
 import { IEngine } from "./IEngine";
 
 import React from "react";
-import { Theme } from "./ui/React/Theme";
+import { TTheme as Theme } from "./ui/React/Theme";
 
 import { General } from "./DevMenu/ui/General";
 import { Stats } from "./DevMenu/ui/Stats";

src/DevMenu/ui/Adjuster.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from "react";
-import AddIcon from "@material-ui/icons/Add";
-import RemoveIcon from "@material-ui/icons/Remove";
-import IconButton from "@material-ui/core/IconButton";
-import ExposureZeroIcon from "@material-ui/icons/ExposureZero";
-import DoubleArrowIcon from "@material-ui/icons/DoubleArrow";
-import TextField from "@material-ui/core/TextField";
-import Tooltip from "@material-ui/core/Tooltip";
+import AddIcon from "@mui/icons-material/Add";
+import RemoveIcon from "@mui/icons-material/Remove";
+import IconButton from "@mui/material/IconButton";
+import ClearIcon from "@mui/icons-material/Clear";
+import DoubleArrowIcon from "@mui/icons-material/DoubleArrow";
+import TextField from "@mui/material/TextField";
+import Tooltip from "@mui/material/Tooltip";
 
 interface IProps {
   label: string;
@@ -37,12 +37,12 @@ export function Adjuster(props: IProps): React.ReactElement {
           startAdornment: (
             <>
               <Tooltip title="Add a lot">
-                <IconButton color="primary" onClick={tons}>
+                <IconButton color="primary" onClick={tons} size="large">
                   <DoubleArrowIcon style={{ transform: "rotate(-90deg)" }} />
                 </IconButton>
               </Tooltip>
               <Tooltip title="Add">
-                <IconButton color="primary" onClick={() => add(typeof value !== "string" ? value : 0)}>
+                <IconButton color="primary" onClick={() => add(typeof value !== "string" ? value : 0)} size="large">
                   <AddIcon />
                 </IconButton>
               </Tooltip>
@@ -51,13 +51,17 @@ export function Adjuster(props: IProps): React.ReactElement {
           endAdornment: (
             <>
               <Tooltip title="Remove">
-                <IconButton color="primary" onClick={() => subtract(typeof value !== "string" ? value : 0)}>
+                <IconButton
+                  color="primary"
+                  onClick={() => subtract(typeof value !== "string" ? value : 0)}
+                  size="large"
+                >
                   <RemoveIcon />
                 </IconButton>
               </Tooltip>
               <Tooltip title="Reset">
-                <IconButton color="primary" onClick={reset}>
-                  <ExposureZeroIcon />
+                <IconButton color="primary" onClick={reset} size="large">
+                  <ClearIcon />
                 </IconButton>
               </Tooltip>
             </>

src/DevMenu/ui/Augmentations.tsx

@@ -1,18 +1,18 @@
 import React, { useState } from "react";
 
-import Accordion from "@material-ui/core/Accordion";
-import AccordionSummary from "@material-ui/core/AccordionSummary";
-import AccordionDetails from "@material-ui/core/AccordionDetails";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
-import Select from "@material-ui/core/Select";
+import Select, { SelectChangeEvent } from "@mui/material/Select";
 import { IPlayer } from "../../PersonObjects/IPlayer";
 import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
-import MenuItem from "@material-ui/core/MenuItem";
-import IconButton from "@material-ui/core/IconButton";
-import ReplyAllIcon from "@material-ui/icons/ReplyAll";
-import ReplyIcon from "@material-ui/icons/Reply";
-import ClearIcon from "@material-ui/icons/Clear";
+import MenuItem from "@mui/material/MenuItem";
+import IconButton from "@mui/material/IconButton";
+import ReplyAllIcon from "@mui/icons-material/ReplyAll";
+import ReplyIcon from "@mui/icons-material/Reply";
+import ClearIcon from "@mui/icons-material/Clear";
 
 interface IProps {
   player: IPlayer;
@@ -21,7 +21,7 @@ interface IProps {
 export function Augmentations(props: IProps): React.ReactElement {
   const [augmentation, setAugmentation] = useState("Augmented Targeting I");
 
-  function setAugmentationDropdown(event: React.ChangeEvent<{ value: unknown }>): void {
+  function setAugmentationDropdown(event: SelectChangeEvent<string>): void {
     setAugmentation(event.target.value as string);
   }
   function queueAug(): void {
@@ -59,17 +59,17 @@ export function Augmentations(props: IProps): React.ReactElement {
                   value={augmentation}
                   startAdornment={
                     <>
-                      <IconButton color="primary" onClick={queueAllAugs}>
+                      <IconButton color="primary" onClick={queueAllAugs} size="large">
                         <ReplyAllIcon />
                       </IconButton>
-                      <IconButton color="primary" onClick={queueAug}>
+                      <IconButton color="primary" onClick={queueAug} size="large">
                         <ReplyIcon />
                       </IconButton>
                     </>
                   }
                   endAdornment={
                     <>
-                      <IconButton color="primary" onClick={clearAugs}>
+                      <IconButton color="primary" onClick={clearAugs} size="large">
                         <ClearIcon />
                       </IconButton>
                     </>

src/DevMenu/ui/Bladeburner.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
-import Accordion from "@material-ui/core/Accordion";
-import AccordionSummary from "@material-ui/core/AccordionSummary";
-import AccordionDetails from "@material-ui/core/AccordionDetails";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
 import { Adjuster } from "./Adjuster";
 import { IPlayer } from "../../PersonObjects/IPlayer";

src/DevMenu/ui/CodingContracts.tsx

@@ -1,19 +1,19 @@
 import React, { useState } from "react";
 
-import Accordion from "@material-ui/core/Accordion";
-import AccordionSummary from "@material-ui/core/AccordionSummary";
-import AccordionDetails from "@material-ui/core/AccordionDetails";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
-import Button from "@material-ui/core/Button";
-import Select from "@material-ui/core/Select";
-import MenuItem from "@material-ui/core/MenuItem";
+import Button from "@mui/material/Button";
+import Select, { SelectChangeEvent } from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
 import { generateContract, generateRandomContract, generateRandomContractOnHome } from "../../CodingContractGenerator";
 import { CodingContractTypes } from "../../CodingContracts";
 
 export function CodingContracts(): React.ReactElement {
   const [codingcontract, setCodingcontract] = useState("Find Largest Prime Factor");
-  function setCodingcontractDropdown(event: React.ChangeEvent<{ value: unknown }>): void {
+  function setCodingcontractDropdown(event: SelectChangeEvent<string>): void {
     setCodingcontract(event.target.value as string);
   }
 

src/DevMenu/ui/Companies.tsx

@@ -1,21 +1,21 @@
 import React, { useState } from "react";
 
-import Accordion from "@material-ui/core/Accordion";
-import AccordionSummary from "@material-ui/core/AccordionSummary";
-import AccordionDetails from "@material-ui/core/AccordionDetails";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
-import Button from "@material-ui/core/Button";
-import Select from "@material-ui/core/Select";
+import Button from "@mui/material/Button";
+import Select, { SelectChangeEvent } from "@mui/material/Select";
 import { Companies as AllCompanies } from "../../Company/Companies";
-import MenuItem from "@material-ui/core/MenuItem";
+import MenuItem from "@mui/material/MenuItem";
 import { Adjuster } from "./Adjuster";
 
 const bigNumber = 1e12;
 
 export function Companies(): React.ReactElement {
   const [company, setCompany] = useState("ECorp");
-  function setCompanyDropdown(event: React.ChangeEvent<{ value: unknown }>): void {
+  function setCompanyDropdown(event: SelectChangeEvent<string>): void {
     setCompany(event.target.value as string);
   }
   function resetCompanyRep(): void {

src/DevMenu/ui/Corporation.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 
-import Accordion from "@material-ui/core/Accordion";
-import AccordionSummary from "@material-ui/core/AccordionSummary";
-import AccordionDetails from "@material-ui/core/AccordionDetails";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
-import Button from "@material-ui/core/Button";
+import Button from "@mui/material/Button";
 import { Adjuster } from "./Adjuster";
 import { IPlayer } from "../../PersonObjects/IPlayer";
 

src/DevMenu/ui/Factions.tsx

@@ -1,21 +1,21 @@
 import React, { useState } from "react";
 
-import Accordion from "@material-ui/core/Accordion";
-import AccordionSummary from "@material-ui/core/AccordionSummary";
-import AccordionDetails from "@material-ui/core/AccordionDetails";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
-import Button from "@material-ui/core/Button";
-import Select from "@material-ui/core/Select";
+import Button from "@mui/material/Button";
+import Select, { SelectChangeEvent } from "@mui/material/Select";
 import { Adjuster } from "./Adjuster";
 import { IPlayer } from "../../PersonObjects/IPlayer";
 import { Factions as AllFaction } from "../../Faction/Factions";
-import FormControl from "@material-ui/core/FormControl";
-import MenuItem from "@material-ui/core/MenuItem";
-import IconButton from "@material-ui/core/IconButton";
-import ReplyAllIcon from "@material-ui/icons/ReplyAll";
-import ReplyIcon from "@material-ui/icons/Reply";
-import InputLabel from "@material-ui/core/InputLabel";
+import FormControl from "@mui/material/FormControl";
+import MenuItem from "@mui/material/MenuItem";
+import IconButton from "@mui/material/IconButton";
+import ReplyAllIcon from "@mui/icons-material/ReplyAll";
+import ReplyIcon from "@mui/icons-material/Reply";
+import InputLabel from "@mui/material/InputLabel";
 
 const bigNumber = 1e12;
 
@@ -26,7 +26,7 @@ interface IProps {
 export function Factions(props: IProps): React.ReactElement {
   const [faction, setFaction] = useState("Illuminati");
 
-  function setFactionDropdown(event: React.ChangeEvent<{ value: unknown }>): void {
+  function setFactionDropdown(event: SelectChangeEvent<string>): void {
     setFaction(event.target.value as string);
   }
 
@@ -119,10 +119,10 @@ export function Factions(props: IProps): React.ReactElement {
                     value={faction}
                     startAdornment={
                       <>
-                        <IconButton color="primary" onClick={receiveAllInvites}>
+                        <IconButton color="primary" onClick={receiveAllInvites} size="large">
                           <ReplyAllIcon />
                         </IconButton>
-                        <IconButton color="primary" onClick={receiveInvite}>
+                        <IconButton color="primary" onClick={receiveInvite} size="large">
                           <ReplyIcon />
                         </IconButton>
                       </>

src/DevMenu/ui/Gang.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
-import Accordion from "@material-ui/core/Accordion";
-import AccordionSummary from "@material-ui/core/AccordionSummary";
-import AccordionDetails from "@material-ui/core/AccordionDetails";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
 import { Adjuster } from "./Adjuster";
 import { IPlayer } from "../../PersonObjects/IPlayer";

src/DevMenu/ui/General.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 
-import Accordion from "@material-ui/core/Accordion";
-import AccordionSummary from "@material-ui/core/AccordionSummary";
-import AccordionDetails from "@material-ui/core/AccordionDetails";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
-import Button from "@material-ui/core/Button";
+import Button from "@mui/material/Button";
 import { Money } from "../../ui/React/Money";
 import { IPlayer } from "../../PersonObjects/IPlayer";
 import { hackWorldDaemon } from "../../RedPill";

src/DevMenu/ui/Programs.tsx

@@ -1,15 +1,15 @@
 import React, { useState } from "react";
 
-import Accordion from "@material-ui/core/Accordion";
-import AccordionSummary from "@material-ui/core/AccordionSummary";
-import AccordionDetails from "@material-ui/core/AccordionDetails";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
-import Button from "@material-ui/core/Button";
-import Select from "@material-ui/core/Select";
+import Button from "@mui/material/Button";
+import Select, { SelectChangeEvent } from "@mui/material/Select";
 import { IPlayer } from "../../PersonObjects/IPlayer";
 import { Programs as AllPrograms } from "../../Programs/Programs";
-import MenuItem from "@material-ui/core/MenuItem";
+import MenuItem from "@mui/material/MenuItem";
 
 interface IProps {
   player: IPlayer;
@@ -17,7 +17,7 @@ interface IProps {
 
 export function Programs(props: IProps): React.ReactElement {
   const [program, setProgram] = useState("NUKE.exe");
-  function setProgramDropdown(event: React.ChangeEvent<{ value: unknown }>): void {
+  function setProgramDropdown(event: SelectChangeEvent<string>): void {
     setProgram(event.target.value as string);
   }
   function addProgram(): void {

src/DevMenu/ui/Servers.tsx

@@ -1,20 +1,20 @@
 import React, { useState } from "react";
 
-import Accordion from "@material-ui/core/Accordion";
-import AccordionSummary from "@material-ui/core/AccordionSummary";
-import AccordionDetails from "@material-ui/core/AccordionDetails";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
-import Button from "@material-ui/core/Button";
-import Select from "@material-ui/core/Select";
+import Button from "@mui/material/Button";
+import Select, { SelectChangeEvent } from "@mui/material/Select";
 import { AllServers } from "../../Server/AllServers";
 import { HacknetServer } from "../../Hacknet/HacknetServer";
 import { GetServerByHostname } from "../../Server/ServerHelpers";
-import MenuItem from "@material-ui/core/MenuItem";
+import MenuItem from "@mui/material/MenuItem";
 
 export function Servers(): React.ReactElement {
   const [server, setServer] = useState("home");
-  function setServerDropdown(event: React.ChangeEvent<{ value: unknown }>): void {
+  function setServerDropdown(event: SelectChangeEvent<string>): void {
     setServer(event.target.value as string);
   }
   function rootServer(): void {

src/DevMenu/ui/Sleeves.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 
-import Accordion from "@material-ui/core/Accordion";
-import AccordionSummary from "@material-ui/core/AccordionSummary";
-import AccordionDetails from "@material-ui/core/AccordionDetails";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
-import Button from "@material-ui/core/Button";
+import Button from "@mui/material/Button";
 import { IPlayer } from "../../PersonObjects/IPlayer";
 
 interface IProps {

src/DevMenu/ui/SourceFiles.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 
-import Accordion from "@material-ui/core/Accordion";
-import AccordionSummary from "@material-ui/core/AccordionSummary";
-import AccordionDetails from "@material-ui/core/AccordionDetails";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
-import Button from "@material-ui/core/Button";
+import Button from "@mui/material/Button";
 import { PlayerOwnedSourceFile } from "../../SourceFile/PlayerOwnedSourceFile";
 import { IPlayer } from "../../PersonObjects/IPlayer";
-import ButtonGroup from "@material-ui/core/ButtonGroup";
+import ButtonGroup from "@mui/material/ButtonGroup";
 
 // Update as additional BitNodes get implemented
 const validSFN = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

src/DevMenu/ui/Stats.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 
-import Accordion from "@material-ui/core/Accordion";
-import AccordionSummary from "@material-ui/core/AccordionSummary";
-import AccordionDetails from "@material-ui/core/AccordionDetails";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
-import Button from "@material-ui/core/Button";
+import Button from "@mui/material/Button";
 import { Adjuster } from "./Adjuster";
 import { IPlayer } from "../../PersonObjects/IPlayer";
 

src/DevMenu/ui/StockMarket.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from "react";
 
-import Accordion from "@material-ui/core/Accordion";
-import AccordionSummary from "@material-ui/core/AccordionSummary";
-import AccordionDetails from "@material-ui/core/AccordionDetails";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
-import Button from "@material-ui/core/Button";
-import TextField from "@material-ui/core/TextField";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
 import { Money } from "../../ui/React/Money";
 import { dialogBoxCreate } from "../../../utils/DialogBox";
 import { StockMarket as SM } from "../../StockMarket/StockMarket";

src/DevMenu/ui/TimeSkip.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 
-import Accordion from "@material-ui/core/Accordion";
-import AccordionSummary from "@material-ui/core/AccordionSummary";
-import AccordionDetails from "@material-ui/core/AccordionDetails";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
-import Button from "@material-ui/core/Button";
+import Button from "@mui/material/Button";
 import { IPlayer } from "../../PersonObjects/IPlayer";
 import { saveObject } from "../../SaveObject";
 import { IEngine } from "../../IEngine";

src/Diagnostic/FileDiagnosticModal.tsx

@@ -3,18 +3,18 @@ import { AllServers } from "../Server/AllServers";
 import { Modal } from "../ui/React/Modal";
 import { numeralWrapper } from "../ui/numeralFormat";
 
-import Table from "@material-ui/core/Table";
-import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
-import TableContainer from "@material-ui/core/TableContainer";
-import TableHead from "@material-ui/core/TableHead";
-import TableRow from "@material-ui/core/TableRow";
-import Typography from "@material-ui/core/Typography";
-import Paper from "@material-ui/core/Paper";
-import Accordion from "@material-ui/core/Accordion";
-import AccordionSummary from "@material-ui/core/AccordionSummary";
-import AccordionDetails from "@material-ui/core/AccordionDetails";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Typography from "@mui/material/Typography";
+import Paper from "@mui/material/Paper";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
 interface IServerProps {
   ip: string;

src/Infiltration/ui/BackwardGame.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import Grid from "@material-ui/core/Grid";
+import Grid from "@mui/material/Grid";
 import { IMinigameProps } from "./IMinigameProps";
 import { KeyHandler } from "./KeyHandler";
 import { GameTimer } from "./GameTimer";

src/Infiltration/ui/BracketGame.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import Grid from "@material-ui/core/Grid";
+import Grid from "@mui/material/Grid";
 import { IMinigameProps } from "./IMinigameProps";
 import { KeyHandler } from "./KeyHandler";
 import { GameTimer } from "./GameTimer";

src/Infiltration/ui/BribeGame.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import Grid from "@material-ui/core/Grid";
+import Grid from "@mui/material/Grid";
 import { IMinigameProps } from "./IMinigameProps";
 import { KeyHandler } from "./KeyHandler";
 import { GameTimer } from "./GameTimer";

src/Infiltration/ui/CheatCodeGame.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import Grid from "@material-ui/core/Grid";
+import Grid from "@mui/material/Grid";
 import { IMinigameProps } from "./IMinigameProps";
 import { KeyHandler } from "./KeyHandler";
 import { GameTimer } from "./GameTimer";

src/Infiltration/ui/Countdown.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import Grid from "@material-ui/core/Grid";
+import Grid from "@mui/material/Grid";
 
 interface IProps {
   onFinish: () => void;

src/Infiltration/ui/Cyberpunk2077Game.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import Grid from "@material-ui/core/Grid";
+import Grid from "@mui/material/Grid";
 import { IMinigameProps } from "./IMinigameProps";
 import { KeyHandler } from "./KeyHandler";
 import { GameTimer } from "./GameTimer";

src/Infiltration/ui/Game.tsx

@@ -1,7 +1,7 @@
 import { IPlayer } from "../../PersonObjects/IPlayer";
 import { IEngine } from "../../IEngine";
 import React, { useState } from "react";
-import Grid from "@material-ui/core/Grid";
+import Grid from "@mui/material/Grid";
 import { Countdown } from "./Countdown";
 import { BracketGame } from "./BracketGame";
 import { SlashGame } from "./SlashGame";

src/Infiltration/ui/GameTimer.tsx

@@ -1,7 +1,7 @@
-import LinearProgress from "@material-ui/core/LinearProgress";
+import LinearProgress from "@mui/material/LinearProgress";
 import React, { useState, useEffect } from "react";
-import { withStyles } from "@material-ui/core/styles";
-import Grid from "@material-ui/core/Grid";
+import withStyles from '@mui/styles/withStyles';
+import Grid from "@mui/material/Grid";
 
 const TimerProgress = withStyles(() => ({
   bar: {

src/Infiltration/ui/Intro.tsx

@@ -2,7 +2,7 @@ import { IPlayer } from "../../PersonObjects/IPlayer";
 import { IEngine } from "../../IEngine";
 import React from "react";
 import { StdButton } from "../../ui/React/StdButton";
-import Grid from "@material-ui/core/Grid";
+import Grid from "@mui/material/Grid";
 
 interface IProps {
   Player: IPlayer;

src/Infiltration/ui/MinesweeperGame.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import Grid from "@material-ui/core/Grid";
+import Grid from "@mui/material/Grid";
 import { IMinigameProps } from "./IMinigameProps";
 import { KeyHandler } from "./KeyHandler";
 import { GameTimer } from "./GameTimer";

src/Infiltration/ui/SlashGame.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import Grid from "@material-ui/core/Grid";
+import Grid from "@mui/material/Grid";
 import { IMinigameProps } from "./IMinigameProps";
 import { KeyHandler } from "./KeyHandler";
 import { GameTimer } from "./GameTimer";

src/Infiltration/ui/Victory.tsx

@@ -3,7 +3,7 @@ import { IEngine } from "../../IEngine";
 import { Factions } from "../../Faction/Factions";
 import React, { useState } from "react";
 import { StdButton } from "../../ui/React/StdButton";
-import Grid from "@material-ui/core/Grid";
+import Grid from "@mui/material/Grid";
 import { Money } from "../../ui/React/Money";
 import { Reputation } from "../../ui/React/Reputation";
 import { BitNodeMultipliers } from "../../BitNode/BitNodeMultipliers";

src/Infiltration/ui/WireCuttingGame.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import Grid from "@material-ui/core/Grid";
+import Grid from "@mui/material/Grid";
 import { IMinigameProps } from "./IMinigameProps";
 import { KeyHandler } from "./KeyHandler";
 import { GameTimer } from "./GameTimer";

src/Programs/ui/ProgramsRoot.tsx

@@ -2,8 +2,8 @@ import React, { useState, useEffect } from "react";
 import { IPlayer } from "../../PersonObjects/IPlayer";
 import { getAvailableCreatePrograms } from "../ProgramHelpers";
 
-import { Box, ButtonGroup, Tooltip, Typography } from "@material-ui/core";
-import Button from "@material-ui/core/Button";
+import { Box, ButtonGroup, Tooltip, Typography } from "@mui/material";
+import Button from "@mui/material/Button";
 
 interface IProps {
   player: IPlayer;

src/Sidebar/ui/SidebarRoot.tsx

@@ -1,47 +1,49 @@
 import React, { useState, useEffect } from "react";
 import clsx from "clsx";
-import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
-import Drawer from "@material-ui/core/Drawer";
-import List from "@material-ui/core/List";
-import Divider from "@material-ui/core/Divider";
-import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
-import ChevronRightIcon from "@material-ui/icons/ChevronRight";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemIcon from "@material-ui/core/ListItemIcon";
-import ListItemText from "@material-ui/core/ListItemText";
-import Typography from "@material-ui/core/Typography";
-import Collapse from "@material-ui/core/Collapse";
+import { Theme } from "@mui/material/styles";
+import createStyles from "@mui/styles/createStyles";
+import makeStyles from "@mui/styles/makeStyles";
+import Drawer from "@mui/material/Drawer";
+import List from "@mui/material/List";
+import Divider from "@mui/material/Divider";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import ListItem from "@mui/material/ListItem";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import Typography from "@mui/material/Typography";
+import Collapse from "@mui/material/Collapse";
 
-import { Theme as BBTheme, colors } from "../../ui/React/Theme";
+import { TTheme as BBTheme, colors } from "../../ui/React/Theme";
 
-import ComputerIcon from "@material-ui/icons/Computer";
-import LastPageIcon from "@material-ui/icons/LastPage"; // Terminal
-import CreateIcon from "@material-ui/icons/Create"; // Create Script
-import StorageIcon from "@material-ui/icons/Storage"; // Active Scripts
-import BugReportIcon from "@material-ui/icons/BugReport"; // Create Program
-import EqualizerIcon from "@material-ui/icons/Equalizer"; // Stats
-import ContactsIcon from "@material-ui/icons/Contacts"; // Factions
-import DoubleArrowIcon from "@material-ui/icons/DoubleArrow"; // Augmentations
-import AccountTreeIcon from "@material-ui/icons/AccountTree"; // Hacknet
-import PeopleAltIcon from "@material-ui/icons/PeopleAlt"; // Sleeves
-import LocationCityIcon from "@material-ui/icons/LocationCity"; // City
-import AirplanemodeActiveIcon from "@material-ui/icons/AirplanemodeActive"; // Travel
-import WorkIcon from "@material-ui/icons/Work"; // Job
-import TrendingUpIcon from "@material-ui/icons/TrendingUp"; // Stock Market
-import FormatBoldIcon from "@material-ui/icons/FormatBold"; // Bladeburner
-import BusinessIcon from "@material-ui/icons/Business"; // Corp
-import SportsMmaIcon from "@material-ui/icons/SportsMma"; // Gang
-import CheckIcon from "@material-ui/icons/Check"; // Milestones
-import HelpIcon from "@material-ui/icons/Help"; // Tutorial
-import SettingsIcon from "@material-ui/icons/Settings"; // options
-import DeveloperBoardIcon from "@material-ui/icons/DeveloperBoard"; // Dev
-// import MemoryIcon from "@material-ui/icons/Memory";
-// import ShareIcon from "@material-ui/icons/Share";
-import AccountBoxIcon from "@material-ui/icons/AccountBox";
-import PublicIcon from "@material-ui/icons/Public";
-import LiveHelpIcon from "@material-ui/icons/LiveHelp";
-import ExpandLessIcon from "@material-ui/icons/ExpandLess";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import ComputerIcon from "@mui/icons-material/Computer";
+import LastPageIcon from "@mui/icons-material/LastPage"; // Terminal
+import CreateIcon from "@mui/icons-material/Create"; // Create Script
+import StorageIcon from "@mui/icons-material/Storage"; // Active Scripts
+import BugReportIcon from "@mui/icons-material/BugReport"; // Create Program
+import EqualizerIcon from "@mui/icons-material/Equalizer"; // Stats
+import ContactsIcon from "@mui/icons-material/Contacts"; // Factions
+import DoubleArrowIcon from "@mui/icons-material/DoubleArrow"; // Augmentations
+import AccountTreeIcon from "@mui/icons-material/AccountTree"; // Hacknet
+import PeopleAltIcon from "@mui/icons-material/PeopleAlt"; // Sleeves
+import LocationCityIcon from "@mui/icons-material/LocationCity"; // City
+import AirplanemodeActiveIcon from "@mui/icons-material/AirplanemodeActive"; // Travel
+import WorkIcon from "@mui/icons-material/Work"; // Job
+import TrendingUpIcon from "@mui/icons-material/TrendingUp"; // Stock Market
+import FormatBoldIcon from "@mui/icons-material/FormatBold"; // Bladeburner
+import BusinessIcon from "@mui/icons-material/Business"; // Corp
+import SportsMmaIcon from "@mui/icons-material/SportsMma"; // Gang
+import CheckIcon from "@mui/icons-material/Check"; // Milestones
+import HelpIcon from "@mui/icons-material/Help"; // Tutorial
+import SettingsIcon from "@mui/icons-material/Settings"; // options
+import DeveloperBoardIcon from "@mui/icons-material/DeveloperBoard"; // Dev
+// import MemoryIcon from "@mui/icons-material/Memory";
+// import ShareIcon from "@mui/icons-material/Share";
+import AccountBoxIcon from "@mui/icons-material/AccountBox";
+import PublicIcon from "@mui/icons-material/Public";
+import LiveHelpIcon from "@mui/icons-material/LiveHelp";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
 import { IEngine } from "../../IEngine";
 import { IPlayer } from "../../PersonObjects/IPlayer";

src/Terminal/ui/TerminalInput.tsx

@@ -1,7 +1,9 @@
 import React, { useState, useEffect, useRef } from "react";
-import Typography from "@material-ui/core/Typography";
-import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
-import TextField from "@material-ui/core/TextField";
+import Typography from "@mui/material/Typography";
+import { Theme } from "@mui/material/styles";
+import makeStyles from "@mui/styles/makeStyles";
+import createStyles from "@mui/styles/createStyles";
+import TextField from "@mui/material/TextField";
 import { KEY } from "../../../utils/helpers/keyCodes";
 import { ITerminal } from "../ITerminal";
 import { IEngine } from "../../IEngine";
@@ -13,21 +15,21 @@ import { FconfSettings } from "../../Fconf/FconfSettings";
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     textfield: {
-      margin: theme.spacing(0),
+      margin: 0,
       width: "100%",
     },
     input: {
       backgroundColor: "#000",
     },
     nopadding: {
-      padding: theme.spacing(0),
+      padding: 0,
     },
     preformatted: {
       whiteSpace: "pre-wrap",
-      margin: theme.spacing(0),
+      margin: 0,
     },
     list: {
-      padding: theme.spacing(0),
+      padding: 0,
       height: "100%",
     },
   }),
@@ -334,6 +336,7 @@ export function TerminalInput({ terminal, engine, player }: IProps): React.React
         </>
       )}
       <TextField
+        variant="standard"
         color={terminal.action === null ? "primary" : "secondary"}
         autoFocus
         disabled={terminal.action !== null}

src/Terminal/ui/TerminalRoot.tsx

@@ -1,10 +1,12 @@
 import React, { useState, useEffect } from "react";
-import Typography from "@material-ui/core/Typography";
-import List from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
-import { Link as MuiLink } from "@material-ui/core";
-import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
-import Box from "@material-ui/core/Box";
+import Typography from "@mui/material/Typography";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import { Link as MuiLink } from "@mui/material";
+import { Theme } from "@mui/material/styles";
+import makeStyles from '@mui/styles/makeStyles';
+import createStyles from '@mui/styles/createStyles';
+import Box from "@mui/material/Box";
 import { ITerminal, Output, Link } from "../ITerminal";
 import { IEngine } from "../../IEngine";
 import { IPlayer } from "../../PersonObjects/IPlayer";

src/ThirdParty/raphael.min.js

@@ -2613,8 +2613,7 @@
                     });
                   };
                 })(ce));
-            return (
-              (ue.attr = function (t, r) {
+            return (ue.attr = function (t, r) {
               if (t && e.is(t, T) && e.is(t[0], "object"))
                 for (var i = 0, n = t.length; i < n; i++) this.items[i].attr(t[i]);
               else for (var a = 0, s = this.items.length; a < s; a++) this.items[a].attr(t, r);
@@ -2870,8 +2869,7 @@
                   /in/.test(t.readyState) ? setTimeout(r, 9) : e.eve("raphael.DOMload");
                 })();
             })(document),
-              e
-            );
+            e;
           }.apply(e, i)) || (t.exports = n);
     },
     function (t, e, r) {

src/engine.jsx

@@ -26,7 +26,7 @@ import { SidebarRoot } from "./Sidebar/ui/SidebarRoot";
 import { CorporationRoot } from "./Corporation/ui/CorporationRoot";
 import { ResleeveRoot } from "./PersonObjects/Resleeving/ui/ResleeveRoot";
 import { GameOptionsRoot } from "./ui/React/GameOptionsRoot";
-import { Theme } from "./ui/React/Theme";
+import { TTheme as Theme } from "./ui/React/Theme";
 import { SleeveRoot } from "./PersonObjects/Sleeve/ui/SleeveRoot";
 import { displayInfiltrationContent } from "./Infiltration/Helper";
 import {
@@ -803,7 +803,12 @@ const Engine = {
       removeLoadingScreen();
     }
 
-    ReactDOM.render(<SidebarRoot engine={this} player={Player} />, document.getElementById("sidebar"));
+    ReactDOM.render(
+      <Theme>
+        <SidebarRoot engine={this} player={Player} />
+      </Theme>,
+      document.getElementById("sidebar"),
+    );
   },
 
   setDisplayElements: function () {

src/ui/React/CharacterOverview.tsx

@@ -1,23 +1,23 @@
 // Root React Component for the Corporation UI
 import React, { useState, useEffect } from "react";
 
-import { makeStyles } from "@material-ui/core/styles";
+import makeStyles from '@mui/styles/makeStyles';
 import { IPlayer } from "../../PersonObjects/IPlayer";
 import { numeralWrapper } from "../../ui/numeralFormat";
 import { Reputation } from "./Reputation";
 
-import Table from "@material-ui/core/Table";
-import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
-import TableContainer from "@material-ui/core/TableContainer";
-import TableHead from "@material-ui/core/TableHead";
-import TableRow from "@material-ui/core/TableRow";
-import Paper from "@material-ui/core/Paper";
-import Box from "@material-ui/core/Box";
-import Typography from "@material-ui/core/Typography";
-import Divider from "@material-ui/core/Divider";
-import Button from "@material-ui/core/Button";
-import Collapse from "@material-ui/core/Collapse";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Paper from "@mui/material/Paper";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Divider from "@mui/material/Divider";
+import Button from "@mui/material/Button";
+import Collapse from "@mui/material/Collapse";
 
 import { colors } from "./Theme";
 

src/ui/React/ConfirmationModal.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { Modal } from "./Modal";
 
-import Button from "@material-ui/core/Button";
-import Typography from "@material-ui/core/Typography";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
 
 interface IProps {
     open: boolean;

src/ui/React/GameOptionsRoot.tsx

@@ -2,20 +2,23 @@ import React, { useState } from "react";
 
 import { IPlayer } from "../../PersonObjects/IPlayer";
 
-import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
-import Typography from "@material-ui/core/Typography";
-import Slider from "@material-ui/core/Slider";
-import Grid from "@material-ui/core/Grid";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import Switch from "@material-ui/core/Switch";
-import Select from "@material-ui/core/Select";
-import MenuItem from "@material-ui/core/MenuItem";
-import Button from "@material-ui/core/Button";
-import Box from "@material-ui/core/Box";
-import List from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
-import Link from "@material-ui/core/Link";
-import Tooltip from "@material-ui/core/Tooltip";
+import { Theme } from "@mui/material/styles";
+import makeStyles from "@mui/styles/makeStyles";
+import createStyles from "@mui/styles/createStyles";
+import Typography from "@mui/material/Typography";
+import Slider from "@mui/material/Slider";
+import Grid from "@mui/material/Grid";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Switch from "@mui/material/Switch";
+import Select, { SelectChangeEvent } from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
+import Button from "@mui/material/Button";
+import Box from "@mui/material/Box";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import Link from "@mui/material/Link";
+import Tooltip from "@mui/material/Tooltip";
+
 import { FileDiagnosticModal } from "../../Diagnostic/FileDiagnosticModal";
 import { ConfirmationModal } from "./ConfirmationModal";
 
@@ -24,12 +27,12 @@ import { Settings } from "../../Settings/Settings";
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
-      width: theme.spacing(50),
-      padding: theme.spacing(2),
+      width: 50,
+      padding: 2,
       userSelect: "none",
     },
     pad: {
-      padding: theme.spacing(2),
+      padding: 2,
     },
   }),
 );
@@ -142,7 +145,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
     setDisableTextEffects(event.target.checked);
     Settings.DisableTextEffects = event.target.checked;
   }
-  function handleLocaleChange(event: React.ChangeEvent<{ value: unknown }>): void {
+  function handleLocaleChange(event: SelectChangeEvent<string>): void {
     setLocale(event.target.value as string);
     Settings.Locale = event.target.value as string;
   }
@@ -544,7 +547,10 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
       </Grid>
       <FileDiagnosticModal open={diagnosticOpen} onClose={() => setDiagnosticOpen(false)} />
       <ConfirmationModal
-      onConfirm={() => {props.delete(); setDeleteOpen(false);}}
+        onConfirm={() => {
+          props.delete();
+          setDeleteOpen(false);
+        }}
         open={deleteGameOpen}
         onClose={() => setDeleteOpen(false)}
         confirmationText={"Really delete your game? (It's permanent!)"}

src/ui/React/Modal.tsx

@@ -1,8 +1,10 @@
 import React from "react";
-import { makeStyles, createStyles, Theme } from "@material-ui/core";
-import M from "@material-ui/core/Modal";
-import Backdrop from "@material-ui/core/Backdrop";
-import Fade from "@material-ui/core/Fade";
+import { Theme } from "@mui/material";
+import makeStyles from "@mui/styles/makeStyles";
+import createStyles from "@mui/styles/createStyles";
+import M from "@mui/material/Modal";
+import Backdrop from "@mui/material/Backdrop";
+import Fade from "@mui/material/Fade";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -15,7 +17,7 @@ const useStyles = makeStyles((theme: Theme) =>
       backgroundColor: theme.palette.background.paper,
       border: "2px solid " + theme.palette.primary.main,
       boxShadow: theme.shadows[5],
-      padding: theme.spacing(2, 4, 3),
+      padding: 2,
       maxWidth: "80%",
       maxHeight: "80%",
       overflow: "auto",

src/ui/React/MuiButton.tsx

@@ -4,7 +4,8 @@
  */
 
 import React from "react";
-import { Button, ButtonProps, makeStyles } from "@material-ui/core";
+import { Button, ButtonProps } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
 const useStyles = makeStyles({
   // Tries to emulate StdButton in buttons.scss
   root: {

src/ui/React/MuiPaper.tsx

@@ -4,7 +4,9 @@
  */
 
 import React from "react";
-import { Paper, PaperProps, makeStyles } from "@material-ui/core";
+import { Paper, PaperProps } from "@mui/material";
+
+import makeStyles from '@mui/styles/makeStyles';
 
 const useStyles = makeStyles({
   root: {

src/ui/React/MuiTextField.tsx

@@ -4,7 +4,9 @@
  */
 
 import React from "react";
-import { makeStyles, TextField, TextFieldProps } from "@material-ui/core";
+import { TextField, TextFieldProps } from "@mui/material";
+
+import makeStyles from '@mui/styles/makeStyles';
 
 const backgroundColorStyles = {
   backgroundColor: "rgba(57, 54, 54, 0.9)",

src/ui/React/Select.tsx

@@ -4,7 +4,8 @@
  */
 
 import React from "react";
-import { Select as MuiSelect, SelectProps, makeStyles } from "@material-ui/core";
+import { Select as MuiSelect, SelectProps } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
 import { colors } from "./Theme";
 
 const useStyles = makeStyles({

src/ui/React/Theme.tsx

@@ -1,5 +1,10 @@
 import React from "react";
-import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
+import { createTheme, ThemeProvider, Theme, StyledEngineProvider, adaptV4Theme } from "@mui/material/styles";
+
+declare module "@mui/styles/defaultTheme" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface DefaultTheme extends Theme {}
+}
 
 export const colors = {
   primarylight: "#0f0",
@@ -27,7 +32,7 @@ export const colors = {
   int: "#6495ed",
 };
 
-export const theme = createMuiTheme({
+export const theme = createTheme({
   palette: {
     primary: {
       light: colors.primarylight,
@@ -54,8 +59,9 @@ export const theme = createMuiTheme({
       textTransform: "none",
     },
   },
-  overrides: {
+  components: {
     MuiInputBase: {
+      styleOverrides: {
         root: {
           backgroundColor: colors.well,
         },
@@ -67,7 +73,10 @@ export const theme = createMuiTheme({
           },
         },
       },
+    },
+
     MuiInput: {
+      styleOverrides: {
         root: {
           backgroundColor: colors.well,
           borderBottomColor: "#fff",
@@ -84,7 +93,10 @@ export const theme = createMuiTheme({
           },
         },
       },
+    },
+
     MuiInputLabel: {
+      styleOverrides: {
         root: {
           color: colors.primarydark, // why is this switched?
           userSelect: "none",
@@ -93,7 +105,9 @@ export const theme = createMuiTheme({
           },
         },
       },
+    },
     MuiButton: {
+      styleOverrides: {
         root: {
           backgroundColor: "#333",
           border: "1px solid " + colors.well,
@@ -107,37 +121,51 @@ export const theme = createMuiTheme({
           borderRadius: 0,
         },
       },
+    },
     MuiSelect: {
+      styleOverrides: {
         icon: {
           color: colors.primary,
         },
       },
+    },
     MuiMenu: {
+      styleOverrides: {
         list: {
           backgroundColor: colors.well,
         },
       },
+    },
     MuiMenuItem: {
+      styleOverrides: {
         root: {
           color: colors.primary,
         },
       },
+    },
     MuiAccordionSummary: {
+      styleOverrides: {
         root: {
           backgroundColor: "#111",
         },
       },
+    },
     MuiAccordionDetails: {
+      styleOverrides: {
         root: {
           backgroundColor: colors.black,
         },
       },
+    },
     MuiIconButton: {
+      styleOverrides: {
         root: {
           color: colors.primary,
         },
       },
+    },
     MuiTooltip: {
+      styleOverrides: {
         tooltip: {
           fontSize: "1em",
           color: colors.primary,
@@ -146,12 +174,16 @@ export const theme = createMuiTheme({
           border: "2px solid white",
         },
       },
+    },
     MuiSvgIcon: {
+      styleOverrides: {
         root: {
           color: colors.primary,
         },
       },
+    },
     MuiDrawer: {
+      styleOverrides: {
         paper: {
           "&::-webkit-scrollbar": {
             // webkit
@@ -164,17 +196,23 @@ export const theme = createMuiTheme({
           borderRight: "1px solid " + colors.welllight,
         },
       },
+    },
     MuiDivider: {
+      styleOverrides: {
         root: {
           backgroundColor: colors.welllight,
         },
       },
+    },
     MuiFormControlLabel: {
+      styleOverrides: {
         root: {
           color: colors.primary,
         },
       },
+    },
     MuiSwitch: {
+      styleOverrides: {
         switchBase: {
           color: colors.primarydark,
         },
@@ -182,19 +220,24 @@ export const theme = createMuiTheme({
           backgroundColor: colors.welllight,
         },
       },
+    },
     MuiPaper: {
+      styleOverrides: {
         root: {
           backgroundColor: colors.black,
           border: "1px solid " + colors.welllight,
         },
       },
     },
+  },
 });
 
 interface IProps {
   children: JSX.Element[] | JSX.Element;
 }
 
-export const Theme = ({ children }: IProps): React.ReactElement => (
+export const TTheme = ({ children }: IProps): React.ReactElement => (
+  <StyledEngineProvider injectFirst>
     <ThemeProvider theme={theme}>{children}</ThemeProvider>
+  </StyledEngineProvider>
 );