1529 styling adjustments for materialUI upgrade (#11)

tl-its-umich-edu · Jan 3, 2024 · af36347 · af36347
1 parent 9000a84
commit af36347
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 42 deletions.
diff --git a/assets/src/components/AssignmentTable.js b/assets/src/components/AssignmentTable.js
@@ -33,7 +33,7 @@ const PREFIX = 'AssignmentTable'
 
 const classes = {
   root: `${PREFIX}-root`,
-  paper: `${PREFIX}-paper`,
+  messageWrapper: `${PREFIX}-messageWrapper`,
   container: `${PREFIX}-container`,
   sliderCell: `${PREFIX}-sliderCell`,
   goalGradeInput: `${PREFIX}-goalGradeInput`,
@@ -62,11 +62,6 @@ const Root = styled('div')((
     padding: 8
   },
 
-  [`& .${classes.paper}`]: {
-    padding: theme.spacing(2),
-    color: theme.palette.text.secondary
-  },
-
   [`& .${classes.container}`]: {
     maxHeight: 500
   },
@@ -142,6 +137,14 @@ const Root = styled('div')((
   }
 }))
 
+// separate styles for child of opened popover
+const StyledPopoverMessage = styled('div')(({ theme }) => ({
+  [`& .${classes.messageWrapper}`]: {
+    padding: theme.spacing(2),
+    color: theme.palette.text.secondary
+  }
+}))
+
 const headerHeight = 105
 
 function AssignmentTable (props) {
@@ -404,8 +407,8 @@ function AssignmentTable (props) {
                       {
                         a.week
                           ? isPreviousWeekTheSame(a.week, key)
-                              ? ''
-                              : `Week ${a.week}`
+                            ? ''
+                            : `Week ${a.week}`
                           : 'No due date'
                       }
                     </TableCell>
@@ -418,8 +421,8 @@ function AssignmentTable (props) {
                       {
                         a.week
                           ? isPreviousDayTheSame(a.dueDateMonthDay, key)
-                              ? ''
-                              : a.dueDateMonthDay
+                            ? ''
+                            : a.dueDateMonthDay
                           : ''
                       }
                     </TableCell>
@@ -495,9 +498,11 @@ function AssignmentTable (props) {
                           />
                           <Popover
                             className={classes.popover}
-                            classes={{ paper: classes.paper }}
                             anchorEl={popoverEl.anchorEl}
                             open={popoverEl.popoverId === key}
+                            sx={{
+                              pointerEvents: 'none'
+                            }}
                             onClose={clearPopoverEl}
                             anchorOrigin={{
                               vertical: 'top',
@@ -511,7 +516,11 @@ function AssignmentTable (props) {
                             disableAutoFocus
                             disableEnforceFocus
                           >
-                            <PopupMessage a={a} assignmentGroups={assignmentGroups} />
+                            <StyledPopoverMessage>
+                              <div className={classes.messageWrapper}>
+                                <PopupMessage a={a} assignmentGroups={assignmentGroups} />
+                              </div>
+                            </StyledPopoverMessage>
                           </Popover>
                         </div>
                       </>

diff --git a/assets/src/components/AvatarModal.js b/assets/src/components/AvatarModal.js
@@ -6,7 +6,7 @@ import Typography from '@mui/material/Typography'
 import Avatar from '@mui/material/Avatar'
 import Link from '@mui/material/Link'
 import List from '@mui/material/List'
-import ListItem from '@mui/material/ListItem'
+import ListItemButton from '@mui/material/ListItemButton'
 import ListItemIcon from '@mui/material/ListItemIcon'
 import ListItemText from '@mui/material/ListItemText'
 import DialogTitle from '@mui/material/DialogTitle'
@@ -70,25 +70,25 @@ function AvatarModal (props) {
   const Admin = () => (
     <>
       <Link style={{ textDecoration: 'none' }} href='/admin'>
-        <ListItem button>
+        <ListItemButton>
           <ListItemIcon>
             <Lock />
           </ListItemIcon>
           <ListItemText inset primary='Admin' className={classes.text} />
-        </ListItem>
+        </ListItemButton>
       </Link>
       <Divider />
     </>
   )
 
   const SwitchCourses = () => (
     <>
-      <ListItem button onClick={() => setOpenChangeCourseDialog(true)}>
+      <ListItemButton onClick={() => setOpenChangeCourseDialog(true)}>
         <ListItemIcon>
           <Launch />
         </ListItemIcon>
         <ListItemText inset primary='Switch courses' className={classes.text} />
-      </ListItem>
+      </ListItemButton>
       <Dialog
         onClose={() => setOpenChangeCourseDialog(false)}
         open={openChangeCourseDialog}
@@ -101,9 +101,9 @@ function AvatarModal (props) {
               href={`/courses/${course.course_id}`}
               key={i}
             >
-              <ListItem button>
+              <ListItemButton>
                 <ListItemText inset primary={course.course_name} className={classes.text} />
-              </ListItem>
+              </ListItemButton>
             </Link>
           ))}
         </List>
@@ -154,12 +154,12 @@ function AvatarModal (props) {
           <List>
             <Divider />
             <Link style={{ textDecoration: 'none' }} href={helpURL} target='_blank' rel='noopener noreferrer'>
-              <ListItem button>
+              <ListItemButton>
                 <ListItemIcon>
                   <HelpIcon />
                 </ListItemIcon>
                 <ListItemText inset primary='Help' className={classes.text} />
-              </ListItem>
+              </ListItemButton>
             </Link>
             <Divider />
             {
@@ -176,12 +176,12 @@ function AvatarModal (props) {
               user.logoutURL !== ''
                 ? (
                   <Link style={{ textDecoration: 'none' }} href={user.logoutURL}>
-                    <ListItem button>
+                    <ListItemButton>
                       <ListItemIcon>
                         <LogoutIcon />
                       </ListItemIcon>
                       <ListItemText inset primary='Logout' className={classes.text} />
-                    </ListItem>
+                    </ListItemButton>
                   </Link>
                   )
                 : null

diff --git a/assets/src/components/ProgressBarV2.js b/assets/src/components/ProgressBarV2.js
@@ -57,7 +57,7 @@ function ProgressBarV2 (props) {
             width: `${percentWidth}%`,
             height: `${height}px`,
             position: 'relative',
-            margin: margin
+            margin
           }}
           onFocus={(event) => { if (onBarFocus) onBarFocus(event.currentTarget) }}
           onBlur={(event) => { if (onBarBlur) onBarBlur() }}

diff --git a/assets/src/components/SurveyModal.js b/assets/src/components/SurveyModal.js
@@ -18,11 +18,8 @@ const classes = {
   surveyButton: `${PREFIX}-surveyButton`
 }
 
-const Root = styled('div')((
-  {
-    theme
-  }
-) => ({
+// styling within the modal (root styling doesn't apply to portal elements)
+const StyledModalBody = styled('div')(({ theme }) => ({
   [`& .${classes.modal}`]: {
     top: '10%',
     left: '50%',
@@ -61,11 +58,14 @@ const Root = styled('div')((
     right: 0,
     width: '100%',
     height: '100%'
-  },
+  }
+}))
 
-  [`& .${classes.surveyButton}`]: {
-    color: theme.palette.primary.main,
-    background: theme.palette.getContrastText(theme.palette.primary.main)
+const ColoredButton = styled(Button)(({ theme }) => ({
+  backgroundColor: theme.palette.getContrastText(theme.palette.primary.main),
+  color: theme.palette.primary.main,
+  '&:hover': {
+    backgroundColor: '#D5D5D5'
   }
 }))
 
@@ -109,16 +109,16 @@ export default function SurveyModal (props) {
   )
 
   return (
-    <Root>
-      <Button variant='contained' className={classes.surveyButton} onClick={toggleOpen}>{props.surveyLink.text}</Button>
+    <>
+      <ColoredButton variant='contained' onClick={toggleOpen}>{props.surveyLink.text}</ColoredButton>
       <Modal
         open={open}
         onClose={toggleOpen}
         aria-labelledby='survey-modal-title'
         aria-describedby='survey-modal-description'
       >
-        {body}
+        <StyledModalBody>{body}</StyledModalBody>
       </Modal>
-    </Root>
+    </>
   )
 }
diff --git a/assets/src/containers/ResourcesAccessed.js b/assets/src/containers/ResourcesAccessed.js
@@ -297,7 +297,7 @@ function ResourcesAccessed (props) {
               }
               <div className={classes.formController}>
                 <p className={classes.controlText}>Resources accessed from week <b>{weekRange[0]} {weekRange[0] === curWeek ? ' (Now)' : ''}</b> to <b>{weekRange[1]}{weekRange[1] === curWeek ? ' (Now) ' : ''}</b> by students with these grades:</p>
-                <FormControl>
+                <FormControl variant='standard'>
                   <Select
                     value={resourceGradeFilter}
                     onChange={handleResourceGradeFilter}

diff --git a/assets/src/containers/SideDrawer.js b/assets/src/containers/SideDrawer.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { styled } from '@mui/material/styles'
 import Drawer from '@mui/material/Drawer'
 import List from '@mui/material/List'
-import ListItem from '@mui/material/ListItem'
+import ListItemButton from '@mui/material/ListItemButton'
 import ListItemIcon from '@mui/material/ListItemIcon'
 import ListItemText from '@mui/material/ListItemText'
 import { Link } from 'react-router-dom'
@@ -55,8 +55,7 @@ function SideDrawer (props) {
     >
       <List>
         {routes(courseId, courseInfo.course_view_options, !isTeacherOrAdmin(isAdmin, enrollmentTypes)).map((props, key) => (
-          <ListItem
-            button
+          <ListItemButton
             component={Link}
             to={props.path}
             key={key}
@@ -71,7 +70,7 @@ function SideDrawer (props) {
               }
             </ListItemIcon>
             <ListItemText primary={props.title} className={classes.text} />
-          </ListItem>
+          </ListItemButton>
         ))}
       </List>
     </Root>