Add a hover on Show Person Avatar (#1631)

* 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>

front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx

@@ -89,15 +89,16 @@ export const ShowPageSummaryCard = ({
   const onFileChange = (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target.files) onUploadPicture?.(e.target.files[0]);
   };
-  const onAvatarClick = () => {
+  const handleAvatarClick = () => {
     if (onUploadPicture) inputFileRef?.current?.click?.();
   };
 
   return (
     <StyledShowPageSummaryCard>
-      <StyledAvatarWrapper onClick={onAvatarClick}>
+      <StyledAvatarWrapper>
         <Avatar
           avatarUrl={logoOrAvatar}
+          onClick={handleAvatarClick}
           size="xl"
           colorId={id}
           placeholder={title}

front/src/modules/ui/view-bar/components/UpdateViewButtonGroup.tsx

@@ -28,7 +28,6 @@ const StyledContainer = styled.div`
   margin-right: ${({ theme }) => theme.spacing(2)};
   position: relative;
 `;
-
 export type UpdateViewButtonGroupProps = {
   hotkeyScope: string;
   onViewEditModeChange?: () => void;

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

@@ -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()}