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>
This commit is contained in:
Thomas Trompette 2024-01-31 16:55:04 +01:00 committed by GitHub
parent 82d99afe2f
commit 389c263e2e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 16 additions and 13 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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 }>`
color: ${({ theme, unread }) =>
unread ? theme.font.color.primary : theme.font.color.secondary};
const StyledSubject = styled.span`
color: ${({ theme }) => theme.font.color.primary};
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>

View File

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

View File

@ -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,
disabled: !isMessagingEnabled || targetableObjectMetadataItem.isCustom,
hide: !shouldDisplayEmailsTab,
disabled: !isMessagingEnabled,
},
];