some visual changes + improvements

components/CollectionCard.tsx

@@ -5,7 +5,6 @@
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
-  faUser,
   faPenToSquare,
   faTrashCan,
   faEllipsis,
@@ -13,12 +12,12 @@ import {
 import Link from "next/link";
 import { CollectionIncludingMembers } from "@/types/global";
 import useLinkStore from "@/store/links";
-import ImageWithFallback from "./ImageWithFallback";
 import Dropdown from "./Dropdown";
 import { useState } from "react";
 import Modal from "@/components/Modal";
 import CollectionModal from "@/components/Modal/CollectionModal";
 import DeleteCollection from "@/components/Modal/DeleteCollection";
+import ProfilePhoto from "./ProfilePhoto";
 
 export default function ({
   collection,
@@ -71,15 +70,11 @@ export default function ({
                 .sort((a, b) => (a.user.id as number) - (b.user.id as number))
                 .map((e, i) => {
                   return (
-                    <ImageWithFallback
+                    <ProfilePhoto
                       key={i}
                       src={`/api/avatar/${e.userId}`}
-                      className="h-10 w-10 shadow rounded-full border-[3px] border-sky-100 -mr-3"
-                    >
-                      <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>
+                      className="-mr-3"
+                    />
                   );
                 })
                 .slice(0, 4)}

components/ImageWithFallback.tsx

@@ -1,4 +1,4 @@
-import { ElementType, ReactElement, ReactNode, useState } from "react";
+import { ReactNode, useState } from "react";
 
 type Props = {
   src: string;

components/Modal/UserSettings.tsx

@@ -25,7 +25,6 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
 
   const [user, setUser] = useState<AccountSettings>({
     ...account,
-    // profilePic: null,
   });
 
   const [whitelistedUsersTextbox, setWhiteListedUsersTextbox] = useState(

components/ProfilePhoto.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import ImageWithFallback from "./ImageWithFallback";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faUser } from "@fortawesome/free-solid-svg-icons";
+
+type Props = {
+  src: string;
+  className?: string;
+};
+
+export default function ProfilePhoto({ src, className }: Props) {
+  return (
+    <ImageWithFallback
+      src={src}
+      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}`}
+      >
+        <FontAwesomeIcon icon={faUser} className="w-5 h-5" />
+      </div>
+    </ImageWithFallback>
+  );
+}