diff --git a/frontend/src/components/layout/AppLayout.js b/frontend/src/components/layout/AppLayout.js index eb36e66..81ba03f 100644 --- a/frontend/src/components/layout/AppLayout.js +++ b/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"; - -const useStyles = makeStyles(styles); +import { getStyles } from "./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 ( -
+
-
-
+
+
diff --git a/frontend/src/components/layout/ProfileButton.js b/frontend/src/components/layout/ProfileButton.js index 63173c2..c6aff69 100644 --- a/frontend/src/components/layout/ProfileButton.js +++ b/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 { makeStyles } from "@mui/material/styles"; +import { getStyles } from "./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(); }} > - + {t("User.Profile.Label")} @@ -78,13 +77,13 @@ const ProfileButton = () => { handleClose(); }} > - + {t("User.Settings")} - + {t("User.Logout")} diff --git a/frontend/src/components/layout/Sidebar.js b/frontend/src/components/layout/Sidebar.js index 40c8659..e206e66 100644 --- a/frontend/src/components/layout/Sidebar.js +++ b/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"; - -const useStyles = makeStyles(styles); +import { getStyles } from "./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 ( -
+
{theme.direction === "rtl" ? : } diff --git a/frontend/src/components/layout/TopBar.js b/frontend/src/components/layout/TopBar.js index b3bdced..355fd79 100644 --- a/frontend/src/components/layout/TopBar.js +++ b/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"; - -const useStyles = makeStyles(styles); +import { getStyles } from "./styles"; const TopBar = ({ open, handleDrawerOpen }) => { - const classes = useStyles(); + const theme = useTheme(); + const styles = getStyles(theme); return ( @@ -27,13 +26,13 @@ const TopBar = ({ open, handleDrawerOpen }) => { aria-label="open drawer" onClick={handleDrawerOpen} edge="start" - className={clsx(classes.menuButton, { - [classes.hide]: open + sx={clsx(styles.menuButton, { + [styles.hide]: open })} > - + Network resurrector diff --git a/frontend/src/components/layout/styles.js b/frontend/src/components/layout/styles.js index 2bff25a..35f2258 100644 --- a/frontend/src/components/layout/styles.js +++ b/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 };