many more improvements

components/CollectionCard.tsx

@@ -4,10 +4,11 @@
 // You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { faChevronRight, faUser } from "@fortawesome/free-solid-svg-icons";
 import Link from "next/link";
 import { ExtendedCollection } from "@/types/global";
 import useLinkStore from "@/store/links";
+import ImageWithFallback from "./ImageWithFallback";
 
 export default function ({ collection }: { collection: ExtendedCollection }) {
   const { links } = useLinkStore();
@@ -18,28 +19,35 @@ export default function ({ collection }: { collection: ExtendedCollection }) {
   });
 
   return (
+    <div className="p-5 bg-gradient-to-tr from-sky-100 self-stretch to-gray-100 min-h-[12rem] rounded-md cursor-pointer shadow duration-100 hover:shadow-none group">
       <Link href={`/collections/${collection.id}`}>
-      <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 className="flex flex-col gap-2 justify-between h-full">
           <div>
-          <div className="flex justify-between text-sky-600 items-center">
+            <div className="flex justify-between text-sky-600 items-center mb-2">
-            <p className="text-lg w-max font-bold">{collection.name}</p>
+              <p className="text-2xl w-max font-bold capitalize">
+                {collection.name}
+              </p>
               <FontAwesomeIcon
                 icon={faChevronRight}
-              className="w-3 h-3 text-gray-500"
+                className="w-3 h-3 group-hover:w-5 group-hover:h-5 duration-100 text-gray-500"
               />
             </div>
-          <p className="text-sky-400">{collection.description}</p>
+            <p className="text-gray-500">{collection.description}</p>
           </div>
           <div className="flex justify-between items-center">
             <div className="text-sky-400 flex items-center w-full">
               {collection.members
                 .map((e, i) => {
                   return (
-                  <img
+                    <ImageWithFallback
+                      key={i}
                       src={`/api/avatar/${e.userId}`}
                       className="h-10 w-10 shadow rounded-full border-[3px] border-sky-100 -mr-3"
-                    alt=""
+                    >
-                  />
+                      <div className="text-white bg-sky-500 h-10 w-10 shadow rounded-full border-[3px] border-sky-100 -mr-3 flex items-center justify-center">
+                        <FontAwesomeIcon icon={faUser} className="w-5 h-5" />
+                      </div>
+                    </ImageWithFallback>
                   );
                 })
                 .reverse()
@@ -51,14 +59,15 @@ export default function ({ collection }: { collection: ExtendedCollection }) {
               ) : null}
             </div>
             <div className="text-right w-full">
-            <p className="text-sky-500 font-bold">
+              <p className="text-sky-500 font-bold text-sm">
                 {links.filter((e) => e.collectionId === collection.id).length}{" "}
                 Links
               </p>
-            <p className="text-sky-300 font-bold text-sm">{formattedDate}</p>
+              <p className="text-gray-500 font-bold text-xs">{formattedDate}</p>
             </div>
           </div>
         </div>
       </Link>
+    </div>
   );
 }

components/ImageWithFallback.tsx

@@ -0,0 +1,27 @@
+import { ElementType, ReactElement, ReactNode, useState } from "react";
+
+type Props = {
+  src: string;
+  className: string;
+  children: ReactNode;
+};
+
+const ImageWithFallback = ({ src, className, children, ...rest }: Props) => {
+  const [error, setError] = useState(false);
+
+  return error ? (
+    <>{children}</>
+  ) : (
+    <img
+      alt=""
+      {...rest}
+      src={src}
+      className={className}
+      onError={() => {
+        setError(true);
+      }}
+    />
+  );
+};
+
+export default ImageWithFallback;

components/LinkList.tsx

@@ -45,7 +45,7 @@ export default function ({
   };
 
   return (
-    <div className="border border-sky-100 bg-gray-100 p-5 rounded-md flex items-start relative gap-5 sm:gap-10 group/item">
+    <div className="shadow hover:shadow-none duration-100 bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20%   p-5 rounded-md flex items-start relative gap-5 sm:gap-10 group/item">
       {editModal ? (
         <Modal toggleModal={toggleEditModal}>
           <EditLink toggleLinkModal={toggleEditModal} link={link} />
@@ -57,7 +57,7 @@ export default function ({
         width={42}
         height={42}
         alt=""
-        className="select-none mt-3 z-10 rounded-full border-[3px] border-sky-100"
+        className="select-none mt-3 z-10 rounded-full shadow border-[3px] border-sky-100"
         draggable="false"
         onError={(e) => {
           const target = e.target as HTMLElement;

components/Modal/AddCollection.tsx

@@ -5,12 +5,13 @@
 
 import React, { useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faClose, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faClose, faPlus, faUser } from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
 import { ExtendedCollection, NewCollection } from "@/types/global";
 import { useSession } from "next-auth/react";
 import RequiredBadge from "../RequiredBadge";
 import addMemberToCollection from "@/lib/client/addMemberToCollection";
+import ImageWithFallback from "../ImageWithFallback";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -144,12 +145,16 @@ export default function AddCollection({ toggleCollectionModal }: Props) {
                 }}
               />
               <div className="flex items-center gap-2">
-                <img
+                <ImageWithFallback
+                  key={i}
                   // @ts-ignore
                   src={`/api/avatar/${e.id}`}
                   className="h-10 w-10 shadow rounded-full border-[3px] border-sky-100"
-                  alt=""
+                >
-                />
+                  <div className="text-white bg-sky-500 h-10 w-10 shadow rounded-full border-[3px] border-sky-100 flex items-center justify-center">
+                    <FontAwesomeIcon icon={faUser} className="w-5 h-5" />
+                  </div>
+                </ImageWithFallback>
                 <div>
                   <p className="text-sm font-bold text-sky-500">{e.name}</p>
                   <p className="text-sky-900">{e.email}</p>

components/Modal/EditCollection.tsx

@@ -10,6 +10,7 @@ import {
   faPenToSquare,
   faPlus,
   faTrashCan,
+  faUser,
 } from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
 import { ExtendedCollection } from "@/types/global";
@@ -18,6 +19,7 @@ import Modal from "@/components/Modal";
 import DeleteCollection from "@/components/Modal/DeleteCollection";
 import RequiredBadge from "../RequiredBadge";
 import addMemberToCollection from "@/lib/client/addMemberToCollection";
+import ImageWithFallback from "../ImageWithFallback";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -159,12 +161,15 @@ export default function EditCollection({
                 }}
               />
               <div className="flex items-center gap-2">
-                <img
+                <ImageWithFallback
-                  // @ts-ignore
+                  key={i}
                   src={`/api/avatar/${e.userId}`}
                   className="h-10 w-10 shadow rounded-full border-[3px] border-sky-100"
-                  alt=""
+                >
-                />
+                  <div className="text-white bg-sky-500 h-10 w-10 shadow rounded-full border-[3px] border-sky-100 flex items-center justify-center">
+                    <FontAwesomeIcon icon={faUser} className="w-5 h-5" />
+                  </div>
+                </ImageWithFallback>
                 <div>
                   <p className="text-sm font-bold text-sky-500">
                     {e.user.name}

components/Sidebar/SidebarItem.tsx

@@ -11,9 +11,10 @@ interface SidebarItemProps {
   text: string;
   icon: ReactElement;
   path: string;
+  className?: string;
 }
 
-export default function ({ text, icon, path }: SidebarItemProps) {
+export default function ({ text, icon, path, className }: SidebarItemProps) {
   const router = useRouter();
   const [active, setActive] = useState(false);
 
@@ -27,7 +28,7 @@ export default function ({ text, icon, path }: SidebarItemProps) {
       <div
         className={`${
           active ? "bg-sky-500" : "hover:bg-gray-50 hover:outline bg-gray-100"
-        } outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2`}
+        } outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2 ${className}`}
       >
         {React.cloneElement(icon, {
           className: `w-4 ${active ? "text-white" : "text-sky-300"}`,

components/Sidebar/index.tsx

@@ -119,6 +119,7 @@ export default function ({ className }: { className?: string }) {
               text={e.name}
               icon={<FontAwesomeIcon icon={faFolder} />}
               path={`/collections/${e.id}`}
+              className="capitalize"
             />
           );
         })}

pages/collections/[id].tsx

@@ -247,10 +247,12 @@ export default function () {
             ) : null}
           </div>
         </div>
+        <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
           {sortedLinks.map((e, i) => {
             return <LinkList key={i} link={e} count={i} />;
           })}
         </div>
+      </div>
     </MainLayout>
   );
 }

pages/collections/index.tsx

@@ -194,11 +194,16 @@ export default function () {
           })}
 
           <div
-            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"
+            className="p-5 bg-gradient-to-tr from-sky-100 self-stretch to-gray-100 min-h-[12rem] rounded-md cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
             onClick={toggleCollectionModal}
           >
-            <p className="text-sky-900">New Collection</p>
+            <p className="text-sky-900 group-hover:opacity-0 duration-100">
-            <FontAwesomeIcon icon={faPlus} className="w-8 h-8 text-sky-500" />
+              New Collection
+            </p>
+            <FontAwesomeIcon
+              icon={faPlus}
+              className="w-8 h-8 text-sky-500 group-hover:w-12 group-hover:h-12 group-hover:-mt-10 duration-100"
+            />
           </div>
         </div>
       </div>

pages/tags/[id].tsx

@@ -146,10 +146,12 @@ export default function () {
             ) : null}
           </div>
         </div>
+        <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
           {sortedLinks.map((e, i) => {
             return <LinkList key={i} link={e} count={i} />;
           })}
         </div>
+      </div>
     </MainLayout>
   );
 }