From 533d6676067572a3228f7c67880c7798b727ed56 Mon Sep 17 00:00:00 2001
From: Aria Moradi <aria.moradi007@gmail.com>
Date: Mon, 15 Nov 2021 18:17:50 +0330
Subject: [PATCH 1/2] migrate SingleSearch to Mui 5

---
 src/screens/SearchSingle.tsx | 30 +++++++++++++-----------------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/screens/SearchSingle.tsx b/src/screens/SearchSingle.tsx
index f60eed6073..1660a21537 100644
--- a/src/screens/SearchSingle.tsx
+++ b/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';
-
-const useStyles = makeStyles((theme) => ({
-    root: {
-        margin: '20px 10px',
-        display: 'flex',
-        justifyContent: 'space-around',
-        width: '300px',
-        TextField: {
-            margin: theme.spacing(1),
-            width: '25ch',
-        },
-    },
-}));
+import { Box } from '@mui/system';
 
 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,10 +75,20 @@ export default function SearchSingle() {
 
     return (
         <>
-            <div className={classes.root}>
+            <Box sx={{
+                margin: '20px 10px',
+                display: 'flex',
+                justifyContent: 'space-around',
+                width: '300px',
+            }}
+            >
                 <TextField
                     inputRef={textInput}
                     error={error}
+                    sx={{
+                        m: 1,
+                        width: '25ch',
+                    }}
                     id="filled-basic"
                     variant="filled"
                     size="small"
@@ -102,7 +98,7 @@ export default function SearchSingle() {
                 <Button variant="contained" color="primary" onClick={() => processInput()}>
                     Search
                 </Button>
-            </div>
+            </Box>
             {searchTerm.length > 0
         && (
             <MangaGrid

From f49ffae835c4038798be9bae050db32e88213eac Mon Sep 17 00:00:00 2001
From: Aria Moradi <aria.moradi007@gmail.com>
Date: Mon, 15 Nov 2021 19:55:55 +0330
Subject: [PATCH 2/2] fix some styles

---
 src/screens/SearchSingle.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/screens/SearchSingle.tsx b/src/screens/SearchSingle.tsx
index 1660a21537..45b3151e8b 100644
--- a/src/screens/SearchSingle.tsx
+++ b/src/screens/SearchSingle.tsx
@@ -78,16 +78,16 @@ export default function SearchSingle() {
             <Box sx={{
                 margin: '20px 10px',
                 display: 'flex',
-                justifyContent: 'space-around',
-                width: '300px',
+                width: '400px',
+                maxWidth: 'calc(100% - 20px)',
             }}
             >
                 <TextField
                     inputRef={textInput}
                     error={error}
                     sx={{
-                        m: 1,
-                        width: '25ch',
+                        mx: 1,
+                        flexGrow: 1,
                     }}
                     id="filled-basic"
                     variant="filled"
@@ -95,7 +95,11 @@ export default function SearchSingle() {
                     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>
             </Box>