Merge pull request #98 from dragoni7/Footer

footer

Author: Rorschach7552

src/app/routes/Dashboard.tsx

@@ -56,6 +56,7 @@ import LogoutButton from '../../features/auth/components/LogoutButton';
 import useArtificeMods from '../../hooks/use-artifice-mods';
 import useStatMods from '../../hooks/use-stat-mods';
 import StatModifications from '../../features/subclass/components/StatModifications';
+import Footer from '../../components/Footer';
 
 const DashboardContent = styled(Grid)(({ theme }) => ({
   backgroundImage: `url(${greyBackground})`,
@@ -487,6 +488,9 @@ export const Dashboard: React.FC = () => {
                   <p>Loading....</p>
                 )}
               </Grid>
+              <Footer
+                emblemUrl={characters[selectedCharacterIndex]?.emblem?.secondarySpecial || ''}
+              />
             </DashboardContent>
           </Grid>
         </>

src/components/Footer.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+
+interface FooterProps {
+  emblemUrl: string;
+}
+
+const Footer: React.FC<FooterProps> = ({ emblemUrl }) => {
+  return (
+    <Box
+      sx={{
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: '40px',
+        backgroundImage: `url(${emblemUrl})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '0 20px',
+        '&::before': {
+          content: '""',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backdropFilter: 'blur(5px)',
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        },
+        zIndex: 1000,
+      }}
+    >
+      <Typography
+        variant="caption"
+        sx={{
+          color: 'white',
+          textAlign: 'center',
+          position: 'relative',
+          zIndex: 1,
+        }}
+      >
+        Built by Dragoni and Rorschach. Destiny 2 and its assets are the property of Bungie. Used
+        under Bungie's Fan-Created Media and Art guidelines.
+      </Typography>
+    </Box>
+  );
+};
+
+export default Footer;