diff --git a/api/server.js b/api/server.js index 1d49df2..59cb5f2 100644 --- a/api/server.js +++ b/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) { diff --git a/public/manifest.json b/public/manifest.json index 4b22a9c..1d998b2 100644 --- a/public/manifest.json +++ b/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", diff --git a/src/App.js b/src/App.js index c104528..ee02772 100644 --- a/src/App.js +++ b/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() { @@ -159,6 +170,7 @@ function App() { element={
SetPath()} lightMode={lightMode} SetLoader={SetLoader} data={filteredData} @@ -174,6 +186,7 @@ function App() { path="tags/:tagId" element={ SetPath()} lightMode={lightMode} SetLoader={SetLoader} data={filteredData} @@ -188,6 +201,7 @@ function App() { path="collections/:collectionId" element={ SetPath()} lightMode={lightMode} SetLoader={SetLoader} data={filteredData} diff --git a/src/componets/AddItem.js b/src/componets/AddItem.js index e17ac16..848549c 100644 --- a/src/componets/AddItem.js +++ b/src/componets/AddItem.js @@ -49,7 +49,7 @@ const AddItem = ({
-

New bookmark

+

New Link

* Link: diff --git a/src/componets/EditItem.js b/src/componets/EditItem.js index e708d52..26f637e 100644 --- a/src/componets/EditItem.js +++ b/src/componets/EditItem.js @@ -66,7 +66,7 @@ const EditItem = ({
-

Edit bookmark

+

Edit Link

diff --git a/src/componets/Filters.js b/src/componets/Filters.js index cc74181..cf97580 100644 --- a/src/componets/Filters.js +++ b/src/componets/Filters.js @@ -33,11 +33,11 @@ const Filters = ({
-

Filter search

+

Filter Results

-

Sort by

+

Sort By

diff --git a/src/routes/Collections.js b/src/routes/Collections.js index a08f196..65900fc 100644 --- a/src/routes/Collections.js +++ b/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 (
SetPath()} lightMode={lightMode} data={dataWithMatchingTag} tags={tags} diff --git a/src/routes/Tags.js b/src/routes/Tags.js index 1d2abb7..35e793e 100644 --- a/src/routes/Tags.js +++ b/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 (
SetPath()} lightMode={lightMode} data={dataWithMatchingTag} tags={tags} diff --git a/src/styles/App.css b/src/styles/App.css index 7a8c882..2f65e1b 100644 --- a/src/styles/App.css +++ b/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; @@ -93,4 +95,4 @@ input:focus { .select { font-family: "Font Awesome 5 Free" -} \ No newline at end of file +} diff --git a/src/styles/List.css b/src/styles/List.css index 3e7cbb6..7d2cd37 100644 --- a/src/styles/List.css +++ b/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; } diff --git a/src/styles/index.css b/src/styles/index.css index dce6689..ba98e3b 100644 --- a/src/styles/index.css +++ b/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); }