improved design

components/CollectionCard.tsx

@@ -14,6 +14,7 @@ import Modal from "@/components/Modal";
 import CollectionInfo from "@/components/Modal/Collection/CollectionInfo";
 import DeleteCollection from "@/components/Modal/Collection/DeleteCollection";
 import ProfilePhoto from "./ProfilePhoto";
+import TeamManagement from "./Modal/Collection/TeamManagement";
 
 export default function ({
   collection,
@@ -32,12 +33,17 @@ export default function ({
 
   const [expandDropdown, setExpandDropdown] = useState(false);
   const [editCollectionModal, setEditCollectionModal] = useState(false);
+  const [collectionMembersModal, setCollectionMembersModal] = useState(false);
   const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
 
   const toggleEditCollectionModal = () => {
     setEditCollectionModal(!editCollectionModal);
   };
 
+  const toggleCollectionMembersModal = () => {
+    setCollectionMembersModal(!collectionMembersModal);
+  };
+
   const toggleDeleteCollectionModal = () => {
     setDeleteCollectionModal(!deleteCollectionModal);
   };
@@ -101,6 +107,13 @@ export default function ({
                 setExpandDropdown(false);
               },
             },
+            {
+              name: "Share/Collaborate",
+              onClick: () => {
+                toggleCollectionMembersModal();
+                setExpandDropdown(false);
+              },
+            },
             {
               name: "Delete Collection",
               onClick: () => {
@@ -128,6 +141,15 @@ export default function ({
         </Modal>
       ) : null}
 
+      {collectionMembersModal ? (
+        <Modal toggleModal={toggleCollectionMembersModal}>
+          <TeamManagement
+            toggleCollectionModal={toggleCollectionMembersModal}
+            activeCollection={collection}
+          />
+        </Modal>
+      ) : null}
+
       {deleteCollectionModal ? (
         <Modal toggleModal={toggleDeleteCollectionModal}>
           <DeleteCollection