improved UI

components/CollectionCard.tsx

@@ -121,7 +121,7 @@ export default function CollectionCard({ collection, className }: Props) {
         {collectionOwner.id ? (
           <ProfilePhoto
             src={collectionOwner.image || undefined}
-            dimensionClass="w-7 h-7"
+            name={collectionOwner.name}
           />
         ) : undefined}
         {collection.members
@@ -131,13 +131,14 @@ export default function CollectionCard({ collection, className }: Props) {
               <ProfilePhoto
                 key={i}
                 src={e.user.image ? e.user.image : undefined}
+                name={e.user.name}
                 className="-ml-3"
               />
             );
           })
           .slice(0, 3)}
         {collection.members.length - 3 > 0 ? (
-          <div className={`avatar placeholder -ml-3`}>
+          <div className={`avatar drop-shadow-md placeholder -ml-3`}>
             <div className="bg-base-100 text-neutral rounded-full w-8 h-8 ring-2 ring-neutral-content">
               <span>+{collection.members.length - 3}</span>
             </div>

components/LinkCard.tsx

@@ -250,8 +250,23 @@ export default function LinkCard({ link, count, className }: Props) {
               <p className="truncate capitalize w-full">{collection?.name}</p>
             </Link>
 
+            <Link
+              href={link.url || ""}
+              target="_blank"
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+              className="flex items-center gap-1 max-w-full w-fit text-neutral hover:opacity-70 duration-100"
+            >
+              <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
+              <p className="truncate w-full">{shortendURL}</p>
+            </Link>
+            <div className="flex items-center gap-1 text-neutral">
+              <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
+              <p>{formattedDate}</p>
+            </div>
             {link.tags[0] ? (
-              <div className="flex gap-3 items-center flex-wrap my-2 truncate relative">
+              <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
                 <div className="flex gap-1 items-center flex-nowrap">
                   {link.tags.map((e, i) => (
                     <Link
@@ -269,24 +284,8 @@ export default function LinkCard({ link, count, className }: Props) {
                 <div className="absolute w-1/2 top-0 bottom-0 right-0 bg-gradient-to-r from-transparent to-base-200 to-35%"></div>
               </div>
             ) : (
-              <p className="text-xs my-2 p-1 font-semibold italic">No Tags</p>
+              <p className="text-xs mt-2 p-1 font-semibold italic">No Tags</p>
             )}
-
-            <Link
-              href={link.url || ""}
-              target="_blank"
-              onClick={(e) => {
-                e.stopPropagation();
-              }}
-              className="flex items-center gap-1 max-w-full w-fit text-neutral hover:opacity-70 duration-100"
-            >
-              <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
-              <p className="truncate w-full">{shortendURL}</p>
-            </Link>
-            <div className="flex items-center gap-1 text-neutral">
-              <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
-              <p>{formattedDate}</p>
-            </div>
           </div>
         </div>
       </div>

components/ModalContent/EditCollectionSharingModal.tsx

@@ -211,6 +211,7 @@ export default function EditCollectionSharingModal({
                     src={
                       collectionOwner.image ? collectionOwner.image : undefined
                     }
+                    name={collectionOwner.name}
                   />
                   <div className="w-full">
                     <div className="flex items-center gap-1 w-full justify-between">
@@ -259,6 +260,7 @@ export default function EditCollectionSharingModal({
                       <div className="flex items-center gap-2">
                         <ProfilePhoto
                           src={e.user.image ? e.user.image : undefined}
+                          name={e.user.name}
                         />
                         <div>
                           <p className="text-sm font-bold">{e.user.name}</p>

components/ProfilePhoto.tsx

@@ -31,7 +31,7 @@ export default function ProfilePhoto({
 
   return !image ? (
     <div
-      className={`avatar placeholder ${className || ""} ${
+      className={`avatar drop-shadow-md placeholder ${className || ""} ${
         dimensionClass || "w-8 h-8 "
       }`}
     >

pages/collections/[id].tsx

@@ -111,7 +111,10 @@ export default function Index() {
                 onClick={() => setEditCollectionSharingModal(true)}
               >
                 {collectionOwner.id ? (
-                  <ProfilePhoto src={collectionOwner.image || undefined} />
+                  <ProfilePhoto
+                    src={collectionOwner.image || undefined}
+                    name={collectionOwner.name}
+                  />
                 ) : undefined}
                 {activeCollection.members
                   .sort((a, b) => (a.userId as number) - (b.userId as number))
@@ -121,12 +124,13 @@ export default function Index() {
                         key={i}
                         src={e.user.image ? e.user.image : undefined}
                         className="-ml-3"
+                        name={e.user.name}
                       />
                     );
                   })
                   .slice(0, 3)}
                 {activeCollection.members.length - 3 > 0 ? (
-                  <div className={`avatar placeholder -ml-3`}>
+                  <div className={`avatar drop-shadow-md placeholder -ml-3`}>
                     <div className="bg-base-100 text-neutral rounded-full w-8 h-8 ring-2 ring-neutral-content">
                       <span>+{activeCollection.members.length - 3}</span>
                     </div>

pages/public/collections/[id].tsx

@@ -145,7 +145,7 @@ export default function PublicCollections() {
                 {collectionOwner.id ? (
                   <ProfilePhoto
                     src={collectionOwner.image || undefined}
-                    dimensionClass="w-7 h-7"
+                    name={collectionOwner.name}
                   />
                 ) : undefined}
                 {collection.members
@@ -156,12 +156,13 @@ export default function PublicCollections() {
                         key={i}
                         src={e.user.image ? e.user.image : undefined}
                         className="-ml-3"
+                        name={e.user.name}
                       />
                     );
                   })
                   .slice(0, 3)}
                 {collection.members.length - 3 > 0 ? (
-                  <div className={`avatar placeholder -ml-3`}>
+                  <div className={`avatar drop-shadow-md placeholder -ml-3`}>
                     <div className="bg-base-100 text-neutral rounded-full w-8 h-8 ring-2 ring-neutral-content">
                       <span>+{collection.members.length - 3}</span>
                     </div>