Small change.

src/App.js

@@ -24,7 +24,6 @@ function App() {
     [filterCheckbox, setFilterCheckbox] = useState([true, true, true]),
     [sortBy, setSortBy] = useState(1),
     [loader, setLoader] = useState(false),
-    [path, setPath] = useState("/"),
     [lightMode, setLightMode] = useState(
       localStorage.getItem("light-mode") === "true"
     ),
@@ -58,10 +57,6 @@ function App() {
     setToggle(!toggle);
   }
 
-  function SetPath(pathname) {
-    setPath(pathname);
-  }
-
   const filteredData = filter(data, searchQuery, filterCheckbox);
 
   async function fetchData() {
@@ -78,11 +73,6 @@ function App() {
     // eslint-disable-next-line
   }, [sortBy, filterCheckbox]);
 
-  useEffect(() => {
-    const currentURL = new URL(window.location.href);
-    SetPath(currentURL.pathname);
-  }, [path]);
-
   useEffect(() => {
     fetchData();
     // eslint-disable-next-line
@@ -123,7 +113,7 @@ function App() {
           <input
             className="search"
             type="search"
-            placeholder={` Search "${path}"`}
+            placeholder=" Search"
             onChange={search}
           />
 
@@ -185,7 +175,6 @@ function App() {
           element={
             <div className="content">
               <List
-                SetPath={() => SetPath()}
                 lightMode={lightMode}
                 SetLoader={SetLoader}
                 data={filteredData}
@@ -201,7 +190,6 @@ function App() {
           path="tags/:tagId"
           element={
             <Tags
-              SetPath={() => SetPath()}
               lightMode={lightMode}
               SetLoader={SetLoader}
               data={filteredData}
@@ -216,7 +204,6 @@ function App() {
           path="collections/:collectionId"
           element={
             <Collections
-              SetPath={() => SetPath()}
               lightMode={lightMode}
               SetLoader={SetLoader}
               data={filteredData}

src/componets/List.js

@@ -10,16 +10,11 @@ import {
 } from 'react-awesome-button';
 import 'react-awesome-button/dist/themes/theme-blue.css';
 
-const List = ({ SetPath, data, tags, collections, reFetch, SetLoader, lightMode }) => {
+const List = ({ data, tags, collections, reFetch, SetLoader, lightMode }) => {
   const [editBox, setEditBox] = useState(false),
     [editIndex, setEditIndex] = useState(0),
     [numberOfResults, setNumberOfResults] = useState(0);
 
-  useEffect(() => {
-    const currentURL = new URL(window.location.href);
-    SetPath(currentURL.pathname);
-  })
-
   function edit(index) {
     setEditBox(true);
     setEditIndex(index);

src/routes/Collections.js

@@ -1,7 +1,7 @@
 import { useParams } from "react-router-dom";
 import List from "../componets/List";
 
-const Collections = ({ SetPath, data, tags, collections, SetLoader, lightMode, reFetch }) => {
+const Collections = ({ data, tags, collections, SetLoader, lightMode, reFetch }) => {
   const { collectionId } = useParams();
   const dataWithMatchingTag = data.filter((e) => {
     return e.collection.includes(collectionId);
@@ -10,7 +10,6 @@ const Collections = ({ SetPath, data, tags, collections, SetLoader, lightMode, r
   return (
     <div className="content">
       <List
-        SetPath={() => SetPath()}
         lightMode={lightMode}
         data={dataWithMatchingTag}
         tags={tags}

src/routes/Tags.js

@@ -1,7 +1,7 @@
 import { useParams } from "react-router-dom";
 import List from "../componets/List";
 
-const Tags = ({ SetPath, data, tags, collections, SetLoader, lightMode, reFetch }) => {
+const Tags = ({ data, tags, collections, SetLoader, lightMode, reFetch }) => {
   const { tagId } = useParams();
   const dataWithMatchingTag = data.filter((e) => {
     return e.tag.includes(tagId);
@@ -10,7 +10,6 @@ const Tags = ({ SetPath, data, tags, collections, SetLoader, lightMode, reFetch
   return (
     <div className="content">
       <List
-        SetPath={() => SetPath()}
         lightMode={lightMode}
         data={dataWithMatchingTag}
         tags={tags}

src/styles/App.css

@@ -2,7 +2,6 @@
   .search {
     width: 35%;
     min-width: 300px;
-    font-size: 1rem;
   }
 }
 
@@ -15,8 +14,6 @@
 @media (width <= 400px) {
   .search {
     width: 120px;
-    font-size: 0.6rem;
-    font-weight: 600;
   }
 }
 
@@ -47,6 +44,7 @@
   padding: 10px;
   font-family: "Font Awesome 5 Free";
   padding-left: 10px;
+  font-size: 1rem;
   border: none;
   border-radius: 0;
   -webkit-appearance: none;

src/styles/index.css

@@ -39,12 +39,12 @@ body {
   --button-raise-level: 3px;
   --button-hover-pressure: 0;
   --transform-speed: 0.025s;
-  --button-primary-color: #273949;
+  --button-primary-color: rgba(39, 57, 73, 0.9);
   --button-primary-color-dark: #c6e4ff;
   --button-primary-color-light: #c6e4ff;
   --button-primary-color-hover: #0d4a7f;
   --button-primary-color-active: #0f5ca0;
-  --button-primary-border: none;
+  --button-primary-border: 2px solid #e7f4ff;
   z-index: 0;
 }
 
@@ -111,11 +111,11 @@ body {
   --button-raise-level: 3px;
   --button-hover-pressure: 0;
   --transform-speed: 0.025s;
-  --button-primary-color: #e0e0e0;
+  --button-primary-color: rgba(224, 224, 224, 0.9);
   --button-primary-color-dark: #354c7d;
   --button-primary-color-light: #354c7d;
   --button-primary-color-hover: #e1eaf1;
   --button-primary-color-active: #e2e2e2;
-  --button-primary-border: none;
+  --button-primary-border: 2px solid #1e88e5;
   z-index: 0;
 }