bug fixes + small visual improvements

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>