Polish sleeve aug modal and faction aug page

src/Faction/ui/AugmentationsPage.tsx

@@ -1,7 +1,7 @@
 /**
  * Root React Component for displaying a faction's "Purchase Augmentations" page
  */
-import { Box, Button, Tooltip, Typography } from "@mui/material";
+import { Box, Button, Tooltip, Typography, Paper, Container } from "@mui/material";
 import React, { useState } from "react";
 import { getGenericAugmentationPriceMultiplier } from "../../Augmentation/AugmentationHelpers";
 import { Augmentations } from "../../Augmentation/Augmentations";
@@ -133,7 +133,7 @@ export function AugmentationsPage(props: IProps): React.ReactElement {
   const multiplierComponent =
     props.faction.name !== FactionNames.ShadowsOfAnarchy ? (
       <Typography>
-        Price multiplier: x {numeralWrapper.formatMultiplier(getGenericAugmentationPriceMultiplier())}
+        <b>Price multiplier:</b> x {numeralWrapper.formatMultiplier(getGenericAugmentationPriceMultiplier())}
       </Typography>
     ) : (
       <></>
@@ -141,34 +141,47 @@ export function AugmentationsPage(props: IProps): React.ReactElement {
 
   return (
     <>
+      <Container disableGutters maxWidth="md" sx={{ mx: 0 }}>
         <Button onClick={props.routeToMainPage}>Back</Button>
         <Typography variant="h4">Faction Augmentations</Typography>
+        <Paper sx={{ p: 1, mb: 1 }}>
           <Typography>
-        These are all of the Augmentations that are available to purchase from {props.faction.name}. Augmentations are
+            These are all of the Augmentations that are available to purchase from <b>{props.faction.name}</b>.
-        powerful upgrades that will enhance your abilities.
+            Augmentations are powerful upgrades that will enhance your abilities.
             <br />
-        Reputation: <Reputation reputation={props.faction.playerReputation} /> Favor:{" "}
-        <Favor favor={Math.floor(props.faction.favor)} />
           </Typography>
-      <Box display="flex">
+          <Box sx={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", justifyItems: "center", my: 1 }}>
             <Tooltip
               title={
                 <Typography>
-              The price of every Augmentation increases for every queued Augmentation and it is reset when you install
+                  The price of every Augmentation increases for every queued Augmentation and it is reset when you
-              them.
+                  install them.
                 </Typography>
               }
             >
               {multiplierComponent}
             </Tooltip>
+            <Typography>
+              <b>Reputation:</b> <Reputation reputation={props.faction.playerReputation} />
+            </Typography>
+            <Typography>
+              <b>Favor:</b> <Favor favor={Math.floor(props.faction.favor)} />
+            </Typography>
           </Box>
+          <Box sx={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)" }}>
             <Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Cost)}>Sort by Cost</Button>
-      <Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Reputation)}>Sort by Reputation</Button>
+            <Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Reputation)}>
-      <Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Default)}>Sort by Default Order</Button>
+              Sort by Reputation
+            </Button>
+            <Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Default)}>
+              Sort by Default Order
+            </Button>
             <Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Purchasable)}>
               Sort by Purchasable
             </Button>
-      <br />
+          </Box>
+        </Paper>
+      </Container>
 
       <PurchaseableAugmentations
         augNames={purchasable}

src/PersonObjects/Sleeve/ui/SleeveAugmentationsModal.tsx

@@ -1,4 +1,4 @@
-import { Container, Typography } from "@mui/material";
+import { Container, Typography, Paper } from "@mui/material";
 import React, { useEffect, useState } from "react";
 import { PurchaseableAugmentations } from "../../../Augmentation/ui/PurchaseableAugmentations";
 import { use } from "../../../ui/Context";
@@ -34,7 +34,7 @@ export function SleeveAugmentationsModal(props: IProps): React.ReactElement {
 
   return (
     <Modal open={props.open} onClose={props.onClose}>
-      <Container disableGutters maxWidth="md" sx={{ mx: 0 }}>
+      <Container component={Paper} disableGutters maxWidth="md" sx={{ mx: 0, mb: 1, p: 1 }}>
         <Typography>
           You can purchase Augmentations for your Duplicate Sleeves. These Augmentations have the same effect as they
           would for you. You can only purchase Augmentations that you have unlocked through Factions.
@@ -42,7 +42,11 @@ export function SleeveAugmentationsModal(props: IProps): React.ReactElement {
           <br />
           When purchasing an Augmentation for a Duplicate Sleeve, they are immediately installed. This means that the
           Duplicate Sleeve will immediately lose all of its stat experience.
+          <br />
+          <br />
+          Augmentations will appear below as they become available.
         </Typography>
+      </Container>
       <PurchaseableAugmentations
         augNames={availableAugs.map((aug) => aug.name)}
         ownedAugNames={ownedAugNames}
@@ -57,7 +61,6 @@ export function SleeveAugmentationsModal(props: IProps): React.ReactElement {
         skipPreReqs
         skipExclusiveIndicator
       />
-      </Container>
     </Modal>
   );
 }