chore(site): Upgrade to MUI v5 (#7437)

site/src/components/IconField/IconField.tsx

@@ -1,15 +1,16 @@
-import Button from "@material-ui/core/Button"
-import InputAdornment from "@material-ui/core/InputAdornment"
-import Popover from "@material-ui/core/Popover"
-import TextField from "@material-ui/core/TextField"
+import Button from "@mui/material/Button"
+import InputAdornment from "@mui/material/InputAdornment"
+import Popover from "@mui/material/Popover"
+import TextField from "@mui/material/TextField"
 import { OpenDropdown } from "components/DropdownArrows/DropdownArrows"
 import { useRef, FC, useState } from "react"
 import Picker from "@emoji-mart/react"
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { colors } from "theme/colors"
 import { useTranslation } from "react-i18next"
 import data from "@emoji-mart/data/sets/14/twitter.json"
 import { IconFieldProps } from "./types"
+import { Stack } from "components/Stack/Stack"
 
 const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
   if (
@@ -26,12 +27,11 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
   const hasIcon = textFieldProps.value && textFieldProps.value !== ""
 
   return (
-    <div className={styles.iconField}>
+    <Stack spacing={1}>
       <TextField
         {...textFieldProps}
         fullWidth
         label={t("iconLabel")}
-        variant="outlined"
         InputProps={{
           endAdornment: hasIcon ? (
             <InputAdornment position="end" className={styles.adornment}>
@@ -51,8 +51,6 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
       <Button
         fullWidth
         ref={emojiButtonRef}
-        variant="outlined"
-        size="small"
         endIcon={<OpenDropdown />}
         onClick={() => {
           setIsEmojiPickerOpen((v) => !v)
@@ -83,7 +81,7 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
           }}
         />
       </Popover>
-    </div>
+    </Stack>
   )
 }
 
@@ -106,9 +104,6 @@ const useStyles = makeStyles((theme) => ({
       maxWidth: "100%",
     },
   },
-  iconField: {
-    paddingBottom: theme.spacing(0.5),
-  },
 }))
 
 export default IconField

site/src/components/IconField/types.ts

@@ -1,4 +1,4 @@
-import { TextFieldProps } from "@material-ui/core/TextField"
+import { TextFieldProps } from "@mui/material/TextField"
 
 export type IconFieldProps = TextFieldProps & {
   onPickEmoji: (value: string) => void