Further design updates

src/Augmentation/ui/PurchaseableAugmentations.tsx

@@ -16,7 +16,7 @@ import { numeralWrapper } from "../../ui/numeralFormat";
 import { Money } from "../../ui/React/Money";
 import { Reputation } from "../../ui/React/Reputation";
 
-import { CheckBox, CheckBoxOutlineBlank } from "@mui/icons-material";
+import { CheckBox, CheckBoxOutlineBlank, Verified, Info } from "@mui/icons-material";
 import { Augmentation as AugFormat } from "../../ui/React/Augmentation";
 import { Paper, Button, Typography, Tooltip, Box, TableRow, Container, List, ListItem } from "@mui/material";
 import { TableCell } from "../../ui/React/Table";
@@ -93,23 +93,16 @@ export const PurchaseableAugmentations = (props: IPurchaseableAugsProps): React.
     <Container
       maxWidth="lg"
       disableGutters
-      sx={{ mx: 0, display: "grid", gridTemplateColumns: "repeat(1, 1fr)", gap: 1 }}
+      sx={{ mx: 0, display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 1 }}
     >
       {props.augNames.map((augName: string) => {
         const aug = Augmentations[augName];
 
         const info = typeof aug.info === "string" ? <span>{aug.info}</span> : aug.info;
-        const description = (
-          <>
-            {info}
-            <br />
-            <br />
-            {aug.stats}
-          </>
-        );
+        const description = aug.stats;
 
         return (
-          <Paper key={augName} sx={{ p: 1, display: "grid", gridTemplateColumns: "1fr 3fr", gap: 1 }}>
+          <Paper key={augName} sx={{ p: 1, display: "grid", gridTemplateColumns: "1fr 2fr", gap: 1 }}>
             <Box>
               <Button
                 onClick={() =>
@@ -122,6 +115,14 @@ export const PurchaseableAugmentations = (props: IPurchaseableAugsProps): React.
               >
                 Buy Augmentation
               </Button>
+
+              {aug.factions.length === 1 && (
+                <Typography sx={{ display: "flex", alignItems: "center", color: Settings.theme.info }}>
+                  <Verified sx={{ mr: 1 }} />
+                  Faction-Exclusive Augmentation
+                </Typography>
+              )}
+
               <Typography>
                 <b>Cost:</b>
               </Typography>
@@ -137,6 +138,7 @@ export const PurchaseableAugmentations = (props: IPurchaseableAugsProps): React.
                   valueColor={Settings.theme.rep}
                 />
               )}
+
               {aug.prereqs.length > 0 && (
                 <>
                   <Typography>
@@ -153,8 +155,14 @@ export const PurchaseableAugmentations = (props: IPurchaseableAugsProps): React.
                 </>
               )}
             </Box>
+
             <Box>
-              <Typography variant="h6">{aug.name}</Typography>
+              <Typography variant="h6" sx={{ display: "flex", alignItems: "center" }}>
+                <Tooltip title={<Typography>{info}</Typography>}>
+                  <Info sx={{ mr: 1 }} color="info" />
+                </Tooltip>
+                {aug.name}
+              </Typography>
               <Typography>{description}</Typography>
             </Box>
           </Paper>

src/PersonObjects/Sleeve/ui/SleeveAugmentationsModal.tsx

@@ -3,13 +3,11 @@ import { Sleeve } from "../Sleeve";
 import { findSleevePurchasableAugs } from "../SleeveHelpers";
 import { Augmentations } from "../../../Augmentation/Augmentations";
 import { Augmentation } from "../../../Augmentation/Augmentation";
+import { PurchaseableAugmentations } from "../../../Augmentation/ui/PurchaseableAugmentations";
 import { Money } from "../../../ui/React/Money";
 import { Modal } from "../../../ui/React/Modal";
 import { use } from "../../../ui/Context";
-import Typography from "@mui/material/Typography";
-import Tooltip from "@mui/material/Tooltip";
-import Paper from "@mui/material/Paper";
-import Box from "@mui/material/Box";
+import { Typography, Tooltip, Paper, Box, Container } from "@mui/material";
 import Button from "@mui/material/Button";
 import TableBody from "@mui/material/TableBody";
 import Table from "@mui/material/Table";
@@ -49,8 +47,7 @@ export function SleeveAugmentationsModal(props: IProps): React.ReactElement {
 
   return (
     <Modal open={props.open} onClose={props.onClose}>
-      <>
-        <Box sx={{ mx: 1 }}>
+      <Container disableGutters maxWidth="lg" sx={{ mx: 0 }}>
         <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.
@@ -59,7 +56,18 @@ export function SleeveAugmentationsModal(props: IProps): React.ReactElement {
           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.
         </Typography>
-          <Box component={Paper} sx={{ my: 1, p: 1 }}>
+        <PurchaseableAugmentations
+          augNames={availableAugs.map((aug) => aug.name)}
+          player={player}
+          canPurchase={(player, aug) => {
+            return player.money > aug.startingCost;
+          }}
+          purchaseAugmentation={(player, aug, _showModal) => {
+            props.sleeve.tryBuyAugmentation(player, aug);
+            rerender();
+          }}
+        />
+        {/* <Box component={Paper} sx={{ my: 1, p: 1 }}>
             <Table size="small" padding="none">
               <TableBody>
                 {availableAugs.map((aug) => {
@@ -85,8 +93,7 @@ export function SleeveAugmentationsModal(props: IProps): React.ReactElement {
                 })}
               </TableBody>
             </Table>
-          </Box>
-        </Box>
+          </Box> */}
 
         {ownedAugNames.length > 0 && (
           <>
@@ -115,7 +122,7 @@ export function SleeveAugmentationsModal(props: IProps): React.ReactElement {
             </Box>
           </>
         )}
-      </>
+      </Container>
     </Modal>
   );
 }