mui upgrade

interface/src/SignIn.tsx

@@ -3,6 +3,7 @@ import { toast } from 'react-toastify';
 
 import ForwardIcon from '@mui/icons-material/Forward';
 import { Box, Button, Paper, Typography } from '@mui/material';
+import type { Theme } from '@mui/material/styles';
 
 import * as AuthenticationApi from 'components/routing/authentication';
 import { useRequest } from 'alova/client';
@@ -36,7 +37,7 @@ const SignIn = memo(() => {
     {
       immediate: false
     }
-  ).onSuccess((response) => {
+  ).onSuccess((response: { data: { access_token: string } }) => {
     if (response.data) {
       authenticationContext.signIn(response.data.access_token);
     }
@@ -78,7 +79,6 @@ const SignIn = memo(() => {
     }
   }, [signInRequest, signIn, LL]);
 
-  // Memoize callback to prevent recreation on every render
   const submitOnEnter = useMemo(() => onEnterCallback(signIn), [signIn]);
 
   // get rid of scrollbar
@@ -92,13 +92,15 @@ const SignIn = memo(() => {
 
   return (
     <Box
-      display="flex"
-      height="100vh"
-      margin="auto"
-      padding={2}
-      justifyContent="center"
-      flexDirection="column"
-      maxWidth={(theme) => theme.breakpoints.values.sm}
+      sx={(theme: Theme) => ({
+        display: 'flex',
+        height: '100vh',
+        margin: 'auto',
+        padding: 2,
+        justifyContent: 'center',
+        flexDirection: 'column',
+        maxWidth: theme.breakpoints.values.sm
+      })}
     >
       <Paper
         sx={(theme) => ({
@@ -111,16 +113,18 @@ const SignIn = memo(() => {
           width: '100%'
         })}
       >
-        <Typography mb={1} variant="h4">
+        <Typography sx={{ mb: 1 }} variant="h4">
           {PROJECT_NAME}
         </Typography>
         <LanguageSelector />
         <Box
-          mt={1}
-          display="flex"
-          flexDirection="column"
-          gap={1}
-          alignItems="center"
+          sx={{
+            mt: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 1,
+            alignItems: 'center'
+          }}
         >
           <ValidatedTextField
             fieldErrors={fieldErrors || {}}