improved UI

components/Modal/Collection/CollectionInfo.tsx

@@ -4,6 +4,7 @@ import { faPenToSquare, faPlus } from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
 import { CollectionIncludingMembers } from "@/types/global";
 import RequiredBadge from "../../RequiredBadge";
+import SubmitButton from "@/components/SubmitButton";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -72,18 +73,12 @@ export default function CollectionInfo({
         </div>
       </div>
 
-      <div className="flex flex-col justify-center items-center gap-2 mt-2">
-        <div
-          className="bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
-          onClick={submit}
-        >
-          <FontAwesomeIcon
-            icon={method === "CREATE" ? faPlus : faPenToSquare}
-            className="h-5"
-          />
-          {method === "CREATE" ? "Add Collection" : "Edit Collection"}
-        </div>
-      </div>
+      <SubmitButton
+        onClick={submit}
+        label={method === "CREATE" ? "Add Collection" : "Edit Collection"}
+        icon={method === "CREATE" ? faPlus : faPenToSquare}
+        className="mx-auto mt-2"
+      />
     </div>
   );
 }

components/Modal/Collection/TeamManagement.tsx

@@ -12,6 +12,7 @@ import { useSession } from "next-auth/react";
 import addMemberToCollection from "@/lib/client/addMemberToCollection";
 import ImageWithFallback from "../../ImageWithFallback";
 import Checkbox from "../../Checkbox";
+import SubmitButton from "@/components/SubmitButton";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -73,7 +74,7 @@ export default function TeamManagement({
   return (
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
       <p className="text-xl text-sky-500 mb-2 text-center w-5/6 mx-auto">
-        Sharing & Collaboration Settings
+        Sharing & Collaboration
       </p>
 
       <p className="text-sm font-bold text-sky-300">Make Public</p>
@@ -114,7 +115,7 @@ export default function TeamManagement({
 
       <p className="text-sm font-bold text-sky-300">Member Management</p>
 
-      <div className="relative">
+      <div className="flex items-center gap-2">
         <input
           value={member.user.email}
           onChange={(e) => {
@@ -134,7 +135,7 @@ export default function TeamManagement({
           }
           type="text"
           placeholder="Email"
-          className="w-full rounded-md p-3 pr-12 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+          className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
         />
 
         <div
@@ -146,9 +147,9 @@ export default function TeamManagement({
               setMemberState
             )
           }
-          className="absolute flex items-center justify-center right-2 top-2 bottom-2 bg-sky-500 hover:bg-sky-400 duration-100 text-white w-9 rounded-md cursor-pointer"
+          className="flex items-center justify-center bg-sky-500 hover:bg-sky-400 duration-100 text-white w-12 h-12 p-3 rounded-md cursor-pointer"
         >
-          <FontAwesomeIcon icon={faUserPlus} className="w-6 h-6" />
+          <FontAwesomeIcon icon={faUserPlus} className="w-5 h-5" />
         </div>
       </div>
       {collection?.members[0]?.user ? (
@@ -305,15 +306,12 @@ export default function TeamManagement({
         </>
       ) : null}
 
-      <div className="flex flex-col justify-center items-center gap-2 mt-2">
-        <div
-          className="bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
-          onClick={submit}
-        >
-          <FontAwesomeIcon icon={faPenToSquare} className="h-5" />
-          Edit Collection
-        </div>
-      </div>
+      <SubmitButton
+        onClick={submit}
+        label="Edit Collection"
+        icon={faPenToSquare}
+        className="mx-auto mt-2"
+      />
     </div>
   );
 }

components/Modal/LinkModal.tsx

@@ -5,11 +5,12 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { LinkIncludingCollectionAndTags } from "@/types/global";
 import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
 import useLinkStore from "@/store/links";
-import { faPlus, faTrashCan } from "@fortawesome/free-solid-svg-icons";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import RequiredBadge from "../RequiredBadge";
 import { useSession } from "next-auth/react";
 import useCollectionStore from "@/store/collections";
 import { useRouter } from "next/router";
+import SubmitButton from "../SubmitButton";
 
 type Props =
   | {
@@ -47,7 +48,7 @@ export default function EditLink({
         }
   );
 
-  const { updateLink, removeLink, addLink } = useLinkStore();
+  const { updateLink, addLink } = useLinkStore();
 
   const router = useRouter();
 
@@ -97,7 +98,7 @@ export default function EditLink({
     if (method === "UPDATE") response = await updateLink(link);
     else if (method === "CREATE") response = await addLink(link);
 
-    toggleLinkModal();
+    response && toggleLinkModal();
   };
 
   return (
@@ -107,7 +108,7 @@ export default function EditLink({
       </p>
 
       {method === "UPDATE" ? (
-        <p className="text-sky-700">
+        <p className="text-gray-500">
           <b>{shortendURL}</b> | {link.title}
         </p>
       ) : null}
@@ -176,43 +177,12 @@ export default function EditLink({
         </div>
       </div>
 
-      <div className="flex flex-col justify-center items-center gap-2 mt-2">
-        <div
-          className="bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
-          onClick={submit}
-        >
-          <FontAwesomeIcon
-            icon={method === "CREATE" ? faPlus : faPenToSquare}
-            className="h-5"
-          />
-          {method === "CREATE" ? "Add Link" : "Edit Link"}
-        </div>
-
-        {method === "UPDATE" ? (
-          <>
-            <div className="flex items-center justify-center gap-2">
-              <hr className="w-16 border" />
-
-              <p className="text-gray-400 font-bold">OR</p>
-
-              <hr className="w-16 border" />
-            </div>
-
-            <div
-              onClick={() => {
-                removeLink(link);
-                toggleLinkModal();
-              }}
-              className="w-fit inline-flex rounded-md cursor-pointer bg-red-500 hover:bg-red-400 duration-100 p-2"
-            >
-              <FontAwesomeIcon
-                icon={faTrashCan}
-                className="w-4 h-4 text-white"
-              />
-            </div>
-          </>
-        ) : null}
-      </div>
+      <SubmitButton
+        onClick={submit}
+        label={method === "CREATE" ? "Add Link" : "Edit Link"}
+        icon={method === "CREATE" ? faPlus : faPenToSquare}
+        className="mx-auto mt-2"
+      />
     </div>
   );
 }

components/Modal/UserSettings.tsx

@@ -9,6 +9,7 @@ import { resizeImage } from "@/lib/client/resizeImage";
 import Modal from ".";
 import ChangePassword from "./ChangePassword";
 import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
+import SubmitButton from "../SubmitButton";
 
 type Props = {
   toggleSettingsModal: Function;
@@ -221,8 +222,8 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
           </p>
           <p className="text-gray-500 text-sm mb-3">
             Please provide the Email addresses of the users you wish to grant
-            visibility to your profile. Separate the addresses with a comma.
-            Users not included will be unable to view your profile.
+            visibility to your profile. Separate by comma. Users not included
+            will be unable to view your profile.
           </p>
           <textarea
             className="w-full resize-none border rounded-md duration-100 bg-white p-2 outline-none border-sky-100 focus:border-sky-500"
@@ -235,13 +236,12 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
         </div>
       ) : null}
 
-      <div
-        className="mx-auto mt-2 bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
+      <SubmitButton
         onClick={submit}
-      >
-        <FontAwesomeIcon icon={faPenToSquare} className="h-5" />
-        Apply Settings
-      </div>
+        label="Apply Settings"
+        icon={faPenToSquare}
+        className="mx-auto mt-2"
+      />
 
       {passwordFormModal ? (
         <Modal toggleModal={togglePasswordFormModal}>

components/Modal/index.tsx

@@ -12,14 +12,14 @@ export default function ({ toggleModal, children }: Props) {
   return (
     <div className="overflow-y-auto py-2 fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center fade-in z-30">
       <ClickAwayHandler onClickOutside={toggleModal} className="w-fit m-auto">
-        <div className="slide-up relative border-sky-100 rounded-md border-solid border shadow-lg p-5 bg-white">
+        <div className="slide-up relative border-sky-100 rounded-2xl border-solid border shadow-lg p-5 bg-white">
           <div
             onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
-            className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
+            className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-2"
           >
             <FontAwesomeIcon
               icon={faChevronLeft}
-              className="w-5 h-5 text-gray-500"
+              className="w-4 h-4 text-gray-500"
             />
           </div>
           {children}