🐛 Fixed padding on navbar icon and added hover to social media icons (#4

)
webdevtalks · Jun 21, 2024 · 4dd5abc · 4dd5abc
1 parent c2b16ce
commit 4dd5abc
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/src/NavBar.tsx b/src/NavBar.tsx
@@ -53,13 +53,13 @@ const NavBar = (): ReactElement => {
               aria-label="open drawer"
               onClick={toggleDrawer(true)}
               edge="start"
-              sx={{ display: { xs: 'flex', md: 'none' } }}
+              sx={{ display: { xs: 'flex', md: 'none' }}}
             >
               <MenuIcon />
             </IconButton>
             <Box sx={{ display: { xs: 'none', md: 'flex' }, alignItems: 'center' } }>
               <Link to="/" style={{ textDecoration: 'none', marginRight: '1rem', flexShrink: 0 }}>
-                <Avatar src={logo} alt="Logo WDT" sx={{ width: '100%', height: '100%', maxWidth: '50px' }} />
+                <Avatar src={logo} alt="Logo WDT" sx={{ width: '100%', height: '100%', maxWidth: '50px', py: 1 }} />
               </Link>
               <Link to="/sponsorship" style={{ textDecoration: 'none', height: '100%' }}>
                 <Button className={isActive('/sponsorship') ? 'active' : '' } sx={{ height: '100%', borderRadius: '0' }}>

diff --git a/src/theme.ts b/src/theme.ts
@@ -13,6 +13,20 @@ const theme = createTheme({
     }
   },
   components: {
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          '&:hover': {
+            backgroundColor: 'rgba(51,152,203,.9)',
+            color: 'white',
+          },
+          '&.active': {
+            backgroundColor: 'rgba(51,152,203,.9)',
+            color: 'white',
+          },
+        },
+      },
+    },
     MuiButton: {
       styleOverrides: {
         root: {