devvsakib · devvsakib · Aug 12, 2024 · Jul 30, 2024 · Jul 30, 2024 · Jul 30, 2024
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  
+
   <!-- Primary Title and Description -->
   <title>DevToolsArena - Opensource Project</title>
   <meta name="description" content="DevToolsArena is your go-to platform for the best tools, resources, and tutorials in software development, including top IDEs, study materials, and programming YouTubers.">
@@ -20,40 +20,37 @@
 
   <!-- Favicon -->
   <link rel="shortcut icon" href="githubfavicon.png" type="image/x-icon" />
-  
+
   <!-- Stylesheets -->
   <link rel="stylesheet" href="./dist/output.css" />
-  
+
   <!-- Font Preconnect -->
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  
+
   <!-- Google Fonts -->
   <link href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
-
-  <!-- Google Site Verification -->
-  <meta name="google-site-verification" content="%VITE_GOOGLE_SITE_VERIFICATION%" />
-
+
   <!-- Open Graph Meta Tags for Social Sharing -->
   <meta property="og:title" content="DevToolsArena - Your Ultimate Resource for Git Solutions, Web Tools, and More" />
-  <meta property="og:description" content="DevToolsArena is a comprehensive platform for resolving Git-related issues, discovering essential web tools, and accessing valuable web development resources. Join our community for support and collaboration." />
+  <meta property="og:description"
+    content="DevToolsArena is a comprehensive platform for resolving Git-related issues, discovering essential web tools, and accessing valuable web development resources. Join our community for support and collaboration." />
   <meta property="og:image" content="URL_TO_IMAGE" />
   <meta property="og:url" content="YOUR_SITE_URL" />
   <meta property="og:type" content="website" />
-  
+
   <!-- Twitter Card Meta Tags -->
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:title" content="DevToolsArena - Your Ultimate Resource for Git Solutions, Web Tools, and More" />
-  <meta name="twitter:description" content="DevToolsArena is a comprehensive platform for resolving Git-related issues, discovering essential web tools, and accessing valuable web development resources. Join our community for support and collaboration." />
+  <meta name="twitter:description"
+    content="DevToolsArena is a comprehensive platform for resolving Git-related issues, discovering essential web tools, and accessing valuable web development resources. Join our community for support and collaboration." />
   <meta name="twitter:image" content="URL_TO_IMAGE" />
-
-
-
+
 </head>
 
 <body>
   <div id="root"></div>
   <script type="module" src="/src/main.jsx"></script>
 </body>
 
-</html>
+</html>
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]">