convert some corp to mui

src/Corporation/Employee.ts

@@ -139,74 +139,6 @@ export class Employee {
     return mult;
   }
 
-  //'panel' is the DOM element on which to create the UI
-  createUI(panel: HTMLElement, corporation: ICorporation, industry: IIndustry): void {
-    const effCre = this.cre * corporation.getEmployeeCreMultiplier() * industry.getEmployeeCreMultiplier(),
-      effCha = this.cha * corporation.getEmployeeChaMultiplier() * industry.getEmployeeChaMultiplier(),
-      effInt = this.int * corporation.getEmployeeIntMultiplier() * industry.getEmployeeIntMultiplier(),
-      effEff = this.eff * corporation.getEmployeeEffMultiplier() * industry.getEmployeeEffMultiplier();
-    panel.style.color = "white";
-    panel.appendChild(
-      createElement("p", {
-        id: "cmpy-mgmt-employee-" + this.name + "-panel-text",
-        innerHTML:
-          "Morale: " +
-          formatNumber(this.mor, 3) +
-          "<br>" +
-          "Happiness: " +
-          formatNumber(this.hap, 3) +
-          "<br>" +
-          "Energy: " +
-          formatNumber(this.ene, 3) +
-          "<br>" +
-          "Intelligence: " +
-          formatNumber(effInt, 3) +
-          "<br>" +
-          "Charisma: " +
-          formatNumber(effCha, 3) +
-          "<br>" +
-          "Experience: " +
-          formatNumber(this.exp, 3) +
-          "<br>" +
-          "Creativity: " +
-          formatNumber(effCre, 3) +
-          "<br>" +
-          "Efficiency: " +
-          formatNumber(effEff, 3) +
-          "<br>" +
-          "Salary: " +
-          numeralWrapper.format(this.sal, "$0.000a") +
-          "/ s<br>",
-      }),
-    );
-
-    //Selector for employee position
-    const selector = createElement("select", {}) as HTMLSelectElement;
-    for (const key in EmployeePositions) {
-      if (EmployeePositions.hasOwnProperty(key)) {
-        selector.add(
-          createElement("option", {
-            text: EmployeePositions[key],
-            value: EmployeePositions[key],
-          }) as HTMLOptionElement,
-        );
-      }
-    }
-
-    selector.addEventListener("change", () => {
-      this.pos = selector.options[selector.selectedIndex].value;
-    });
-
-    //Set initial value of selector
-    for (let i = 0; i < selector.length; ++i) {
-      if (selector.options[i].value === this.pos) {
-        selector.selectedIndex = i;
-        break;
-      }
-    }
-    panel.appendChild(selector);
-  }
-
   copy(): Employee {
     const employee = new Employee();
     employee.name = this.name;

src/Corporation/ui/Industry.tsx

@@ -32,13 +32,7 @@ export function Industry(props: IProps): React.ReactElement {
           currentCity={props.city}
           office={props.office}
         />
-        <IndustryOffice
+        <IndustryOffice rerender={props.rerender} office={props.office} />
-          rerender={props.rerender}
-          player={player}
-          corp={corp}
-          division={division}
-          office={props.office}
-        />
       </div>
       <div className={"cmpy-mgmt-industry-right-panel"}>
         <IndustryWarehouse

src/Corporation/ui/IndustryOffice.tsx

@@ -3,26 +3,35 @@
 import React, { useState } from "react";
 
 import { OfficeSpace } from "../OfficeSpace";
-import { IIndustry } from "../IIndustry";
 import { Employee } from "../Employee";
 import { EmployeePositions } from "../EmployeePositions";
 
 import { numeralWrapper } from "../../ui/numeralFormat";
 
-import { getSelectText } from "../../ui/uiHelpers/getSelectData";
 import { createPopup } from "../../ui/React/createPopup";
 import { UpgradeOfficeSizePopup } from "./UpgradeOfficeSizePopup";
 import { HireEmployeePopup } from "./HireEmployeePopup";
 import { ThrowPartyPopup } from "./ThrowPartyPopup";
-import { ICorporation } from "../ICorporation";
-import { IPlayer } from "../../PersonObjects/IPlayer";
 import { Money } from "../../ui/React/Money";
+import { use } from "../../ui/Context";
+import { useCorporation, useDivision } from "./Context";
+
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
+import Box from "@mui/material/Box";
+import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import Tooltip from "@mui/material/Tooltip";
+import MenuItem from "@mui/material/MenuItem";
+import Select, { SelectChangeEvent } from "@mui/material/Select";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableRow from "@mui/material/TableRow";
+import { TableCell } from "../../ui/React/Table";
 
 interface IProps {
-  corp: ICorporation;
-  division: IIndustry;
   office: OfficeSpace;
-  player: IPlayer;
   rerender: () => void;
 }
 
@@ -42,27 +51,35 @@ interface ISwitchProps {
 function SwitchButton(props: ISwitchProps): React.ReactElement {
   if (props.manualMode) {
     return (
-      <button className={"std-button tooltip"} onClick={() => props.switchMode((old) => !old)}>
+      <Tooltip
-        Switch to Auto Mode
+        title={
-        <span className={"tooltiptext"}>
+          <Typography>
-          Switch to Automatic Assignment Mode, which will automatically assign employees to your selected jobs. You
+            Switch to Automatic Assignment Mode, which will automatically assign employees to your selected jobs. You
-          simply have to select the number of assignments for each job
+            simply have to select the number of assignments for each job
-        </span>
+          </Typography>
-      </button>
+        }
+      >
+        <Button onClick={() => props.switchMode((old) => !old)}>Switch to Auto Mode</Button>
+      </Tooltip>
     );
   } else {
     return (
-      <button className={"std-button tooltip"} onClick={() => props.switchMode((old) => !old)}>
+      <Tooltip
-        Switch to Manual Mode
+        title={
-        <span className={"tooltiptext"}>
+          <Typography>
-          Switch to Manual Assignment Mode, which allows you to specify which employees should get which jobs
+            Switch to Manual Assignment Mode, which allows you to specify which employees should get which jobs
-        </span>
+          </Typography>
-      </button>
+        }
+      >
+        <Button onClick={() => props.switchMode((old) => !old)}>Switch to Manual Mode</Button>
+      </Tooltip>
     );
   }
 }
 
 function ManualManagement(props: IProps): React.ReactElement {
+  const corp = useCorporation();
+  const division = useDivision();
   const [employee, setEmployee] = useState<Employee | null>(
     props.office.employees.length > 0 ? props.office.employees[0] : null,
   );
@@ -76,11 +93,15 @@ function ManualManagement(props: IProps): React.ReactElement {
   // Employee Selector
   const employees = [];
   for (let i = 0; i < props.office.employees.length; ++i) {
-    employees.push(<option key={props.office.employees[i].name}>{props.office.employees[i].name}</option>);
+    employees.push(
+      <MenuItem key={props.office.employees[i].name} value={props.office.employees[i].name}>
+        {props.office.employees[i].name}
+      </MenuItem>,
+    );
   }
 
-  function employeeSelectorOnChange(e: React.ChangeEvent<HTMLSelectElement>): void {
+  function employeeSelectorOnChange(e: SelectChangeEvent<string>): void {
-    const name = getSelectText(e.target);
+    const name = e.target.value;
     for (let i = 0; i < props.office.employees.length; ++i) {
       if (name === props.office.employees[i].name) {
         setEmployee(props.office.employees[i]);
@@ -98,19 +119,18 @@ function ManualManagement(props: IProps): React.ReactElement {
   const positionNames = Object.values(EmployeePositions);
   for (let i = 0; i < positionNames.length; ++i) {
     employeePositions.push(
-      <option key={positionNames[i]} value={positionNames[i]}>
+      <MenuItem key={positionNames[i]} value={positionNames[i]}>
         {positionNames[i]}
-      </option>,
+      </MenuItem>,
     );
     if (emp != null && emp.pos === positionNames[i]) {
       employeePositionSelectorInitialValue = positionNames[i];
     }
   }
 
-  function employeePositionSelectorOnChange(e: React.ChangeEvent<HTMLSelectElement>): void {
+  function employeePositionSelectorOnChange(e: SelectChangeEvent<string>): void {
     if (employee === null) return;
-    const pos = getSelectText(e.target);
+    employee.pos = e.target.value;
-    employee.pos = pos;
     props.rerender();
   }
 
@@ -118,16 +138,16 @@ function ManualManagement(props: IProps): React.ReactElement {
   const nf = "0.000";
 
   // Employee stats (after applying multipliers)
-  const effCre = emp ? emp.cre * props.corp.getEmployeeCreMultiplier() * props.division.getEmployeeCreMultiplier() : 0;
+  const effCre = emp ? emp.cre * corp.getEmployeeCreMultiplier() * division.getEmployeeCreMultiplier() : 0;
-  const effCha = emp ? emp.cha * props.corp.getEmployeeChaMultiplier() * props.division.getEmployeeChaMultiplier() : 0;
+  const effCha = emp ? emp.cha * corp.getEmployeeChaMultiplier() * division.getEmployeeChaMultiplier() : 0;
-  const effInt = emp ? emp.int * props.corp.getEmployeeIntMultiplier() * props.division.getEmployeeIntMultiplier() : 0;
+  const effInt = emp ? emp.int * corp.getEmployeeIntMultiplier() * division.getEmployeeIntMultiplier() : 0;
-  const effEff = emp ? emp.eff * props.corp.getEmployeeEffMultiplier() * props.division.getEmployeeEffMultiplier() : 0;
+  const effEff = emp ? emp.eff * corp.getEmployeeEffMultiplier() * division.getEmployeeEffMultiplier() : 0;
 
   return (
     <div style={employeeInfoDivStyle}>
-      <select className="dropdown" onChange={employeeSelectorOnChange}>
+      <Select value={employee !== null ? employee.name : ""} onChange={employeeSelectorOnChange}>
         {employees}
-      </select>
+      </Select>
       {employee != null && (
         <p>
           Morale: {numeralWrapper.format(employee.mor, nf)}
@@ -150,13 +170,9 @@ function ManualManagement(props: IProps): React.ReactElement {
         </p>
       )}
       {employee != null && (
-        <select
+        <Select onChange={employeePositionSelectorOnChange} value={employeePositionSelectorInitialValue}>
-          className="dropdown"
-          onChange={employeePositionSelectorOnChange}
-          value={employeePositionSelectorInitialValue}
-        >
           {employeePositions}
-        </select>
+        </Select>
       )}
     </div>
   );
@@ -164,15 +180,14 @@ function ManualManagement(props: IProps): React.ReactElement {
 
 interface IAutoAssignProps {
   office: OfficeSpace;
-  corp: ICorporation;
-  division: IIndustry;
-  player: IPlayer;
   job: string;
   desc: string;
   rerender: () => void;
 }
 
 function AutoAssignJob(props: IAutoAssignProps): React.ReactElement {
+  const corp = useCorporation();
+  const division = useDivision();
   const numJob = countEmployee(props.office.employees, props.job);
   const numUnassigned = countEmployee(props.office.employees, EmployeePositions.Unassigned);
   function assignEmployee(): void {
@@ -182,42 +197,43 @@ function AutoAssignJob(props: IAutoAssignProps): React.ReactElement {
     }
 
     props.office.assignEmployeeToJob(props.job);
-    props.office.calculateEmployeeProductivity(props.corp, props.division);
+    props.office.calculateEmployeeProductivity(corp, division);
     props.rerender();
   }
 
   function unassignEmployee(): void {
     props.office.unassignEmployeeFromJob(props.job);
-    props.office.calculateEmployeeProductivity(props.corp, props.division);
+    props.office.calculateEmployeeProductivity(corp, division);
     props.rerender();
   }
-  const positionHeaderStyle = {
-    fontSize: "15px",
-    margin: "5px 0px 5px 0px",
-    width: "50%",
-  };
   return (
-    <>
+    <TableRow>
-      <h2 className={"tooltip"} style={positionHeaderStyle}>
+      <TableCell>
-        {props.job} ({numJob})<span className={"tooltiptext"}>{props.desc}</span>
+        <Tooltip title={props.desc}>
-      </h2>
+          <Typography>
-      <button className={numUnassigned > 0 ? "std-button" : "a-link-button-inactive"} onClick={assignEmployee}>
+            {props.job} ({numJob})
-        +
+          </Typography>
-      </button>
+        </Tooltip>
-      <button className={numJob > 0 ? "std-button" : "a-link-button-inactive"} onClick={unassignEmployee}>
+      </TableCell>
-        -
+      <TableCell>
-      </button>
+        <IconButton disabled={numUnassigned === 0} onClick={assignEmployee}>
-      <br />
+          <ArrowDropUpIcon />
-    </>
+        </IconButton>
+        <IconButton disabled={numJob === 0} onClick={unassignEmployee}>
+          <ArrowDropDownIcon />
+        </IconButton>
+      </TableCell>
+    </TableRow>
   );
 }
 
 function AutoManagement(props: IProps): React.ReactElement {
+  const corp = useCorporation();
+  const division = useDivision();
   const numUnassigned = countEmployee(props.office.employees, EmployeePositions.Unassigned);
-  const vechain = props.corp.unlockUpgrades[4] === 1; // Has Vechain upgrade
+  const vechain = corp.unlockUpgrades[4] === 1; // Has Vechain upgrade
 
-  // Calculate average morale, happiness, and energy. Also salary
+  // Calculate average morale, happiness,  energy, and salary.
-  // TODO is this efficient?
   let totalMorale = 0,
     totalHappiness = 0,
     totalEnergy = 0,
@@ -240,50 +256,54 @@ function AutoManagement(props: IProps): React.ReactElement {
 
   return (
     <>
-      <p>
+      <Table padding="none">
-        <strong>Unassigned Employees: {numUnassigned}</strong>
+        <TableBody>
-      </p>
+          <TableRow>
-      <br />
+            <TableCell>
-      <table>
+              <Typography>Unassigned Employees:</Typography>
-        <tbody>
+            </TableCell>
-          <tr>
+            <TableCell>
-            <td>
+              <Typography>{numUnassigned}</Typography>
-              <p>Avg Employee Morale:</p>
+            </TableCell>
-            </td>
+          </TableRow>
-            <td>
+          <TableRow>
-              <p>{numeralWrapper.format(avgMorale, "0.000")}</p>
+            <TableCell>
-            </td>
+              <Typography>Avg Employee Morale:</Typography>
-          </tr>
+            </TableCell>
-          <tr>
+            <TableCell>
-            <td>
+              <Typography>{numeralWrapper.format(avgMorale, "0.000")}</Typography>
-              <p>Avg Employee Happiness:</p>
+            </TableCell>
-            </td>
+          </TableRow>
-            <td>
+          <TableRow>
-              <p>{numeralWrapper.format(avgHappiness, "0.000")}</p>
+            <TableCell>
-            </td>
+              <Typography>Avg Employee Happiness:</Typography>
-          </tr>
+            </TableCell>
-          <tr>
+            <TableCell>
-            <td>
+              <Typography>{numeralWrapper.format(avgHappiness, "0.000")}</Typography>
-              <p>Avg Employee Energy:</p>
+            </TableCell>
-            </td>
+          </TableRow>
-            <td>
+          <TableRow>
-              <p>{numeralWrapper.format(avgEnergy, "0.000")}</p>
+            <TableCell>
-            </td>
+              <Typography>Avg Employee Energy:</Typography>
-          </tr>
+            </TableCell>
-          <tr>
+            <TableCell>
-            <td>
+              <Typography>{numeralWrapper.format(avgEnergy, "0.000")}</Typography>
-              <p>Total Employee Salary:</p>
+            </TableCell>
-            </td>
+          </TableRow>
-            <td>
+          <TableRow>
-              <p>
+            <TableCell>
+              <Typography>Total Employee Salary:</Typography>
+            </TableCell>
+            <TableCell>
+              <Typography>
                 <Money money={totalSalary} />
-              </p>
+              </Typography>
-            </td>
+            </TableCell>
-          </tr>
+          </TableRow>
           {vechain && (
             <>
-              <tr>
+              <TableRow>
-                <td>
+                <TableCell>
                   <p className={"tooltip"} style={{ display: "inline-block" }}>
                     Material Production:
                     <span className={"tooltiptext"}>
@@ -292,120 +312,112 @@ function AutoManagement(props: IProps): React.ReactElement {
                       and Management employees
                     </span>
                   </p>
-                </td>
+                </TableCell>
-                <td>
+                <TableCell>
-                  <p>{numeralWrapper.format(props.division.getOfficeProductivity(props.office), "0.000")}</p>
+                  <p>{numeralWrapper.format(division.getOfficeProductivity(props.office), "0.000")}</p>
-                </td>
+                </TableCell>
-              </tr>
+              </TableRow>
-              <tr>
+              <TableRow>
-                <td>
+                <TableCell>
-                  <p className={"tooltip"} style={{ display: "inline-block" }}>
+                  <Tooltip
-                    Product Production:
+                    title={
-                    <span className={"tooltiptext"}>
+                      <Typography>
-                      The base amount of any given Product this office can produce. Does not include production
+                        The base amount of any given Product this office can produce. Does not include production
-                      multipliers from upgrades and materials. This value is based off the productivity of your
+                        multipliers from upgrades and materials. This value is based off the productivity of your
-                      Operations, Engineering, and Management employees
+                        Operations, Engineering, and Management employees
-                    </span>
+                      </Typography>
-                  </p>
+                    }
-                </td>
+                  >
-                <td>
+                    <Typography>Product Production:</Typography>
-                  <p>
+                  </Tooltip>
+                </TableCell>
+                <TableCell>
+                  <Typography>
                     {numeralWrapper.format(
-                      props.division.getOfficeProductivity(props.office, {
+                      division.getOfficeProductivity(props.office, {
                         forProduct: true,
                       }),
                       "0.000",
                     )}
-                  </p>
+                  </Typography>
-                </td>
+                </TableCell>
-              </tr>
+              </TableRow>
-              <tr>
+              <TableRow>
-                <td>
+                <TableCell>
-                  <p className={"tooltip"} style={{ display: "inline-block" }}>
+                  <Tooltip
-                    Business Multiplier:
+                    title={<Typography>The effect this office's 'Business' employees has on boosting sales</Typography>}
-                    <span className={"tooltiptext"}>
+                  >
-                      The effect this office's 'Business' employees has on boosting sales
+                    <Typography> Business Multiplier:</Typography>
-                    </span>
+                  </Tooltip>
-                  </p>
+                </TableCell>
-                </td>
+                <TableCell>
-                <td>
+                  <Typography>x{numeralWrapper.format(division.getBusinessFactor(props.office), "0.000")}</Typography>
-                  <p>x{numeralWrapper.format(props.division.getBusinessFactor(props.office), "0.000")}</p>
+                </TableCell>
-                </td>
+              </TableRow>
-              </tr>
             </>
           )}
-        </tbody>
+        </TableBody>
-      </table>
+      </Table>
-      <AutoAssignJob
-        rerender={props.rerender}
-        office={props.office}
-        corp={props.corp}
-        division={props.division}
-        player={props.player}
-        job={EmployeePositions.Operations}
-        desc={"Manages supply chain operations. Improves the amount of Materials and Products you produce."}
-      />
 
-      <AutoAssignJob
+      <Table padding="none">
-        rerender={props.rerender}
+        <TableBody>
-        office={props.office}
+          <AutoAssignJob
-        corp={props.corp}
+            rerender={props.rerender}
-        division={props.division}
+            office={props.office}
-        player={props.player}
+            job={EmployeePositions.Operations}
-        job={EmployeePositions.Engineer}
+            desc={"Manages supply chain operations. Improves the amount of Materials and Products you produce."}
-        desc={
+          />
-          "Develops and maintains products and production systems. Increases the quality of everything you produce. Also increases the amount you produce (not as much as Operations, however)"
-        }
-      />
 
-      <AutoAssignJob
+          <AutoAssignJob
-        rerender={props.rerender}
+            rerender={props.rerender}
-        office={props.office}
+            office={props.office}
-        corp={props.corp}
+            job={EmployeePositions.Engineer}
-        division={props.division}
+            desc={
-        player={props.player}
+              "Develops and maintains products and production systems. Increases the quality of everything you produce. Also increases the amount you produce (not as much as Operations, however)"
-        job={EmployeePositions.Business}
+            }
-        desc={"Handles sales and finances. Improves the amount of Materials and Products you can sell."}
+          />
-      />
 
-      <AutoAssignJob
+          <AutoAssignJob
-        rerender={props.rerender}
+            rerender={props.rerender}
-        office={props.office}
+            office={props.office}
-        corp={props.corp}
+            job={EmployeePositions.Business}
-        division={props.division}
+            desc={"Handles sales and finances. Improves the amount of Materials and Products you can sell."}
-        player={props.player}
+          />
-        job={EmployeePositions.Management}
-        desc={
-          "Leads and oversees employees and office operations. Improves the effectiveness of Engineer and Operations employees."
-        }
-      />
 
-      <AutoAssignJob
+          <AutoAssignJob
-        rerender={props.rerender}
+            rerender={props.rerender}
-        office={props.office}
+            office={props.office}
-        corp={props.corp}
+            job={EmployeePositions.Management}
-        division={props.division}
+            desc={
-        player={props.player}
+              "Leads and oversees employees and office operations. Improves the effectiveness of Engineer and Operations employees."
-        job={EmployeePositions.RandD}
+            }
-        desc={"Research new innovative ways to improve the company. Generates Scientific Research."}
+          />
-      />
 
-      <AutoAssignJob
+          <AutoAssignJob
-        rerender={props.rerender}
+            rerender={props.rerender}
-        office={props.office}
+            office={props.office}
-        corp={props.corp}
+            job={EmployeePositions.RandD}
-        division={props.division}
+            desc={"Research new innovative ways to improve the company. Generates Scientific Research."}
-        player={props.player}
+          />
-        job={EmployeePositions.Training}
+
-        desc={
+          <AutoAssignJob
-          "Set employee to training, which will increase some of their stats. Employees in training do not affect any company operations."
+            rerender={props.rerender}
-        }
+            office={props.office}
-      />
+            job={EmployeePositions.Training}
+            desc={
+              "Set employee to training, which will increase some of their stats. Employees in training do not affect any company operations."
+            }
+          />
+        </TableBody>
+      </Table>
     </>
   );
 }
 
 export function IndustryOffice(props: IProps): React.ReactElement {
+  const player = use.Player();
+  const corp = useCorporation();
+  const division = useDivision();
   const [employeeManualAssignMode, setEmployeeManualAssignMode] = useState(false);
 
   const buttonStyle = {
@@ -428,19 +440,12 @@ export function IndustryOffice(props: IProps): React.ReactElement {
     createPopup(popupId, HireEmployeePopup, {
       rerender: props.rerender,
       office: props.office,
-      corp: props.corp,
+      corp: corp,
       popupId: popupId,
-      player: props.player,
+      player: player,
     });
   }
 
-  // Autohire employee button
-  let autohireEmployeeButtonClass = "tooltip";
-  if (props.office.atCapacity()) {
-    autohireEmployeeButtonClass += " a-link-button-inactive";
-  } else {
-    autohireEmployeeButtonClass += " std-button";
-  }
   function autohireEmployeeButtonOnClick(): void {
     if (props.office.atCapacity()) return;
     props.office.hireRandomEmployee();
@@ -452,9 +457,9 @@ export function IndustryOffice(props: IProps): React.ReactElement {
     createPopup(popupId, UpgradeOfficeSizePopup, {
       rerender: props.rerender,
       office: props.office,
-      corp: props.corp,
+      corp: corp,
       popupId: popupId,
-      player: props.player,
+      player: player,
     });
   }
 
@@ -462,74 +467,70 @@ export function IndustryOffice(props: IProps): React.ReactElement {
     const popupId = "cmpy-mgmt-throw-office-party-popup";
     createPopup(popupId, ThrowPartyPopup, {
       office: props.office,
-      corp: props.corp,
+      corp: corp,
       popupId: popupId,
     });
   }
 
   return (
     <div className={"cmpy-mgmt-employee-panel"}>
-      <h1 style={{ margin: "4px 0px 5px 0px" }}>Office Space</h1>
+      <Typography>Office Space</Typography>
-      <p>
+      <Typography>
         Size: {props.office.employees.length} / {props.office.size} employees
-      </p>
+      </Typography>
-      <button className={hireEmployeeButtonClass} onClick={openHireEmployeePopup} style={buttonStyle}>
+      <Tooltip
-        Hire Employee
+        title={
-        {props.office.employees.length === 0 && (
+          props.office.employees.length === 0 ? (
-          <span className={"tooltiptext"}>
+            <Typography>
-            You'll need to hire some employees to get your operations started! It's recommended to have at least one
+              You'll need to hire some employees to get your operations started! It's recommended to have at least one
-            employee in every position
+              employee in every position
-          </span>
+            </Typography>
-        )}
+          ) : (
-      </button>
+            ""
-      <button className={autohireEmployeeButtonClass} onClick={autohireEmployeeButtonOnClick} style={buttonStyle}>
+          )
-        Autohire Employee
+        }
-        <span className={"tooltiptext"}>Automatically hires an employee and gives him/her a random name</span>
-      </button>
-      <br />
-      <button
-        className={"std-button tooltip"}
-        onClick={openUpgradeOfficeSizePopup}
-        style={buttonStyle}
-        disabled={props.corp.funds.lt(0)}
       >
-        Upgrade size
+        <span>
-        <span className={"tooltiptext"}>Upgrade the office's size so that it can hold more employees!</span>
+          <Button disabled={props.office.atCapacity()} onClick={openHireEmployeePopup}>
-      </button>
+            Hire Employee
-      {!props.division.hasResearch("AutoPartyManager") && (
+          </Button>
-        <button
+        </span>
-          className={"std-button tooltip"}
+      </Tooltip>
-          onClick={openThrowPartyPopup}
+      <Tooltip title={<Typography>Automatically hires an employee and gives him/her a random name</Typography>}>
-          style={buttonStyle}
+        <span>
-          disabled={props.corp.funds.lt(0)}
+          <Button disabled={props.office.atCapacity()} onClick={autohireEmployeeButtonOnClick}>
+            Autohire Employee
+          </Button>
+        </span>
+      </Tooltip>
+      <br />
+      <Tooltip title={<Typography>Upgrade the office's size so that it can hold more employees!</Typography>}>
+        <span>
+          <Button disabled={corp.funds.lt(0)} onClick={openUpgradeOfficeSizePopup}>
+            Upgrade size
+          </Button>
+        </span>
+      </Tooltip>
+
+      {!division.hasResearch("AutoPartyManager") && (
+        <Tooltip
+          title={<Typography>Throw an office party to increase your employee's morale and happiness</Typography>}
         >
-          Throw Party
+          <span>
-          <span className={"tooltiptext"}>
+            <Button disabled={corp.funds.lt(0)} onClick={openThrowPartyPopup}>
-            "Throw an office party to increase your employee's morale and happiness"
+              Throw Party
+            </Button>
           </span>
-        </button>
+        </Tooltip>
       )}
+
       <br />
 
-      <div>
+      <SwitchButton manualMode={employeeManualAssignMode} switchMode={setEmployeeManualAssignMode} />
-        <SwitchButton manualMode={employeeManualAssignMode} switchMode={setEmployeeManualAssignMode} />
-      </div>
       {employeeManualAssignMode ? (
-        <ManualManagement
+        <ManualManagement rerender={props.rerender} office={props.office} />
-          rerender={props.rerender}
-          corp={props.corp}
-          division={props.division}
-          office={props.office}
-          player={props.player}
-        />
       ) : (
-        <AutoManagement
+        <AutoManagement rerender={props.rerender} office={props.office} />
-          rerender={props.rerender}
-          corp={props.corp}
-          division={props.division}
-          office={props.office}
-          player={props.player}
-        />
       )}
     </div>
   );