Refactor layout component styles

frontend/src/components/layout/AppLayout.js

@@ -1,15 +1,14 @@
 import React, { useState } from "react";
-import { makeStyles } from "@mui/material/styles";
+import { useTheme } from "@mui/material/styles";
 import AppRoutes from "./AppRoutes";
 import TopBar from "./TopBar";
 import Sidebar from "./Sidebar";
-import styles from "./styles";
+import { getStyles } from "./styles";
-
-const useStyles = makeStyles(styles);
 
 const AppLayout = () => {
   const [open, setOpen] = useState(false);
-  const classes = useStyles();
+  const theme = useTheme();
+  const styles = getStyles(theme);
 
   const handleDrawerOpen = () => {
     setOpen(true);
@@ -20,11 +19,11 @@ const AppLayout = () => {
   };
 
   return (
-    <div className={classes.root}>
+    <div style={styles.root}>
       <TopBar open={open} handleDrawerOpen={handleDrawerOpen} />
       <Sidebar open={open} handleDrawerClose={handleDrawerClose} />
-      <main className={classes.content}>
+      <main style={styles.content}>
-        <div className={classes.toolbar} />
+        <div style={styles.toolbar} />
         <AppRoutes />
       </main>
     </div>

frontend/src/components/layout/ProfileButton.js

@@ -7,16 +7,15 @@ import SettingsIcon from "@mui/icons-material/Settings";
 import { useNavigate } from "react-router-dom";
 import { useTuitioClient } from "@flare/tuitio-client-react";
 import { useToast } from "../../hooks";
-import styles from "./styles";
+import { getStyles } from "./styles";
-import { makeStyles } from "@mui/material/styles";
+import { useTheme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
 
-const useStyles = makeStyles(styles);
-
 const ProfileButton = () => {
   const navigate = useNavigate();
   const { error } = useToast();
-  const classes = useStyles();
+  const theme = useTheme();
+  const styles = getStyles(theme);
   const { t } = useTranslation();
 
   const { logout } = useTuitioClient({
@@ -67,7 +66,7 @@ const ProfileButton = () => {
             handleClose();
           }}
         >
-          <ListItemIcon className={classes.menuItemIcon}>
+          <ListItemIcon sx={styles.menuItemIcon}>
             <AccountBoxIcon fontSize="small" />
           </ListItemIcon>
           <Typography variant="inherit">{t("User.Profile.Label")}</Typography>
@@ -78,13 +77,13 @@ const ProfileButton = () => {
             handleClose();
           }}
         >
-          <ListItemIcon className={classes.menuItemIcon}>
+          <ListItemIcon sx={styles.menuItemIcon}>
             <SettingsIcon fontSize="small" />
           </ListItemIcon>
           <Typography variant="inherit">{t("User.Settings")}</Typography>
         </MenuItem>
         <MenuItem onClick={logout}>
-          <ListItemIcon className={classes.menuItemIcon}>
+          <ListItemIcon sx={styles.menuItemIcon}>
             <ExitToAppIcon fontSize="small" />
           </ListItemIcon>
           <Typography variant="inherit">{t("User.Logout")}</Typography>

frontend/src/components/layout/Sidebar.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
-import { makeStyles, useTheme } from "@mui/material/styles";
+import { useTheme } from "@mui/material/styles";
 import { Drawer, List, Divider, IconButton, ListItemIcon, ListItemText } from "@mui/material";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
@@ -14,9 +14,7 @@ import DashboardIcon from "@mui/icons-material/Dashboard";
 import FeaturedPlayListIcon from "@mui/icons-material/FeaturedPlayList";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import styles from "./styles";
+import { getStyles } from "./styles";
-
-const useStyles = makeStyles(styles);
 
 const menu = [
   {
@@ -82,9 +80,8 @@ const sortedMenu = menu.sort((i1, i2) => i1 - i2);
 
 const Sidebar = ({ open, handleDrawerClose }) => {
   const [selected, setSelected] = useState(null);
-
-  const classes = useStyles();
   const theme = useTheme();
+  const styles = getStyles(theme);
   const navigate = useNavigate();
   const { t } = useTranslation();
 
@@ -98,18 +95,18 @@ const Sidebar = ({ open, handleDrawerClose }) => {
   return (
     <Drawer
       variant="permanent"
-      className={clsx(classes.drawer, {
+      sx={clsx(styles.drawer, {
-        [classes.drawerOpen]: open,
+        [styles.drawerOpen]: open,
-        [classes.drawerClose]: !open
+        [styles.drawerClose]: !open
       })}
       classes={{
         paper: clsx({
-          [classes.drawerOpen]: open,
+          [styles.drawerOpen]: open,
-          [classes.drawerClose]: !open
+          [styles.drawerClose]: !open
         })
       }}
     >
-      <div className={classes.toolbar}>
+      <div style={styles.toolbar}>
         <IconButton onClick={handleDrawerClose}>
           {theme.direction === "rtl" ? <ChevronRightIcon /> : <ChevronLeftIcon />}
         </IconButton>

frontend/src/components/layout/TopBar.js

@@ -1,24 +1,23 @@
 import React from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
-import { makeStyles } from "@mui/material/styles";
+import { useTheme } from "@mui/material/styles";
 import { AppBar, Toolbar, Typography, IconButton } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
 import ProfileButton from "./ProfileButton";
 import LightDarkToggle from "./LightDarkToggle";
 import SensitiveInfoToggle from "./SensitiveInfoToggle";
-import styles from "./styles";
+import { getStyles } from "./styles";
-
-const useStyles = makeStyles(styles);
 
 const TopBar = ({ open, handleDrawerOpen }) => {
-  const classes = useStyles();
+  const theme = useTheme();
+  const styles = getStyles(theme);
 
   return (
     <AppBar
       position="fixed"
-      className={clsx(classes.appBar, {
+      sx={clsx(styles.appBar, {
-        [classes.appBarShift]: open
+        [styles.appBarShift]: open
       })}
     >
       <Toolbar>
@@ -27,13 +26,13 @@ const TopBar = ({ open, handleDrawerOpen }) => {
           aria-label="open drawer"
           onClick={handleDrawerOpen}
           edge="start"
-          className={clsx(classes.menuButton, {
+          sx={clsx(styles.menuButton, {
-            [classes.hide]: open
+            [styles.hide]: open
           })}
         >
           <MenuIcon />
         </IconButton>
-        <Typography variant="h6" noWrap className={classes.title}>
+        <Typography variant="h6" noWrap sx={styles.title}>
           Network resurrector
         </Typography>
         <SensitiveInfoToggle />

frontend/src/components/layout/styles.js

@@ -1,6 +1,6 @@
 const drawerWidth = 240;
 
-const styles = theme => ({
+const getStyles = theme => ({
   root: {
     display: "flex"
   },
@@ -68,4 +68,4 @@ const styles = theme => ({
   }
 });
 
-export default styles;
+export { getStyles };