migrate SingleSearch to Mui 5 (#101)

* migrate SingleSearch to Mui 5

* fix some styles

src/screens/SearchSingle.tsx

@@ -6,33 +6,19 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React, { useContext, useEffect, useState } from 'react';
-import makeStyles from '@mui/styles/makeStyles';
 import TextField from '@mui/material/TextField';
 import Button from '@mui/material/Button';
 import { useParams } from 'react-router-dom';
 import MangaGrid from 'components/MangaGrid';
 import NavbarContext from 'components/context/NavbarContext';
 import client from 'util/client';
-
+import { Box } from '@mui/system';
-const useStyles = makeStyles((theme) => ({
-    root: {
-        margin: '20px 10px',
-        display: 'flex',
-        justifyContent: 'space-around',
-        width: '300px',
-        TextField: {
-            margin: theme.spacing(1),
-            width: '25ch',
-        },
-    },
-}));
 
 export default function SearchSingle() {
     const { setTitle, setAction } = useContext(NavbarContext);
     useEffect(() => { setTitle('Search'); setAction(<></>); }, []);
 
     const { sourceId } = useParams<{ sourceId: string }>();
-    const classes = useStyles();
     const [error, setError] = useState<boolean>(false);
     const [mangas, setMangas] = useState<IMangaCard[]>([]);
     const [message, setMessage] = useState<string>('');
@@ -89,20 +75,34 @@ export default function SearchSingle() {
 
     return (
         <>
-            <div className={classes.root}>
+            <Box sx={{
+                margin: '20px 10px',
+                display: 'flex',
+                width: '400px',
+                maxWidth: 'calc(100% - 20px)',
+            }}
+            >
                 <TextField
                     inputRef={textInput}
                     error={error}
+                    sx={{
+                        mx: 1,
+                        flexGrow: 1,
+                    }}
                     id="filled-basic"
                     variant="filled"
                     size="small"
                     label="Search text.."
                     onKeyDown={(e) => e.key === 'Enter' && processInput()}
                 />
-                <Button variant="contained" color="primary" onClick={() => processInput()}>
+                <Button
+                    variant="contained"
+                    color="primary"
+                    onClick={() => processInput()}
+                >
                     Search
                 </Button>
-            </div>
+            </Box>
             {searchTerm.length > 0
         && (
             <MangaGrid