UI improvements.

api/server.js

@@ -97,7 +97,7 @@ app.delete("/api", async (req, res) => {
 
   await deleteDoc(id);
 
-  res.send(`Bookmark with _id:${id} deleted.`);
+  res.send(`Link with _id:${id} deleted.`);
 });
 
 async function updateDoc(id, updatedListing) {

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "Web Marker",
-  "name": "A bookmark manager",
+  "short_name": "LinkWarden",
+  "name": "LinkWarden",
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",

src/App.js

@@ -22,6 +22,7 @@ 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"
     ),
@@ -55,6 +56,11 @@ function App() {
     setToggle(!toggle);
   }
 
+  function SetPath(pathname) {
+    setPath(pathname);
+    console.log(path)
+  }
+
   const filteredData = filter(data, searchQuery, filterCheckbox);
 
   async function fetchData() {
@@ -71,6 +77,11 @@ function App() {
     // eslint-disable-next-line
   }, [sortBy, filterCheckbox]);
 
+  useEffect(() => {
+    const currentURL = new URL(window.location.href);
+    SetPath(currentURL.pathname);
+  })
+
   useEffect(() => {
     fetchData();
     // eslint-disable-next-line
@@ -107,7 +118,7 @@ function App() {
           <input
             className="search"
             type="search"
-            placeholder="&#xf002; Search"
+            placeholder={` Search "${path}"`}
             onChange={search}
           />
 
@@ -159,6 +170,7 @@ function App() {
           element={
             <div className="content">
               <List
+                SetPath={() => SetPath()}
                 lightMode={lightMode}
                 SetLoader={SetLoader}
                 data={filteredData}
@@ -174,6 +186,7 @@ function App() {
           path="tags/:tagId"
           element={
             <Tags
+              SetPath={() => SetPath()}
               lightMode={lightMode}
               SetLoader={SetLoader}
               data={filteredData}
@@ -188,6 +201,7 @@ function App() {
           path="collections/:collectionId"
           element={
             <Collections
+              SetPath={() => SetPath()}
               lightMode={lightMode}
               SetLoader={SetLoader}
               data={filteredData}

src/componets/AddItem.js

@@ -49,7 +49,7 @@ const AddItem = ({
       <div className="add-overlay" onClick={abort}></div>
       <div className="send-box">
         <div className="box">
-          <h2>New bookmark</h2>
+          <h2>New Link</h2>
           <div className="AddItem-content">
             <h3>
               <span style={{ color: "red" }}>* </span>Link:

src/componets/EditItem.js

@@ -66,7 +66,7 @@ const EditItem = ({
       <div className="send-box">
         <div className="box">
           <div className="title-delete-group">
-          <h2 className="edit-title">Edit bookmark</h2>
+          <h2 className="edit-title">Edit Link</h2>
           <button className="delete" onClick={deleteItem}>
             &#xf2ed;
           </button>

src/componets/Filters.js

@@ -33,11 +33,11 @@ const Filters = ({
       <div className="filter-overlay" onClick={abort}></div>
       <div className="filter-box">
         <div className="filter">
-          <h2>Filter search</h2>
+          <h2>Filter Results</h2>
 
           <div className="filter-groups">
             <div className="section">
-              <h3>Sort by</h3>
+              <h3>Sort By</h3>
               <label>
                 <input
                   name="sort"

src/componets/List.js

@@ -6,11 +6,16 @@ import { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 import NoResults from "./NoResults";
 
-const List = ({ data, tags, collections, reFetch, SetLoader, lightMode }) => {
+const List = ({ SetPath, 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);
@@ -24,10 +29,15 @@ const List = ({ data, tags, collections, reFetch, SetLoader, lightMode }) => {
     setNumberOfResults(data.length);
   }, [data]);
 
+  let currentPATH = new URL(window.location.href).pathname
+
   return (
     <div className="list">
       {numberOfResults > 0 ? (
-        <p className="results">{numberOfResults} Bookmarks found.</p>
+        <p>
+          {currentPATH === "/" ? null : <Link className="btn return-btn" to="/">Return to main page</Link>} {numberOfResults} {numberOfResults === 1 ? "Link " : "Links "}
+          found.
+        </p>
       ) : null}
 
       {numberOfResults === 0 ? <NoResults /> : null}
@@ -74,6 +84,9 @@ const List = ({ data, tags, collections, reFetch, SetLoader, lightMode }) => {
                         {e.collection}
                       </Link>
                     </div>
+                    <div className="date">
+                      {new Date(e.date).toDateString()}
+                    </div>
                     <div className="tags">
                       {e.tag.map((e, i) => {
                         const tagPath = `/tags/${e}`;
@@ -84,9 +97,6 @@ const List = ({ data, tags, collections, reFetch, SetLoader, lightMode }) => {
                         );
                       })}
                     </div>
-                    <div className="date">
-                      {new Date(e.date).toDateString()}
-                    </div>
                   </div>
                 </div>
                 <div className="etc">

src/routes/Collections.js

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

src/styles/App.css

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

src/styles/List.css

@@ -28,10 +28,6 @@
       rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
   }
 
-  .list a {
-    text-decoration: none;
-  }
-
   .list-row:hover img {
     opacity: 90%;
   }
@@ -44,6 +40,7 @@
 
   .tags {
     margin: 10px auto 10px auto;
+    justify-content: center;
   }
 
   .list-row {
@@ -68,10 +65,6 @@
     align-items: center;
   }
 
-  .link {
-    text-decoration: underline;
-  }
-
   .date {
     margin-left: auto;
   }
@@ -110,6 +103,10 @@
   flex-direction: column;
 }
 
+.list a {
+  text-decoration: none;
+}
+
 .link {
   white-space: nowrap;
   font-family: "Font Awesome 5 Free";
@@ -151,19 +148,24 @@
   display: flex;
   border-width: 1px;
   width: fit-content;
-  font-size: 1rem;
+  font-size: 0.8rem;
   border-radius: 5px;
   flex-wrap: wrap;
 }
 
 .tags a {
-  margin-right: 10px;
-  color: #2b8add;
-  text-decoration: none;
+  padding: 10px;
+  background-color:rgb(49, 114, 204);
+  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
+      rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
+      rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+  text-shadow: none;
+  margin: 5px;
+  color: #ffffff;
 }
 
 .tags a::before {
-  color: rgb(42, 125, 172);
+  color: rgb(0, 162, 255);
   content: "# ";
 }
 
@@ -202,6 +204,7 @@
   font-size: 0.7rem;
   opacity: 80%;
   margin-right: auto;
+  margin-top: 10px;
 }
 
 .no-results {
@@ -231,5 +234,15 @@
 }
 
 .list-collection-label a {
-  color: inherit;
+  color: rgb(166, 166, 166);
+  text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
+}
+
+.return-btn {
+  border-radius: 10px;
+  padding: 5px;
+  font-size: small;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  margin-right: 5px;
+  text-shadow: none;
 }

src/styles/index.css

@@ -39,10 +39,6 @@ body {
   background-color: rgb(76, 117, 170);
 }
 
-.tags div {
-  color: rgb(126, 208, 255);
-}
-
 .title {
   color: white;
 }
@@ -120,10 +116,6 @@ body {
   color: rgb(102, 102, 102);
 }
 
-.light .tags div {
-  color: rgb(9, 139, 214);
-}
-
 .light .filter {
   background-color: rgb(233, 220, 179);
 }