improved UI

components/ModalContent/DeleteCollectionModal.tsx

@@ -68,7 +68,7 @@ export default function DeleteCollectionModal({
         {permissions === true ? "Delete" : "Leave"} Collection
       </p>
 
-      <div className="divider my-3"></div>
+      <div className="divider mb-3 mt-1"></div>
 
       <div className="flex flex-col gap-3">
         {permissions === true ? (

components/ModalContent/DeleteLinkModal.tsx

@@ -44,7 +44,7 @@ export default function DeleteLinkModal({ onClose, activeLink }: Props) {
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin text-red-500">Delete Link</p>
 
-      <div className="divider my-3"></div>
+      <div className="divider mb-3 mt-1"></div>
 
       <div className="flex flex-col gap-3">
         <p>Are you sure you want to delete this Link?</p>

components/ModalContent/EditCollectionModal.tsx

@@ -51,7 +51,7 @@ export default function EditCollectionModal({
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin">Edit Collection Info</p>
 
-      <div className="divider my-3"></div>
+      <div className="divider mb-3 mt-1"></div>
 
       <div className="flex flex-col gap-3">
         <div className="flex flex-col sm:flex-row gap-3">

components/ModalContent/EditCollectionSharingModal.tsx

@@ -99,7 +99,7 @@ export default function EditCollectionSharingModal({
         {permissions === true ? "Share and Collaborate" : "Team"}
       </p>
 
-      <div className="divider my-3"></div>
+      <div className="divider mb-3 mt-1"></div>
 
       <div className="flex flex-col gap-3">
         {permissions === true && (
@@ -203,7 +203,7 @@ export default function EditCollectionSharingModal({
 
             <div className="flex flex-col gap-3 rounded-md">
               <div
-                className="relative border px-2 rounded-xl border-neutral-content bg-base-200 flex min-h-[7rem] sm:min-h-[5rem] gap-2 justify-between"
+                className="relative border px-2 rounded-xl border-neutral-content bg-base-200 flex min-h-[6rem] sm:min-h-[4.1rem] gap-2 justify-between"
                 title={`@${collectionOwner.username} is the owner of this collection.`}
               >
                 <div className="flex items-center gap-2 w-full">

components/ModalContent/EditLinkModal.tsx

@@ -80,7 +80,7 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin">Edit Link</p>
 
-      <div className="divider my-3"></div>
+      <div className="divider mb-3 mt-1"></div>
 
       {link.url ? (
         <Link

components/ModalContent/NewCollectionModal.tsx

@@ -56,7 +56,7 @@ export default function NewCollectionModal({ onClose }: Props) {
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin">Create a New Collection</p>
 
-      <div className="divider my-3"></div>
+      <div className="divider mb-3 mt-1"></div>
 
       <div className="flex flex-col gap-3">
         <div className="flex flex-col sm:flex-row gap-3">

components/ModalContent/NewLinkModal.tsx

@@ -120,7 +120,7 @@ export default function NewLinkModal({ onClose }: Props) {
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin">Create a New Link</p>
 
-      <div className="divider my-3"></div>
+      <div className="divider mb-3 mt-1"></div>
 
       <div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
         <div className="sm:col-span-3 col-span-5">

components/ModalContent/UploadFileModal.tsx

@@ -104,20 +104,31 @@ export default function UploadFileModal({ onClose }: Props) {
   const submit = async () => {
     if (!submitLoader && file) {
       let fileType: ArchivedFormat | null = null;
+      let linkType: "url" | "image" | "pdf" | null = null;
 
-      if (file?.type === "image/jpg" || file.type === "image/jpeg")
+      if (file?.type === "image/jpg" || file.type === "image/jpeg") {
         fileType = ArchivedFormat.jpeg;
-      else if (file.type === "image/png") fileType = ArchivedFormat.png;
-      else if (file.type === "application/pdf") fileType = ArchivedFormat.pdf;
+        linkType = "image";
+      } else if (file.type === "image/png") {
+        fileType = ArchivedFormat.png;
+        linkType = "image";
+      } else if (file.type === "application/pdf") {
+        fileType = ArchivedFormat.pdf;
+        linkType = "pdf";
+      }
 
-      if (fileType !== null) {
+      if (fileType !== null && linkType !== null) {
         setSubmitLoader(true);
 
         let response;
 
         const load = toast.loading("Creating...");
 
-        response = await addLink(link);
+        response = await addLink({
+          ...link,
+          type: linkType,
+          name: link.name ? link.name : file.name.replace(/\.[^/.]+$/, ""),
+        });
 
         toast.dismiss(load);
 
@@ -150,7 +161,7 @@ export default function UploadFileModal({ onClose }: Props) {
       <div className="flex gap-2 items-start">
         <p className="text-xl font-thin">Upload File</p>
       </div>
-      <div className="divider my-3"></div>
+      <div className="divider mb-3 mt-1"></div>
       <div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
         <div className="sm:col-span-3 col-span-5">
           <p className="mb-2">File</p>