changes/fixes + some WIP

components/Modal/EditCollection.tsx

@@ -11,6 +11,7 @@ import {
   faPlus,
   faTrashCan,
   faUser,
+  faUserPlus,
 } from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
 import { ExtendedCollection } from "@/types/global";
@@ -20,6 +21,7 @@ import DeleteCollection from "@/components/Modal/DeleteCollection";
 import RequiredBadge from "../RequiredBadge";
 import addMemberToCollection from "@/lib/client/addMemberToCollection";
 import ImageWithFallback from "../ImageWithFallback";
+import Checkbox from "../Checkbox";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -102,9 +104,27 @@ export default function EditCollection({
         </div>
       </div>
 
-      <hr className="border rounded my-2" />
+      <hr className="my-2" />
+
+      {/* <p className="text-sky-600">Sharing & Collaboration Settings</p>
+
+      <p className="text-sm font-bold text-sky-300">Collaboration</p>
+
+      <div className="w-fit">
+        <div className="border border-sky-100 rounded-md bg-white px-2 py-1 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-500">
+          Manage Team
+        </div>
+      </div>
+
+      <Checkbox
+        label="Make this a public collection."
+        state={true}
+        onClick={() => console.log("Clicked!")}
+      />
+      <p className="text-gray-500 text-sm">
+        This will let anyone to access this collection.
+      </p> */}
 
-      <p className="text-sm font-bold text-sky-300">Members</p>
       <div className="relative">
         <input
           value={memberEmail}
@@ -128,7 +148,7 @@ export default function EditCollection({
           }
           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"
         >
-          <FontAwesomeIcon icon={faPlus} className="w-4 h-4" />
+          <FontAwesomeIcon icon={faUserPlus} className="w-6 h-6" />
         </div>
       </div>
       {activeCollection.members[0] ? (