admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add a hover on Show Person Avatar (#1631)

Browse Source 
* Display 404 while person or company not found

* Display 404 while person or company not found

* Issue solved

* Icon Size Adjustment, resize the icons used in filter and sort

* Fixed issues

* Icon Size Adjustment, resize the icons used in filter and sort

* Add onClick in Avatar.tsx

* Comments solved

* Solve conflicts

* Update front/src/modules/users/components/Avatar.tsx

* Update front/src/modules/users/components/Avatar.tsx

* Update front/src/modules/users/components/Avatar.tsx

* Update front/src/modules/users/components/Avatar.tsx

* Update front/src/modules/users/components/Avatar.tsx

---------

Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>
This commit is contained in:
Pepe
2023-09-27 15:33:39 +02:00
committed by GitHub
parent 9282885233
commit ee108ccbf2
3 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
front/src/modules/users/components/Avatar.tsx
View File

@ -16,6 +16,7 @@ export type AvatarProps = {
placeholder: string;
colorId?: string;
type?: AvatarType;
onClick?: () => void;
};
const StyledAvatar = styled.div<AvatarProps & { colorId: string }>`
@ -28,6 +29,7 @@ const StyledAvatar = styled.div<AvatarProps & { colorId: string }>`
background-size: cover;
border-radius: ${(props) => (props.type === 'rounded' ? '50%' : '2px')};
color: ${({ colorId }) => stringToHslColor(colorId, 75, 25)};
cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
display: flex;
flex-shrink: 0;
@ -79,6 +81,10 @@ const StyledAvatar = styled.div<AvatarProps & { colorId: string }>`
return '12px';
}
}};
&:hover {
box-shadow: 0 0 0 4px ${theme.background.transparent.light};
}
`;
export const Avatar = ({
@ -86,6 +92,7 @@ export const Avatar = ({
size = 'md',
placeholder,
colorId = placeholder,
onClick,
type = 'squared',
}: AvatarProps) => {
const noAvatarUrl = !isNonEmptyString(avatarUrl);
@ -111,6 +118,7 @@ export const Avatar = ({
size={size}
type={type}
colorId={colorId}
onClick={onClick}
>
{(noAvatarUrl || isInvalidAvatarUrl) &&
placeholder[0]?.toLocaleUpperCase()}