fix: Profile image showing incorrectly (#2307)

Co-authored-by: Matti Nannt <mail@matthiasnannt.com>

apps/web/app/(app)/environments/[environmentId]/components/Navigation.tsx

@@ -14,13 +14,13 @@ import {
   LinkIcon,
   LogOutIcon,
   MailIcon,
+  MenuIcon,
   MessageSquareTextIcon,
   PlusIcon,
   SlidersIcon,
   UserCircleIcon,
   UsersIcon,
 } from "lucide-react";
-import { MenuIcon } from "lucide-react";
 import type { Session } from "next-auth";
 import { signOut } from "next-auth/react";
 import Image from "next/image";
@@ -330,17 +330,7 @@ export default function Navigation({
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild id="userDropdownTrigger">
                     <div tabIndex={0} className="flex cursor-pointer flex-row items-center space-x-5">
-                      {session.user.imageUrl ? (
-                        <Image
-                          src={session.user.imageUrl}
-                          width="40"
-                          height="40"
-                          className="ph-no-capture h-10 w-10 rounded-full"
-                          alt="Profile picture"
-                        />
-                      ) : (
-                        <ProfileAvatar userId={session.user.id} />
-                      )}
+                      <ProfileAvatar userId={session.user.id} imageUrl={session.user.imageUrl} />
 
                       <div>
                         <p className="ph-no-capture ph-no-capture -mb-0.5 text-sm font-bold text-slate-700">

apps/web/app/(app)/environments/[environmentId]/settings/profile/components/DeleteAccount.tsx

@@ -1,10 +1,8 @@
 "use client";
 
 import { formbricksLogout } from "@/app/lib/formbricks";
-import AvatarPlaceholder from "@/images/avatar-placeholder.png";
 import { Session } from "next-auth";
 import { signOut } from "next-auth/react";
-import Image from "next/image";
 import { Dispatch, SetStateAction, useState } from "react";
 import toast from "react-hot-toast";
 
@@ -18,17 +16,7 @@ import { deleteUserAction } from "../actions";
 export function EditAvatar({ session }) {
   return (
     <div>
-      {session?.user?.image ? (
-        <Image
-          src={AvatarPlaceholder}
-          width="100"
-          height="100"
-          className="h-24 w-24 rounded-full"
-          alt="Avatar placeholder"
-        />
-      ) : (
-        <ProfileAvatar userId={session?.user?.id} />
-      )}
+      <ProfileAvatar userId={session.user.id} imageUrl={session.user.imageUrl} />
 
       <Button className="mt-4" variant="darkCTA" disabled={true}>
         Upload Image

apps/web/app/(app)/environments/[environmentId]/settings/profile/components/EditAvatar.tsx

@@ -2,7 +2,6 @@
 
 import { updateAvatarAction } from "@/app/(app)/environments/[environmentId]/settings/profile/actions";
 import { Session } from "next-auth";
-import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { useRef, useState } from "react";
 import toast from "react-hot-toast";
@@ -12,7 +11,7 @@ import { Button } from "@formbricks/ui/Button";
 
 import { handleFileUpload } from "../lib";
 
-export function EditAvatar({ session, environmentId }: { session: Session | null; environmentId: string }) {
+export function EditAvatar({ session, environmentId }: { session: Session; environmentId: string }) {
   const inputRef = useRef<HTMLInputElement>(null);
   const [isLoading, setIsLoading] = useState(false);
   const router = useRouter();
@@ -54,20 +53,7 @@ export function EditAvatar({ session, environmentId }: { session: Session | null
           </div>
         )}
 
-        {session?.user?.imageUrl ? (
-          <Image
-            src={session.user.imageUrl}
-            width="40"
-            height="40"
-            style={{
-              objectFit: "cover",
-            }}
-            className="h-10 w-10 rounded-full"
-            alt="Avatar placeholder"
-          />
-        ) : (
-          <ProfileAvatar userId={session!.user.id} />
-        )}
+        <ProfileAvatar userId={session.user.id} imageUrl={session.user.imageUrl} />
       </div>
 
       <Button

apps/web/app/(app)/environments/[environmentId]/settings/profile/page.tsx

@@ -15,6 +15,9 @@ import { EditName } from "./components/EditName";
 export default async function ProfileSettingsPage({ params }: { params: { environmentId: string } }) {
   const { environmentId } = params;
   const session = await getServerSession(authOptions);
+  if (!session) {
+    throw new Error("Session not found");
+  }
   const user = session && session.user ? await getUser(session.user.id) : null;
 
   return (

packages/ui/Avatars/index.tsx

@@ -1,4 +1,5 @@
 import Avatar from "boring-avatars";
+import Image from "next/image";
 
 const colors = ["#00C4B8", "#ccfbf1", "#334155"];
 
@@ -12,8 +13,20 @@ export const PersonAvatar: React.FC<PersonAvatarProps> = ({ personId }) => {
 
 interface ProfileAvatar {
   userId: string;
+  imageUrl?: string | null;
 }
 
-export const ProfileAvatar: React.FC<ProfileAvatar> = ({ userId }) => {
+export const ProfileAvatar: React.FC<ProfileAvatar> = ({ userId, imageUrl }) => {
+  if (imageUrl) {
+    return (
+      <Image
+        src={imageUrl}
+        width="40"
+        height="40"
+        className="h-10 w-10 rounded-full object-cover"
+        alt="Avatar placeholder"
+      />
+    );
+  }
   return <Avatar size={40} name={userId} variant="bauhaus" colors={colors} />;
 };