text: import {fade, makeStyles} from "@material-ui/core/styles";
  
  const drawerWidth = 240
  
  export const useAppStyles = makeStyles((theme) => ({
      root: {
          display: 'flex',
      },
      // necessary for content to be below app bar
      toolbar: theme.mixins.toolbar,
      layout: {
          flexGrow: 1,
          backgroundColor: theme.palette.background.default,
          padding: theme.spacing(3),
          width: 'auto',
          marginLeft: theme.spacing(2),
          marginRight: theme.spacing(2),
          [theme.breakpoints.up(600 + theme.spacing(2) * 2)]: {
              width: 600,
              marginLeft: 'auto',
              marginRight: 'auto',
          },
      },
  }))
  
  export const useHeaderStyles = makeStyles((theme) => ({
      appBar: {
          width: `calc(100% - ${drawerWidth}px)`,
          marginLeft: drawerWidth,
      },
      grow: {
          flexGrow: 1,
      },
      search: {
          position: 'relative',
          borderRadius: theme.shape.borderRadius,
          backgroundColor: fade(theme.palette.common.white, 0.15),
          '&:hover': {
              backgroundColor: fade(theme.palette.common.white, 0.25),
          },
          marginRight: theme.spacing(2),
          marginLeft: 0,
          width: '100%',
          [theme.breakpoints.up('sm')]: {
              marginLeft: theme.spacing(3),
              width: 'auto',
          },
      },
      searchIcon: {
          padding: theme.spacing(0, 2),
          height: '100%',
          position: 'absolute',
          pointerEvents: 'none',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
      },
      inputRoot: {
          color: 'inherit',
      },
      inputInput: {
          padding: theme.spacing(1, 1, 1, 0),
          // vertical padding + font size from searchIcon
          paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
          transition: theme.transitions.create('width'),
          width: '100%',
          [theme.breakpoints.up('md')]: {
              width: '20ch',
          },
      },
  }));
  
  export const useSidebarStyles = makeStyles((theme) => ({
      drawer: {
          width: drawerWidth,
          flexShrink: 0,
      },
      drawerPaper: {
          width: drawerWidth,
      },
      // necessary for content to be below app bar
      toolbar: theme.mixins.toolbar,
  }));
  
  export const useFormStyles = makeStyles((theme) => ({
      root: {
          display: 'flex',
          flexWrap: 'wrap',
          padding: theme.spacing(3)
      },
      buttons: {
          display: 'flex',
          justifyContent: 'flex-end',
      },
      button: {
          marginTop: theme.spacing(3),
          marginLeft: theme.spacing(1),
      },
  }));