Merge pull request #1806 from AletheiaFact/migrate-inputSearch

Migrate InputSearch

Author: thesocialdev

src/components/Form/InputSearch.tsx

@@ -1,13 +1,13 @@
 import React from "react";
-import { Input } from "antd";
+import { TextField, InputAdornment } from "@mui/material";
 import styled from "styled-components";
 import colors from "../../styles/colors";
 
-const InputSearchStyled = styled(Input.Search)`
-    span.ant-input-group-addon {
-        display: none;
+const InputSearchStyled = styled(TextField)`
+    .MuiInputAdornment-root {
+        color: ${colors.primary};
     }
-    span.ant-input-affix-wrapper {
+    .MuiOutlinedInput-root {
         background: ${({ backgroundColor = colors.lightNeutral }) =>
         backgroundColor};
         box-shadow: 0px 2px 2px ${colors.shadow};
@@ -16,7 +16,7 @@ const InputSearchStyled = styled(Input.Search)`
             border-color: ${colors.neutralTertiary};
         }
     }
-    input.ant-input {
+    .MuiOutlinedInput-input {
         background: ${({ backgroundColor = colors.lightNeutral }) =>
         backgroundColor};
         color: ${colors.blackSecondary};
@@ -44,14 +44,19 @@ const InputSearch = (props) => {
 
     return (
         <InputSearchStyled
+            variant="outlined"
             placeholder={props.placeholder || ""}
             size="large"
             loading={loading}
-            addonAfter={false}
-            addonBefore={false}
             onChange={(e) => doSearch(e)}
-            suffix={props.suffix || <></>}
-            prefix={props.prefix || <></>}
+            InputProps={{
+                startAdornment: props.prefix ? (
+                    <InputAdornment position="start">{props.prefix}</InputAdornment>
+                ) : null,
+                endAdornment: props.suffix ? (
+                    <InputAdornment position="end">{props.suffix}</InputAdornment>
+                ) : null,
+            }}
             data-cy={props["data-cy"] || "testInputSearchPersonality"}
             {...props}
         />

src/components/Home/HomeHeader/HomeHeaderSearch.tsx

@@ -10,6 +10,7 @@ import AletheiaButton, { ButtonType } from "../../Button";
 import HomeHeaderSearchStyled from "./HomeHeaderSearch.style";
 import { useAtom } from "jotai";
 import { currentNameSpace } from "../../../atoms/namespace";
+import { InputAdornment } from "@mui/material";
 
 const HomeHeaderSearch = () => {
     const { t } = useTranslation();
@@ -45,10 +46,15 @@ const HomeHeaderSearch = () => {
             <h2 className="title">{t("home:homeHeaderSearchTitle")}</h2>
 
             <InputSearch
+                sx={{ width: "100%" }}
                 placeholder={t("header:search_placeholder")}
-                prefix={
-                    <SearchOutlined style={{ fontSize: 25, marginRight: 16 }} />
-                }
+                InputProps={{
+                    startAdornment: (
+                        <InputAdornment position="start">
+                            <SearchOutlined />
+                        </InputAdornment>
+                    ),
+                }}
                 data-cy={"testInputSearchOverlay"}
                 onChange={({ target }) => setName(target.value)}
                 onKeyDown={({ key }) => {

src/components/Personality/PersonalityCreateSearch.tsx

@@ -58,8 +58,7 @@ const PersonalityCreateSearch = ({
             } else {
                 router
                     .push(
-                        `/${
-                            nameSpace === NameSpaceEnum.Main ? "" : nameSpace
+                        `/${nameSpace === NameSpaceEnum.Main ? "" : nameSpace
                         }${path}`
                     )
                     .catch((e) => e);

src/components/Search/OverlaySearchInput.tsx

@@ -48,6 +48,7 @@ const OverlaySearchInput = () => {
 
     return (
         <InputSearch
+            size="small"
             placeholder={t("header:search_placeholder")}
             callback={handleInputSearch}
             suffix={<SearchOutlined />}