From 8328397b753e2cba412d1fdd13901a5569861160 Mon Sep 17 00:00:00 2001
From: jaimin25 <jaiminchovatia25123@gmail.com>
Date: Mon, 11 Dec 2023 11:46:56 +0530
Subject: [PATCH 1/2] Improve search box

---
 src/pages/FAQ.tsx      | 14 +++++++++++---
 src/pages/Projects.tsx |  5 ++++-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/pages/FAQ.tsx b/src/pages/FAQ.tsx
index b15fe937..ac596663 100644
--- a/src/pages/FAQ.tsx
+++ b/src/pages/FAQ.tsx
@@ -2,6 +2,8 @@ import Fuse from "fuse.js";
 import React, { useState } from "react";
 import { FAQs } from "../data/FAQs";
 import FooterSection from "../components/FooterSection";
+import { IconContext } from "react-icons";
+import { MdCancel } from "react-icons/md";
 
 export default function FAQ() {
   const [query, setQuery] = useState("");
@@ -30,16 +32,22 @@ export default function FAQ() {
               Wanna ask us a question? Check these first.
             </p>
           </section>
-
           <div className="p-4 my-4 mx-0">
-            <div className="w-full bg-none border-none">
+        <div className="flex py-4 px-6 rounded-md outline-none w-[80vw] max-w-3xl border-none text-white bg-slate-900 font-semibold bg-none">
               <input
-                className="py-4 px-6 rounded-md outline-none w-[80vw] max-w-3xl border-none text-white bg-slate-900 font-semibold bg-none"
+                className="rounded-md outline-none w-full border-none text-white bg-slate-900 font-semibold bg-none"
                 type="text"
                 placeholder="Search your query"
                 onChange={onChangeHandler}
                 value={query}
               ></input>
+              {query !== "" && (
+                <button onClick={() => setQuery("")}>
+                  <IconContext.Provider value={{ size: "1.6rem" }}>
+                    <MdCancel />
+                  </IconContext.Provider>
+                </button>
+              )}
             </div>
           </div>
         </div>
diff --git a/src/pages/Projects.tsx b/src/pages/Projects.tsx
index f3482fb6..5696c2df 100644
--- a/src/pages/Projects.tsx
+++ b/src/pages/Projects.tsx
@@ -59,11 +59,14 @@ function Projects() {
             onChange={onQueryChangeHandler}
             value={query}
           ></input>
+          {query !== "" && (
           <button onClick={() => setQuery("")}>
-            <IconContext.Provider value={{ size: "1.8rem" }}>
+            <IconContext.Provider value={{ size: "1.6rem" }}>
               <MdCancel />
             </IconContext.Provider>
           </button>
+          )
+          }
         </div>
       </div>
 

From 7f2c9ab2c004c5785cfb4723d593ce6091fea47b Mon Sep 17 00:00:00 2001
From: jaimin25 <jaiminchovatia25123@gmail.com>
Date: Mon, 11 Dec 2023 12:38:19 +0530
Subject: [PATCH 2/2] req changes

---
 src/pages/FAQ.tsx      | 3 ++-
 src/pages/Projects.tsx | 3 +--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/FAQ.tsx b/src/pages/FAQ.tsx
index ac596663..8ec0813f 100644
--- a/src/pages/FAQ.tsx
+++ b/src/pages/FAQ.tsx
@@ -32,8 +32,9 @@ export default function FAQ() {
               Wanna ask us a question? Check these first.
             </p>
           </section>
+          
           <div className="p-4 my-4 mx-0">
-        <div className="flex py-4 px-6 rounded-md outline-none w-[80vw] max-w-3xl border-none text-white bg-slate-900 font-semibold bg-none">
+            <div className="flex py-4 px-6 rounded-md outline-none w-[80vw] max-w-3xl border-none text-white bg-slate-900 font-semibold bg-none">
               <input
                 className="rounded-md outline-none w-full border-none text-white bg-slate-900 font-semibold bg-none"
                 type="text"
diff --git a/src/pages/Projects.tsx b/src/pages/Projects.tsx
index 5696c2df..34f74e52 100644
--- a/src/pages/Projects.tsx
+++ b/src/pages/Projects.tsx
@@ -65,8 +65,7 @@ function Projects() {
               <MdCancel />
             </IconContext.Provider>
           </button>
-          )
-          }
+          )}
         </div>
       </div>