From 6a06a038e9f2c3bff679da9c1f8779e5fe07bfdf Mon Sep 17 00:00:00 2001
From: ahmedmgamal94 <98055904+ahmedmgamal94@users.noreply.github.com>
Date: Thu, 12 Sep 2024 13:48:10 -0700
Subject: [PATCH] UI styling fix

---
 src/app/routes/Dashboard.tsx                  | 54 +++++++------------
 .../subclass/AbilitiesModification.tsx        |  9 +---
 .../subclass/SubclassCustomizationWrapper.tsx |  4 +-
 3 files changed, 24 insertions(+), 43 deletions(-)

diff --git a/src/app/routes/Dashboard.tsx b/src/app/routes/Dashboard.tsx
index 86c54df..43cf56f 100644
--- a/src/app/routes/Dashboard.tsx
+++ b/src/app/routes/Dashboard.tsx
@@ -61,32 +61,13 @@ const PageContainer = styled(Box)(({ theme }) => ({
 
 const ContentContainer = styled(Box)(({ theme }) => ({
   flex: 1,
-  display: 'flex',
-  flexDirection: 'column',
-  width: '100%',
+  width: '100vw',
   overflowY: 'auto',
   backgroundImage: `url(${greyBackground})`,
   backgroundSize: 'cover',
   backgroundPosition: 'center',
   padding: theme.spacing(3),
-  paddingTop: '120px',
-}));
-
-const LeftRightColumn = styled(Grid)(({ theme }) => ({
-  width: '40%',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  [theme.breakpoints.down('md')]: {
-    width: '100%',
-  },
-}));
-
-const MiddleColumn = styled(Grid)(({ theme }) => ({
-  width: '20%',
-  [theme.breakpoints.down('md')]: {
-    width: '100%',
-  },
+  paddingTop: '200px',
 }));
 
 const HeaderWrapper = styled(Box)({
@@ -465,14 +446,8 @@ export const Dashboard: React.FC = () => {
             />
           </HeaderWrapper>
           <ContentContainer>
-            <Grid container spacing={3}>
-              <Grid item xs={12}>
-                <ExoticSelector
-                  selectedCharacter={selectedCharacter!}
-                  selectedExoticItemHash={selectedExotic.itemHash}
-                />
-              </Grid>
-              <LeftRightColumn item xs={12} md={5}>
+            <Grid container spacing={3} justifyContent={'center'} alignItems={'flex-start'}>
+              <Grid item md={4.5}>
                 <SingleDiamondButton
                   subclasses={subclasses}
                   selectedSubclass={selectedSubclass}
@@ -482,11 +457,20 @@ export const Dashboard: React.FC = () => {
                 <NumberBoxesContainer>
                   <NumberBoxes />
                 </NumberBoxesContainer>
-              </LeftRightColumn>
-              <MiddleColumn item xs={12} md={2}>
-                <StatModifications />
-              </MiddleColumn>
-              <LeftRightColumn item xs={12} md={5}>
+              </Grid>
+
+              <Grid container item md={3} justifyContent={'center'} alignItems={'flex-start'}>
+                <Grid item md={12}>
+                  <ExoticSelector
+                    selectedCharacter={selectedCharacter!}
+                    selectedExoticItemHash={selectedExotic.itemHash}
+                  />
+                </Grid>
+                <Grid item md={8}>
+                  <StatModifications />
+                </Grid>
+              </Grid>
+              <Grid item md={4.5}>
                 {generatingPermutations ? (
                   <p>Loading...</p>
                 ) : filteredPermutations ? (
@@ -497,7 +481,7 @@ export const Dashboard: React.FC = () => {
                 ) : (
                   <p>Loading....</p>
                 )}
-              </LeftRightColumn>
+              </Grid>
             </Grid>
           </ContentContainer>
         </>
diff --git a/src/features/subclass/AbilitiesModification.tsx b/src/features/subclass/AbilitiesModification.tsx
index 40dec83..d801fcc 100644
--- a/src/features/subclass/AbilitiesModification.tsx
+++ b/src/features/subclass/AbilitiesModification.tsx
@@ -5,13 +5,8 @@ import { Box, Container } from '@mui/system';
 import { PLUG_CATEGORY_HASH } from '../../lib/bungie_api/subclass-constants';
 import { RootState } from '../../store';
 import { db } from '../../store/db';
-import { updateSubclass, updateSubclassMods } from '../../store/LoadoutReducer';
-import {
-  ManifestSubclass,
-  ManifestPlug,
-  ManifestAspect,
-  ManifestStatPlug,
-} from '../../types/manifest-types';
+import { updateSubclassMods } from '../../store/LoadoutReducer';
+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';
 
diff --git a/src/features/subclass/SubclassCustomizationWrapper.tsx b/src/features/subclass/SubclassCustomizationWrapper.tsx
index 717857d..b0fce8e 100644
--- a/src/features/subclass/SubclassCustomizationWrapper.tsx
+++ b/src/features/subclass/SubclassCustomizationWrapper.tsx
@@ -42,10 +42,12 @@ const SubclassCustomizationWrapper: React.FC<SubclassCustomizationWrapperProps>
           Back
         </TransparentButton>
       </Box>
-      <StatModifications />
       <Box sx={{ marginTop: '15vh' }}>
         <AbilitiesModification subclass={subclass} />
       </Box>
+      <Box position="absolute" bottom={16} left={16} zIndex={1000}>
+        <StatModifications />
+      </Box>
     </Box>
   );
 };