Migrate to material ui v5 part 3

web/components/courses/semester.jsx

@@ -1,4 +1,3 @@
-import { useState } from 'react'
 import { styled, useTheme } from '@material-ui/core/styles'
 import Accordion from '@material-ui/core/Accordion'
 import AccordionDetails from '@material-ui/core/AccordionDetails'
@@ -10,121 +9,95 @@ import TableCell from '@material-ui/core/TableCell'
 import TableHead from '@material-ui/core/TableHead'
 import TableRow from '@material-ui/core/TableRow'
 import Typography from '@material-ui/core/Typography'
+import Paper from '@material-ui/core/Paper'
 import { lightBlue } from '@material-ui/core/colors'
-import { Box } from '@material-ui/core'
 
 const StyledTableCell = styled(TableCell)(() => ({
   borderBottom: 0,
 }))
 
 const StyledTableRow = styled(TableRow)(({ theme }) => ({
   '&:nth-of-type(even)': {
-    backgroundColor: theme.palette.mode === 'light' ? lightBlue[50] : theme.palette.primary.light,
+    bgcolor: theme.palette.mode === 'dark' ? theme.palette.grey['900'] : lightBlue[50],
   },
   '&:nth-of-type(odd)': {
-    backgroundColor: theme.palette.mode === 'light' ? lightBlue[100] : theme.palette.primary.level3,
+    bgcolor: theme.palette.mode === 'dark' ? '' : lightBlue[100],
   },
 }))
 
 export default function Semester(props) {
   const theme = useTheme()
   const { semester } = props
   const { rows } = props
-  const [expanded, setExpanded] = useState(false)
-
-  const handleChange = (panel) => (event, newExpanded) => {
-    setExpanded(newExpanded ? panel : false)
-  }
 
   return (
-    <Box sx={{ width: '100%' }}>
-      <Accordion
-        expanded={expanded === `panel${semester}`}
-        onChange={handleChange(`panel${semester}`)}
-        sx={{ backgroundColor: theme.palette.primary.dark, color: theme.palette.common.white }}
+    <Accordion
+      sx={{
+        bgcolor: theme.palette.mode === 'dark' ? '' : theme.palette.primary.light,
+        color: theme.palette.mode === 'dark' ? '' : theme.palette.common.white,
+      }}
+    >
+      <AccordionSummary
+        aria-controls="panel-content"
+        expandIcon={<ExpandMoreIcon />}
+        id="panel1d-header"
       >
-        <AccordionSummary
-          aria-controls="panel-content"
-          expandIcon={<ExpandMoreIcon sx={{ color: theme.palette.common.white }} />}
-          id="panel1d-header"
-        >
-          <Typography>
-            Εξάμηνο&nbsp;
-            {semester}
-          </Typography>
-        </AccordionSummary>
-        <AccordionDetails sx={{ overflowX: 'auto', overflowY: 'hidden', padding: 0 }}>
-          <Table>
-            <TableHead
-              sx={{
-                backgroundColor: theme.palette.secondary.main,
-              }}
-            >
-              <TableRow>
-                <StyledTableCell
-                  align="center"
-                  rowSpan="2"
-                  sx={{ minWidth: '16px', width: '32px', color: theme.palette.common.white }}
-                >
-                  Κωδ.
-                </StyledTableCell>
-                <StyledTableCell
-                  rowSpan="2"
-                  style={{ minWidth: '10rem', color: theme.palette.common.white }}
-                >
-                  Τίτλος
-                </StyledTableCell>
-                <StyledTableCell
-                  align="center"
-                  rowSpan="2"
-                  sx={{ minWidth: '16px', width: '32px', color: theme.palette.common.white }}
-                >
-                  Είδος
-                </StyledTableCell>
-                <StyledTableCell
-                  align="center"
-                  colSpan="2"
-                  sx={{
-                    borderBottom: '1px solid rgba(224, 224, 224, 1)',
-                    minWidth: '16px',
-                    width: '32px',
-                    color: theme.palette.common.white,
-                  }}
-                >
-                  Ώρες
-                </StyledTableCell>
-                <StyledTableCell
-                  align="center"
-                  rowSpan="2"
-                  style={{ minWidth: '16px', width: '32px', color: theme.palette.common.white }}
-                >
-                  Π.Μ.
-                </StyledTableCell>
-              </TableRow>
-              <TableRow>
-                <StyledTableCell align="center" sx={{ color: theme.palette.common.white }}>
-                  Θ
-                </StyledTableCell>
-                <StyledTableCell align="center" sx={{ color: theme.palette.common.white }}>
-                  Ε
-                </StyledTableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {rows.map((row) => (
-                <StyledTableRow key={row._id}>
-                  <StyledTableCell align="center">{row.lessonCode}</StyledTableCell>
-                  <StyledTableCell align="left">{row.name}</StyledTableCell>
-                  <StyledTableCell align="center">{row.type}</StyledTableCell>
-                  <StyledTableCell align="center">{row.hoursTheory}</StyledTableCell>
-                  <StyledTableCell align="center">{row.hoursLab}</StyledTableCell>
-                  <StyledTableCell align="center">{row.credit}</StyledTableCell>
-                </StyledTableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </AccordionDetails>
-      </Accordion>
-    </Box>
+        <Typography>
+          Εξάμηνο&nbsp;
+          {semester}
+        </Typography>
+      </AccordionSummary>
+      <AccordionDetails sx={{ overflowX: 'auto', overflowY: 'hidden', padding: 0 }}>
+        <Table>
+          <TableHead component={Paper} elevation={2}>
+            <TableRow>
+              <StyledTableCell align="center" rowSpan="2" sx={{ minWidth: '16px', width: '32px' }}>
+                Κωδ.
+              </StyledTableCell>
+              <StyledTableCell rowSpan="2" style={{ minWidth: '10rem' }}>
+                Τίτλος
+              </StyledTableCell>
+              <StyledTableCell align="center" rowSpan="2" sx={{ minWidth: '16px', width: '32px' }}>
+                Είδος
+              </StyledTableCell>
+              <StyledTableCell
+                align="center"
+                colSpan="2"
+                sx={{
+                  borderBottom: '1px solid rgba(224, 224, 224, 1)',
+                  minWidth: '16px',
+                  width: '32px',
+                }}
+              >
+                Ώρες
+              </StyledTableCell>
+              <StyledTableCell
+                align="center"
+                rowSpan="2"
+                style={{ minWidth: '16px', width: '32px' }}
+              >
+                Π.Μ.
+              </StyledTableCell>
+            </TableRow>
+            <TableRow>
+              <StyledTableCell align="center">Θ</StyledTableCell>
+              <StyledTableCell align="center">Ε</StyledTableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map((row) => (
+              <StyledTableRow key={row._id}>
+                <StyledTableCell align="center">{row.lessonCode}</StyledTableCell>
+                <StyledTableCell align="left">{row.name}</StyledTableCell>
+                <StyledTableCell align="center">{row.type}</StyledTableCell>
+                <StyledTableCell align="center">{row.hoursTheory}</StyledTableCell>
+                <StyledTableCell align="center">{row.hoursLab}</StyledTableCell>
+                <StyledTableCell align="center">{row.credit}</StyledTableCell>
+              </StyledTableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </AccordionDetails>
+    </Accordion>
   )
 }

web/components/home/courses-module.jsx

@@ -4,22 +4,18 @@ import Divider from '@material-ui/core/Divider'
 import Grid from '@material-ui/core/Grid'
 import Paper from '@material-ui/core/Paper'
 import { Typography } from '@material-ui/core'
-import { styled } from '@material-ui/core/styles'
-
-const Module = styled(Paper)(({ theme }) => ({
-  color: theme.palette.text.normal,
-  padding: theme.spacing(2),
-}))
+import { styled, useTheme } from '@material-ui/core/styles'
 
 const LessonGrid = styled(Grid)(({ theme }) => ({
-  backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#40444b',
   borderRadius: theme.shape.borderRadius,
   color: theme.palette.text.normal,
 }))
 
 export default function CoursesModule() {
+  const theme = useTheme()
+
   return (
-    <Module elevation={3}>
+    <Paper sx={{ padding: theme.spacing(2) }}>
       <Box alignItems="center" display="flex" justifyContent="center" mb={2.5} mt={0.5}>
         <BookIcon />
         <Box mx={1}>
@@ -30,7 +26,7 @@ export default function CoursesModule() {
       <Divider />
       <Box mt={2}>
         <Box mb={1}>
-          <Paper>
+          <Paper elevation={2}>
             <LessonGrid alignItems="center" container wrap="nowrap">
               <Grid item>
                 <Box p={2}>
@@ -47,7 +43,7 @@ export default function CoursesModule() {
           </Paper>
         </Box>
         <Box mb={1}>
-          <Paper>
+          <Paper elevation={2}>
             <LessonGrid alignItems="center" container wrap="nowrap">
               <Grid item>
                 <Box p={2}>
@@ -64,7 +60,7 @@ export default function CoursesModule() {
           </Paper>
         </Box>
         <Box mb={0.5}>
-          <Paper>
+          <Paper elevation={2}>
             <LessonGrid alignItems="center" container wrap="nowrap">
               <Grid item>
                 <Box p={2}>
@@ -81,6 +77,6 @@ export default function CoursesModule() {
           </Paper>
         </Box>
       </Box>
-    </Module>
+    </Paper>
   )
 }

web/components/home/feeding-module.jsx

@@ -9,7 +9,7 @@ import RestaurantIcon from '@material-ui/icons/Restaurant'
 import { Typography } from '@material-ui/core'
 import formatMsTo24h from 'scripts/formatMsTo24h'
 import { green } from '@material-ui/core/colors'
-import { styled, useTheme } from '@material-ui/core/styles'
+import { useTheme } from '@material-ui/core/styles'
 import Button from '@material-ui/core/Button'
 import ButtonLink from 'components/button-link'
 
@@ -99,20 +99,16 @@ function FavoriteFeeding({ favoriteFeeding }) {
 }
 
 export default function FeedingModule() {
+  const theme = useTheme()
   const dispatch = useDispatch()
   const { feeding: favoriteFeeding } = useSelector(selectPreferences)
 
   useEffect(() => {
     dispatch(getPreferences())
   }, [])
 
-  const Module = styled(Paper)(({ theme }) => ({
-    color: theme.palette.text.secondary,
-    padding: theme.spacing(2),
-  }))
-
   return (
-    <Module elevation={3}>
+    <Paper sx={{ padding: theme.spacing(2) }}>
       <Box alignItems="center" display="flex" justifyContent="center" mb={2.5} mt={0.5}>
         <RestaurantIcon />
         <Box mx={1}>
@@ -134,6 +130,6 @@ export default function FeedingModule() {
           </Grid>
         </Box>
       )}
-    </Module>
+    </Paper>
   )
 }

web/components/navigation/navbar.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { status as authStatus, selectStatus, selectUser } from 'redux/authSlice'
+import { selectStatus, selectUser, status as authStatus } from 'redux/authSlice'
 import { useTheme } from '@material-ui/core/styles'
 import AccountCircle from '@material-ui/icons/AccountCircle'
 import AppBar from '@material-ui/core/AppBar'
@@ -11,15 +11,17 @@ import ButtonLink from 'components/button-link'
 import IconButton from '@material-ui/core/IconButton'
 import MenuIcon from '@material-ui/icons/Menu'
 import PermanentBar from './permanent-bar'
-import SwipeableBar from './swipeable-bar'
 import SwipeableDrawer from '@material-ui/core/SwipeableDrawer'
 import Toolbar from '@material-ui/core/Toolbar'
 import Typography from '@material-ui/core/Typography'
 import { useChangeTheme } from 'components/theme-context'
 import { useSelector } from 'react-redux'
+import SidebarList from './sidebar-list'
 
 const iOS = process.browser && /iPad|iPhone|iPod/u.test(navigator.userAgent)
 
+const drawerWidth = 240
+
 export default function Navbar(props) {
   const [drawerOpen, setDrawerOpen] = useState(false)
   const { title } = props
@@ -45,7 +47,6 @@ export default function Navbar(props) {
     <>
       <AppBar
         sx={{
-          backgroundColor: theme.palette.primary.dark,
           zIndex: theme.zIndex.drawer + 1,
         }}
       >
@@ -56,30 +57,36 @@ export default function Navbar(props) {
             edge="start"
             onClick={toggleDrawer(true)}
             sx={{
-              [theme.breakpoints.up('xl')]: {
+              [theme.breakpoints.up('lg')]: {
                 display: 'none',
               },
-              color: theme.palette.common.white,
-              marginRight: theme.spacing(2),
+              mr: 2,
             }}
           >
             <MenuIcon />
           </IconButton>
           <SwipeableDrawer
             disableBackdropTransition={!iOS}
             disableDiscovery={iOS}
-            onClose={toggleDrawer(false)}
-            onOpen={toggleDrawer(true)}
             open={drawerOpen}
+            onOpen={toggleDrawer(true)}
+            onClose={toggleDrawer(false)}
+            onClick={toggleDrawer(false)}
+            onKeyDown={toggleDrawer(false)}
             sx={{
-              [theme.breakpoints.up('xl')]: {
+              [theme.breakpoints.up('lg')]: {
                 display: 'none',
               },
+              '& .MuiDrawer-paper': {
+                width: drawerWidth,
+                bgcolor: theme.palette.mode === 'dark' ? theme.palette.common.black : '',
+              },
             }}
           >
-            <SwipeableBar setDrawerOpen={setDrawerOpen} />
+            <Toolbar />
+            <SidebarList />
           </SwipeableDrawer>
-          <Typography variant="h6" sx={{ color: theme.palette.common.white, flexGrow: 1 }}>
+          <Typography variant="h6" sx={{ flexGrow: 1 }}>
             {title}
           </Typography>
           <IconButton color="inherit" onClick={handleTogglePaletteMode}>
@@ -105,12 +112,7 @@ export default function Navbar(props) {
               )}
             </IconButton>
           ) : (
-            <Button
-              color="inherit"
-              component={ButtonLink}
-              href="/login"
-              sx={{ color: theme.palette.common.white }}
-            >
+            <Button color="inherit" component={ButtonLink} href="/login">
               Login
             </Button>
           )}