Introduced Specific Icons image identifier for Notes and Tasks (#6997)

Fixes #6486

packages/twenty-ui/src/display/avatar/components/Avatar.tsx

@@ -7,6 +7,7 @@ import { invalidAvatarUrlsState } from '@ui/display/avatar/components/states/isI
 import { AVATAR_PROPERTIES_BY_SIZE } from '@ui/display/avatar/constants/AvatarPropertiesBySize';
 import { AvatarSize } from '@ui/display/avatar/types/AvatarSize';
 import { AvatarType } from '@ui/display/avatar/types/AvatarType';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
 import { ThemeContext } from '@ui/theme';
 import { Nullable, getImageAbsoluteURI, stringToHslColor } from '@ui/utilities';
 
@@ -17,13 +18,16 @@ const StyledAvatar = styled.div<{
   color: string;
   backgroundColor: string;
   backgroundTransparentLight: string;
+  type?: Nullable<AvatarType>;
 }>`
   align-items: center;
   flex-shrink: 0;
   overflow: hidden;
   user-select: none;
 
-  border-radius: ${({ rounded }) => (rounded ? '50%' : '2px')};
+  border-radius: ${({ rounded, type }) => {
+    return rounded ? '50%' : type === 'icon' ? '4px' : '2px';
+  }};
   display: flex;
   font-size: ${({ size }) => AVATAR_PROPERTIES_BY_SIZE[size].fontSize};
   height: ${({ size }) => AVATAR_PROPERTIES_BY_SIZE[size].width};
@@ -51,6 +55,8 @@ export type AvatarProps = {
   size?: AvatarSize;
   placeholder: string | undefined;
   placeholderColorSeed?: string;
+  Icon?: IconComponent;
+  iconColor?: string;
   type?: Nullable<AvatarType>;
   color?: string;
   backgroundColor?: string;
@@ -63,6 +69,8 @@ export const Avatar = ({
   size = 'md',
   placeholder,
   placeholderColorSeed = placeholder,
+  Icon,
+  iconColor,
   onClick,
   type = 'squared',
   color,
@@ -101,14 +109,26 @@ export const Avatar = ({
   return (
     <StyledAvatar
       size={size}
-      backgroundColor={showBackgroundColor ? fixedBackgroundColor : 'none'}
+      backgroundColor={
+        Icon
+          ? theme.background.tertiary
+          : showBackgroundColor
+            ? fixedBackgroundColor
+            : 'none'
+      }
       color={fixedColor}
       clickable={!isUndefined(onClick)}
       rounded={type === 'rounded'}
+      type={type}
       onClick={onClick}
       backgroundTransparentLight={theme.background.transparent.light}
     >
-      {showPlaceholder ? (
+      {Icon ? (
+        <Icon
+          color={iconColor ? iconColor : 'currentColor'}
+          size={theme.icon.size.xl}
+        />
+      ) : showPlaceholder ? (
         placeholderChar
       ) : (
         <StyledImage src={avatarImageURI} onError={handleImageError} alt="" />

packages/twenty-ui/src/display/avatar/types/AvatarType.ts

@@ -1 +1 @@
-export type AvatarType = 'squared' | 'rounded';
+export type AvatarType = 'squared' | 'rounded' | 'icon';

packages/twenty-ui/src/display/chip/components/AvatarChip.tsx

@@ -14,6 +14,7 @@ export type AvatarChipProps = {
   avatarType?: Nullable<AvatarType>;
   variant?: AvatarChipVariant;
   LeftIcon?: IconComponent;
+  LeftIconColor?: string;
   isIconInverted?: boolean;
   className?: string;
   placeholderColorSeed?: string;
@@ -41,6 +42,7 @@ export const AvatarChip = ({
   avatarType = 'rounded',
   variant = AvatarChipVariant.Regular,
   LeftIcon,
+  LeftIconColor,
   isIconInverted,
   className,
   placeholderColorSeed,
@@ -71,7 +73,11 @@ export const AvatarChip = ({
               />
             </StyledInvertedIconContainer>
           ) : (
-            <LeftIcon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
+            <LeftIcon
+              size={theme.icon.size.md}
+              stroke={theme.icon.stroke.sm}
+              color={LeftIconColor || 'currentColor'}
+            />
           )
         ) : (
           <Avatar