diff --git a/src/components/ItemTableAppBar/ItemTableAppBar.js b/src/components/ItemTableAppBar/ItemTableAppBar.js index e6f032a..143e097 100644 --- a/src/components/ItemTableAppBar/ItemTableAppBar.js +++ b/src/components/ItemTableAppBar/ItemTableAppBar.js @@ -1,11 +1,13 @@ import React from "react"; import PropTypes from 'prop-types'; -import {makeStyles, Tooltip, Typography, AppBar, Toolbar, IconButton, Zoom} from "@material-ui/core" +import {makeStyles, Tooltip, Typography, AppBar, Toolbar, IconButton, Zoom, useTheme} from "@material-ui/core" import DarkModeIcon from '@material-ui/icons/Brightness4'; import LightModeIcon from '@material-ui/icons/Brightness7'; -export default function ItemTableAppBar(props){ +export default function ItemTableAppBar({ title, darkMode, setDarkMode }){ + + const theme = useTheme(); const useStyles = makeStyles((theme) => ({ menuButton: { marginLeft: theme.spacing(2), @@ -14,26 +16,25 @@ export default function ItemTableAppBar(props){ flexGrow: "1" }, })); + const classes = useStyles(theme); - const classes = useStyles(props.theme); - - const toggleDarkMode = () => props.setDarkMode(!props.darkMode); + const toggleDarkMode = () => setDarkMode(!darkMode); return( <> - {props.title} + {title} - - {props.darkMode ? : } + {darkMode ? : } @@ -48,9 +49,7 @@ ItemTableAppBar.propTypes = { /** Function to toggle darkMode. */ "setDarkMode": PropTypes.func.isRequired, /** State variable for darkMode */ - "darkMode": PropTypes.bool.isRequired, - /** The webqueue2 MUI theme. */ - "theme": PropTypes.object.isRequired + "darkMode": PropTypes.bool.isRequired }; ItemTableAppBar.defaultProps = {