Migrate to material ui v5 part 6

web/components/courses/semester.jsx

@@ -11,10 +11,7 @@ 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'
-
-const StyledTableCell = styled(TableCell)(() => ({
-  borderBottom: 0,
-}))
+import { TableContainer } from '@material-ui/core'
 
 const StyledTableRow = styled(TableRow)(({ theme }) => ({
   '&:nth-of-type(even)': {
@@ -23,6 +20,9 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
   '&:nth-of-type(odd)': {
     bgcolor: theme.palette.mode === 'dark' ? '' : lightBlue[100],
   },
+  '&:last-child td, &:last-child th': {
+    borderBottom: 0,
+  },
 }))
 
 export default function Semester(props) {
@@ -39,64 +39,66 @@ export default function Semester(props) {
     >
       <AccordionSummary
         aria-controls="panel-content"
-        expandIcon={<ExpandMoreIcon />}
+        expandIcon={
+          <ExpandMoreIcon
+            sx={{ color: theme.palette.mode === 'dark' ? '' : theme.palette.common.white }}
+          />
+        }
         id="panel1d-header"
       >
         <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 sx={{ overflowX: 'auto', overflowY: 'hidden', p: 0 }}>
+        <TableContainer component={Paper} elevation={2} sx={{ borderRadius: ' 0 0 4px 4px' }}>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell align="center" rowSpan="2" sx={{ minWidth: '16px', width: '32px' }}>
+                  Κωδ.
+                </TableCell>
+                <TableCell rowSpan="2" style={{ minWidth: '10rem' }}>
+                  Τίτλος
+                </TableCell>
+                <TableCell align="center" rowSpan="2" sx={{ minWidth: '16px', width: '32px' }}>
+                  Είδος
+                </TableCell>
+                <TableCell
+                  align="center"
+                  colSpan="2"
+                  sx={{
+                    borderBottom: '1px solid rgba(224, 224, 224, 1)',
+                    minWidth: '16px',
+                    width: '32px',
+                  }}
+                >
+                  Ώρες
+                </TableCell>
+                <TableCell align="center" rowSpan="2" style={{ minWidth: '16px', width: '32px' }}>
+                  Π.Μ.
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell align="center">Θ</TableCell>
+                <TableCell align="center">Ε</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rows.map((row) => (
+                <StyledTableRow key={row._id}>
+                  <TableCell align="center">{row.lessonCode}</TableCell>
+                  <TableCell align="left">{row.name}</TableCell>
+                  <TableCell align="center">{row.type}</TableCell>
+                  <TableCell align="center">{row.hoursTheory}</TableCell>
+                  <TableCell align="center">{row.hoursLab}</TableCell>
+                  <TableCell align="center">{row.credit}</TableCell>
+                </StyledTableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
       </AccordionDetails>
     </Accordion>
   )

web/components/feeding/feeding.jsx

@@ -1,7 +1,6 @@
 import Box from '@material-ui/core/Box'
 import TextField from '@material-ui/core/TextField'
 import MenuItem from '@material-ui/core/MenuItem'
-import Hidden from '@material-ui/core/Hidden'
 import FormControlLabel from '@material-ui/core/FormControlLabel'
 import Checkbox from '@material-ui/core/Checkbox'
 import { Favorite, FavoriteBorder } from '@material-ui/icons'
@@ -112,7 +111,7 @@ export default function Feeding() {
             ))
           )}
         </Dropdown>
-        <Hidden smUp>
+        <Box sx={{ display: { xs: 'block', sm: 'none' } }}>
           <FormControlLabel
             control={
               <Checkbox
@@ -124,12 +123,11 @@ export default function Feeding() {
               />
             }
             label=""
-            sx={{ marginLeft: '4px', marginRight: 0, marginTop: '8px' }}
+            sx={{ ml: 1, mr: 0, mt: 3 }}
           />
-        </Hidden>
-        <Hidden xsDown>
+        </Box>
+        <Box sx={{ display: { xs: 'none', sm: 'block' } }}>
           <FormControlLabel
-            style={{ marginLeft: '4px', marginRight: 0, marginTop: '8px' }}
             control={
               <Checkbox
                 checked={displayAsFavorite}
@@ -140,8 +138,9 @@ export default function Feeding() {
               />
             }
             label="Favourite"
+            sx={{ ml: 1, mr: 0, mt: 3 }}
           />
-        </Hidden>
+        </Box>
       </Box>
       {selectedFeedingIndex < 0 ? (
         <Box mt={5}>

web/components/home/courses-module.jsx

@@ -14,7 +14,7 @@ export default function CoursesModule() {
   const theme = useTheme()
 
   return (
-    <Paper sx={{ padding: theme.spacing(2) }}>
+    <Paper sx={{ p: 2 }}>
       <Box alignItems="center" display="flex" justifyContent="center" mb={2.5} mt={0.5}>
         <BookIcon />
         <Box mx={1}>

web/components/institute-select.jsx

@@ -9,7 +9,6 @@ import {
 } from 'redux/instituteSlice'
 import { useEffect } from 'react'
 import Box from '@material-ui/core/Box'
-import Hidden from '@material-ui/core/Hidden'
 import { styled } from '@material-ui/core/styles'
 
 export default function InstituteSelect() {
@@ -53,14 +52,14 @@ export default function InstituteSelect() {
       >
         {institutes.map((institute, index) => (
           <MenuItem key={institute._id} value={index}>
-            <Hidden xsDown>
+            <Box xsDown sx={{ display: { xs: 'none', sm: 'block' } }}>
               <b>{institute.acronym}</b>&nbsp;-&nbsp;{institute.name}
-            </Hidden>
-            <Hidden smUp>
+            </Box>
+            <Box sx={{ display: { xs: 'block', sm: 'none' } }}>
               <b>{institute.acronym}</b>
               &nbsp;
               <span style={{ fontSize: '0.8rem' }}>{institute.name}</span>
-            </Hidden>
+            </Box>
           </MenuItem>
         ))}
       </Dropdown>