From 772a5c6bee6b02df7296941c678c9e01bdbb080b Mon Sep 17 00:00:00 2001
From: dragoni7 <sdgibson18@outlook.com>
Date: Sun, 22 Sep 2024 11:54:29 -0700
Subject: [PATCH] Tweak subclass modification screen
---
src/components/BoldTitle.tsx | 8 +++++
.../components/ModCustomization.tsx | 10 ++----
.../components/AbilitiesModification.tsx | 32 +++++++++++++------
.../SubclassCustomizationWrapper.css | 10 ------
.../SubclassCustomizationWrapper.tsx | 15 +++++++--
5 files changed, 46 insertions(+), 29 deletions(-)
create mode 100644 src/components/BoldTitle.tsx
delete mode 100644 src/features/subclass/components/SubclassCustomizationWrapper.css
diff --git a/src/components/BoldTitle.tsx b/src/components/BoldTitle.tsx
new file mode 100644
index 0000000..da98f0c
--- /dev/null
+++ b/src/components/BoldTitle.tsx
@@ -0,0 +1,8 @@
+import { styled, Typography } from '@mui/material';
+
+export const BoldTitle = styled(Typography)(({ theme }) => ({
+ paddingBottom: theme.spacing(1),
+ marginBottom: theme.spacing(1),
+ fontSize: '30px',
+ fontWeight: 'bold',
+}));
diff --git a/src/features/armor-mods/components/ModCustomization.tsx b/src/features/armor-mods/components/ModCustomization.tsx
index 649bca8..d2fcd9a 100644
--- a/src/features/armor-mods/components/ModCustomization.tsx
+++ b/src/features/armor-mods/components/ModCustomization.tsx
@@ -6,13 +6,7 @@ import useStatMods from '../../../hooks/use-stat-mods';
import RequiredMod from './RequiredMod';
import { useSelector } from 'react-redux';
import { ManifestArmorMod, ManifestArmorStatMod } from '../../../types/manifest-types';
-
-const StyledTitle = styled(Typography)(({ theme }) => ({
- paddingBottom: theme.spacing(1),
- marginBottom: theme.spacing(2),
- fontSize: '28px',
- fontWeight: 'bold',
-}));
+import { BoldTitle } from '@/components/BoldTitle';
const StyledSubTitle = styled(Typography)(({ theme }) => ({
opacity: 0.7,
@@ -33,7 +27,7 @@ const ModCustomization: React.FC = () => {
return (
<Grid container>
<Grid item md={12} marginBottom={5} marginX={{ md: 5, lg: 8 }}>
- <StyledTitle>MOD CUSTOMIZATION</StyledTitle>
+ <BoldTitle>MOD CUSTOMIZATION</BoldTitle>
</Grid>
{requiredMods.length !== 0 ? (
<>
diff --git a/src/features/subclass/components/AbilitiesModification.tsx b/src/features/subclass/components/AbilitiesModification.tsx
index 121a6ed..2f29764 100644
--- a/src/features/subclass/components/AbilitiesModification.tsx
+++ b/src/features/subclass/components/AbilitiesModification.tsx
@@ -1,6 +1,6 @@
import React, { useCallback, useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
-import { Paper, Button, Typography, styled, CircularProgress } from '@mui/material';
+import { Paper, Button, Typography, styled, CircularProgress, Stack } from '@mui/material';
import { Box, Container } from '@mui/system';
import { PLUG_CATEGORY_HASH } from '../../../lib/bungie_api/subclass-constants';
import { RootState } from '../../../store';
@@ -10,6 +10,7 @@ import { ManifestPlug, ManifestAspect, ManifestStatPlug } from '../../../types/m
import { DamageType, SubclassConfig } from '../../../types/d2l-types';
import { EMPTY_ASPECT, EMPTY_FRAGMENT } from '../../../lib/bungie_api/constants';
import HoverCard from '../../../components/HoverCard';
+import { BoldTitle } from '@/components/BoldTitle';
interface AbilitiesModificationProps {
subclass: SubclassConfig;
@@ -98,12 +99,11 @@ const SuperModSlot = styled('div')(({ theme }) => ({
},
}));
-const StyledTitle = styled(Typography)(({ theme }) => ({
+const SectionSubtitle = styled(Typography)(({ theme }) => ({
opacity: 0.7,
borderBottom: '2px solid rgba(255, 255, 255, 0.5)',
paddingBottom: theme.spacing(1),
marginBottom: theme.spacing(2),
- width: '40%',
}));
const fetchMods = async (subclass: SubclassConfig) => {
@@ -431,16 +431,26 @@ const AbilitiesModification: React.FC<AbilitiesModificationProps> = ({ subclass
return (
<Container maxWidth="md">
- <Box marginBottom={4}>
- <StyledTitle variant="h4">{subclass.subclass.name}</StyledTitle>
- </Box>
+ <Stack
+ direction="row"
+ marginBottom={4}
+ textAlign="start"
+ alignItems="center"
+ justifyContent="flex-start"
+ columnGap={1}
+ >
+ <img src={subclass.subclass.icon} width="8%" height="auto" />
+ <BoldTitle variant="h4">{subclass.subclass.name.toLocaleUpperCase()}</BoldTitle>
+ </Stack>
<Box display="flex" flexDirection="row" gap={10}>
<Box flex={1} display="flex" justifyContent="center" alignItems="flex-start" marginTop={15}>
{renderModCategory('SUPERS', loadout.super)}
</Box>
<Box flex={3}>
<Box marginBottom={2}>
- <StyledTitle variant="h6">ABILITIES</StyledTitle>
+ <SectionSubtitle variant="h6" width="71%">
+ ABILITIES
+ </SectionSubtitle>
<Box display="flex" flexWrap="wrap" gap={2}>
{renderModCategory('CLASS_ABILITIES', loadout.classAbility)}
{renderModCategory('MOVEMENT_ABILITIES', loadout.movementAbility)}
@@ -449,7 +459,9 @@ const AbilitiesModification: React.FC<AbilitiesModificationProps> = ({ subclass
</Box>
</Box>
<Box marginBottom={2}>
- <StyledTitle variant="h6">ASPECTS</StyledTitle>
+ <SectionSubtitle variant="h6" width="34%">
+ ASPECTS
+ </SectionSubtitle>
<Box display="flex" flexWrap="wrap" gap={2}>
{loadout.aspects.map((aspect, index) => (
<React.Fragment key={index}>
@@ -459,7 +471,9 @@ const AbilitiesModification: React.FC<AbilitiesModificationProps> = ({ subclass
</Box>
</Box>
<Box marginBottom={2}>
- <StyledTitle variant="h6">FRAGMENTS</StyledTitle>
+ <SectionSubtitle variant="h6" width="89%">
+ FRAGMENTS
+ </SectionSubtitle>
<Box display="flex" flexWrap="wrap" gap={2}>
{Array.from({ length: 5 }).map((_, index) => (
<React.Fragment key={index}>
diff --git a/src/features/subclass/components/SubclassCustomizationWrapper.css b/src/features/subclass/components/SubclassCustomizationWrapper.css
deleted file mode 100644
index 4797676..0000000
--- a/src/features/subclass/components/SubclassCustomizationWrapper.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.subclass-customization-wrapper {
- position: fixed;
- top: 0;
- left: 0;
- width: 100vw;
- height: 100vh;
- background-size: cover;
- background-position: center;
- overflow: auto;
- }
\ No newline at end of file
diff --git a/src/features/subclass/components/SubclassCustomizationWrapper.tsx b/src/features/subclass/components/SubclassCustomizationWrapper.tsx
index 09c4a0b..b1db726 100644
--- a/src/features/subclass/components/SubclassCustomizationWrapper.tsx
+++ b/src/features/subclass/components/SubclassCustomizationWrapper.tsx
@@ -1,6 +1,5 @@
import React from 'react';
import AbilitiesModification from './AbilitiesModification';
-import './SubclassCustomizationWrapper.css';
import { Box } from '@mui/material';
import { SubclassConfig } from '../../../types/d2l-types';
import { BackButton } from '../../../components/BackButton';
@@ -18,7 +17,19 @@ const SubclassCustomizationWrapper: React.FC<SubclassCustomizationWrapperProps>
screenshot,
}) => {
return (
- <Box className="subclass-customization-wrapper" sx={{ backgroundImage: `url(${screenshot})` }}>
+ <Box
+ sx={{
+ backgroundImage: `url(${screenshot})`,
+ position: 'fixed',
+ top: 0,
+ left: 0,
+ width: '100vw',
+ height: '100vh',
+ backgroundSize: 'cover',
+ backgroundPosition: 'center',
+ overflow: 'auto',
+ }}
+ >
<Box position="absolute" top={16} left={16} zIndex={1000}>
<BackButton onClick={onBackClick} startIcon={<span style={{ fontSize: '1.2em' }}>←</span>}>
Back