Fix broken footer tsc

Author: itsmeurbi

src/Footer.tsx

@@ -1,45 +1,30 @@
-import logo from './assets/images/logo.png';
+import { type ReactElement}  from 'react'
+import logo from './assets/images/logo.png'
 import { Link } from 'react-router-dom'
-import { Box, Grid, Typography, Avatar } from '@mui/material';
-import Icons from './Icons';
+import { Box, Avatar } from '@mui/material'
+import Icons from './Icons'
 
-const Footer = () => {
-    return (
-        <Box
-          sx={{
-            backgroundColor: 'black',
-            padding: 5,
-            color: 'white',
-            position: "sticky",
-          }}
-        >
-          <Grid container justifyContent="space-between" alignItems="center" >
-            <Grid
-              item
-              xs={12}
-              md={6}
-              sx={{
-                display: { xs: 'none', md: 'block' },
-                textAlign: 'left',
-              }}
-            >
-              <Link to="/" style={{ textDecoration: 'none', paddingLeft: '5rem', flexShrink: 0 }}>
-                <Avatar src={logo} alt="Logo WDT" sx={{ width: '100%', height: '100%', maxWidth: '100px' }} />
-              </Link>
-            </Grid>
-            <Grid
-              item
-              xs={12}
-              md={6}
-              sx={{
-                textAlign: { xs: 'center', md: 'right' },
-              }}
-            >
-              <Icons color={"#ffff"}/>
-            </Grid>
-          </Grid>
-        </Box>
-    );
-};
+const Footer = (): ReactElement => {
+  return (
+    <Box
+      sx={{
+        backgroundColor: theme => theme.palette.primary.main,
+        px: 6,
+        py: 1,
+        color: 'white',
+        position: "sticky",
+        display: 'flex',
+        justifyContent: { xs: 'center', md: 'space-between' }
+      }}
+    >
+      <Box sx={{ display: { xs: 'none', md: 'flex' } }} >
+        <Link to="/" style={{ textDecoration: 'none', flexShrink: 0 }}>
+          <Avatar src={logo} alt="Logo WDT" sx={{ width: '100%', height: '100%', maxWidth: '50px' }} />
+        </Link>
+      </Box>
+      <Icons color={"#ffff"}/>
+    </Box>
+  )
+}
 
-export default Footer;
+export default Footer

src/Icons.tsx

@@ -1,76 +1,69 @@
-import { FC, ReactElement } from 'react';
-import { Box, IconButton, Link } from '@mui/material';
-import FacebookIcon from '@mui/icons-material/Facebook';
-import InstagramIcon from '@mui/icons-material/Instagram';
-import XIcon from '@mui/icons-material/X';
-import LinkedInIcon from '@mui/icons-material/LinkedIn';
-import EmailIcon from '@mui/icons-material/Email';
-import PatreonIcon from './PatreonIcon';
+import { FC, type ReactElement } from 'react'
+import { Box, IconButton, Link } from '@mui/material'
+import FacebookIcon from '@mui/icons-material/Facebook'
+import InstagramIcon from '@mui/icons-material/Instagram'
+import XIcon from '@mui/icons-material/X'
+import LinkedInIcon from '@mui/icons-material/LinkedIn'
+import EmailIcon from '@mui/icons-material/Email'
+import PatreonIcon from './PatreonIcon'
 
 interface IconsProps {
-    color: {
-      facebook?: string;
-      instagram?: string;
-      twitter?: string;
-      linkedin?: string;
-      patreon?: string;
-      email?: string;
-    };
-  }
+  color: string
+}
 
-  const Icons: FC<IconsProps> = ({ color }) => {
+  const Icons: FC<IconsProps> = ({ color }): ReactElement => {
     return (
-      <Box>
+      <Box sx={{ display: 'flex' }}>
         <IconButton
           component={Link}
           href="https://www.facebook.com/ColimaWebDevTalks"
           target="_blank"
-          sx={{ color: color?.facebook || 'inherit' }}
+          sx={{ color: color ?? 'inherit' }}
         >
           <FacebookIcon fontSize="large" />
         </IconButton>
         <IconButton
           component={Link}
           href="https://www.instagram.com/webdevtalksmx"
           target="_blank"
-          sx={{ color: color?.instagram || 'inherit' }}
+          sx={{ color: color ?? 'inherit' }}
         >
           <InstagramIcon fontSize="large" />
         </IconButton>
         <IconButton
           component={Link}
           href="https://twitter.com/webdevtalksmx"
           target="_blank"
-          sx={{ color: color?.twitter || 'inherit' }}
+          sx={{ color: color ?? 'inherit' }}
         >
           <XIcon fontSize="large" />
         </IconButton>
         <IconButton
           component={Link}
           href="https://www.linkedin.com/company/web-dev-talks"
           target="_blank"
-          sx={{ color: color?.linkedin || 'inherit' }}
+          sx={{ color: color ?? 'inherit' }}
         >
           <LinkedInIcon fontSize="large" />
         </IconButton>
         <IconButton
           component={Link}
           href="https://patreon.com/WebDevTalksColima"
           target="_blank"
-          sx={{ color: color?.patreon || 'inherit' }}
+          sx={{ color: color ?? 'inherit' }}
         >
           <PatreonIcon />
         </IconButton>
         <IconButton
           component={Link}
           href="mailto:[email protected]"
           target="_blank"
-          sx={{ color: color?.email || 'inherit' }}
+          sx={{ color: color ?? 'inherit' }}
         >
           <EmailIcon fontSize="large" />
         </IconButton>
       </Box>
-    ) as ReactElement;
-  };
-  
-  export default Icons;
+    )
+  }
+
+  export default Icons