error search ui changed

devvsakib · Aug 12, 2024 · 1adb006 · 1adb006
1 parent f23ba58
commit 1adb006
Show file tree

Hide file tree

Showing 3 changed files with 424 additions and 12 deletions.
diff --git a/src/components/Error/ModalSolutions.jsx b/src/components/Error/ModalSolutions.jsx
@@ -24,18 +24,19 @@ const ModalSolutions = ({ isOpen, setOpenModal, error }) => {
         () => setOpenModal((prev) => !prev)
       }
       contentLabel="Modal solution"
-      className={borderColor + " modal !bg-black/80 max-h-[90vh] "}
+      className={borderColor + " modal !bg-black/80 max-h-[90vh] z-50"}
       id="main-div"
       style={{
         overlay: {
           backgroundColor: overlayBackgroundColor,
+          zIndex: 9999999
         },
         content: {
           position: "fixed",
           top: "50%",
           left: "50%",
           transform: "translate(-50%,-50%)",
-          padding: "30px",
+          padding: "30px"
         },
       }}
     >

diff --git a/src/components/Search/SearchInput.jsx b/src/components/Search/SearchInput.jsx
@@ -42,7 +42,73 @@ function SearchInput({ search, setSearch, setType }) {
 
   return (
     <div className={`flex mx-auto mt-12 justify-center items-center gap-4 py-3 px-6 rounded-lg md:w-5/6
-      sticky top-0 z-40 transition-all ${scrolling && "backdrop-blur-[1.5rem] saturate-50"}`}>
+      sticky top-0 z-40 transition-all ${scrolling && "backdrop-blur-[.5rem] !w-3/6 saturate-60"}`}>
+      <div id="inputContainer" className="w-full">
+        <div className="glow"></div>
+        <div className="darkBorderBg"></div>
+        <div className="darkBorderBg"></div>
+        <div className="darkBorderBg"></div>
+
+        <div className="white w-full"></div>
+
+        <div className="gradientBorder w-full"></div>
+
+        <div id="main">
+          <input
+            type="text"
+            id="searchbox"
+            value={search}
+            className="w-full text-sm md:text-base focus:outline-none input placeholder:font-semibold bg-transparent custom-input"
+            placeholder="Search..."
+            onChange={(e) => {
+              setSearch(e.target.value);
+              setType("");
+            }}
+          />
+          <div className="filterBorder"></div>
+          <div id="filter-icon">
+            <div className={"" + selectedTag !== "All" && "text-green-400"}>
+              <FaFilter
+                onClick={e => setOpen(!open)}
+                className={"text-xl !cursor-pointer"}
+              />
+            </div>
+          </div>
+          <div id="search-icon">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              viewBox="0 0 24 24"
+              stroke-width="2"
+              stroke-linejoin="round"
+              stroke-linecap="round"
+              height="24"
+              fill="none"
+              className="feather feather-search"
+            >
+              <circle stroke="url(#search)" r="8" cy="11" cx="11"></circle>
+              <line
+                stroke="url(#searchl)"
+                y2="16.65"
+                y1="22"
+                x2="16.65"
+                x1="22"
+              ></line>
+              <defs>
+                <linearGradient gradientTransform="rotate(50)" id="search">
+                  <stop stop-color="#f8e7f8" offset="0%"></stop>
+                  <stop stop-color="#b6a9b7" offset="50%"></stop>
+                </linearGradient>
+                <linearGradient id="searchl">
+                  <stop stop-color="#b6a9b7" offset="0%"></stop>
+                  <stop stop-color="#837484" offset="50%"></stop>
+                </linearGradient>
+              </defs>
+            </svg>
+          </div>
+        </div>
+      </div>
+      {/* 
       <form
         onSubmit={(e) => e.preventDefault()}
         className="flex items-center border border-primary gap-4 py-2 px-6 rounded-lg w-11/12 md:w-4/6"
@@ -65,13 +131,7 @@ function SearchInput({ search, setSearch, setType }) {
         >
           <MdClear className="text-gray text-xl" />
         </button>
-      </form>
-      <div className={"" + selectedTag !== "All" && "text-green-400"}>
-        <FaFilter
-          onClick={e => setOpen(!open)}
-          className={"text-xl !cursor-pointer"}
-        />
-      </div>
+      </form> */}
       {
         open &&
         <div className="h-dvh bg-dark fixed top-0 !-right-[0] w-[60vw] md:w-[40vw] px-5 z-[9999]">