bug fixes + small visual improvements

components/Modal/AddCollection.tsx

@@ -9,6 +9,7 @@ import { faClose, faPlus } from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
 import { NewCollection } from "@/types/global";
 import { useSession } from "next-auth/react";
+import RequiredBadge from "../RequiredBadge";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -48,7 +49,10 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
       <p className="font-bold text-sky-300 mb-2 text-center">New Collection</p>
 
       <div className="flex gap-5 items-center justify-between">
-        <p className="text-sm font-bold text-sky-300">Name</p>
+        <p className="text-sm font-bold text-sky-300">
+          Name
+          <RequiredBadge />
+        </p>
         <input
           value={newCollection.name}
           onChange={(e) =>
@@ -56,7 +60,7 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
           }
           type="text"
           placeholder="e.g. Example Collection"
-          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
         />
       </div>
 
@@ -68,8 +72,8 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
             setNewCollection({ ...newCollection, description: e.target.value })
           }
           type="text"
-          placeholder="Collection description (Optional)"
-          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+          placeholder="Collection description"
+          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
         />
       </div>
 
@@ -120,8 +124,8 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
             }
           }}
           type="text"
-          placeholder="Email (Optional)"
-          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+          placeholder="Email"
+          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
         />
       </div>
 

components/Modal/AddLink.tsx

@@ -12,6 +12,7 @@ import { ExtendedLink, NewLink } from "@/types/global";
 import useLinkStore from "@/store/links";
 import { useRouter } from "next/router";
 import useCollectionStore from "@/store/collections";
+import RequiredBadge from "../RequiredBadge";
 
 type Props = {
   toggleLinkModal: Function;
@@ -79,34 +80,38 @@ export default function AddLink({ toggleLinkModal }: Props) {
       <p className="font-bold text-sky-300 mb-2 text-center">New Link</p>
 
       <div className="flex gap-5 items-center justify-between">
-        <p className="text-sm font-bold text-sky-300">Name</p>
+        <p className="text-sm font-bold text-sky-300">
+          Name
+          <RequiredBadge />
+        </p>
         <input
           value={newLink.name}
           onChange={(e) => setNewLink({ ...newLink, name: e.target.value })}
           type="text"
           placeholder="e.g. Example Link"
-          className="w-60 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+          className="w-60 rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
         />
       </div>
 
       <div className="flex gap-5 items-center justify-between">
-        <p className="text-sm font-bold text-sky-300">URL</p>
+        <p className="text-sm font-bold text-sky-300">
+          URL
+          <RequiredBadge />
+        </p>
         <input
           value={newLink.url}
           onChange={(e) => setNewLink({ ...newLink, url: e.target.value })}
           type="text"
           placeholder="e.g. http://example.com/"
-          className="w-60 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+          className="w-60 rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
         />
       </div>
 
       <div className="flex gap-5 items-center justify-between">
-        <p className="text-sm font-bold text-sky-300">Tags</p>
-        <TagSelection onChange={setTags} />
-      </div>
-
-      <div className="flex gap-5 items-center justify-between">
-        <p className="text-sm font-bold text-sky-300">Collection</p>
+        <p className="text-sm font-bold text-sky-300">
+          Collection
+          <RequiredBadge />
+        </p>
         <CollectionSelection
           defaultValue={
             newLink.collection.name && newLink.collection.id
@@ -117,6 +122,11 @@ export default function AddLink({ toggleLinkModal }: Props) {
         />
       </div>
 
+      <div className="flex gap-5 items-center justify-between">
+        <p className="text-sm font-bold text-sky-300">Tags</p>
+        <TagSelection onChange={setTags} />
+      </div>
+
       <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"
         onClick={submit}

components/Modal/DeleteCollection.tsx

@@ -48,7 +48,7 @@ export default function AddCollection({
         onChange={(e) => setInputField(e.target.value)}
         type="text"
         placeholder={`Type "${collection.name}" Here.`}
-        className=" w-72 sm:w-96 rounded-md p-3 mx-auto border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+        className=" w-72 sm:w-96 rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
       />
 
       <div

components/Modal/EditCollection.tsx

@@ -16,6 +16,7 @@ import { useSession } from "next-auth/react";
 import getPublicUserDataByEmail from "@/lib/client/getPublicUserDataByEmail";
 import Modal from "@/components/Modal";
 import DeleteCollection from "@/components/Modal/DeleteCollection";
+import RequiredBadge from "../RequiredBadge";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -56,7 +57,10 @@ export default function EditCollection({
       <p className="font-bold text-sky-300 mb-2 text-center">Edit Collection</p>
 
       <div className="flex gap-5 items-center justify-between">
-        <p className="text-sm font-bold text-sky-300">Name</p>
+        <p className="text-sm font-bold text-sky-300">
+          Name
+          <RequiredBadge />
+        </p>
         <input
           value={activeCollection.name}
           onChange={(e) =>
@@ -64,7 +68,7 @@ export default function EditCollection({
           }
           type="text"
           placeholder="e.g. Example Collection"
-          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
         />
       </div>
 
@@ -79,8 +83,8 @@ export default function EditCollection({
             })
           }
           type="text"
-          placeholder="Collection description (Optional)"
-          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+          placeholder="Collection description"
+          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
         />
       </div>
 
@@ -135,8 +139,8 @@ export default function EditCollection({
             }
           }}
           type="text"
-          placeholder="Email (Optional)"
-          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+          placeholder="Email"
+          className="w-56 sm:w-96 rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
         />
       </div>
 

components/Modal/EditLink.tsx

@@ -11,6 +11,7 @@ import { ExtendedLink } from "@/types/global";
 import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
 import useLinkStore from "@/store/links";
 import { faTrashCan } from "@fortawesome/free-solid-svg-icons";
+import RequiredBadge from "../RequiredBadge";
 
 type Props = {
   toggleLinkModal: Function;
@@ -53,7 +54,10 @@ export default function EditLink({ toggleLinkModal, link }: Props) {
         <b>{shortendURL}</b> | {link.title}
       </p>
       <div className="flex gap-5 items-center justify-between">
-        <p className="text-sm font-bold text-sky-300">Name</p>
+        <p className="text-sm font-bold text-sky-300">
+          Name
+          <RequiredBadge />
+        </p>
         <input
           value={currentLink.name}
           onChange={(e) =>
@@ -61,7 +65,21 @@ export default function EditLink({ toggleLinkModal, link }: Props) {
           }
           type="text"
           placeholder="e.g. Example Link"
-          className="w-60 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+          className="w-60 rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+        />
+      </div>
+
+      <div className="flex gap-5 items-center justify-between">
+        <p className="text-sm font-bold text-sky-300">
+          Collection
+          <RequiredBadge />
+        </p>
+        <CollectionSelection
+          onChange={setCollection}
+          defaultValue={{
+            label: link.collection.name,
+            value: link.collection.id,
+          }}
         />
       </div>
 
@@ -75,17 +93,6 @@ export default function EditLink({ toggleLinkModal, link }: Props) {
         />
       </div>
 
-      <div className="flex gap-5 items-center justify-between">
-        <p className="text-sm font-bold text-sky-300">Collection</p>
-        <CollectionSelection
-          onChange={setCollection}
-          defaultValue={{
-            label: link.collection.name,
-            value: link.collection.id,
-          }}
-        />
-      </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"

components/Modal/index.tsx

@@ -24,7 +24,7 @@ export default function ({ toggleModal, children }: Props) {
           >
             <FontAwesomeIcon
               icon={faChevronLeft}
-              className="w-4 h-4 text-gray-500"
+              className="w-5 h-5 text-gray-500"
             />
           </div>
           {children}