From a9a80b8c7082e2d814f58bd8f09725ec7c0720ca Mon Sep 17 00:00:00 2001
From: Harry Nguyen <nguyentrihieu.it@gmail.com>
Date: Fri, 21 Apr 2023 00:06:39 +0700
Subject: [PATCH] chore(ui): change background color to transparent for avatar
 with photoUrl (#7527)

Co-authored-by: Nguyen Tri Hieu <nhieu@fossil.com>
Co-authored-by: Chris Collins <chriscollins3456@gmail.com>
---
 .../src/app/shared/avatar/CustomAvatar.tsx             | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/datahub-web-react/src/app/shared/avatar/CustomAvatar.tsx b/datahub-web-react/src/app/shared/avatar/CustomAvatar.tsx
index e6ed274411..05c7c28290 100644
--- a/datahub-web-react/src/app/shared/avatar/CustomAvatar.tsx
+++ b/datahub-web-react/src/app/shared/avatar/CustomAvatar.tsx
@@ -7,9 +7,9 @@ import styled from 'styled-components';
 import defaultAvatar from '../../../images/default_avatar.png';
 import getAvatarColor from './getAvatarColor';
 
-const AvatarStyled = styled(Avatar)<{ size?: number; $backgroundColor: string }>`
+const AvatarStyled = styled(Avatar)<{ size?: number; $backgroundColor?: string }>`
     color: #fff;
-    background-color: ${(props) => props.$backgroundColor};
+    background-color: ${(props) => (props.$backgroundColor ? `${props.$backgroundColor}` : 'transparent')};
     font-size: ${(props) => (props.size ? `${Math.max(props.size / 2.0, 12)}px` : '14px')} !important;
     margin-right: 4px;
     height: 24px;
@@ -61,11 +61,7 @@ export default function CustomAvatar({
         avatarWithInitial
     );
     const avatar =
-        photoUrl && photoUrl !== '' ? (
-            <AvatarStyled src={photoUrl} style={style} size={size} $backgroundColor={getAvatarColor(name)} />
-        ) : (
-            avatarWithDefault
-        );
+        photoUrl && photoUrl !== '' ? <AvatarStyled src={photoUrl} style={style} size={size} /> : avatarWithDefault;
     if (!name) {
         return url ? <Link to={url}>{avatar}</Link> : avatar;
     }