small improvements to augmentation page.

src/Augmentation/ui/AugmentationsRoot.tsx

@@ -14,6 +14,7 @@ import { canGetBonus } from "../../ExportBonus";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
+import Box from "@mui/material/Box";
 
 interface IProps {
   exportGameFn: () => void;
@@ -36,9 +37,10 @@ export function AugmentationsRoot(props: IProps): React.ReactElement {
   return (
     <>
       <Typography variant="h4">Augmentations</Typography>
+      <Box mx={2}>
         <Typography>
-        Below is a list of all Augmentations you have purchased but not yet installed. Click the button below to install
+          Below is a list of all Augmentations you have purchased but not yet installed. Click the button below to
-        them.
+          install them.
         </Typography>
         <Typography>WARNING: Installing your Augmentations resets most of your progress, including:</Typography>
         <br />
@@ -51,10 +53,15 @@ export function AugmentationsRoot(props: IProps): React.ReactElement {
         <Typography>- Stocks</Typography>
         <br />
         <Typography>
-        Installing Augmentations lets you start over with the perks and benefits granted by all of the Augmentations you
+          Installing Augmentations lets you start over with the perks and benefits granted by all of the Augmentations
-        have ever installed. Also, you will keep any scripts and RAM/Core upgrades on your home computer (but you will
+          you have ever installed. Also, you will keep any scripts and RAM/Core upgrades on your home computer (but you
-        lose all programs besides NUKE.exe)
+          will lose all programs besides NUKE.exe)
         </Typography>
+      </Box>
+      <Typography variant="h4" color="primary">
+        Purchased Augmentations
+      </Typography>
+      <Box mx={2}>
         <Tooltip title={"'I never asked for this'"}>
           <Button onClick={props.installAugmentationsFn}>
             <Typography>Install Augmentations</Typography>
@@ -66,10 +73,14 @@ export function AugmentationsRoot(props: IProps): React.ReactElement {
           </Button>
         </Tooltip>
         <PurchasedAugmentations />
+      </Box>
       <Typography variant="h4">Installed Augmentations</Typography>
-      <Typography>List of all Augmentations that have been installed. You have gained the effects of these.</Typography>
+      <Box mx={2}>
+        <Typography>
+          List of all Augmentations that have been installed. You have gained the effects of these.
+        </Typography>
         <InstalledAugmentations />
-      <br /> <br />
+      </Box>
       <PlayerMultipliers />
       <SourceFiles />
     </>

src/Augmentation/ui/PlayerMultipliers.tsx

@@ -10,6 +10,7 @@ import { Table, TableCell } from "../../ui/React/Table";
 import TableBody from "@mui/material/TableBody";
 import TableRow from "@mui/material/TableRow";
 import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
 
 function calculateAugmentedStats(): any {
   const augP: any = {};
@@ -97,12 +98,8 @@ export function PlayerMultipliers(): React.ReactElement {
 
   return (
     <>
-      <p>
+      <Typography variant="h4">Multipliers</Typography>
-        <strong>
+      <Box mx={2}>
-          <u>Multipliers:</u>
-        </strong>
-      </p>
-      <br />
         <MultiplierTable
           rows={[
             ["Hacking Chance ", Player.hacking_chance_mult, Player.hacking_chance_mult * mults.hacking_chance_mult],
@@ -210,6 +207,7 @@ export function PlayerMultipliers(): React.ReactElement {
         <br />
 
         <BladeburnerMults />
+      </Box>
     </>
   );
 }

src/Augmentation/ui/SourceFiles.tsx

@@ -4,15 +4,18 @@ import { OwnedSourceFiles } from "./OwnedSourceFiles";
 import List from "@mui/material/List";
 
 import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
 
 export function SourceFiles(): React.ReactElement {
   return (
     <>
       <Typography variant="h4">Source Files</Typography>
+      <Box mx={2}>
         <List dense>
           <SourceFileMinus1 />
           <OwnedSourceFiles />
         </List>
+      </Box>
     </>
   );
 }