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"
+                      className="-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>
                   );
                 })
                 .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>
+  );
+}

lib/api/controllers/users/updateUser.ts

@@ -74,7 +74,7 @@ export default async function (user: AccountSettings, userId: number) {
     }
   }
 
-  const { password, ...unsensitiveInfo } = updatedUser;
+  const { password, ...userInfo } = updatedUser;
 
-  return { response: unsensitiveInfo, status: 200 };
+  return { response: userInfo, status: 200 };
 }

pages/collections/[id].tsx

@@ -19,7 +19,6 @@ import {
   faPenToSquare,
   faSort,
   faTrashCan,
-  faUser,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useRouter } from "next/router";
@@ -27,8 +26,8 @@ import { ChangeEvent, useEffect, useState } from "react";
 import MainLayout from "@/layouts/MainLayout";
 import RadioButton from "@/components/RadioButton";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
-import ImageWithFallback from "@/components/ImageWithFallback";
 import { useSession } from "next-auth/react";
+import ProfilePhoto from "@/components/ProfilePhoto";
 
 export default function () {
   const router = useRouter();
@@ -120,10 +119,18 @@ export default function () {
               </div>
             </div>
 
-            {activeCollection?.members[0] ? (
+            {activeCollection ? (
-              <div>
+              <div
-                <div className="text-sky-400 flex justify-end items-center w-60 mr-3">
+                className={`text-sky-400 w-60 ${
-                  <div className="mr-1 bg-sky-500 p-2 leading-3 select-none cursor-pointer hover:bg-sky-400 duration-100 text-white rounded-full text-xs">
+                  activeCollection.members[0] && "mr-3"
+                }`}
+              >
+                <div className="flex justify-end items-center w-fit ml-auto group cursor-pointer">
+                  <div
+                    className={`bg-sky-500 p-2 leading-3 select-none group-hover:bg-sky-400 duration-100 text-white rounded-full text-xs ${
+                      activeCollection.members[0] && "mr-1"
+                    }`}
+                  >
                     {activeCollection.ownerId === data?.user.id
                       ? "Manage"
                       : "View"}{" "}
@@ -135,18 +142,11 @@ export default function () {
                     )
                     .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"
+                          className="-mr-3 group-hover:brightness-125 bg-white duration-100"
-                        >
+                        />
-                          <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>
                       );
                     })
                     .slice(0, 4)}