Design fixes + hide email tab if not a company or a person (#3720)

Design fixes + hide email tab

Co-authored-by: Thomas Trompette <thomast@twenty.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/activities/emails/components/EmailThreadHeader.tsx

@@ -27,6 +27,7 @@ const StyledHeading = styled.h2`
   margin: 0;
   margin-bottom: ${({ theme }) => theme.spacing(3)};
   max-width: 100%;
+  color: ${({ theme }) => theme.font.color.primary};
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBodyPreview.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
-const StyledThreadMessageBodyPreview = styled.span`
+const StyledThreadMessageBodyPreview = styled.div`
   color: ${({ theme }) => theme.font.color.tertiary};
-  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx

@@ -23,6 +23,7 @@ const StyledAvatar = styled(Avatar)`
 `;
 
 const StyledSenderName = styled.span`
+  color: ${({ theme }) => theme.font.color.primary};
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.medium};
   overflow: hidden;

packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx

@@ -17,10 +17,6 @@ const StyledCardContent = styled(CardContent)`
 
 const StyledHeading = styled.div<{ unread: boolean }>`
   display: flex;
-  color: ${({ theme, unread }) =>
-    unread ? theme.font.color.primary : theme.font.color.secondary};
-  font-weight: ${({ theme, unread }) =>
-    unread ? theme.font.weight.medium : theme.font.weight.regular};
   overflow: hidden;
   width: 20%;
 `;
@@ -53,9 +49,8 @@ const StyledSubjectAndBody = styled.div`
   overflow: hidden;
 `;
 
-const StyledSubject = styled.span<{ unread: boolean }>`
+const StyledSubject = styled.span`
-  color: ${({ theme, unread }) =>
+  color: ${({ theme }) => theme.font.color.primary};
-    unread ? theme.font.color.primary : theme.font.color.secondary};
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -136,7 +131,7 @@ export const EmailThreadPreview = ({
       </StyledHeading>
 
       <StyledSubjectAndBody>
-        <StyledSubject unread={!thread.read}>{thread.subject}</StyledSubject>
+        <StyledSubject>{thread.subject}</StyledSubject>
         <StyledBody>{thread.lastMessageBody}</StyledBody>
       </StyledSubjectAndBody>
       <StyledReceivedAt>

packages/twenty-front/src/modules/ui/input/button/components/IconButton.tsx

@@ -129,7 +129,7 @@ const StyledButton = styled.button<
                 ? `0 0 0 3px ${theme.accent.tertiary}`
                 : 'none'};
               color: ${!disabled
-                ? theme.font.color.secondary
+                ? theme.font.color.tertiary
                 : theme.font.color.extraLight};
               &:hover {
                 background: ${!disabled

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx

@@ -8,6 +8,7 @@ import { ObjectTasks } from '@/activities/tasks/components/ObjectTasks';
 import { Timeline } from '@/activities/timeline/components/Timeline';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import {
   IconCheckbox,
   IconMail,
@@ -65,6 +66,12 @@ export const ShowPageRightContainer = ({
       objectNameSingular: targetableObject.targetObjectNameSingular,
     });
 
+  const shouldDisplayEmailsTab =
+    (emails &&
+      targetableObject.targetObjectNameSingular ===
+        CoreObjectNameSingular.Company) ||
+    targetableObject.targetObjectNameSingular === CoreObjectNameSingular.Person;
+
   const TASK_TABS = [
     {
       id: 'timeline',
@@ -95,8 +102,8 @@ export const ShowPageRightContainer = ({
       id: 'emails',
       title: 'Emails',
       Icon: IconMail,
-      hide: !emails,
+      hide: !shouldDisplayEmailsTab,
-      disabled: !isMessagingEnabled || targetableObjectMetadataItem.isCustom,
+      disabled: !isMessagingEnabled,
     },
   ];