From 8ccc1b3fcc84d2bfc7dce6c473517c2135cdbf5b Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Date: Mon, 14 Aug 2023 16:23:10 +0530
Subject: [PATCH] fix: gray background on png image (#1856)

---
 .../projects/[projectId]/settings/members.tsx | 20 +++++++++++--------
 .../[workspaceSlug]/settings/members.tsx      | 20 +++++++++++--------
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index aca7c384e..8b528091b 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -194,19 +194,23 @@ const MembersSettings: NextPage = () => {
                 ? members.map((member) => (
                     <div key={member.id} className="flex items-center justify-between py-6">
                       <div className="flex items-center gap-x-6 gap-y-2">
-                        <div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 p-4 capitalize text-white">
-                          {member.avatar && member.avatar !== "" ? (
+                        {member.avatar && member.avatar !== "" ? (
+                          <div className="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize text-white">
                             <img
                               src={member.avatar}
                               alt={member.display_name}
                               className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
                             />
-                          ) : member.display_name || member.email ? (
-                            (member.display_name || member.email)?.charAt(0)
-                          ) : (
-                            "?"
-                          )}
-                        </div>
+                          </div>
+                        ) : member.display_name || member.email ? (
+                          <div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 p-4 capitalize text-white">
+                            {(member.display_name || member.email)?.charAt(0)}
+                          </div>
+                        ) : (
+                          <div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 p-4 capitalize text-white">
+                            ?
+                          </div>
+                        )}
                         <div>
                           {member.member ? (
                             <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
diff --git a/apps/app/pages/[workspaceSlug]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/settings/members.tsx
index 8626d86a0..a80ffeda0 100644
--- a/apps/app/pages/[workspaceSlug]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/members.tsx
@@ -207,19 +207,23 @@ const MembersSettings: NextPage = () => {
                 ? members.map((member) => (
                     <div key={member.id} className="flex items-center justify-between py-6">
                       <div className="flex items-center gap-x-8 gap-y-2">
-                        <div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 p-4 capitalize text-white">
-                          {member.avatar && member.avatar !== "" ? (
+                        {member.avatar && member.avatar !== "" ? (
+                          <div className="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize text-white">
                             <img
                               src={member.avatar}
                               className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
                               alt={member.display_name || member.email}
                             />
-                          ) : member.display_name || member.email ? (
-                            (member.display_name || member.email)?.charAt(0)
-                          ) : (
-                            "?"
-                          )}
-                        </div>
+                          </div>
+                        ) : member.display_name || member.email ? (
+                          <div className="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize bg-gray-700 text-white">
+                            {(member.display_name || member.email)?.charAt(0)}
+                          </div>
+                        ) : (
+                          <div className="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize bg-gray-700 text-white">
+                            ?
+                          </div>
+                        )}
                         <div>
                           {member.member ? (
                             <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>