From a36769c5213b5f2a3c9e9b627c278a5589c20706 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Fri, 1 Dec 2023 16:29:17 -0500
Subject: [PATCH] many bug fixes + add links and collections together + more
 changes

---
 components/CollectionCard.tsx                 |  2 -
 components/DashboardItem.tsx                  |  2 +-
 .../InputSelect/CollectionSelection.tsx       | 12 ++++--
 components/LinkCard.tsx                       | 18 ---------
 components/Modal/Link/PreservedFormats.tsx    |  4 +-
 components/Modals/DeleteCollectionModal.tsx   | 18 ++++-----
 components/Modals/EditCollectionModal.tsx     |  9 ++---
 .../Modals/EditCollectionSharingModal.tsx     | 25 ++++++------
 components/Modals/EditLinkModal.tsx           |  4 +-
 components/Modals/NewCollectionModal.tsx      | 26 ++++++-------
 components/Modals/NewLinkModal.tsx            | 31 +++++++--------
 components/Navbar.tsx                         |  4 +-
 components/NoLinksFound.tsx                   | 21 +++++-----
 components/PublicPage/PublicLinkCard.tsx      |  2 +-
 components/SearchBar.tsx                      | 12 +++---
 components/SettingsSidebar.tsx                | 12 +++---
 components/Sidebar.tsx                        | 14 +++----
 components/SubmitButton.tsx                   | 10 ++---
 pages/collections/[id].tsx                    | 21 +++++-----
 pages/collections/index.tsx                   |  9 +----
 pages/dashboard.tsx                           | 39 ++++++++++++-------
 pages/links/[id].tsx                          |  2 +-
 pages/public/collections/[id].tsx             |  8 ----
 pages/public/links/[id].tsx                   |  8 +++-
 pages/settings/account.tsx                    | 36 ++++++++++-------
 pages/settings/appearance.tsx                 |  2 +-
 tailwind.config.js                            |  8 ++--
 27 files changed, 169 insertions(+), 190 deletions(-)

diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx
index 8bb0f94..5b73735 100644
--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@@ -5,7 +5,6 @@ import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import { useEffect, useState } from "react";
 import ProfilePhoto from "./ProfilePhoto";
 import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
-import useModalStore from "@/store/modals";
 import usePermissions from "@/hooks/usePermissions";
 import useLocalSettingsStore from "@/store/localSettings";
 import getPublicUserData from "@/lib/client/getPublicUserData";
@@ -20,7 +19,6 @@ type Props = {
 };
 
 export default function CollectionCard({ collection, className }: Props) {
-  const { setModal } = useModalStore();
   const { settings } = useLocalSettingsStore();
   const { account } = useAccountStore();
 
diff --git a/components/DashboardItem.tsx b/components/DashboardItem.tsx
index acbd1ee..70ffd55 100644
--- a/components/DashboardItem.tsx
+++ b/components/DashboardItem.tsx
@@ -10,7 +10,7 @@ type Props = {
 export default function dashboardItem({ name, value, icon }: Props) {
   return (
     <div className="flex gap-4 items-end">
-      <div className="p-4 bg-secondary/30 rounded-xl select-none">
+      <div className="p-4 bg-primary/20 rounded-xl select-none">
         <FontAwesomeIcon icon={icon} className="w-8 h-8 text-primary" />
       </div>
       <div className="flex flex-col justify-center">
diff --git a/components/InputSelect/CollectionSelection.tsx b/components/InputSelect/CollectionSelection.tsx
index 1ef948d..b514f79 100644
--- a/components/InputSelect/CollectionSelection.tsx
+++ b/components/InputSelect/CollectionSelection.tsx
@@ -1,9 +1,9 @@
 import useCollectionStore from "@/store/collections";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import Select from "react-select";
 import { styles } from "./styles";
 import { Options } from "./types";
+import CreatableSelect from "react-select/creatable";
 
 type Props = {
   onChange: any;
@@ -13,9 +13,14 @@ type Props = {
         value?: number;
       }
     | undefined;
+  id?: string;
 };
 
-export default function CollectionSelection({ onChange, defaultValue }: Props) {
+export default function CollectionSelection({
+  onChange,
+  defaultValue,
+  id,
+}: Props) {
   const { collections } = useCollectionStore();
   const router = useRouter();
 
@@ -43,7 +48,8 @@ export default function CollectionSelection({ onChange, defaultValue }: Props) {
   }, [collections]);
 
   return (
-    <Select
+    <CreatableSelect
+      key={id || "key"}
       isClearable={false}
       className="react-select-container"
       classNamePrefix="react-select"
diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
index bce3a51..5d2d9e7 100644
--- a/components/LinkCard.tsx
+++ b/components/LinkCard.tsx
@@ -10,11 +10,9 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useEffect, useState } from "react";
 import Image from "next/image";
-import Dropdown from "./Dropdown";
 import useLinkStore from "@/store/links";
 import useCollectionStore from "@/store/collections";
 import useAccountStore from "@/store/account";
-import useModalStore from "@/store/modals";
 import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
 import usePermissions from "@/hooks/usePermissions";
 import { toast } from "react-hot-toast";
@@ -30,22 +28,11 @@ type Props = {
   className?: string;
 };
 
-type DropdownTrigger =
-  | {
-      x: number;
-      y: number;
-    }
-  | false;
-
 export default function LinkCard({ link, count, className }: Props) {
-  const { setModal } = useModalStore();
-
   const router = useRouter();
 
   const permissions = usePermissions(link.collection.id as number);
 
-  const [expandDropdown, setExpandDropdown] = useState<DropdownTrigger>(false);
-
   const { collections } = useCollectionStore();
 
   const { links } = useLinkStore();
@@ -82,8 +69,6 @@ export default function LinkCard({ link, count, className }: Props) {
 
     const load = toast.loading("Applying...");
 
-    setExpandDropdown(false);
-
     const response = await updateLink({
       ...link,
       pinnedBy: isAlreadyPinned ? undefined : [{ id: account.id }],
@@ -98,8 +83,6 @@ export default function LinkCard({ link, count, className }: Props) {
   const updateArchive = async () => {
     const load = toast.loading("Sending request...");
 
-    setExpandDropdown(false);
-
     const response = await fetch(`/api/v1/links/${link.id}/archive`, {
       method: "PUT",
     });
@@ -122,7 +105,6 @@ export default function LinkCard({ link, count, className }: Props) {
     toast.dismiss(load);
 
     response.ok && toast.success(`Link Deleted.`);
-    setExpandDropdown(false);
   };
 
   const url = isValidUrl(link.url) ? new URL(link.url) : undefined;
diff --git a/components/Modal/Link/PreservedFormats.tsx b/components/Modal/Link/PreservedFormats.tsx
index 933e7d1..04a4ad1 100644
--- a/components/Modal/Link/PreservedFormats.tsx
+++ b/components/Modal/Link/PreservedFormats.tsx
@@ -93,7 +93,7 @@ export default function PreservedFormats() {
       {link?.screenshotPath && link?.screenshotPath !== "pending" ? (
         <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
           <div className="flex gap-2 items-center">
-            <div className="text-white bg-secondary p-2 rounded-l-md">
+            <div className="text-white bg-primary p-2 rounded-l-md">
               <FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
             </div>
 
@@ -128,7 +128,7 @@ export default function PreservedFormats() {
       {link?.pdfPath && link.pdfPath !== "pending" ? (
         <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
           <div className="flex gap-2 items-center">
-            <div className="text-white bg-secondary p-2 rounded-l-md">
+            <div className="text-white bg-primary p-2 rounded-l-md">
               <FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
             </div>
 
diff --git a/components/Modals/DeleteCollectionModal.tsx b/components/Modals/DeleteCollectionModal.tsx
index 70b6d7b..43d99e9 100644
--- a/components/Modals/DeleteCollectionModal.tsx
+++ b/components/Modals/DeleteCollectionModal.tsx
@@ -28,7 +28,15 @@ export default function DeleteCollectionModal({
 }: Props) {
   const modal = document.getElementById(modalId);
 
+  const [collection, setCollection] =
+    useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
+
   useEffect(() => {
+    modal?.scrollTo(0, 0);
+
+    setCollection(activeCollection);
+    setInputField("");
+
     modal?.addEventListener("close", () => {
       onClose();
     });
@@ -40,14 +48,6 @@ export default function DeleteCollectionModal({
     };
   }, [isOpen]);
 
-  const [collection, setCollection] =
-    useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
-
-  useEffect(() => {
-    setCollection(activeCollection);
-    setInputField("");
-  }, [isOpen]);
-
   const [submitLoader, setSubmitLoader] = useState(false);
   const { removeCollection } = useCollectionStore();
   const router = useRouter();
@@ -85,7 +85,7 @@ export default function DeleteCollectionModal({
   return (
     <dialog
       id={modalId}
-      className="modal backdrop-blur-sm overflow-y-auto"
+      className="modal backdrop-blur-sm overflow-y-auto p-5"
       open={isOpen}
     >
       <Toaster
diff --git a/components/Modals/EditCollectionModal.tsx b/components/Modals/EditCollectionModal.tsx
index ce1456c..752d32f 100644
--- a/components/Modals/EditCollectionModal.tsx
+++ b/components/Modals/EditCollectionModal.tsx
@@ -23,6 +23,9 @@ export default function EditCollectionModal({
   const modal = document.getElementById(modalId);
 
   useEffect(() => {
+    modal?.scrollTo(0, 0);
+    setCollection(activeCollection);
+
     modal?.addEventListener("close", () => {
       onClose();
     });
@@ -37,10 +40,6 @@ export default function EditCollectionModal({
   const [collection, setCollection] =
     useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
 
-  useEffect(() => {
-    setCollection(activeCollection);
-  }, [isOpen]);
-
   const [submitLoader, setSubmitLoader] = useState(false);
   const { updateCollection } = useCollectionStore();
 
@@ -71,7 +70,7 @@ export default function EditCollectionModal({
   return (
     <dialog
       id={modalId}
-      className="modal backdrop-blur-sm overflow-y-auto"
+      className="modal backdrop-blur-sm overflow-y-auto p-5"
       open={isOpen}
     >
       <Toaster
diff --git a/components/Modals/EditCollectionSharingModal.tsx b/components/Modals/EditCollectionSharingModal.tsx
index a8271a0..a4f96a4 100644
--- a/components/Modals/EditCollectionSharingModal.tsx
+++ b/components/Modals/EditCollectionSharingModal.tsx
@@ -31,6 +31,16 @@ export default function EditCollectionSharingModal({
   const modal = document.getElementById(modalId);
 
   useEffect(() => {
+    const fetchOwner = async () => {
+      const owner = await getPublicUserData(collection.ownerId as number);
+      setCollectionOwner(owner);
+    };
+
+    fetchOwner();
+
+    modal?.scrollTo(0, 0);
+    setCollection(activeCollection);
+
     modal?.addEventListener("close", () => {
       onClose();
     });
@@ -45,10 +55,6 @@ export default function EditCollectionSharingModal({
   const [collection, setCollection] =
     useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
 
-  useEffect(() => {
-    setCollection(activeCollection);
-  }, [isOpen]);
-
   const [submitLoader, setSubmitLoader] = useState(false);
   const { updateCollection } = useCollectionStore();
 
@@ -92,15 +98,6 @@ export default function EditCollectionSharingModal({
     image: "",
   });
 
-  useEffect(() => {
-    const fetchOwner = async () => {
-      const owner = await getPublicUserData(collection.ownerId as number);
-      setCollectionOwner(owner);
-    };
-
-    fetchOwner();
-  }, []);
-
   const setMemberState = (newMember: Member) => {
     if (!collection) return null;
 
@@ -115,7 +112,7 @@ export default function EditCollectionSharingModal({
   return (
     <dialog
       id={modalId}
-      className="modal backdrop-blur-sm overflow-y-auto"
+      className="modal backdrop-blur-sm overflow-y-auto p-5"
       open={isOpen}
     >
       <Toaster
diff --git a/components/Modals/EditLinkModal.tsx b/components/Modals/EditLinkModal.tsx
index 82e4190..a90e12a 100644
--- a/components/Modals/EditLinkModal.tsx
+++ b/components/Modals/EditLinkModal.tsx
@@ -58,6 +58,8 @@ export default function EditLinkModal({
   };
 
   useEffect(() => {
+    modal?.scrollTo(0, 0);
+
     setLink(activeLink);
 
     modal?.addEventListener("close", () => {
@@ -97,7 +99,7 @@ export default function EditLinkModal({
   return (
     <dialog
       id={modalId}
-      className="modal backdrop-blur-sm overflow-y-auto"
+      className="modal backdrop-blur-sm overflow-y-auto p-5"
       open={isOpen}
     >
       <Toaster
diff --git a/components/Modals/NewCollectionModal.tsx b/components/Modals/NewCollectionModal.tsx
index 4e02609..d604ebd 100644
--- a/components/Modals/NewCollectionModal.tsx
+++ b/components/Modals/NewCollectionModal.tsx
@@ -20,18 +20,6 @@ export default function NewCollectionModal({
 }: Props) {
   const modal = document.getElementById(modalId);
 
-  useEffect(() => {
-    modal?.addEventListener("close", () => {
-      onClose();
-    });
-
-    return () => {
-      modal?.addEventListener("close", () => {
-        onClose();
-      });
-    };
-  }, [isOpen]);
-
   const initial = {
     name: "",
     description: "",
@@ -41,7 +29,19 @@ export default function NewCollectionModal({
   const [collection, setCollection] = useState<Partial<Collection>>(initial);
 
   useEffect(() => {
+    modal?.scrollTo(0, 0);
+
+    modal?.addEventListener("close", () => {
+      onClose();
+    });
+
     setCollection(initial);
+
+    return () => {
+      modal?.addEventListener("close", () => {
+        onClose();
+      });
+    };
   }, [isOpen]);
 
   const [submitLoader, setSubmitLoader] = useState(false);
@@ -74,7 +74,7 @@ export default function NewCollectionModal({
   return (
     <dialog
       id={modalId}
-      className="modal backdrop-blur-sm overflow-y-auto"
+      className="modal backdrop-blur-sm overflow-y-auto p-5"
       open={isOpen}
     >
       <Toaster
diff --git a/components/Modals/NewLinkModal.tsx b/components/Modals/NewLinkModal.tsx
index 6fb9b66..1674314 100644
--- a/components/Modals/NewLinkModal.tsx
+++ b/components/Modals/NewLinkModal.tsx
@@ -43,6 +43,8 @@ export default function NewLinkModal({ modalId, isOpen, onClose }: Props) {
   const { addLink } = useLinkStore();
   const [submitLoader, setSubmitLoader] = useState(false);
 
+  const [resetCollectionSelection, setResetCollectionSelection] = useState("");
+
   const [optionsExpanded, setOptionsExpanded] = useState(false);
 
   const router = useRouter();
@@ -66,6 +68,10 @@ export default function NewLinkModal({ modalId, isOpen, onClose }: Props) {
   };
 
   useEffect(() => {
+    setResetCollectionSelection(Date.now().toString());
+    console.log(link);
+
+    modal?.scrollTo(0, 0);
     setOptionsExpanded(false);
     if (router.query.id) {
       const currentCollection = collections.find(
@@ -89,7 +95,6 @@ export default function NewLinkModal({ modalId, isOpen, onClose }: Props) {
       setLink({
         ...initial,
         collection: {
-          // id: ,
           name: "Unorganized",
           ownerId: data?.user.id as number,
         },
@@ -120,7 +125,7 @@ export default function NewLinkModal({ modalId, isOpen, onClose }: Props) {
 
       if (response.ok) {
         toast.success(`Created!`);
-        (document.getElementById(modalId) as any).close();
+        (document?.getElementById(modalId) as any)?.close();
       } else toast.error(response.data as string);
 
       setSubmitLoader(false);
@@ -132,7 +137,7 @@ export default function NewLinkModal({ modalId, isOpen, onClose }: Props) {
   return (
     <dialog
       id={modalId}
-      className="modal backdrop-blur-sm overflow-y-auto"
+      className="modal backdrop-blur-sm overflow-y-auto p-5"
       open={isOpen}
     >
       <Toaster
@@ -166,21 +171,11 @@ export default function NewLinkModal({ modalId, isOpen, onClose }: Props) {
             {link.collection.name ? (
               <CollectionSelection
                 onChange={setCollection}
-                // defaultValue={{
-                //   label: link.collection.name,
-                //   value: link.collection.id,
-                // }}
-                defaultValue={
-                  link.collection.id
-                    ? {
-                        value: link.collection.id,
-                        label: link.collection.name,
-                      }
-                    : {
-                        value: null as unknown as number,
-                        label: "Unorganized",
-                      }
-                }
+                defaultValue={{
+                  label: link.collection.name,
+                  value: link.collection.id,
+                }}
+                id={resetCollectionSelection}
               />
             ) : null}
           </div>
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index b710b28..07598cd 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -165,12 +165,12 @@ export default function Navbar() {
       <NewLinkModal
         isOpen={newLinkModal}
         onClose={() => setNewLinkModal(false)}
-        modalId="new-link-modal"
+        modalId="new-link-modal-nav"
       />
       <NewCollectionModal
         isOpen={newCollectionModal}
         onClose={() => setNewCollectionModal(false)}
-        modalId="new-collection-modal"
+        modalId="new-collection-modal-nav"
       />
     </div>
   );
diff --git a/components/NoLinksFound.tsx b/components/NoLinksFound.tsx
index 1ab50a7..bfcc004 100644
--- a/components/NoLinksFound.tsx
+++ b/components/NoLinksFound.tsx
@@ -1,14 +1,14 @@
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import React from "react";
-import useModalStore from "@/store/modals";
+import React, { useState } from "react";
+import NewLinkModal from "./Modals/NewLinkModal";
 
 type Props = {
   text?: string;
 };
 
 export default function NoLinksFound({ text }: Props) {
-  const { setModal } = useModalStore();
+  const [newLinkModal, setNewLinkModal] = useState(false);
 
   return (
     <div className="border border-solid border-neutral-content w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-base-200">
@@ -18,23 +18,24 @@ export default function NoLinksFound({ text }: Props) {
       <div className="text-center w-full mt-4">
         <div
           onClick={() => {
-            setModal({
-              modal: "LINK",
-              state: true,
-              method: "CREATE",
-            });
+            setNewLinkModal(true);
           }}
-          className="inline-flex gap-1 relative w-[11.4rem] items-center font-semibold select-none cursor-pointer p-2 px-3 rounded-full dark:hover:bg-sky-600 text-white bg-sky-700 hover:bg-sky-600 duration-100 group"
+          className="inline-flex gap-1 relative w-[11rem] items-center btn btn-accent text-white group"
         >
           <FontAwesomeIcon
             icon={faPlus}
-            className="w-5 h-5 group-hover:ml-[4.325rem] absolute duration-100"
+            className="w-5 h-5 left-4 group-hover:ml-[4rem] absolute duration-100"
           />
           <span className="group-hover:opacity-0 text-right w-full duration-100">
             Create New Link
           </span>
         </div>
       </div>
+      <NewLinkModal
+        isOpen={newLinkModal}
+        onClose={() => setNewLinkModal(false)}
+        modalId="new-link-modal"
+      />
     </div>
   );
 }
diff --git a/components/PublicPage/PublicLinkCard.tsx b/components/PublicPage/PublicLinkCard.tsx
index 74b796e..92153f7 100644
--- a/components/PublicPage/PublicLinkCard.tsx
+++ b/components/PublicPage/PublicLinkCard.tsx
@@ -57,7 +57,7 @@ export default function LinkCard({ link, count }: Props) {
                 <Link
                   href={"/public/collections/20?q=" + e.name}
                   key={i}
-                  className="px-2 bg-secondary text-white text-xs rounded-md cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
+                  className="btn btn-xs btn-outline truncate max-w-[19rem]"
                 >
                   {e.name}
                 </Link>
diff --git a/components/SearchBar.tsx b/components/SearchBar.tsx
index cc390e1..9df96d9 100644
--- a/components/SearchBar.tsx
+++ b/components/SearchBar.tsx
@@ -1,6 +1,6 @@
 import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { toast } from "react-hot-toast";
 
@@ -11,11 +11,13 @@ type Props = {
 export default function SearchBar({ placeholder }: Props) {
   const router = useRouter();
 
-  const routeQuery = router.query.q;
+  const [searchQuery, setSearchQuery] = useState("");
 
-  const [searchQuery, setSearchQuery] = useState(
-    routeQuery ? decodeURIComponent(routeQuery as string) : ""
-  );
+  useEffect(() => {
+    router.query.q
+      ? setSearchQuery(decodeURIComponent(router.query.q as string))
+      : setSearchQuery("");
+  }, [router.query.q]);
 
   return (
     <div className="flex items-center relative group">
diff --git a/components/SettingsSidebar.tsx b/components/SettingsSidebar.tsx
index f3d5c1f..d846e9d 100644
--- a/components/SettingsSidebar.tsx
+++ b/components/SettingsSidebar.tsx
@@ -44,7 +44,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`${
               active === `/settings/account`
-                ? "bg-secondary/30"
+                ? "bg-primary/20"
                 : "hover:bg-neutral/20"
             } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
@@ -58,7 +58,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`${
               active === `/settings/appearance`
-                ? "bg-secondary/30"
+                ? "bg-primary/20"
                 : "hover:bg-neutral/20"
             } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
@@ -75,7 +75,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`${
               active === `/settings/archive`
-                ? "bg-secondary/30"
+                ? "bg-primary/20"
                 : "hover:bg-neutral/20"
             } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
@@ -92,7 +92,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`${
               active === `/settings/api`
-                ? "bg-secondary/30"
+                ? "bg-primary/20"
                 : "hover:bg-neutral/20"
             } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
@@ -106,7 +106,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`${
               active === `/settings/password`
-                ? "bg-secondary/30"
+                ? "bg-primary/20"
                 : "hover:bg-neutral/20"
             } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
@@ -121,7 +121,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
             <div
               className={`${
                 active === `/settings/billing`
-                  ? "bg-secondary/30"
+                  ? "bg-primary/20"
                   : "hover:bg-neutral/20"
               } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
             >
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 91c7719..6f5693d 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -60,9 +60,7 @@ export default function Sidebar({ className }: { className?: string }) {
         <Link href={`/dashboard`}>
           <div
             className={`${
-              active === `/dashboard`
-                ? "bg-secondary/30"
-                : "hover:bg-neutral/20"
+              active === `/dashboard` ? "bg-primary/20" : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
           >
             <FontAwesomeIcon
@@ -76,7 +74,7 @@ export default function Sidebar({ className }: { className?: string }) {
         <Link href={`/links`}>
           <div
             className={`${
-              active === `/links` ? "bg-secondary/30" : "hover:bg-neutral/20"
+              active === `/links` ? "bg-primary/20" : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
           >
             <FontAwesomeIcon
@@ -91,7 +89,7 @@ export default function Sidebar({ className }: { className?: string }) {
           <div
             className={`${
               active === `/collections`
-                ? "bg-secondary/30"
+                ? "bg-primary/20"
                 : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
           >
@@ -107,7 +105,7 @@ export default function Sidebar({ className }: { className?: string }) {
           <div
             className={`${
               active === `/links/pinned`
-                ? "bg-secondary/30"
+                ? "bg-primary/20"
                 : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
           >
@@ -154,7 +152,7 @@ export default function Sidebar({ className }: { className?: string }) {
                       <div
                         className={`${
                           active === `/collections/${e.id}`
-                            ? "bg-secondary/30"
+                            ? "bg-primary/20"
                             : "hover:bg-neutral/20"
                         } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
                       >
@@ -222,7 +220,7 @@ export default function Sidebar({ className }: { className?: string }) {
                       <div
                         className={`${
                           active === `/tags/${e.id}`
-                            ? "bg-secondary/30"
+                            ? "bg-primary/20"
                             : "hover:bg-neutral/20"
                         } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
                       >
diff --git a/components/SubmitButton.tsx b/components/SubmitButton.tsx
index fbcd8b8..d33ce1f 100644
--- a/components/SubmitButton.tsx
+++ b/components/SubmitButton.tsx
@@ -21,17 +21,15 @@ export default function SubmitButton({
   return (
     <button
       type={type ? type : undefined}
-      className={`text-white flex items-center gap-2 py-2 px-5 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit ${
-        loading
-          ? "bg-sky-600 cursor-auto"
-          : "bg-sky-700 hover:bg-sky-600 cursor-pointer"
-      } ${className || ""}`}
+      className={`btn btn-primary text-white tracking-wider w-fit flex items-center gap-2 ${
+        className || ""
+      }`}
       onClick={() => {
         if (!loading && onClick) onClick();
       }}
     >
       {icon && <FontAwesomeIcon icon={icon} className="h-5" />}
-      <p className="text-center w-full">{label}</p>
+      <p>{label}</p>
     </button>
   );
 }
diff --git a/pages/collections/[id].tsx b/pages/collections/[id].tsx
index af6b385..178003e 100644
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@@ -9,7 +9,6 @@ import { useEffect, useState } from "react";
 import MainLayout from "@/layouts/MainLayout";
 import ProfilePhoto from "@/components/ProfilePhoto";
 import SortDropdown from "@/components/SortDropdown";
-import useModalStore from "@/store/modals";
 import useLinks from "@/hooks/useLinks";
 import usePermissions from "@/hooks/usePermissions";
 import NoLinksFound from "@/components/NoLinksFound";
@@ -18,10 +17,9 @@ import useAccountStore from "@/store/account";
 import getPublicUserData from "@/lib/client/getPublicUserData";
 import EditCollectionModal from "@/components/Modals/EditCollectionModal";
 import EditCollectionSharingModal from "@/components/Modals/EditCollectionSharingModal";
+import DeleteCollectionModal from "@/components/Modals/DeleteCollectionModal";
 
 export default function Index() {
-  const { setModal } = useModalStore();
-
   const { settings } = useLocalSettingsStore();
 
   const router = useRouter();
@@ -76,6 +74,7 @@ export default function Index() {
   const [editCollectionModal, setEditCollectionModal] = useState(false);
   const [editCollectionSharingModal, setEditCollectionSharingModal] =
     useState(false);
+  const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
 
   return (
     <MainLayout>
@@ -206,15 +205,7 @@ export default function Index() {
                       tabIndex={0}
                       onClick={() => {
                         (document?.activeElement as HTMLElement)?.blur();
-                        activeCollection &&
-                          setModal({
-                            modal: "COLLECTION",
-                            state: true,
-                            method: "UPDATE",
-                            isOwner: permissions === true,
-                            active: activeCollection,
-                            defaultIndex: permissions === true ? 2 : 1,
-                          });
+                        setDeleteCollectionModal(true);
                       }}
                     >
                       {permissions === true
@@ -254,6 +245,12 @@ export default function Index() {
             modalId={"edit-collection-sharing-modal" + activeCollection.id}
             activeCollection={activeCollection}
           />
+          <DeleteCollectionModal
+            isOpen={deleteCollectionModal}
+            onClose={() => setDeleteCollectionModal(false)}
+            modalId={"delete-collection-modal" + activeCollection.id}
+            activeCollection={activeCollection}
+          />
         </>
       ) : undefined}
     </MainLayout>
diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx
index 5199641..325a32e 100644
--- a/pages/collections/index.tsx
+++ b/pages/collections/index.tsx
@@ -9,7 +9,6 @@ import CollectionCard from "@/components/CollectionCard";
 import { useState } from "react";
 import MainLayout from "@/layouts/MainLayout";
 import { useSession } from "next-auth/react";
-import useModalStore from "@/store/modals";
 import SortDropdown from "@/components/SortDropdown";
 import { Sort } from "@/types/global";
 import useSort from "@/hooks/useSort";
@@ -23,8 +22,6 @@ export default function Collections() {
 
   const { data } = useSession();
 
-  const { setModal } = useModalStore();
-
   useSort({ sortBy, setData: setSortedCollections, data: collections });
 
   const [newCollectionModal, setNewCollectionModal] = useState(false);
@@ -68,11 +65,7 @@ export default function Collections() {
                       tabIndex={0}
                       onClick={() => {
                         (document?.activeElement as HTMLElement)?.blur();
-                        setModal({
-                          modal: "COLLECTION",
-                          state: true,
-                          method: "CREATE",
-                        });
+                        setNewCollectionModal(true);
                       }}
                     >
                       New Collection
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index 5450342..20e01f3 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -24,6 +24,7 @@ import useModalStore from "@/store/modals";
 import { toast } from "react-hot-toast";
 import { MigrationFormat, MigrationRequest } from "@/types/global";
 import DashboardItem from "@/components/DashboardItem";
+import NewLinkModal from "@/components/Modals/NewLinkModal";
 
 export default function Dashboard() {
   const { collections } = useCollectionStore();
@@ -99,6 +100,8 @@ export default function Dashboard() {
     }
   };
 
+  const [newLinkModal, setNewLinkModal] = useState(false);
+
   return (
     <MainLayout>
       <div style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5">
@@ -187,11 +190,7 @@ export default function Dashboard() {
               <div className="text-center w-full mt-4 flex flex-wrap gap-4 justify-center">
                 <div
                   onClick={() => {
-                    setModal({
-                      modal: "LINK",
-                      state: true,
-                      method: "CREATE",
-                    });
+                    setNewLinkModal(true);
                   }}
                   className="inline-flex gap-1 relative w-[11rem] items-center btn btn-accent text-white group"
                 >
@@ -200,24 +199,28 @@ export default function Dashboard() {
                     className="w-5 h-5 left-4 group-hover:ml-[4rem] absolute duration-100"
                   />
                   <span className="group-hover:opacity-0 text-right w-full duration-100">
-                    Create New Item
+                    Create New Link
                   </span>
                 </div>
 
-                <details className="dropdown">
-                  <summary className="flex gap-2 text-sm btn btn-outline group">
+                <div className="dropdown dropdown-bottom">
+                  <div
+                    tabIndex={0}
+                    role="button"
+                    className="flex gap-2 text-sm btn btn-outline btn-neutral group"
+                    id="import-dropdown"
+                  >
                     <FontAwesomeIcon
                       icon={faFileImport}
                       className="w-5 h-5 duration-100"
-                      id="import-dropdown"
                     />
-                    <span className="duration-100" id="import-dropdown">
-                      Import Your Bookmarks
-                    </span>
-                  </summary>
+                    <p>Import From</p>
+                  </div>
                   <ul className="shadow menu dropdown-content z-[1] p-1 bg-base-200 border border-neutral-content rounded-xl mt-1 w-60">
                     <li>
                       <label
+                        tabIndex={0}
+                        role="button"
                         className="px-2 py-1 rounded-lg"
                         htmlFor="import-linkwarden-file"
                         title="JSON File"
@@ -237,6 +240,8 @@ export default function Dashboard() {
                     </li>
                     <li>
                       <label
+                        tabIndex={0}
+                        role="button"
                         className="px-2 py-1 rounded-lg"
                         htmlFor="import-html-file"
                         title="HTML File"
@@ -255,7 +260,7 @@ export default function Dashboard() {
                       </label>
                     </li>
                   </ul>
-                </details>
+                </div>
               </div>
             </div>
           )}
@@ -288,7 +293,6 @@ export default function Dashboard() {
                 className={`grid overflow-hidden 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5 w-full`}
               >
                 {links
-
                   .filter((e) => e.pinnedBy && e.pinnedBy[0])
                   .map((e, i) => <LinkCard key={i} link={e} count={i} />)
                   .slice(0, showLinks)}
@@ -311,6 +315,11 @@ export default function Dashboard() {
           )}
         </div>
       </div>
+      <NewLinkModal
+        isOpen={newLinkModal}
+        onClose={() => setNewLinkModal(false)}
+        modalId="new-link-modal"
+      />
     </MainLayout>
   );
 }
diff --git a/pages/links/[id].tsx b/pages/links/[id].tsx
index caecb7d..e12f6df 100644
--- a/pages/links/[id].tsx
+++ b/pages/links/[id].tsx
@@ -239,7 +239,7 @@ export default function Index() {
                   <Link key={i} href={`/tags/${e.id}`} className="z-10">
                     <p
                       title={e.name}
-                      className="px-2 bg-sky-200 dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
+                      className="btn btn-xs btn-outline truncate max-w-[19rem]"
                     >
                       {e.name}
                     </p>
diff --git a/pages/public/collections/[id].tsx b/pages/public/collections/[id].tsx
index 0ab99e8..1c81dd0 100644
--- a/pages/public/collections/[id].tsx
+++ b/pages/public/collections/[id].tsx
@@ -9,7 +9,6 @@ import Head from "next/head";
 import useLinks from "@/hooks/useLinks";
 import useLinkStore from "@/store/links";
 import ProfilePhoto from "@/components/ProfilePhoto";
-import useModalStore from "@/store/modals";
 import ModalManagement from "@/components/ModalManagement";
 import ToggleDarkMode from "@/components/ToggleDarkMode";
 import getPublicUserData from "@/lib/client/getPublicUserData";
@@ -37,16 +36,9 @@ const cardVariants: Variants = {
 
 export default function PublicCollections() {
   const { links } = useLinkStore();
-  const { modal, setModal } = useModalStore();
 
   const { settings } = useLocalSettingsStore();
 
-  useEffect(() => {
-    modal
-      ? (document.body.style.overflow = "hidden")
-      : (document.body.style.overflow = "auto");
-  }, [modal]);
-
   const router = useRouter();
 
   const [collectionOwner, setCollectionOwner] = useState({
diff --git a/pages/public/links/[id].tsx b/pages/public/links/[id].tsx
index 4dfadd4..5185467 100644
--- a/pages/public/links/[id].tsx
+++ b/pages/public/links/[id].tsx
@@ -236,10 +236,14 @@ export default function Index() {
                   </p>
                 </Link>
                 {link?.tags.map((e, i) => (
-                  <Link key={i} href={`/tags/${e.id}`} className="z-10">
+                  <Link
+                    key={i}
+                    href={"/public/collections/20?q=" + e.name}
+                    className="z-10"
+                  >
                     <p
                       title={e.name}
-                      className="px-2 py-1 bg-sky-200 dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
+                      className="btn btn-xs btn-outline truncate max-w-[19rem]"
                     >
                       {e.name}
                     </p>
diff --git a/pages/settings/account.tsx b/pages/settings/account.tsx
index e79c0d9..1f65a05 100644
--- a/pages/settings/account.tsx
+++ b/pages/settings/account.tsx
@@ -155,7 +155,7 @@ export default function Account() {
 
       <div className="divider my-3"></div>
 
-      <div className="flex flex-col gap-10">
+      <div className="flex flex-col gap-5">
         <div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
           <div className="flex flex-col gap-3">
             <div>
@@ -215,7 +215,7 @@ export default function Account() {
                 </div>
               )}
               <div className="absolute -bottom-3 left-0 right-0 mx-auto w-fit text-center">
-                <label className="btn btn-xs btn-secondary btn-outline bg-base-100">
+                <label className="btn btn-xs btn-neutral btn-outline bg-base-100">
                   Browse...
                   <input
                     type="file"
@@ -243,16 +243,20 @@ export default function Account() {
           <div className="flex gap-3 flex-col">
             <div>
               <p className="mb-2">Import your data from other platforms.</p>
-              <details className="dropdown">
-                <summary
-                  className="flex gap-2 text-sm btn btn-outline btn-secondary btn-xs"
+              <div className="dropdown dropdown-bottom">
+                <div
+                  tabIndex={0}
+                  role="button"
+                  className="flex gap-2 text-sm btn btn-outline btn-neutral btn-xs"
                   id="import-dropdown"
                 >
                   Import From
-                </summary>
+                </div>
                 <ul className="shadow menu dropdown-content z-[1] p-1 bg-base-200 border border-neutral-content rounded-xl mt-1 w-60">
                   <li>
                     <label
+                      tabIndex={0}
+                      role="button"
                       className="px-2 py-1 rounded-lg"
                       htmlFor="import-linkwarden-file"
                       title="JSON File"
@@ -272,6 +276,8 @@ export default function Account() {
                   </li>
                   <li>
                     <label
+                      tabIndex={0}
+                      role="button"
                       className="px-2 py-1 rounded-lg"
                       htmlFor="import-html-file"
                       title="HTML File"
@@ -290,13 +296,13 @@ export default function Account() {
                     </label>
                   </li>
                 </ul>
-              </details>
+              </div>
             </div>
 
             <div>
               <p className="mb-2">Download your data instantly.</p>
               <Link className="w-fit" href="/api/v1/migration">
-                <div className="btn btn-outline btn-secondary btn-xs">
+                <div className="btn btn-outline btn-neutral btn-xs">
                   Export Data
                 </div>
               </Link>
@@ -365,14 +371,14 @@ export default function Account() {
             You will be prompted to enter your password before the deletion
             process.
           </p>
-
-          <Link
-            href="/settings/delete"
-            className="mx-auto lg:mx-0 text-white mt-3 flex items-center gap-2 py-1 px-3 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit bg-red-500 hover:bg-red-400 cursor-pointer"
-          >
-            <p className="text-center w-full">Delete Your Account</p>
-          </Link>
         </div>
+
+        <Link
+          href="/settings/delete"
+          className="mx-auto lg:mx-0 text-white flex items-center gap-2 py-1 px-3 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit bg-red-500 hover:bg-red-400 cursor-pointer"
+        >
+          <p className="text-center w-full">Delete Your Account</p>
+        </Link>
       </div>
     </SettingsLayout>
   );
diff --git a/pages/settings/appearance.tsx b/pages/settings/appearance.tsx
index ced82a4..26fb0b2 100644
--- a/pages/settings/appearance.tsx
+++ b/pages/settings/appearance.tsx
@@ -67,7 +67,7 @@ export default function Appearance() {
 
       <div className="divider my-3"></div>
 
-      <div className="flex flex-col gap-10">
+      <div className="flex flex-col gap-5">
         <div>
           <p className="mb-3">Select Theme</p>
           <div className="flex gap-3 w-full">
diff --git a/tailwind.config.js b/tailwind.config.js
index ca54c02..e3c7cc0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,8 +6,8 @@ module.exports = {
     themes: [
       {
         light: {
-          primary: "#0ea5e9",
-          secondary: "#06b6d4",
+          primary: "#0284c7",
+          secondary: "#0891b2",
           accent: "#6366f1",
           neutral: "#6b7280",
           "neutral-content": "#d1d5db",
@@ -22,8 +22,8 @@ module.exports = {
       },
       {
         dark: {
-          primary: "#0ea5e9",
-          secondary: "#0e7490",
+          primary: "#38bdf8",
+          secondary: "#22d3ee",
           accent: "#6366f1",
           neutral: "#9ca3af",
           "neutral-content": "#404040",