yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-11-07 06:13:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui): change background color to transparent for avatar with photoUrl (#7527)

Browse Source 
Co-authored-by: Nguyen Tri Hieu <nhieu@fossil.com>
Co-authored-by: Chris Collins <chriscollins3456@gmail.com>
This commit is contained in:
Harry Nguyen 2023-04-21 00:06:39 +07:00 committed by GitHub
parent 73a12379ae
commit a9a80b8c70
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 3 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
datahub-web-react/src/app/shared/avatar/CustomAvatar.tsx
View File

@ -7,9 +7,9 @@ import styled from 'styled-components';
import defaultAvatar from '../../../images/default_avatar.png'; import defaultAvatar from '../../../images/default_avatar.png';
import getAvatarColor from './getAvatarColor'; import getAvatarColor from './getAvatarColor';
const AvatarStyled = styled(Avatar)<{ size?: number; $backgroundColor: string }>` const AvatarStyled = styled(Avatar)<{ size?: number; $backgroundColor?: string }>`
color: #fff; 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; font-size: ${(props) => (props.size ? `${Math.max(props.size / 2.0, 12)}px` : '14px')} !important;
margin-right: 4px; margin-right: 4px;
height: 24px; height: 24px;
@ -61,11 +61,7 @@ export default function CustomAvatar({
avatarWithInitial avatarWithInitial
); );
const avatar = const avatar =
photoUrl && photoUrl !== '' ? ( photoUrl && photoUrl !== '' ? <AvatarStyled src={photoUrl} style={style} size={size} /> : avatarWithDefault;
<AvatarStyled src={photoUrl} style={style} size={size} $backgroundColor={getAvatarColor(name)} />
) : (
avatarWithDefault
);
if (!name) { if (!name) {
return url ? <Link to={url}>{avatar}</Link> : avatar; return url ? <Link to={url}>{avatar}</Link> : avatar;
} }