improved DX

components/Modal/Collection/index.tsx

@@ -2,7 +2,7 @@ import { Tab } from "@headlessui/react";
 import CollectionInfo from "./CollectionInfo";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import TeamManagement from "./TeamManagement";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import DeleteCollection from "./DeleteCollection";
 import ViewTeam from "./ViewTeam";
 

components/Modal/index.tsx

@@ -1,7 +1,7 @@
-import { MouseEventHandler, ReactNode } from "react";
+import { MouseEventHandler, ReactNode, useEffect } from "react";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+import { faClose } from "@fortawesome/free-solid-svg-icons";
 
 type Props = {
   toggleModal: Function;
@@ -14,17 +14,14 @@ export default function Modal({ toggleModal, className, children }: Props) {
     <div className="overflow-y-auto py-2 fixed top-0 bottom-0 right-0 left-0 bg-black bg-opacity-10 backdrop-blur-sm flex justify-center items-center fade-in z-30">
       <ClickAwayHandler
         onClickOutside={toggleModal}
-        className={`m-auto ${className || ""}`}
+        className={`m-auto w-11/12 max-w-2xl ${className || ""}`}
       >
-        <div className="slide-up relative border-neutral-content rounded-2xl border-solid border shadow-lg p-5 bg-base-100">
+        <div className="slide-up m-auto relative border-neutral-content rounded-2xl border-solid border shadow-2xl p-5 bg-base-100">
           <div
             onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
-            className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 z-20 p-2"
+            className="absolute top-3 right-3 btn btn-sm outline-none btn-circle btn-ghost"
           >
-            <FontAwesomeIcon
-              icon={faChevronLeft}
-              className="w-4 h-4 text-neutral"
-            />
+            <FontAwesomeIcon icon={faClose} className="w-4 h-4 text-neutral" />
           </div>
           {children}
         </div>