Tweak subclass modification screen

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',
+}));

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 ? (
         <>

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}>

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