I1529 Frontend Dependancy Update (#1555)

Co-authored-by: Jaydon Krooss <jkrooss@umich.edu>
Co-authored-by: jaydonkrooss <147423601+jaydonkrooss@users.noreply.github.com>

.all-contributorsrc

@@ -222,6 +222,15 @@
         "code"
       ]
     },
+    {
+      "login": "jaydonkrooss",
+      "name": "Jaydon Krooss",
+      "avatar_url": "https://avatars.githubusercontent.com/u/147423601?v=4",
+      "profile": "https://github.com/jaydonkrooss",
+      "contributions": [
+        "code"
+      ]
+    },
     {
       "login": "dependabot",
       "name": "Dependabot",

.gitignore

@@ -104,6 +104,7 @@ venv/
 ENV/
 env.bak/
 venv.bak/
+venv_*
 
 # Spyder project settings
 .spyderproject
@@ -125,3 +126,6 @@ dmypy.json
 node_modules/
 
 webpack-stats.json
+
+# VSCode
+.history/

assets/src/components/AssignmentGoalInput.js

@@ -1,13 +1,19 @@
 import React, { useEffect, useState, useRef } from 'react'
-import { withStyles } from '@material-ui/core'
-import Grid from '@material-ui/core/Grid'
-import Button from '@material-ui/core/Button'
+import { styled } from '@mui/material/styles'
+import Grid from '@mui/material/Grid'
+import Button from '@mui/material/Button'
 import StyledTextField from './StyledTextField'
 import debounce from 'lodash.debounce'
 import { eventLogExtra } from '../util/object'
 
-const styles = ({
-  goalGradeInput: {
+const PREFIX = 'AssignmentGoalInput'
+
+const classes = {
+  goalGradeInput: `${PREFIX}-goalGradeInput`
+}
+
+const StyledGrid = styled(Grid)({
+  [`& .${classes.goalGradeInput}`]: {
     marginTop: 0,
     width: 150
   }
@@ -22,8 +28,7 @@ function AssignmentGoalInput (props) {
     setEventLog,
     eventLog,
     handleClearGoalGrades,
-    mathWarning,
-    classes
+    mathWarning
   } = props
 
   const [goalGradeInternal, setGoalGradeInternal] = useState(goalGrade)
@@ -44,7 +49,7 @@ function AssignmentGoalInput (props) {
   }, [goalGrade])
 
   return (
-    <Grid item>
+    <StyledGrid item>
       <StyledTextField
         error={goalGradeInternal > 100 || mathWarning || goalGradeInternal > maxPossibleGrade}
         id='standard-number'
@@ -84,8 +89,8 @@ function AssignmentGoalInput (props) {
       >
         Clear
       </Button>
-    </Grid>
+    </StyledGrid>
   )
 }
 
-export default withStyles(styles)(AssignmentGoalInput)
+export default (AssignmentGoalInput)