Tweak layout of ability modification screen

dragoni7 · Sep 20, 2024 · b8775af · b8775af
1 parent 92daf1c
commit b8775af
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 21 deletions.
diff --git a/src/components/HoverCard.tsx b/src/components/HoverCard.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { styled, Typography, Box } from '@mui/material';
+import { Box } from '@mui/material';
 import { db } from '../store/db';
 import {
   ManifestSubclass,

diff --git a/src/features/subclass/components/AbilitiesModification.tsx b/src/features/subclass/components/AbilitiesModification.tsx
@@ -6,12 +6,7 @@ import { PLUG_CATEGORY_HASH } from '../../../lib/bungie_api/subclass-constants';
 import { RootState } from '../../../store';
 import { db } from '../../../store/db';
 import { updateSubclassMods } from '../../../store/LoadoutReducer';
-import {
-  ManifestPlug,
-  ManifestAspect,
-  ManifestStatPlug,
-  ManifestSubclass,
-} from '../../../types/manifest-types';
+import { ManifestPlug, ManifestAspect, ManifestStatPlug } from '../../../types/manifest-types';
 import { DamageType, SubclassConfig } from '../../../types/d2l-types';
 import { EMPTY_ASPECT, EMPTY_FRAGMENT } from '../../../lib/bungie_api/constants';
 import HoverCard from '../../../components/HoverCard';
@@ -52,7 +47,7 @@ const SubmenuContainer = styled(Paper)(({ theme }) => ({
   padding: theme.spacing(1.5),
   backgroundColor: 'rgba(255, 255, 255, 0.1)',
   backdropFilter: 'blur(10px)',
-  maxWidth: '550px',
+  maxWidth: '850px',
   boxShadow: theme.shadows[10],
   display: 'flex',
   flexWrap: 'wrap',
@@ -70,14 +65,6 @@ const OptionButton = styled(Button)(({ theme }) => ({
   margin: theme.spacing(0.25),
 }));
 
-const BlurredBackground = styled('div')({
-  backgroundColor: 'rgba(255, 255, 255, 0.1)',
-  backdropFilter: 'blur(4px)',
-  borderRadius: '4px',
-  padding: '8px',
-  marginBottom: '16px',
-});
-
 const SuperModSlot = styled('div')(({ theme }) => ({
   width: 250,
   height: 250,

diff --git a/src/features/subclass/components/SubclassCustomizationWrapper.tsx b/src/features/subclass/components/SubclassCustomizationWrapper.tsx
@@ -18,16 +18,13 @@ const SubclassCustomizationWrapper: React.FC<SubclassCustomizationWrapperProps>
   screenshot,
 }) => {
   return (
-    <Box
-      className="subclass-customization-wrapper"
-      style={{ backgroundImage: `url(${screenshot})` }}
-    >
+    <Box className="subclass-customization-wrapper" sx={{ backgroundImage: `url(${screenshot})` }}>
       <Box position="absolute" top={16} left={16} zIndex={1000}>
         <BackButton onClick={onBackClick} startIcon={<span style={{ fontSize: '1.2em' }}>←</span>}>
           Back
         </BackButton>
       </Box>
-      <Box sx={{ marginTop: '15vh' }}>
+      <Box sx={{ marginTop: '5vh' }}>
         <AbilitiesModification subclass={subclass} />
       </Box>
       <Box position="absolute" bottom={16} left={16} zIndex={1000}>