From b473716237eca5a98ae2708b72e104af91011567 Mon Sep 17 00:00:00 2001
From: Daniel <daniel31x13@gmail.com>
Date: Thu, 25 May 2023 05:17:18 +0330
Subject: [PATCH] even more visual improvements

---
 components/CollectionCard.tsx       |  48 +++---
 components/Modal/AddCollection.tsx  | 244 +++++++++++++--------------
 components/Modal/EditCollection.tsx | 246 ++++++++++++++--------------
 components/Navbar.tsx               |   2 +-
 pages/collections/index.tsx         |   4 +-
 5 files changed, 281 insertions(+), 263 deletions(-)

diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx
index 4c7370b..2052f13 100644
--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@@ -19,7 +19,7 @@ export default function ({ collection }: { collection: ExtendedCollection }) {
 
   return (
     <Link href={`/collections/${collection.id}`}>
-      <div className="p-5 bg-gray-100 min-h-[10rem] w-72 rounded-md border-sky-100 border-solid border flex flex-col gap-2 justify-between cursor-pointer hover:bg-gray-50 duration-100">
+      <div className="p-5 bg-gray-100 min-h-[12rem] rounded-md border-sky-100 border-solid border flex flex-col gap-2 justify-between cursor-pointer hover:bg-gray-50 duration-100">
         <div>
           <div className="flex justify-between text-sky-600 items-center">
             <p className="text-lg w-max font-bold">{collection.name}</p>
@@ -30,25 +30,33 @@ export default function ({ collection }: { collection: ExtendedCollection }) {
           </div>
           <p className="text-sky-400">{collection.description}</p>
         </div>
-        <div className="text-sky-400 flex gap-1 flex-wrap">
-          <p>Members:</p>
-          {collection.members.map((e, i) => {
-            return (
-              <p
-                className="text-sky-500 font-semibold"
-                title={e.user.email}
-                key={i}
-              >
-                {e.user.name}
-              </p>
-            );
-          })}
-        </div>
-        <div className="flex gap-2 items-baseline">
-          <p className="text-sky-300 font-bold text-sm">{formattedDate}</p>
-          <p className="text-sky-500 font-bold">
-            {links.filter((e) => e.collectionId === collection.id).length} Links
-          </p>
+        <div className="flex justify-between items-center">
+          <div className="text-sky-400 flex items-center w-full">
+            {collection.members
+              .map((e, i) => {
+                return (
+                  <img
+                    src={`/api/avatar/${e.userId}`}
+                    className="h-10 w-10 shadow rounded-full border-[3px] border-sky-100 -mr-3"
+                    alt=""
+                  />
+                );
+              })
+              .reverse()
+              .slice(0, 3)}
+            {collection.members.length - 3 > 0 ? (
+              <div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-500 border-sky-100 -mr-3">
+                +{collection.members.length - 3}
+              </div>
+            ) : null}
+          </div>
+          <div className="text-right w-full">
+            <p className="text-sky-500 font-bold">
+              {links.filter((e) => e.collectionId === collection.id).length}{" "}
+              Links
+            </p>
+            <p className="text-sky-300 font-bold text-sm">{formattedDate}</p>
+          </div>
         </div>
       </div>
     </Link>
diff --git a/components/Modal/AddCollection.tsx b/components/Modal/AddCollection.tsx
index d33f653..a6e8b3c 100644
--- a/components/Modal/AddCollection.tsx
+++ b/components/Modal/AddCollection.tsx
@@ -120,129 +120,133 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
         </p>
       ) : null}
 
-      {newCollection.members.map((e, i) => {
-        return (
-          <div
-            key={i}
-            className="relative border p-2 rounded-md border-sky-100 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
-          >
-            <FontAwesomeIcon
-              icon={faClose}
-              className="absolute right-2 top-2 text-gray-500 h-4 hover:text-red-500 duration-100 cursor-pointer"
-              title="Remove Member"
-              onClick={() => {
-                const updatedMembers = newCollection.members.filter(
-                  (member) => {
-                    return member.email !== e.email;
-                  }
-                );
-                setNewCollection({
-                  ...newCollection,
-                  members: updatedMembers,
-                });
-              }}
-            />
-            <div className="flex items-center gap-2">
-              <img
-                // @ts-ignore
-                src={`/api/avatar/${e.id}`}
-                className="h-10 w-10 rounded-full border-[3px] border-sky-100"
-                alt=""
+      <div className="h-36 overflow-auto flex flex-col gap-3 rounded-md shadow-inner">
+        {newCollection.members.map((e, i) => {
+          return (
+            <div
+              key={i}
+              className="relative border p-2 rounded-md border-sky-100 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
+            >
+              <FontAwesomeIcon
+                icon={faClose}
+                className="absolute right-2 top-2 text-gray-500 h-4 hover:text-red-500 duration-100 cursor-pointer"
+                title="Remove Member"
+                onClick={() => {
+                  const updatedMembers = newCollection.members.filter(
+                    (member) => {
+                      return member.email !== e.email;
+                    }
+                  );
+                  setNewCollection({
+                    ...newCollection,
+                    members: updatedMembers,
+                  });
+                }}
               />
-              <div>
-                <p className="text-sm font-bold text-sky-500">{e.name}</p>
-                <p className="text-sky-900">{e.email}</p>
+              <div className="flex items-center gap-2">
+                <img
+                  // @ts-ignore
+                  src={`/api/avatar/${e.id}`}
+                  className="h-10 w-10 shadow rounded-full border-[3px] border-sky-100"
+                  alt=""
+                />
+                <div>
+                  <p className="text-sm font-bold text-sky-500">{e.name}</p>
+                  <p className="text-sky-900">{e.email}</p>
+                </div>
+              </div>
+              <div className="flex sm:block items-center gap-5">
+                <div>
+                  <p className="font-bold text-sm text-gray-500">Permissions</p>
+                  <p className="text-xs text-gray-400 mb-2">
+                    (Click to toggle.)
+                  </p>
+                </div>
+
+                <div>
+                  <label className="cursor-pointer mr-1">
+                    <input
+                      type="checkbox"
+                      id="canCreate"
+                      className="peer sr-only"
+                      checked={e.canCreate}
+                      onChange={() => {
+                        const updatedMembers = newCollection.members.map(
+                          (member) => {
+                            if (member.email === e.email) {
+                              return { ...member, canCreate: !e.canCreate };
+                            }
+                            return member;
+                          }
+                        );
+                        setNewCollection({
+                          ...newCollection,
+                          members: updatedMembers,
+                        });
+                      }}
+                    />
+                    <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
+                      Create
+                    </span>
+                  </label>
+
+                  <label className="cursor-pointer mr-1">
+                    <input
+                      type="checkbox"
+                      id="canUpdate"
+                      className="peer sr-only"
+                      checked={e.canUpdate}
+                      onChange={() => {
+                        const updatedMembers = newCollection.members.map(
+                          (member) => {
+                            if (member.email === e.email) {
+                              return { ...member, canUpdate: !e.canUpdate };
+                            }
+                            return member;
+                          }
+                        );
+                        setNewCollection({
+                          ...newCollection,
+                          members: updatedMembers,
+                        });
+                      }}
+                    />
+                    <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
+                      Update
+                    </span>
+                  </label>
+
+                  <label className="cursor-pointer mr-1">
+                    <input
+                      type="checkbox"
+                      id="canDelete"
+                      className="peer sr-only"
+                      checked={e.canDelete}
+                      onChange={() => {
+                        const updatedMembers = newCollection.members.map(
+                          (member) => {
+                            if (member.email === e.email) {
+                              return { ...member, canDelete: !e.canDelete };
+                            }
+                            return member;
+                          }
+                        );
+                        setNewCollection({
+                          ...newCollection,
+                          members: updatedMembers,
+                        });
+                      }}
+                    />
+                    <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
+                      Delete
+                    </span>
+                  </label>
+                </div>
               </div>
             </div>
-            <div className="flex sm:block items-center gap-5">
-              <div>
-                <p className="font-bold text-sm text-gray-500">Permissions</p>
-                <p className="text-xs text-gray-400 mb-2">(Click to toggle.)</p>
-              </div>
-
-              <div>
-                <label className="cursor-pointer mr-1">
-                  <input
-                    type="checkbox"
-                    id="canCreate"
-                    className="peer sr-only"
-                    checked={e.canCreate}
-                    onChange={() => {
-                      const updatedMembers = newCollection.members.map(
-                        (member) => {
-                          if (member.email === e.email) {
-                            return { ...member, canCreate: !e.canCreate };
-                          }
-                          return member;
-                        }
-                      );
-                      setNewCollection({
-                        ...newCollection,
-                        members: updatedMembers,
-                      });
-                    }}
-                  />
-                  <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
-                    Create
-                  </span>
-                </label>
-
-                <label className="cursor-pointer mr-1">
-                  <input
-                    type="checkbox"
-                    id="canUpdate"
-                    className="peer sr-only"
-                    checked={e.canUpdate}
-                    onChange={() => {
-                      const updatedMembers = newCollection.members.map(
-                        (member) => {
-                          if (member.email === e.email) {
-                            return { ...member, canUpdate: !e.canUpdate };
-                          }
-                          return member;
-                        }
-                      );
-                      setNewCollection({
-                        ...newCollection,
-                        members: updatedMembers,
-                      });
-                    }}
-                  />
-                  <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
-                    Update
-                  </span>
-                </label>
-
-                <label className="cursor-pointer mr-1">
-                  <input
-                    type="checkbox"
-                    id="canDelete"
-                    className="peer sr-only"
-                    checked={e.canDelete}
-                    onChange={() => {
-                      const updatedMembers = newCollection.members.map(
-                        (member) => {
-                          if (member.email === e.email) {
-                            return { ...member, canDelete: !e.canDelete };
-                          }
-                          return member;
-                        }
-                      );
-                      setNewCollection({
-                        ...newCollection,
-                        members: updatedMembers,
-                      });
-                    }}
-                  />
-                  <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
-                    Delete
-                  </span>
-                </label>
-              </div>
-            </div>
-          </div>
-        );
-      })}
+          );
+        })}
+      </div>
 
       <div
         className="mx-auto mt-2 bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
diff --git a/components/Modal/EditCollection.tsx b/components/Modal/EditCollection.tsx
index e93fb99..4340d80 100644
--- a/components/Modal/EditCollection.tsx
+++ b/components/Modal/EditCollection.tsx
@@ -135,129 +135,135 @@ export default function EditCollection({
         </p>
       ) : null}
 
-      {activeCollection.members.map((e, i) => {
-        return (
-          <div
-            key={i}
-            className="relative border p-2 rounded-md border-sky-100 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
-          >
-            <FontAwesomeIcon
-              icon={faClose}
-              className="absolute right-2 top-2 text-gray-500 h-4 hover:text-red-500 duration-100 cursor-pointer"
-              title="Remove Member"
-              onClick={() => {
-                const updatedMembers = activeCollection.members.filter(
-                  (member) => {
-                    return member.user.email !== e.user.email;
-                  }
-                );
-                setActiveCollection({
-                  ...activeCollection,
-                  members: updatedMembers,
-                });
-              }}
-            />
-            <div className="flex items-center gap-2">
-              <img
-                // @ts-ignore
-                src={`/api/avatar/${e.userId}`}
-                className="h-10 w-10 rounded-full border-[3px] border-sky-100"
-                alt=""
+      <div className="h-36 overflow-auto flex flex-col gap-3 rounded-md shadow-inner">
+        {activeCollection.members.map((e, i) => {
+          return (
+            <div
+              key={i}
+              className="relative border p-2 rounded-md border-sky-100 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
+            >
+              <FontAwesomeIcon
+                icon={faClose}
+                className="absolute right-2 top-2 text-gray-500 h-4 hover:text-red-500 duration-100 cursor-pointer"
+                title="Remove Member"
+                onClick={() => {
+                  const updatedMembers = activeCollection.members.filter(
+                    (member) => {
+                      return member.user.email !== e.user.email;
+                    }
+                  );
+                  setActiveCollection({
+                    ...activeCollection,
+                    members: updatedMembers,
+                  });
+                }}
               />
-              <div>
-                <p className="text-sm font-bold text-sky-500">{e.user.name}</p>
-                <p className="text-sky-900">{e.user.email}</p>
+              <div className="flex items-center gap-2">
+                <img
+                  // @ts-ignore
+                  src={`/api/avatar/${e.userId}`}
+                  className="h-10 w-10 shadow rounded-full border-[3px] border-sky-100"
+                  alt=""
+                />
+                <div>
+                  <p className="text-sm font-bold text-sky-500">
+                    {e.user.name}
+                  </p>
+                  <p className="text-sky-900">{e.user.email}</p>
+                </div>
+              </div>
+              <div className="flex sm:block items-center gap-5">
+                <div>
+                  <p className="font-bold text-sm text-gray-500">Permissions</p>
+                  <p className="text-xs text-gray-400 mb-2">
+                    (Click to toggle.)
+                  </p>
+                </div>
+
+                <div>
+                  <label className="cursor-pointer mr-1">
+                    <input
+                      type="checkbox"
+                      id="canCreate"
+                      className="peer sr-only"
+                      checked={e.canCreate}
+                      onChange={() => {
+                        const updatedMembers = activeCollection.members.map(
+                          (member) => {
+                            if (member.user.email === e.user.email) {
+                              return { ...member, canCreate: !e.canCreate };
+                            }
+                            return member;
+                          }
+                        );
+                        setActiveCollection({
+                          ...activeCollection,
+                          members: updatedMembers,
+                        });
+                      }}
+                    />
+                    <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
+                      Create
+                    </span>
+                  </label>
+
+                  <label className="cursor-pointer mr-1">
+                    <input
+                      type="checkbox"
+                      id="canUpdate"
+                      className="peer sr-only"
+                      checked={e.canUpdate}
+                      onChange={() => {
+                        const updatedMembers = activeCollection.members.map(
+                          (member) => {
+                            if (member.user.email === e.user.email) {
+                              return { ...member, canUpdate: !e.canUpdate };
+                            }
+                            return member;
+                          }
+                        );
+                        setActiveCollection({
+                          ...activeCollection,
+                          members: updatedMembers,
+                        });
+                      }}
+                    />
+                    <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
+                      Update
+                    </span>
+                  </label>
+
+                  <label className="cursor-pointer mr-1">
+                    <input
+                      type="checkbox"
+                      id="canDelete"
+                      className="peer sr-only"
+                      checked={e.canDelete}
+                      onChange={() => {
+                        const updatedMembers = activeCollection.members.map(
+                          (member) => {
+                            if (member.user.email === e.user.email) {
+                              return { ...member, canDelete: !e.canDelete };
+                            }
+                            return member;
+                          }
+                        );
+                        setActiveCollection({
+                          ...activeCollection,
+                          members: updatedMembers,
+                        });
+                      }}
+                    />
+                    <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
+                      Delete
+                    </span>
+                  </label>
+                </div>
               </div>
             </div>
-            <div className="flex sm:block items-center gap-5">
-              <div>
-                <p className="font-bold text-sm text-gray-500">Permissions</p>
-                <p className="text-xs text-gray-400 mb-2">(Click to toggle.)</p>
-              </div>
-
-              <div>
-                <label className="cursor-pointer mr-1">
-                  <input
-                    type="checkbox"
-                    id="canCreate"
-                    className="peer sr-only"
-                    checked={e.canCreate}
-                    onChange={() => {
-                      const updatedMembers = activeCollection.members.map(
-                        (member) => {
-                          if (member.user.email === e.user.email) {
-                            return { ...member, canCreate: !e.canCreate };
-                          }
-                          return member;
-                        }
-                      );
-                      setActiveCollection({
-                        ...activeCollection,
-                        members: updatedMembers,
-                      });
-                    }}
-                  />
-                  <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
-                    Create
-                  </span>
-                </label>
-
-                <label className="cursor-pointer mr-1">
-                  <input
-                    type="checkbox"
-                    id="canUpdate"
-                    className="peer sr-only"
-                    checked={e.canUpdate}
-                    onChange={() => {
-                      const updatedMembers = activeCollection.members.map(
-                        (member) => {
-                          if (member.user.email === e.user.email) {
-                            return { ...member, canUpdate: !e.canUpdate };
-                          }
-                          return member;
-                        }
-                      );
-                      setActiveCollection({
-                        ...activeCollection,
-                        members: updatedMembers,
-                      });
-                    }}
-                  />
-                  <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
-                    Update
-                  </span>
-                </label>
-
-                <label className="cursor-pointer mr-1">
-                  <input
-                    type="checkbox"
-                    id="canDelete"
-                    className="peer sr-only"
-                    checked={e.canDelete}
-                    onChange={() => {
-                      const updatedMembers = activeCollection.members.map(
-                        (member) => {
-                          if (member.user.email === e.user.email) {
-                            return { ...member, canDelete: !e.canDelete };
-                          }
-                          return member;
-                        }
-                      );
-                      setActiveCollection({
-                        ...activeCollection,
-                        members: updatedMembers,
-                      });
-                    }}
-                  />
-                  <span className="text-sky-900 peer-checked:bg-sky-500 text-sm hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
-                    Delete
-                  </span>
-                </label>
-              </div>
-            </div>
-          </div>
-        );
-      })}
+          );
+        })}
+      </div>
 
       <div className="flex flex-col justify-center items-center gap-2 mt-2">
         <div
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index cf82992..9542a52 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -81,7 +81,7 @@ export default function () {
             {account.profilePic ? (
               <img
                 src={account.profilePic}
-                className="h-10 w-10 pointer-events-none rounded-full border-[3px] border-sky-100 group-hover:border-sky-500 duration-100"
+                className="h-10 w-10 shadow pointer-events-none rounded-full border-[3px] border-sky-100 group-hover:border-sky-500 duration-100"
                 alt=""
               />
             ) : (
diff --git a/pages/collections/index.tsx b/pages/collections/index.tsx
index b6bd6fc..4a7feb3 100644
--- a/pages/collections/index.tsx
+++ b/pages/collections/index.tsx
@@ -188,13 +188,13 @@ export default function () {
           </div>
         </div>
 
-        <div className="flex flex-wrap gap-5">
+        <div className="grid 2xl:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 gap-5">
           {sortedCollections.map((e, i) => {
             return <CollectionCard key={i} collection={e} />;
           })}
 
           <div
-            className="p-5 bg-gray-100 h-40 w-60 rounded-md border-sky-100 border-solid border flex flex-col gap-4 justify-center items-center cursor-pointer hover:bg-gray-50 duration-100"
+            className="p-5 bg-gray-100 self-stretch min-h-[12rem] rounded-md border-sky-100 border-solid border flex flex-col gap-4 justify-center items-center cursor-pointer hover:bg-gray-50 duration-100"
             onClick={toggleCollectionModal}
           >
             <p className="text-sky-900">New Collection</p>