diff --git a/src/App.js b/src/App.js index 5e8ffcb..587adb3 100644 --- a/src/App.js +++ b/src/App.js @@ -3,14 +3,14 @@ import { ThemeProvider, createMuiTheme } from "@material-ui/core/styles"; import { Box, makeStyles } from "@material-ui/core"; import CustomAppBar from "./CustomAppBar"; import ItemTable from "./ItemTable"; +import ItemViewAppBar from "./ItemViewAppBar"; import ItemView from "./ItemView"; import clsx from "clsx"; -import { objectIsEmpty } from "./utilities" function App(){ const [darkMode, setDarkMode] = useState(false); const [activeItem, setActiveItem] = useState({}); - const [sidebarOpen, setSidebarOpen] = useState(false) + const [sidebarOpen, setSidebarOpen] = useState(false); const theme = createMuiTheme({ "palette": { @@ -28,16 +28,16 @@ function App(){ overflow: "auto", width: "100vw", height: "100vh", - transition: transitionWidth + transition: transitionWidth, }, "rightCol": { - overflow: "hidden", + overflow: "auto", width: "0", height: "100vh", transition: transitionWidth }, "rightColShift": { - overflow: "auto", + overflowY: "auto", width: "100vw", flexShrink: "0", transition: transitionWidth @@ -54,11 +54,12 @@ function App(){ return ( - + + diff --git a/src/CustomAppBar.js b/src/CustomAppBar.js index 10e78ef..41bbcf6 100644 --- a/src/CustomAppBar.js +++ b/src/CustomAppBar.js @@ -21,7 +21,7 @@ export default function CustomAppBar(props){ return( <> - + {props.title} diff --git a/src/ItemView.js b/src/ItemView.js index 72b7fd6..626a1dd 100644 --- a/src/ItemView.js +++ b/src/ItemView.js @@ -1,20 +1,23 @@ import React from 'react'; -import { ListItem, ListItemIcon, ListItemText, Paper, Typography, Divider } from '@material-ui/core'; +import { ListItem, ListItemIcon, ListItemText, Paper, Typography, Divider, makeStyles } from '@material-ui/core'; import PersonIcon from '@material-ui/icons/Person'; import CalendarIcon from '@material-ui/icons/CalendarToday'; import AssignmentdIcon from '@material-ui/icons/AssignmentInd'; import InfoIcon from '@material-ui/icons/Info'; import ClockIcon from '@material-ui/icons/QueryBuilder'; -import ItemViewAppBar from './ItemViewAppBar' function ItemView(props){ - return( - - + const useStyles = makeStyles((theme) => ({ + "paperMargin": { + paddingLeft: theme.spacing(3), + } + })); + + const classes = useStyles(); + +return( + {props.activeItem["subject"]} diff --git a/src/ItemViewAppBar.js b/src/ItemViewAppBar.js index e1411a6..8541e6b 100644 --- a/src/ItemViewAppBar.js +++ b/src/ItemViewAppBar.js @@ -6,7 +6,7 @@ import CloseItemViewIcon from '@material-ui/icons/ChevronRight'; export default function ItemViewAppBar(props){ const useStyles = makeStyles((theme) => ({ closeButton: { - marginRight: theme.spacing(2), + marginRight: theme.spacing(3), }, title: { flexGrow: "1" @@ -17,7 +17,7 @@ export default function ItemViewAppBar(props){ return( <> - +