Use lg Container width

This commit is contained in:
nickofolas 2022-04-24 22:06:40 -05:00
parent fb654dd5a1
commit e11a8fddd8
3 changed files with 23 additions and 18 deletions

@ -131,7 +131,7 @@ interface IPurchasableAugsProps {
export const PurchasableAugmentations = (props: IPurchasableAugsProps): React.ReactElement => { export const PurchasableAugmentations = (props: IPurchasableAugsProps): React.ReactElement => {
return ( return (
<Container <Container
maxWidth="md" maxWidth="lg"
disableGutters disableGutters
sx={{ mx: 0, display: "grid", gridTemplateColumns: "repeat(1, 1fr)", gap: 1 }} sx={{ mx: 0, display: "grid", gridTemplateColumns: "repeat(1, 1fr)", gap: 1 }}
> >
@ -175,7 +175,7 @@ export function PurchasableAugmentation(props: IPurchasableAugProps): React.Reac
sx={{ sx={{
p: 1, p: 1,
display: "grid", display: "grid",
gridTemplateColumns: "minmax(0, 3fr) 1fr", gridTemplateColumns: "minmax(0, 4fr) 1fr",
gap: 1, gap: 1,
opacity: props.owned ? 0.75 : 1, opacity: props.owned ? 0.75 : 1,
}} }}
@ -229,25 +229,30 @@ export function PurchasableAugmentation(props: IPurchasableAugProps): React.Reac
</Box> </Box>
{props.owned || ( {props.owned || (
<Box sx={{ display: "flex", alignItems: "center" }}> <Box sx={{ display: "grid", alignItems: "center", justifyItems: "left" }}>
<span> <Requirement
fulfilled={aug.baseCost === 0 || props.parent.player.money > cost}
value={numeralWrapper.formatMoney(cost)}
color={Settings.theme.money}
/>
{props.parent.rep !== undefined && (
<Requirement <Requirement
fulfilled={aug.baseCost === 0 || props.parent.player.money > cost} fulfilled={props.parent.rep >= aug.baseRepRequirement}
value={numeralWrapper.formatMoney(cost)} value={`${numeralWrapper.formatReputation(aug.baseRepRequirement)} rep`}
color={Settings.theme.money} color={Settings.theme.rep}
/> />
{props.parent.rep !== undefined && ( )}
<Requirement
fulfilled={props.parent.rep >= aug.baseRepRequirement}
value={`${numeralWrapper.formatReputation(aug.baseRepRequirement)} rep`}
color={Settings.theme.rep}
/>
)}
</span>
</Box> </Box>
)} )}
</Paper> </Paper>
<PurchaseAugmentationModal open={open} onClose={() => setOpen(false)} faction={props.parent.faction} aug={aug} /> {Settings.SuppressBuyAugmentationConfirmation || (
<PurchaseAugmentationModal
open={open}
onClose={() => setOpen(false)}
faction={props.parent.faction}
aug={aug}
/>
)}
</> </>
); );
} }

@ -141,7 +141,7 @@ export function AugmentationsPage(props: IProps): React.ReactElement {
return ( return (
<> <>
<Container disableGutters maxWidth="md" sx={{ mx: 0 }}> <Container disableGutters maxWidth="lg" sx={{ mx: 0 }}>
<Button onClick={props.routeToMainPage}>Back</Button> <Button onClick={props.routeToMainPage}>Back</Button>
<Typography variant="h4">Faction Augmentations</Typography> <Typography variant="h4">Faction Augmentations</Typography>
<Paper sx={{ p: 1, mb: 1 }}> <Paper sx={{ p: 1, mb: 1 }}>

@ -34,7 +34,7 @@ export function SleeveAugmentationsModal(props: IProps): React.ReactElement {
return ( return (
<Modal open={props.open} onClose={props.onClose}> <Modal open={props.open} onClose={props.onClose}>
<Container component={Paper} disableGutters maxWidth="md" sx={{ mx: 0, mb: 1, p: 1 }}> <Container component={Paper} disableGutters maxWidth="lg" sx={{ mx: 0, mb: 1, p: 1 }}>
<Typography> <Typography>
You can purchase Augmentations for your Duplicate Sleeves. These Augmentations have the same effect as they 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. would for you. You can only purchase Augmentations that you have unlocked through Factions.