From 8b9d62e42564d19072dc0cc5210c19a26b50d0d0 Mon Sep 17 00:00:00 2001
From: bosiraphael <71827178+bosiraphael@users.noreply.github.com>
Date: Tue, 30 Jan 2024 17:46:25 +0100
Subject: [PATCH] 3681 avatars are not appearing in the messages and people
 name should be bold (#3692)

* update font weight

* fix picture not appearing
---
 .../emails/components/EmailThreadMessageSender.tsx         | 7 ++++++-
 .../object-metadata/utils/getObjectRecordIdentifier.ts     | 5 ++++-
 .../src/modules/object-record/components/RecordChip.tsx    | 3 +++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx
index cb54fc90c..58e2663a8 100644
--- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx
+++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx
@@ -24,6 +24,7 @@ const StyledAvatar = styled(Avatar)`
 
 const StyledSenderName = styled.span`
   font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
   overflow: hidden;
   text-overflow: ellipsis;
 `;
@@ -35,6 +36,10 @@ const StyledThreadMessageSentAt = styled.div`
   font-size: ${({ theme }) => theme.font.size.sm};
 `;
 
+const StyledRecordChip = styled(RecordChip)`
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+`;
+
 type EmailThreadMessageSenderProps = {
   sender: EmailThreadMessageParticipant;
   sentAt: string;
@@ -57,7 +62,7 @@ export const EmailThreadMessageSender = ({
     <StyledEmailThreadMessageSender>
       <StyledEmailThreadMessageSenderUser>
         {person ? (
-          <RecordChip
+          <StyledRecordChip
             objectNameSingular={CoreObjectNameSingular.Person}
             record={person}
           />
diff --git a/packages/twenty-front/src/modules/object-metadata/utils/getObjectRecordIdentifier.ts b/packages/twenty-front/src/modules/object-metadata/utils/getObjectRecordIdentifier.ts
index 655b80860..f0217bc3c 100644
--- a/packages/twenty-front/src/modules/object-metadata/utils/getObjectRecordIdentifier.ts
+++ b/packages/twenty-front/src/modules/object-metadata/utils/getObjectRecordIdentifier.ts
@@ -52,10 +52,13 @@ export const getObjectRecordIdentifier = ({
       ? 'squared'
       : 'rounded';
 
+  // TODO: This is a temporary solution before we seed imageIdentifierFieldMetadataId in the database
   const avatarUrl =
     (objectMetadataItem.nameSingular === CoreObjectNameSingular.Company
       ? getLogoUrlFromDomainName(record['domainName'] ?? '')
-      : imageIdentifierFieldValue) ?? '';
+      : objectMetadataItem.nameSingular === CoreObjectNameSingular.Person
+        ? record['avatarUrl'] ?? ''
+        : imageIdentifierFieldValue) ?? '';
 
   const basePathToShowPage = getBasePathToShowPage({
     objectMetadataItem,
diff --git a/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx b/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx
index 8b09dc947..0da8ecf3b 100644
--- a/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx
+++ b/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx
@@ -9,12 +9,14 @@ export type RecordChipProps = {
   objectNameSingular: string;
   record: ObjectRecord;
   maxWidth?: number;
+  className?: string;
 };
 
 export const RecordChip = ({
   objectNameSingular,
   record,
   maxWidth,
+  className,
 }: RecordChipProps) => {
   const { objectMetadataItem } = useObjectMetadataItemOnly({
     objectNameSingular,
@@ -34,6 +36,7 @@ export const RecordChip = ({
       avatarUrl={objectRecordIdentifier.avatarUrl}
       linkToEntity={objectRecordIdentifier.linkToShowPage}
       maxWidth={maxWidth}
+      className={className}
     />
   );
 };