bug fixes

components/Modal/Collection/TeamManagement.tsx

@@ -99,11 +99,16 @@ export default function TeamManagement({
         <div>
           <p className="mb-2 text-gray-500">Public Link (Click to copy)</p>
           <div
-            onClick={() =>
+            onClick={() => {
+              try {
                 navigator.clipboard
                   .writeText(publicCollectionURL)
-                .then(() => console.log("Copied!"))
+                  .then(() => console.log("Copied!"));
+              } catch (err) {
+                alert(err);
+                console.log(err);
               }
+            }}
             className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-3 border-sky-100 border-solid border outline-none hover:border-sky-500 duration-100 cursor-text"
           >
             {publicCollectionURL}
@@ -159,7 +164,9 @@ export default function TeamManagement({
           </p>
 
           <div className="max-h-[20rem] overflow-auto flex flex-col gap-3 rounded-md shadow-inner">
-            {collection.members.map((e, i) => {
+            {collection.members
+              .sort((a, b) => (a.userId as number) - (b.userId as number))
+              .map((e, i) => {
                 return (
                   <div
                     key={i}
@@ -219,7 +226,10 @@ export default function TeamManagement({
                               const updatedMembers = collection.members.map(
                                 (member) => {
                                   if (member.user.email === e.user.email) {
-                                  return { ...member, canCreate: !e.canCreate };
+                                    return {
+                                      ...member,
+                                      canCreate: !e.canCreate,
+                                    };
                                   }
                                   return member;
                                 }
@@ -245,7 +255,10 @@ export default function TeamManagement({
                               const updatedMembers = collection.members.map(
                                 (member) => {
                                   if (member.user.email === e.user.email) {
-                                  return { ...member, canUpdate: !e.canUpdate };
+                                    return {
+                                      ...member,
+                                      canUpdate: !e.canUpdate,
+                                    };
                                   }
                                   return member;
                                 }
@@ -271,7 +284,10 @@ export default function TeamManagement({
                               const updatedMembers = collection.members.map(
                                 (member) => {
                                   if (member.user.email === e.user.email) {
-                                  return { ...member, canDelete: !e.canDelete };
+                                    return {
+                                      ...member,
+                                      canDelete: !e.canDelete,
+                                    };
                                   }
                                   return member;
                                 }

components/ProfilePhoto.tsx

@@ -15,7 +15,7 @@ export default function ProfilePhoto({ src, className }: Props) {
       className={`h-10 w-10 shadow rounded-full border-[3px] border-sky-100 ${className}`}
     >
       <div
-        className={`text-white bg-sky-500 h-10 w-10 shadow rounded-full border-[3px] border-sky-100 flex items-center justify-center ${className}`}
+        className={`bg-sky-500 text-white h-10 w-10 shadow rounded-full border-[3px] border-sky-100 flex items-center justify-center ${className}`}
       >
         <FontAwesomeIcon icon={faUser} className="w-5 h-5" />
       </div>

pages/collections/[id].tsx

@@ -149,7 +149,7 @@ export default function () {
                         <ProfilePhoto
                           key={i}
                           src={`/api/avatar/${e.userId}`}
-                          className="-mr-3 bg-white duration-100"
+                          className="-mr-3 duration-100"
                         />
                       );
                     })

tailwind.config.js

@@ -1,9 +1,13 @@
 /** @type {import('tailwindcss').Config} */
+
 module.exports = {
   content: [
     "./app/**/*.{js,ts,jsx,tsx}",
     "./pages/**/*.{js,ts,jsx,tsx}",
     "./components/**/*.{js,ts,jsx,tsx}",
+
+    // For the "layouts" directory
+    "./layouts/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {},