Etienne
76a8a644a2
## Before METADATA <img width="400" alt="Screenshot 2025-05-21 at 11 34 51" src="https://github.com/user-attachments/assets/b057dd3f-3ba1-4597-86a4-84157941f10a" /> SUBJECT <img width="400" alt="Screenshot 2025-05-21 at 11 34 38" src="https://github.com/user-attachments/assets/c41bc102-a84d-443f-bf8c-a77ca9eacd2c" /> SHARE_EVERYTHING <img width="400" alt="Screenshot 2025-05-21 at 11 34 04" src="https://github.com/user-attachments/assets/0ed39c88-3516-4ebf-9950-5ceabbc38f13" /> ## After SHARE_EVERYTHING <img width="400" alt="Screenshot 2025-05-21 at 11 29 18" src="https://github.com/user-attachments/assets/72efbf0f-021b-4012-8516-8b7b8318a1e8" /> METADAT <img width="400" alt="Screenshot 2025-05-21 at 11 28 49" src="https://github.com/user-attachments/assets/73065e89-c5ab-4938-ae71-e557aa3fe8f3" /> SUBJECT <img width="400" alt="Screenshot 2025-05-21 at 11 28 35" src="https://github.com/user-attachments/assets/10487afb-602d-41fc-bb66-15d71e2fb90f" /> Design : https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=23338-52430&t=9NbeB5idQaaOWPAq-0
57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import { useTheme } from '@emotion/react';
|
|
import styled from '@emotion/styled';
|
|
import { AppTooltip, IconLock, TooltipDelay } from 'twenty-ui/display';
|
|
import { MessageChannelVisibility } from '~/generated/graphql';
|
|
|
|
const StyledContainer = styled.div<{ isCompact?: boolean }>`
|
|
align-items: center;
|
|
display: flex;
|
|
flex: ${({ isCompact }) => (isCompact ? '0 0 auto' : '1 0 0')};
|
|
gap: ${({ theme }) => theme.spacing(1)};
|
|
height: 20px;
|
|
margin-left: auto;
|
|
width: ${({ isCompact }) => (isCompact ? 'auto' : '100%')};
|
|
min-width: ${({ theme }) => `${theme.spacing(21)}`};
|
|
padding: ${({ theme }) => theme.spacing(0, 1)};
|
|
|
|
border-radius: 4px;
|
|
border: 1px solid ${({ theme }) => theme.border.color.light};
|
|
background: ${({ theme }) => theme.background.transparent.lighter};
|
|
|
|
color: ${({ theme }) => theme.font.color.tertiary};
|
|
font-weight: ${({ theme }) => theme.font.weight.regular};
|
|
font-size: ${({ theme }) => theme.font.size.sm};
|
|
flex: 1;
|
|
`;
|
|
|
|
type EmailThreadNotSharedProps = {
|
|
visibility: MessageChannelVisibility;
|
|
};
|
|
|
|
export const EmailThreadNotShared = ({
|
|
visibility,
|
|
}: EmailThreadNotSharedProps) => {
|
|
const theme = useTheme();
|
|
const containerId = 'email-thread-not-shared';
|
|
const isCompact = visibility === MessageChannelVisibility.SUBJECT;
|
|
|
|
return (
|
|
<>
|
|
<StyledContainer id={containerId} isCompact={isCompact}>
|
|
<IconLock size={theme.icon.size.sm} />
|
|
{'Not shared'}
|
|
</StyledContainer>
|
|
{visibility === MessageChannelVisibility.SUBJECT && (
|
|
<AppTooltip
|
|
anchorSelect={`#${containerId}`}
|
|
content="Only the subject is shared"
|
|
delay={TooltipDelay.mediumDelay}
|
|
noArrow
|
|
place="bottom"
|
|
positionStrategy="fixed"
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
};
|