Fixed Actor Icon Size & color (#12373)

![CleanShot 2025-05-29 at 11 54
26@2x](https://github.com/user-attachments/assets/61182699-357e-45ad-a625-c66445727e3b)

1. was 16px instead of 14px like 2.
2. was 14px – font color had low contrast – height was 16px instead of
14px

Couldn't test if 1 was fixed as didn't have a local email server.

2. is fixed:

![CleanShot 2025-05-29 at 11 56
26@2x](https://github.com/user-attachments/assets/38cccf84-e36e-4a3e-80c9-43ddac46f2f9)

---------

Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownCurrencySelect.tsx

@@ -2,7 +2,6 @@ import { useApplyObjectFilterDropdownFilterValue } from '@/object-record/object-
 import { fieldMetadataItemUsedInDropdownComponentSelector } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemUsedInDropdownComponentSelector';
 import { objectFilterDropdownCurrentRecordFilterComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownCurrentRecordFilterComponentState';
 import { turnCurrencyIntoSelectableItem } from '@/object-record/object-filter-dropdown/utils/turnCurrencyIntoSelectableItem';
-import { StyledMultipleSelectDropdownAvatarChip } from '@/object-record/select/components/StyledMultipleSelectDropdownAvatarChip';
 import { SelectableItem } from '@/object-record/select/types/SelectableItem';
 import { CURRENCIES } from '@/settings/data-model/constants/Currencies';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
@@ -117,17 +116,8 @@ export const ObjectFilterDropdownCurrencySelect = () => {
               onSelectChange={(newCheckedValue) => {
                 handleMultipleItemSelectChange(item, newCheckedValue);
               }}
-              avatar={
+              text={item.name}
-                <StyledMultipleSelectDropdownAvatarChip
+              avatar={item.AvatarIcon && <item.AvatarIcon size="16" />}
-                  className="avatar-icon-container"
-                  name={item.name}
-                  avatarUrl={item.avatarUrl}
-                  LeftIcon={item.AvatarIcon}
-                  avatarType={item.avatarType}
-                  isIconInverted={item.isIconInverted}
-                  placeholderColorSeed={item.id}
-                />
-              }
             />
           );
         })}
@@ -139,17 +129,8 @@ export const ObjectFilterDropdownCurrencySelect = () => {
               onSelectChange={(newCheckedValue) => {
                 handleMultipleItemSelectChange(item, newCheckedValue);
               }}
-              avatar={
+              text={item.name}
-                <StyledMultipleSelectDropdownAvatarChip
+              avatar={item.AvatarIcon && <item.AvatarIcon size="16" />}
-                  className="avatar-icon-container"
-                  name={item.name}
-                  avatarUrl={item.avatarUrl}
-                  LeftIcon={item.AvatarIcon}
-                  avatarType={item.avatarType}
-                  isIconInverted={item.isIconInverted}
-                  placeholderColorSeed={item.id}
-                />
-              }
             />
           );
         })}

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordPinnedItems.tsx

@@ -1,6 +1,6 @@
-import { StyledMultipleSelectDropdownAvatarChip } from '@/object-record/select/components/StyledMultipleSelectDropdownAvatarChip';
 import { SelectableItem } from '@/object-record/select/types/SelectableItem';
 import styled from '@emotion/styled';
+import { Avatar } from 'twenty-ui/display';
 import { MenuItemMultiSelectAvatar } from 'twenty-ui/navigation';
 
 const StyledPinnedItemsContainer = styled.div`
@@ -26,16 +26,21 @@ export const ObjectFilterDropdownRecordPinnedItems = (props: {
             onSelectChange={(newCheckedValue) => {
               props.onChange(selectableItem, newCheckedValue);
             }}
+            text={selectableItem.name}
             avatar={
-              <StyledMultipleSelectDropdownAvatarChip
+              selectableItem.avatarUrl ? (
-                className="avatar-icon-container"
+                <Avatar
-                name={selectableItem.name}
+                  avatarUrl={selectableItem.avatarUrl}
-                avatarUrl={selectableItem.avatarUrl}
+                  placeholderColorSeed={selectableItem.id}
-                LeftIcon={selectableItem.AvatarIcon}
+                  placeholder={selectableItem.name}
-                avatarType={selectableItem.avatarType}
+                  type={selectableItem.avatarType}
-                isIconInverted={selectableItem.isIconInverted}
+                  size="md"
-                placeholderColorSeed={selectableItem.id}
+                />
-              />
+              ) : (
+                selectableItem.AvatarIcon && (
+                  <selectableItem.AvatarIcon size="16" />
+                )
+              )
             }
           />
         );

packages/twenty-front/src/modules/object-record/select/components/MultipleSelectDropdown.tsx

@@ -1,6 +1,5 @@
 import { Key } from 'ts-key-enum';
 
-import { StyledMultipleSelectDropdownAvatarChip } from '@/object-record/select/components/StyledMultipleSelectDropdownAvatarChip';
 import { SelectableItem } from '@/object-record/select/types/SelectableItem';
 import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
@@ -12,6 +11,7 @@ import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectab
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { Avatar } from 'twenty-ui/display';
 import { MenuItem, MenuItemMultiSelectAvatar } from 'twenty-ui/navigation';
 
 export const MultipleSelectDropdown = ({
@@ -105,15 +105,14 @@ export const MultipleSelectDropdown = ({
                     resetSelectedItem();
                     handleItemSelectChange(item, newCheckedValue);
                   }}
+                  text={item.name}
                   avatar={
-                    <StyledMultipleSelectDropdownAvatarChip
+                    <Avatar
-                      className="avatar-icon-container"
-                      name={item.name}
                       avatarUrl={item.avatarUrl}
-                      LeftIcon={item.AvatarIcon}
-                      avatarType={item.avatarType}
-                      isIconInverted={item.isIconInverted}
                       placeholderColorSeed={item.id}
+                      placeholder={item.name}
+                      size="md"
+                      type={item.avatarType}
                     />
                   }
                 />

packages/twenty-front/src/modules/object-record/select/components/StyledMultipleSelectDropdownAvatarChip.tsx

@@ -1,12 +0,0 @@
-import styled from '@emotion/styled';
-import { AvatarChip } from 'twenty-ui/components';
-
-export const StyledMultipleSelectDropdownAvatarChip = styled(AvatarChip)`
-  &.avatar-icon-container {
-    color: ${({ theme }) => theme.font.color.secondary};
-    gap: ${({ theme }) => theme.spacing(2)};
-    padding-left: 0px;
-    padding-right: 0px;
-    font-size: ${({ theme }) => theme.font.size.md};
-  }
-`;

packages/twenty-ui/src/components/avatar-chip/AvatarChipLeftComponent.tsx

@@ -56,8 +56,8 @@ export const AvatarChipsLeftComponent: React.FC<
         backgroundColor={theme.background.invertedSecondary}
       >
         <LeftIcon
-          color="white"
+          color={theme.font.color.inverted}
-          size={theme.icon.size.md}
+          size={theme.icon.size.sm}
           stroke={theme.icon.stroke.sm}
         />
       </StyledInvertedIconContainer>
@@ -66,7 +66,7 @@ export const AvatarChipsLeftComponent: React.FC<
 
   return (
     <LeftIcon
-      size={theme.icon.size.md}
+      size={theme.icon.size.sm}
       stroke={theme.icon.stroke.sm}
       color={LeftIconColor || 'currentColor'}
     />

packages/twenty-ui/src/components/chip/Chip.tsx

@@ -109,17 +109,11 @@ const StyledContainer = withTheme(styled.div<
   background-color: ${({ theme, variant }) =>
     variant === ChipVariant.Highlighted || variant === ChipVariant.Static
       ? theme.background.transparent.light
-      : variant === ChipVariant.Rounded
+      : 'inherit'};
-        ? theme.background.transparent.lighter
-        : 'inherit'};
 
-  border: ${({ theme, variant }) =>
+  border: none;
-    variant === ChipVariant.Rounded
-      ? `1px solid ${theme.border.color.medium}`
-      : 'none'};
 
-  border-radius: ${({ theme, variant }) =>
+  border-radius: ${({ theme }) => theme.border.radius.sm};
-    variant === ChipVariant.Rounded ? '50px' : theme.border.radius.sm};
 
   & > svg {
     flex-shrink: 0;