refactor

src/components/navbar/CustomExtensionOutlinedIcon.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import createSvgIcon from '@mui/material/utils/createSvgIcon';
-
-const d = 'M 11 1 C 9.3550302 1 8 2.3550302 8 4 L 4 4 C 2.9069372 4 2 4.9069372 2 6 L 2 12 L 4 12 C 4.5650302 12 5 12.43497 5 13 C 5 13.56503 4.5650302 14 4 14 L 2 14 L 2 20 C 2 21.093063 2.9069372 22 4 22 L 10 22 L 10 20 C 10 19.43497 10.43497 19 11 19 C 11.56503 19 12 19.43497 12 20 L 12 22 L 18 22 C 19.093063 22 20 21.093063 20 20 L 20 16 C 21.64497 16 23 14.64497 23 13 C 23 11.35503 21.64497 10 20 10 L 20 6 C 20 4.9069372 19.093063 4 18 4 L 14 4 C 14 2.3550302 12.64497 1 11 1 z M 11 3 C 11.56503 3 12 3.4349698 12 4 L 12 6 L 18 6 L 18 12 L 20 12 C 20.56503 12 21 12.43497 21 13 C 21 13.56503 20.56503 14 20 14 L 18 14 L 18 20 L 14 20 C 14 18.35503 12.64497 17 11 17 C 9.3550302 17 8 18.35503 8 20 L 4 20 L 4 16 C 5.6449698 16 7 14.64497 7 13 C 7 11.35503 5.6449698 10 4 10 L 4 6 L 10 6 L 10 4 C 10 3.4349698 10.43497 3 11 3 z';
-
-const icon = createSvgIcon(<path d={d} />, 'CustomExtensionOutlined');
-
-export default icon;

src/components/navbar/DefaultNavBar.tsx

@@ -6,7 +6,6 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React, { useContext } from 'react';
-import makeStyles from '@mui/styles/makeStyles';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
@@ -27,22 +26,11 @@ import ArrowBack from '@mui/icons-material/ArrowBack';
 import { useHistory } from 'react-router-dom';
 import NavBarContext from 'components/context/NavbarContext';
 import DarkTheme from 'components/context/DarkTheme';
-import ExtensionOutlinedIcon from './CustomExtensionOutlinedIcon';
+import ExtensionOutlinedIcon from 'components/util/CustomExtensionOutlinedIcon';
+import { Box } from '@mui/system';
 import DesktopSideBar from './navigation/DesktopSideBar';
 import MobileBottomBar from './navigation/MobileBottomBar';
 
-const useStyles = makeStyles((theme) => ({
-    root: {
-        flexGrow: 1,
-    },
-    menuButton: {
-        marginRight: theme.spacing(2),
-    },
-    title: {
-        flexGrow: 1,
-    },
-}));
-
 const navbarItems: Array<NavbarItem> = [
     {
         path: '/library',
@@ -90,7 +78,6 @@ const navbarItems: Array<NavbarItem> = [
 ];
 
 export default function DefaultNavBar() {
-    const classes = useStyles();
     const { title, action, override } = useContext(NavBarContext);
     const { darkTheme } = useContext(DarkTheme);
 
@@ -113,7 +100,7 @@ export default function DefaultNavBar() {
     }
 
     return (
-        <div className={classes.root}>
+        <Box sx={{ flexGrow: 1 }}>
             <AppBar position="fixed" color={darkTheme ? 'default' : 'primary'}>
                 <Toolbar>
                     {
@@ -121,7 +108,7 @@ export default function DefaultNavBar() {
                             && (
                                 <IconButton
                                     edge="start"
-                                    className={classes.menuButton}
+                                    sx={{ marginRight: theme.spacing(2) }}
                                     color="inherit"
                                     aria-label="menu"
                                     disableRipple
@@ -134,13 +121,13 @@ export default function DefaultNavBar() {
                                 </IconButton>
                             )
                     }
-                    <Typography variant={isMobileWidth ? 'h6' : 'h5'} className={classes.title}>
+                    <Typography variant={isMobileWidth ? 'h6' : 'h5'} sx={{ flexGrow: 1 }}>
                         {title}
                     </Typography>
                     {action}
                 </Toolbar>
             </AppBar>
             {navbar}
-        </div>
+        </Box>
     );
 }