added settings modal UI

components/Checkbox.tsx

@@ -5,12 +5,15 @@ import { ChangeEventHandler } from "react";
 type Props = {
   label: string;
   state: boolean;
+  className?: string;
   onClick: ChangeEventHandler<HTMLInputElement>;
 };
 
-export default function Checkbox({ label, state, onClick }: Props) {
+export default function Checkbox({ label, state, className, onClick }: Props) {
   return (
-    <label className="cursor-pointer flex items-center gap-2 text-sky-500">
+    <label
+      className={`cursor-pointer flex items-center gap-2 text-sky-500 ${className}`}
+    >
       <input
         type="checkbox"
         checked={state}

components/Modal/AddCollection.tsx

@@ -46,7 +46,7 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
 
   return (
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
-      <p className="font-bold text-sky-300 mb-3 text-center">New Collection</p>
+      <p className="text-xl text-sky-500 mb-2 text-center">New Collection</p>
 
       <div className="flex flex-col sm:flex-row gap-3">
         <div className="w-full">

components/Modal/AddLink.tsx

@@ -78,7 +78,7 @@ export default function AddLink({ toggleLinkModal }: Props) {
 
   return (
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
-      <p className="font-bold text-sky-300 mb-2 text-center">New Link</p>
+      <p className="text-xl text-sky-500 mb-2 text-center">New Link</p>
 
       <div className="grid sm:grid-cols-2 gap-3">
         <div>

components/Modal/DeleteCollection.tsx

@@ -11,12 +11,12 @@ import useCollectionStore from "@/store/collections";
 import { useRouter } from "next/router";
 
 type Props = {
-  toggleCollectionModal: Function;
+  toggleDeleteCollectionModal: Function;
   collection: ExtendedCollection;
 };
 
 export default function AddCollection({
-  toggleCollectionModal,
+  toggleDeleteCollectionModal,
   collection,
 }: Props) {
   const [inputField, setInputField] = useState("");
@@ -28,14 +28,14 @@ export default function AddCollection({
   const submit = async () => {
     const response = await removeCollection(collection.id);
     if (response) {
-      toggleCollectionModal();
+      toggleDeleteCollectionModal();
       router.push("/collections");
     }
   };
 
   return (
     <div className="flex flex-col gap-3 sm:w-[33rem] w-72">
-      <p className="font-bold text-sky-300 text-center">Delete Collection</p>
+      <p className="text-xl text-sky-500 mb-2 text-center">Delete Collection</p>
 
       <p className="text-sky-900 select-none text-center">
         To confirm, type "

components/Modal/EditCollection.tsx

@@ -54,7 +54,7 @@ export default function EditCollection({
 
   return (
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
-      <p className="font-bold text-sky-300 mb-2 text-center">Edit Collection</p>
+      <p className="text-xl text-sky-500 mb-2 text-center">Edit Collection</p>
 
       <div className="flex flex-col sm:flex-row gap-3">
         <div className="w-full">
@@ -297,7 +297,7 @@ export default function EditCollection({
         <Modal toggleModal={toggleDeleteCollectionModal}>
           <DeleteCollection
             collection={activeCollection}
-            toggleCollectionModal={toggleDeleteCollectionModal}
+            toggleDeleteCollectionModal={toggleDeleteCollectionModal}
           />
         </Modal>
       ) : null}

components/Modal/EditLink.tsx

@@ -49,7 +49,7 @@ export default function EditLink({ toggleLinkModal, link }: Props) {
 
   return (
     <div className="flex flex-col gap-3 sm:w-96 w-80">
-      <p className="font-bold text-sky-300 mb-2 text-center">Edit Link</p>
+      <p className="text-xl text-sky-500 mb-2 text-center">Edit Link</p>
       <p className="text-sky-700">
         <b>{shortendURL}</b> | {link.title}
       </p>

components/Navbar.tsx

@@ -56,6 +56,7 @@ export default function () {
   };
 
   return (
+    // lg:ml-64 xl:ml-80
     <div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 border-b">
       <div
         onClick={toggleSidebar}