Office UI alignment

This commit is contained in:
nickofolas 2022-01-19 18:15:52 -06:00
parent 542f164930
commit a904c362d9

@ -26,6 +26,7 @@ import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody"; import TableBody from "@mui/material/TableBody";
import TableRow from "@mui/material/TableRow"; import TableRow from "@mui/material/TableRow";
import { TableCell } from "../../ui/React/Table"; import { TableCell } from "../../ui/React/Table";
import { Box } from "@mui/material";
interface IProps { interface IProps {
office: OfficeSpace; office: OfficeSpace;
@ -430,51 +431,46 @@ export function IndustryOffice(props: IProps): React.ReactElement {
<Typography> <Typography>
Size: {props.office.employees.length} / {props.office.size} employees Size: {props.office.employees.length} / {props.office.size} employees
</Typography> </Typography>
<Tooltip title={<Typography>Automatically hires an employee and gives him/her a random name</Typography>}> <Box sx={{ display: 'grid', gridTemplateColumns: '1fr', width: 'fit-content' }}>
<span> <Box sx={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
<Button disabled={props.office.atCapacity()} onClick={autohireEmployeeButtonOnClick}> <Tooltip title={<Typography>Automatically hires an employee and gives him/her a random name</Typography>}>
Hire Employee <Button disabled={props.office.atCapacity()} onClick={autohireEmployeeButtonOnClick}>
</Button> Hire Employee
</span> </Button>
</Tooltip>
<br />
<Tooltip title={<Typography>Upgrade the office's size so that it can hold more employees!</Typography>}>
<span>
<Button disabled={corp.funds < 0} onClick={() => setUpgradeOfficeSizeOpen(true)}>
Upgrade size
</Button>
</span>
</Tooltip>
<UpgradeOfficeSizeModal
rerender={props.rerender}
office={props.office}
open={upgradeOfficeSizeOpen}
onClose={() => setUpgradeOfficeSizeOpen(false)}
/>
{!division.hasResearch("AutoPartyManager") && (
<>
<Tooltip
title={<Typography>Throw an office party to increase your employee's morale and happiness</Typography>}
>
<span>
<Button disabled={corp.funds < 0} onClick={() => setThrowPartyOpen(true)}>
Throw Party
</Button>
</span>
</Tooltip> </Tooltip>
<ThrowPartyModal <Tooltip title={<Typography>Upgrade the office's size so that it can hold more employees!</Typography>}>
<Button disabled={corp.funds < 0} onClick={() => setUpgradeOfficeSizeOpen(true)}>
Upgrade size
</Button>
</Tooltip>
<UpgradeOfficeSizeModal
rerender={props.rerender} rerender={props.rerender}
office={props.office} office={props.office}
open={throwPartyOpen} open={upgradeOfficeSizeOpen}
onClose={() => setThrowPartyOpen(false)} onClose={() => setUpgradeOfficeSizeOpen(false)}
/> />
</>
)}
<br /> {!division.hasResearch("AutoPartyManager") && (
<>
<Tooltip
title={<Typography>Throw an office party to increase your employee's morale and happiness</Typography>}
>
<Button disabled={corp.funds < 0} onClick={() => setThrowPartyOpen(true)}>
Throw Party
</Button>
</Tooltip>
<ThrowPartyModal
rerender={props.rerender}
office={props.office}
open={throwPartyOpen}
onClose={() => setThrowPartyOpen(false)}
/>
</>
)}
<SwitchButton manualMode={employeeManualAssignMode} switchMode={setEmployeeManualAssignMode} /> </Box>
<SwitchButton manualMode={employeeManualAssignMode} switchMode={setEmployeeManualAssignMode} />
</Box>
{employeeManualAssignMode ? ( {employeeManualAssignMode ? (
<ManualManagement rerender={props.rerender} office={props.office} /> <ManualManagement rerender={props.rerender} office={props.office} />
) : ( ) : (