bug fix

components/Dropdown.tsx

@@ -24,7 +24,7 @@ export default function Dropdown({ onClickOutside, className, items }: Props) {
   return (
     <ClickAwayHandler
       onClickOutside={onClickOutside}
-      className={`${className} py-1 shadow-md bg-gray-50 rounded-md flex flex-col z-10`}
+      className={`${className} py-1 shadow-md border border-sky-100 bg-gray-50 rounded-md flex flex-col z-10`}
     >
       {items.map((e, i) => {
         const inner = (

components/FilterSearchDropdown.tsx

@@ -25,7 +25,7 @@ export default function FilterSearchDropdown({
         const target = e.target as HTMLInputElement;
         if (target.id !== "filter-dropdown") setFilterDropdown(false);
       }}
-      className="absolute top-8 right-0 shadow-md bg-gray-50 rounded-md p-2 z-20 w-40"
+      className="absolute top-8 right-0 border border-sky-100 shadow-md bg-gray-50 rounded-md p-2 z-20 w-40"
     >
       <p className="mb-2 text-sky-900 text-center font-semibold">Filter by</p>
       <div className="flex flex-col gap-2">

components/Modal/User/ProfileSettings.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useEffect } from "react";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faClose } from "@fortawesome/free-solid-svg-icons";
 import useAccountStore from "@/store/account";
@@ -22,6 +22,12 @@ export default function ProfileSettings({
 }: Props) {
   const { update } = useSession();
   const { account, updateAccount } = useAccountStore();
+  const [profileStatus, setProfileStatus] = useState(true);
+
+  const handleProfileStatus = (e: boolean) => {
+    console.log(e);
+    setProfileStatus(!e);
+  };
 
   const handleImageUpload = async (e: any) => {
     const file: File = e.target.files[0];
@@ -54,6 +60,10 @@ export default function ProfileSettings({
     setUser({ ...user, oldPassword: undefined, newPassword: undefined });
   }, []);
 
+  useEffect(() => {
+    console.log(user.profilePic);
+  }, [user.profilePic]);
+
   const submit = async () => {
     const response = await updateAccount({
       ...user,
@@ -76,8 +86,9 @@ export default function ProfileSettings({
             <ProfilePhoto
               src={user.profilePic}
               className="h-28 w-28 border-[1px]"
+              status={handleProfileStatus}
             />
-            {user.profilePic && (
+            {profileStatus && (
               <div
                 onClick={() =>
                   setUser({

components/ProfilePhoto.tsx

@@ -8,9 +8,15 @@ type Props = {
   src: string;
   className?: string;
   emptyImage?: boolean;
+  status?: Function;
 };
 
-export default function ProfilePhoto({ src, className, emptyImage }: Props) {
+export default function ProfilePhoto({
+  src,
+  className,
+  emptyImage,
+  status,
+}: Props) {
   const [error, setError] = useState<boolean>(emptyImage || true);
 
   const checkAvatarExistence = async () => {
@@ -21,9 +27,11 @@ export default function ProfilePhoto({ src, className, emptyImage }: Props) {
 
   useEffect(() => {
     if (src) checkAvatarExistence();
-  }, [src]);
 
-  return error ? (
+    status && status(error || !src);
+  }, [src, error]);
+
+  return error || !src ? (
     <div
       className={`bg-sky-500 text-white h-10 w-10 shadow rounded-full border-[3px] border-slate-200 flex items-center justify-center ${className}`}
     >
@@ -31,7 +39,7 @@ export default function ProfilePhoto({ src, className, emptyImage }: Props) {
     </div>
   ) : (
     <Image
-      alt="Avatar"
+      alt=""
       src={src}
       height={112}
       width={112}

components/SortLinkDropdown.tsx

@@ -19,7 +19,7 @@ export default function SortLinkDropdown({
         const target = e.target as HTMLInputElement;
         if (target.id !== "sort-dropdown") toggleSortDropdown();
       }}
-      className="absolute top-8 right-0 shadow-md bg-gray-50 rounded-md p-2 z-10 w-48"
+      className="absolute top-8 right-0 border border-sky-100 shadow-md bg-gray-50 rounded-md p-2 z-10 w-48"
     >
       <p className="mb-2 text-sky-900 text-center font-semibold">Sort by</p>
       <div className="flex flex-col gap-2">