update src/components/SearchBox/index.js

src/components/SearchBox/index.js

@@ -6,7 +6,7 @@ import zarbedar from "./zarbedar-icon.svg";
 const SearchBox = ({ cancleIcon, searchIcon, placeholder, className }) => {
   const [activeSearchBox, setActiveSearchBox] = useState(false);
   return (
-    <div className={`flex flex-row-reverse items-center relative ml-2`}>
+    <div className={`flex flex-row-reverse items-center relative`}>
       {activeSearchBox && (
         <img
           src={cancleIcon}
@@ -27,7 +27,7 @@ const SearchBox = ({ cancleIcon, searchIcon, placeholder, className }) => {
         // onBlur={() => setActiveSearchBox(false)}
         type="text"
         placeholder={placeholder}
-        className={`${className} focus:outline-none border border-[#B5D6FF] focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
+        className={`${className} text-xs focus:outline-none rounded border border-[#B5D6FF] focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
       />
     </div>
   );
@@ -41,6 +41,5 @@ SearchBox.defaultProps = {
 
   placeholder: "دنبال چه چیزی هستید",
 
-  className:
-    "w-[15%] text-xs text-blue-400 bg-[#F9FBFF] rounded placeholder-blue-300",
+  className: "w-[100%] text-blue-400 bg-[#F9FBFF] placeholder-blue-300",
 };