From a7d980c2dd09d84c1a02269465d00a023e06a742 Mon Sep 17 00:00:00 2001
From: nickofolas <nickofolas@gmail.com>
Date: Fri, 22 Apr 2022 19:48:40 -0500
Subject: [PATCH] Polish sleeve aug modal and faction aug page

---
 src/Faction/ui/AugmentationsPage.tsx          | 69 +++++++++++--------
 .../Sleeve/ui/SleeveAugmentationsModal.tsx    | 35 +++++-----
 2 files changed, 60 insertions(+), 44 deletions(-)

diff --git a/src/Faction/ui/AugmentationsPage.tsx b/src/Faction/ui/AugmentationsPage.tsx
index e45011c86..a8b0dda3e 100644
--- a/src/Faction/ui/AugmentationsPage.tsx
+++ b/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 (
     <>
-      <Button onClick={props.routeToMainPage}>Back</Button>
-      <Typography variant="h4">Faction Augmentations</Typography>
-      <Typography>
-        These are all of the Augmentations that are available to purchase from {props.faction.name}. 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">
-        <Tooltip
-          title={
+      <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 <b>{props.faction.name}</b>.
+            Augmentations are powerful upgrades that will enhance your abilities.
+            <br />
+          </Typography>
+          <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 them.
+                </Typography>
+              }
+            >
+              {multiplierComponent}
+            </Tooltip>
             <Typography>
-              The price of every Augmentation increases for every queued Augmentation and it is reset when you install
-              them.
+              <b>Reputation:</b> <Reputation reputation={props.faction.playerReputation} />
             </Typography>
-          }
-        >
-          {multiplierComponent}
-        </Tooltip>
-      </Box>
-      <Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Cost)}>Sort by Cost</Button>
-      <Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Reputation)}>Sort by Reputation</Button>
-      <Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Default)}>Sort by Default Order</Button>
-      <Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Purchasable)}>
-        Sort by Purchasable
-      </Button>
-      <br />
+            <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.Default)}>
+              Sort by Default Order
+            </Button>
+            <Button onClick={() => switchSortOrder(PurchaseAugmentationsOrderSetting.Purchasable)}>
+              Sort by Purchasable
+            </Button>
+          </Box>
+        </Paper>
+      </Container>
 
       <PurchaseableAugmentations
         augNames={purchasable}
diff --git a/src/PersonObjects/Sleeve/ui/SleeveAugmentationsModal.tsx b/src/PersonObjects/Sleeve/ui/SleeveAugmentationsModal.tsx
index 52f441c29..244c2e347 100644
--- a/src/PersonObjects/Sleeve/ui/SleeveAugmentationsModal.tsx
+++ b/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,22 +42,25 @@ 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>
-        <PurchaseableAugmentations
-          augNames={availableAugs.map((aug) => aug.name)}
-          ownedAugNames={ownedAugNames}
-          player={player}
-          canPurchase={(player, aug) => {
-            return player.money > aug.startingCost;
-          }}
-          purchaseAugmentation={(player, aug, _showModal) => {
-            props.sleeve.tryBuyAugmentation(player, aug);
-            rerender();
-          }}
-          skipPreReqs
-          skipExclusiveIndicator
-        />
       </Container>
+      <PurchaseableAugmentations
+        augNames={availableAugs.map((aug) => aug.name)}
+        ownedAugNames={ownedAugNames}
+        player={player}
+        canPurchase={(player, aug) => {
+          return player.money > aug.startingCost;
+        }}
+        purchaseAugmentation={(player, aug, _showModal) => {
+          props.sleeve.tryBuyAugmentation(player, aug);
+          rerender();
+        }}
+        skipPreReqs
+        skipExclusiveIndicator
+      />
     </Modal>
   );
 }