Merge pull request #2645 from nickofolas/improvement/alignments

Align various buttons with display: grid

src/Hacknet/ui/HacknetRoot.tsx

@@ -27,6 +27,7 @@ import { GetServer } from "../../Server/AllServers";
 import Typography from "@mui/material/Typography";
 import Grid from "@mui/material/Grid";
 import Button from "@mui/material/Button";
+import { Box } from "@mui/material";
 
 interface IProps {
   player: IPlayer;
@@ -136,7 +137,7 @@ export function HacknetRoot(props: IProps): React.ReactElement {
 
       {hasHacknetServers(props.player) && <Button onClick={() => setOpen(true)}>Spend Hashes on Upgrades</Button>}
 
-      <Grid container>{nodes}</Grid>
+      <Box sx={{ display: 'grid', width: 'fit-content', gridTemplateColumns: 'repeat(3, 1fr)' }}>{nodes}</Box>
       <HashUpgradeModal open={open} onClose={() => setOpen(false)} />
     </>
   );

src/Locations/ui/CasinoLocation.tsx

@@ -10,6 +10,7 @@ import { CoinFlip } from "../../Casino/CoinFlip";
 import { Roulette } from "../../Casino/Roulette";
 import { SlotMachine } from "../../Casino/SlotMachine";
 import { IPlayer } from "../../PersonObjects/IPlayer";
+import { Box } from "@mui/material";
 
 enum GameType {
   None = "none",
@@ -33,15 +34,12 @@ export function CasinoLocation(props: IProps): React.ReactElement {
   return (
     <>
       {game === GameType.None && (
-        <>
+        <Box sx={{ display: 'grid', width: 'fit-content' }}>
           <Button onClick={() => updateGame(GameType.Coin)}>Play coin flip</Button>
-          <br />
           <Button onClick={() => updateGame(GameType.Slots)}>Play slots</Button>
-          <br />
           <Button onClick={() => updateGame(GameType.Roulette)}>Play roulette</Button>
-          <br />
           <Button onClick={() => updateGame(GameType.Blackjack)}>Play blackjack</Button>
-        </>
+        </Box>
       )}
       {game !== GameType.None && (
         <>

src/Locations/ui/CompanyLocation.tsx

@@ -226,108 +226,114 @@ export function CompanyLocation(props: IProps): React.ReactElement {
           </Box>
           <Typography>-------------------------</Typography>
           <br />
-          <Button onClick={work}>Work</Button>
-          &nbsp;&nbsp;&nbsp;&nbsp;
-          <Button onClick={() => setQuitOpen(true)}>Quit</Button>
-          <QuitJobModal
-            locName={props.locName}
-            company={company}
-            onQuit={rerender}
-            open={quitOpen}
-            onClose={() => setQuitOpen(false)}
-          />
         </>
       )}
-      <br />
-      {company.hasAgentPositions() && (
-        <ApplyToJobButton
-          company={company}
-          entryPosType={CompanyPositions[posNames.AgentCompanyPositions[0]]}
-          onClick={applyForAgentJob}
-          text={"Apply for Agent Job"}
-        />
-      )}
-      {company.hasBusinessConsultantPositions() && (
-        <ApplyToJobButton
-          company={company}
-          entryPosType={CompanyPositions[posNames.BusinessConsultantCompanyPositions[0]]}
-          onClick={applyForBusinessConsultantJob}
-          text={"Apply for Business Consultant Job"}
-        />
-      )}
-      {company.hasBusinessPositions() && (
-        <ApplyToJobButton
-          company={company}
-          entryPosType={CompanyPositions[posNames.BusinessCompanyPositions[0]]}
-          onClick={applyForBusinessJob}
-          text={"Apply for Business Job"}
-        />
-      )}
-      {company.hasEmployeePositions() && (
-        <ApplyToJobButton
-          company={company}
-          entryPosType={CompanyPositions[posNames.MiscCompanyPositions[1]]}
-          onClick={applyForEmployeeJob}
-          text={"Apply to be an Employee"}
-        />
-      )}
-      {company.hasEmployeePositions() && (
-        <ApplyToJobButton
-          company={company}
-          entryPosType={CompanyPositions[posNames.PartTimeCompanyPositions[1]]}
-          onClick={applyForPartTimeEmployeeJob}
-          text={"Apply to be a part-time Employee"}
-        />
-      )}
-      {company.hasITPositions() && (
-        <ApplyToJobButton
-          company={company}
-          entryPosType={CompanyPositions[posNames.ITCompanyPositions[0]]}
-          onClick={applyForItJob}
-          text={"Apply for IT Job"}
-        />
-      )}
-      {company.hasSecurityPositions() && (
-        <ApplyToJobButton
-          company={company}
-          entryPosType={CompanyPositions[posNames.SecurityCompanyPositions[2]]}
-          onClick={applyForSecurityJob}
-          text={"Apply for Security Job"}
-        />
-      )}
-      {company.hasSoftwareConsultantPositions() && (
-        <ApplyToJobButton
-          company={company}
-          entryPosType={CompanyPositions[posNames.SoftwareConsultantCompanyPositions[0]]}
-          onClick={applyForSoftwareConsultantJob}
-          text={"Apply for Software Consultant Job"}
-        />
-      )}
-      {company.hasSoftwarePositions() && (
-        <ApplyToJobButton
-          company={company}
-          entryPosType={CompanyPositions[posNames.SoftwareCompanyPositions[0]]}
-          onClick={applyForSoftwareJob}
-          text={"Apply for Software Job"}
-        />
-      )}
-      {company.hasWaiterPositions() && (
-        <ApplyToJobButton
-          company={company}
-          entryPosType={CompanyPositions[posNames.MiscCompanyPositions[0]]}
-          onClick={applyForWaiterJob}
-          text={"Apply to be a Waiter"}
-        />
-      )}
-      {company.hasWaiterPositions() && (
-        <ApplyToJobButton
-          company={company}
-          entryPosType={CompanyPositions[posNames.PartTimeCompanyPositions[0]]}
-          onClick={applyForPartTimeWaiterJob}
-          text={"Apply to be a part-time Waiter"}
-        />
-      )}
-      {location.infiltrationData != null && <Button onClick={startInfiltration}>Infiltrate Company</Button>}
+      <Box sx={{ display: 'grid', width: 'fit-content' }}>
+        {isEmployedHere && (
+          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
+            <Button onClick={work}>Work</Button>
+            <Button onClick={() => setQuitOpen(true)}>Quit</Button>
+            <QuitJobModal
+              locName={props.locName}
+              company={company}
+              onQuit={rerender}
+              open={quitOpen}
+              onClose={() => setQuitOpen(false)}
+            />
+          </Box>
+        )
+
+        }
+        {company.hasAgentPositions() && (
+          <ApplyToJobButton
+            company={company}
+            entryPosType={CompanyPositions[posNames.AgentCompanyPositions[0]]}
+            onClick={applyForAgentJob}
+            text={"Apply for Agent Job"}
+          />
+        )}
+        {company.hasBusinessConsultantPositions() && (
+          <ApplyToJobButton
+            company={company}
+            entryPosType={CompanyPositions[posNames.BusinessConsultantCompanyPositions[0]]}
+            onClick={applyForBusinessConsultantJob}
+            text={"Apply for Business Consultant Job"}
+          />
+        )}
+        {company.hasBusinessPositions() && (
+          <ApplyToJobButton
+            company={company}
+            entryPosType={CompanyPositions[posNames.BusinessCompanyPositions[0]]}
+            onClick={applyForBusinessJob}
+            text={"Apply for Business Job"}
+          />
+        )}
+        {company.hasEmployeePositions() && (
+          <ApplyToJobButton
+            company={company}
+            entryPosType={CompanyPositions[posNames.MiscCompanyPositions[1]]}
+            onClick={applyForEmployeeJob}
+            text={"Apply to be an Employee"}
+          />
+        )}
+        {company.hasEmployeePositions() && (
+          <ApplyToJobButton
+            company={company}
+            entryPosType={CompanyPositions[posNames.PartTimeCompanyPositions[1]]}
+            onClick={applyForPartTimeEmployeeJob}
+            text={"Apply to be a part-time Employee"}
+          />
+        )}
+        {company.hasITPositions() && (
+          <ApplyToJobButton
+            company={company}
+            entryPosType={CompanyPositions[posNames.ITCompanyPositions[0]]}
+            onClick={applyForItJob}
+            text={"Apply for IT Job"}
+          />
+        )}
+        {company.hasSecurityPositions() && (
+          <ApplyToJobButton
+            company={company}
+            entryPosType={CompanyPositions[posNames.SecurityCompanyPositions[2]]}
+            onClick={applyForSecurityJob}
+            text={"Apply for Security Job"}
+          />
+        )}
+        {company.hasSoftwareConsultantPositions() && (
+          <ApplyToJobButton
+            company={company}
+            entryPosType={CompanyPositions[posNames.SoftwareConsultantCompanyPositions[0]]}
+            onClick={applyForSoftwareConsultantJob}
+            text={"Apply for Software Consultant Job"}
+          />
+        )}
+        {company.hasSoftwarePositions() && (
+          <ApplyToJobButton
+            company={company}
+            entryPosType={CompanyPositions[posNames.SoftwareCompanyPositions[0]]}
+            onClick={applyForSoftwareJob}
+            text={"Apply for Software Job"}
+          />
+        )}
+        {company.hasWaiterPositions() && (
+          <ApplyToJobButton
+            company={company}
+            entryPosType={CompanyPositions[posNames.MiscCompanyPositions[0]]}
+            onClick={applyForWaiterJob}
+            text={"Apply to be a Waiter"}
+          />
+        )}
+        {company.hasWaiterPositions() && (
+          <ApplyToJobButton
+            company={company}
+            entryPosType={CompanyPositions[posNames.PartTimeCompanyPositions[0]]}
+            onClick={applyForPartTimeWaiterJob}
+            text={"Apply to be a part-time Waiter"}
+          />
+        )}
+        {location.infiltrationData != null && <Button onClick={startInfiltration}>Infiltrate Company</Button>}
+      </Box>
     </>
   );
 }

src/Locations/ui/GymLocation.tsx

@@ -16,6 +16,7 @@ import { Server } from "../../Server/Server";
 import { Money } from "../../ui/React/Money";
 import { IRouter } from "../../ui/Router";
 import { serverMetadata } from "../../Server/data/servers";
+import { Box } from "@mui/material";
 
 type IProps = {
   loc: Location;
@@ -56,7 +57,7 @@ export function GymLocation(props: IProps): React.ReactElement {
   const cost = CONSTANTS.ClassGymBaseCost * calculateCost();
 
   return (
-    <>
+    <Box sx={{ display: 'grid', width: 'fit-content' }}>
       <Button onClick={trainStrength}>
         Train Strength (<Money money={cost} player={props.p} /> / sec)
       </Button>
@@ -72,6 +73,6 @@ export function GymLocation(props: IProps): React.ReactElement {
       <Button onClick={trainAgility}>
         Train Agility (<Money money={cost} player={props.p} /> / sec)
       </Button>
-    </>
+    </Box>
   );
 }

src/Locations/ui/SlumsLocation.tsx

@@ -11,6 +11,7 @@ import { Crimes } from "../../Crime/Crimes";
 
 import { numeralWrapper } from "../../ui/numeralFormat";
 import { use } from "../../ui/Context";
+import { Box } from "@mui/material";
 
 export function SlumsLocation(): React.ReactElement {
   const player = use.Player();
@@ -113,73 +114,61 @@ export function SlumsLocation(): React.ReactElement {
   const heistChance = Crimes.Heist.successRate(player);
 
   return (
-    <>
+    <Box sx={{ display: 'grid', width: 'fit-content' }}>
       <Tooltip title={<>Attempt to shoplift from a low-end retailer</>}>
         <Button onClick={shoplift}>
           Shoplift ({numeralWrapper.formatPercentage(shopliftChance)} chance of success)
         </Button>
       </Tooltip>
-      <br />
       <Tooltip title={<>Attempt to commit armed robbery on a high-end store</>}>
         <Button onClick={robStore}>
           Rob store ({numeralWrapper.formatPercentage(robStoreChance)} chance of success)
         </Button>
       </Tooltip>
-      <br />
       <Tooltip title={<>Attempt to mug a random person on the street</>}>
         <Button onClick={mug}>Mug someone ({numeralWrapper.formatPercentage(mugChance)} chance of success)</Button>
       </Tooltip>
-      <br />
       <Tooltip title={<>Attempt to rob property from someone's house</>}>
         <Button onClick={larceny}>Larceny ({numeralWrapper.formatPercentage(larcenyChance)} chance of success)</Button>
       </Tooltip>
-      <br />
       <Tooltip title={<>Attempt to deal drugs</>}>
         <Button onClick={dealDrugs}>
           Deal Drugs ({numeralWrapper.formatPercentage(drugsChance)} chance of success)
         </Button>
       </Tooltip>
-      <br />
       <Tooltip title={<>Attempt to forge corporate bonds</>}>
         <Button onClick={bondForgery}>
           Bond Forgery ({numeralWrapper.formatPercentage(bondChance)} chance of success)
         </Button>
       </Tooltip>
-      <br />
       <Tooltip title={<>Attempt to smuggle illegal arms into the city</>}>
         <Button onClick={traffickArms}>
           Traffick illegal Arms ({numeralWrapper.formatPercentage(armsChance)} chance of success)
         </Button>
       </Tooltip>
-      <br />
       <Tooltip title={<>Attempt to murder a random person on the street</>}>
         <Button onClick={homicide}>
           Homicide ({numeralWrapper.formatPercentage(homicideChance)} chance of success)
         </Button>
       </Tooltip>
-      <br />
       <Tooltip title={<>Attempt to commit grand theft auto</>}>
         <Button onClick={grandTheftAuto}>
           Grand theft Auto ({numeralWrapper.formatPercentage(gtaChance)} chance of success)
         </Button>
       </Tooltip>
-      <br />
       <Tooltip title={<>Attempt to kidnap and ransom a high-profile-target</>}>
         <Button onClick={kidnap}>
           Kidnap and Ransom ({numeralWrapper.formatPercentage(kidnapChance)} chance of success)
         </Button>
       </Tooltip>
-      <br />
       <Tooltip title={<>Attempt to assassinate a high-profile target</>}>
         <Button onClick={assassinate}>
           Assassinate ({numeralWrapper.formatPercentage(assassinateChance)} chance of success)
         </Button>
       </Tooltip>
-      <br />
       <Tooltip title={<>Attempt to pull off the ultimate heist</>}>
         <Button onClick={heist}>Heist ({numeralWrapper.formatPercentage(heistChance)} chance of success)</Button>
       </Tooltip>
-      <br />
-    </>
+    </Box>
   );
 }

src/Locations/ui/SpecialLocation.tsx

@@ -81,7 +81,7 @@ export function SpecialLocation(props: IProps): React.ReactElement {
       return <></>;
     }
     const text = inBladeburner ? "Enter Bladeburner Headquarters" : "Apply to Bladeburner Division";
-    return <Button onClick={handleBladeburner}>{text}</Button>;
+    return <><br/><Button onClick={handleBladeburner}>{text}</Button></>;
   }
 
   function renderNoodleBar(): React.ReactElement {

src/Locations/ui/TechVendorLocation.tsx

@@ -18,6 +18,7 @@ import { Money } from "../../ui/React/Money";
 import { use } from "../../ui/Context";
 import { PurchaseServerModal } from "./PurchaseServerModal";
 import { numeralWrapper } from "../../ui/numeralFormat";
+import { Box } from "@mui/material";
 
 interface IServerProps {
   ram: number;
@@ -70,7 +71,9 @@ export function TechVendorLocation(props: IProps): React.ReactElement {
   return (
     <>
       <br />
-      {purchaseServerButtons}
+      <Box sx={{ display: 'grid', width: 'fit-content' }}>
+        {purchaseServerButtons}
+      </Box>
       <br />
       <Typography>
         <i>"You can order bigger servers via scripts. We don't take custom orders in person."</i>

src/Locations/ui/UniversityLocation.tsx

@@ -15,6 +15,7 @@ import { Server } from "../../Server/Server";
 
 import { Money } from "../../ui/React/Money";
 import { use } from "../../ui/Context";
+import { Box } from "@mui/material";
 
 type IProps = {
   loc: Location;
@@ -72,45 +73,40 @@ export function UniversityLocation(props: IProps): React.ReactElement {
   const earnCharismaExpTooltip = `Gain charisma experience!`;
 
   return (
-    <>
+    <Box sx={{ display: 'grid', width: 'fit-content' }}>
       <Tooltip title={earnHackingExpTooltip}>
         <Button onClick={study}>Study Computer Science (free)</Button>
       </Tooltip>
-      <br />
       <Tooltip title={earnHackingExpTooltip}>
         <Button onClick={dataStructures}>
           Take Data Structures course (
           <Money money={dataStructuresCost} player={player} /> / sec)
         </Button>
       </Tooltip>
-      <br />
       <Tooltip title={earnHackingExpTooltip}>
         <Button onClick={networks}>
           Take Networks course (
           <Money money={networksCost} player={player} /> / sec)
         </Button>
       </Tooltip>
-      <br />
       <Tooltip title={earnHackingExpTooltip}>
         <Button onClick={algorithms}>
           Take Algorithms course (
           <Money money={algorithmsCost} player={player} /> / sec)
         </Button>
       </Tooltip>
-      <br />
       <Tooltip title={earnCharismaExpTooltip}>
         <Button onClick={management}>
           Take Management course (
           <Money money={managementCost} player={player} /> / sec)
         </Button>
       </Tooltip>
-      <br />
       <Tooltip title={earnCharismaExpTooltip}>
         <Button onClick={leadership}>
           Take Leadership course (
           <Money money={leadershipCost} player={player} /> / sec)
         </Button>
       </Tooltip>
-    </>
+    </Box>
   );
 }

src/Programs/ui/ProgramsRoot.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { use } from "../../ui/Context";
 import { getAvailableCreatePrograms } from "../ProgramHelpers";
 
-import { Tooltip, Typography } from "@mui/material";
+import { Box, Tooltip, Typography } from "@mui/material";
 import Button from "@mui/material/Button";
 
 export const ProgramsSeen: string[] = [];
@@ -38,27 +38,28 @@ export function ProgramsRoot(): React.ReactElement {
         time. Your progress will be saved and you can continue later.
       </Typography>
 
-      {programs.map((program) => {
-        const create = program.create;
-        if (create === null) return <></>;
+      <Box sx={{ display: 'grid', width: 'fit-content' }}>
+        {programs.map((program) => {
+          const create = program.create;
+          if (create === null) return <></>;
 
-        return (
-          <React.Fragment key={program.name}>
-            <Tooltip title={create.tooltip}>
-              <Button
-                sx={{ my: 1 }}
-                onClick={(event) => {
-                  if (!event.isTrusted) return;
-                  player.startCreateProgramWork(router, program.name, create.time, create.level);
-                }}
-              >
-                {program.name}
-              </Button>
-            </Tooltip>
-            <br />
-          </React.Fragment>
-        );
-      })}
+          return (
+            <React.Fragment key={program.name}>
+              <Tooltip title={create.tooltip}>
+                <Button
+                  sx={{ my: 1 }}
+                  onClick={(event) => {
+                    if (!event.isTrusted) return;
+                    player.startCreateProgramWork(router, program.name, create.time, create.level);
+                  }}
+                >
+                  {program.name}
+                </Button>
+              </Tooltip>
+            </React.Fragment>
+          );
+        })}
+      </Box>
     </>
   );
 }

src/ui/React/GameOptionsRoot.tsx

@@ -529,19 +529,19 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
             </>
           )}
         </Grid>
-        <Grid item xs={12} sm={6}>
-          <Box>
+        <Box sx={{ display: 'grid', width: 'fit-content', height: 'fit-content' }}>
+          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
             <Button onClick={() => props.save()}>Save Game</Button>
             <Button onClick={() => setDeleteOpen(true)}>Delete Game</Button>
           </Box>
-          <Box>
+          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
             <Tooltip title={<Typography>Export your game to a text file.</Typography>}>
               <Button onClick={() => props.export()}>
                 <DownloadIcon color="primary" />
                 Export Game
               </Button>
             </Tooltip>
-            <Tooltip title={<Typography>Import your game from a text file.<br/>This will <strong>overwrite</strong> your current game. Back it up first!</Typography>}>
+            <Tooltip title={<Typography>Import your game from a text file.<br />This will <strong>overwrite</strong> your current game. Back it up first!</Typography>}>
               <Button onClick={startImport}>
                 <UploadIcon color="primary" />
                 Import Game
@@ -571,7 +571,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
               }
             />
           </Box>
-          <Box>
+          <Box sx={{ display: 'grid' }}>
             <Tooltip
               title={
                 <Typography>
@@ -586,7 +586,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
               <Button onClick={() => props.forceKill()}>Force kill all active scripts</Button>
             </Tooltip>
           </Box>
-          <Box>
+          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
             <Tooltip
               title={
                 <Typography>
@@ -613,7 +613,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
               <Button onClick={() => setDiagnosticOpen(true)}>Diagnose files</Button>
             </Tooltip>
           </Box>
-          <Box>
+          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
             <Button onClick={() => setThemeEditorOpen(true)}>Theme editor</Button>
             <Button onClick={() => setStyleEditorOpen(true)}>Style editor</Button>
           </Box>
@@ -637,7 +637,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
               <Typography>Incremental game plaza</Typography>
             </Link>
           </Box>
-        </Grid>
+        </Box>
       </Grid>
       <FileDiagnosticModal open={diagnosticOpen} onClose={() => setDiagnosticOpen(false)} />
       <ConfirmationModal