twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-27 01:05:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

minor fix - email thread reply button stylings/corrections (#7168)

Browse Source 
fixes #7155
This commit is contained in:
nitin 2024-09-23 14:34:04 +05:30 committed by GitHub
parent 8d496902b7
commit aa7b3107f4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 55 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx
View File

@ -13,33 +13,38 @@ import { Button } from '@/ui/input/button/components/Button';
import { RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID } from '@/ui/layout/right-drawer/constants/RightDrawerClickOutsideListener';
import { messageThreadState } from '@/ui/layout/right-drawer/states/messageThreadState';
import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { IconArrowBackUp } from 'twenty-ui';
const StyledWrapper = styled.div`
display: flex;
flex-direction: column;
height: 100%;
`;
const StyledContainer = styled.div`
box-sizing: border-box;
display: flex;
flex-direction: column;
flex: 1;
height: 85%;
justify-content: flex-start;
overflow-y: auto;
position: relative;
`;
const StyledButtonContainer = styled.div`
const StyledButtonContainer = styled.div<{ isMobile: boolean }>`
background: ${({ theme }) => theme.background.secondary};
bottom: 0;
border-top: 1px solid ${({ theme }) => theme.border.color.light};
display: flex;
height: 110px;
left: 0;
padding-left: ${({ theme }) => theme.spacing(7)};
padding-top: ${({ theme }) => theme.spacing(5)};
position: fixed;
right: 0;
justify-content: flex-end;
height: ${({ isMobile }) => (isMobile ? '100px' : '50px')};
padding: ${({ theme }) => theme.spacing(2)};
width: 100%;
box-sizing: border-box;
`;
export const RightDrawerEmailThread = () => {
const setMessageThread = useSetRecoilState(messageThreadState);
const isMobile = useIsMobile();
const {
thread,
messages,
@ -118,47 +123,49 @@ export const RightDrawerEmailThread = () => {
return null;
}
return (
<StyledContainer>
{threadLoading ? (
<EmailLoader loadingText="Loading thread" />
) : (
<>
<EmailThreadHeader
subject={subject}
lastMessageSentAt={lastMessage.receivedAt}
/>
{firstMessages.map((message) => (
<EmailThreadMessage
key={message.id}
participants={message.messageParticipants}
body={message.text}
sentAt={message.receivedAt}
<StyledWrapper>
<StyledContainer>
{threadLoading ? (
<EmailLoader loadingText="Loading thread" />
) : (
<>
<EmailThreadHeader
subject={subject}
lastMessageSentAt={lastMessage.receivedAt}
/>
))}
<IntermediaryMessages messages={intermediaryMessages} />
<EmailThreadMessage
key={lastMessage.id}
participants={lastMessage.messageParticipants}
body={lastMessage.text}
sentAt={lastMessage.receivedAt}
isExpanded
/>
<CustomResolverFetchMoreLoader
loading={threadLoading}
onLastRowVisible={fetchMoreMessages}
/>
</>
)}
{canReply && !messageChannelLoading ? (
<StyledButtonContainer>
{firstMessages.map((message) => (
<EmailThreadMessage
key={message.id}
participants={message.messageParticipants}
body={message.text}
sentAt={message.receivedAt}
/>
))}
<IntermediaryMessages messages={intermediaryMessages} />
<EmailThreadMessage
key={lastMessage.id}
participants={lastMessage.messageParticipants}
body={lastMessage.text}
sentAt={lastMessage.receivedAt}
isExpanded
/>
<CustomResolverFetchMoreLoader
loading={threadLoading}
onLastRowVisible={fetchMoreMessages}
/>
</>
)}
</StyledContainer>
{canReply && !messageChannelLoading && (
<StyledButtonContainer isMobile={isMobile}>
<Button
onClick={handleReplyClick}
title="Reply (View in Gmail)"
title="Reply"
Icon={IconArrowBackUp}
disabled={!canReply}
></Button>
/>
</StyledButtonContainer>
) : null}
</StyledContainer>
)}
</StyledWrapper>
);
};

2
packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx
View File

@ -32,7 +32,7 @@ const StyledContainer = styled(motion.div)`
background: ${({ theme }) => theme.background.primary};
border-left: 1px solid ${({ theme }) => theme.border.color.medium};
box-shadow: ${({ theme }) => theme.boxShadow.strong};
height: 100%;
height: 100dvh;
overflow-x: hidden;
position: fixed;