Fix calendar event "Not shared" content alignment and background (#19743)
Issue link: https://discord.com/channels/1130383047699738754/1491712714848866424 <img width="1287" height="419" alt="Screenshot 2026-04-16 at 9 50 34 AM" src="https://github.com/user-attachments/assets/ba2143df-7957-4aee-8994-80c0392b6086" />
This commit is contained in:
+10
-24
@@ -2,45 +2,31 @@ import { styled } from '@linaria/react';
|
||||
import { Trans } from '@lingui/react/macro';
|
||||
import { useContext } from 'react';
|
||||
import { IconLock } from 'twenty-ui/display';
|
||||
import { Card, CardContent } from 'twenty-ui/layout';
|
||||
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
|
||||
|
||||
const StyledVisibilityCardContainer = styled.div`
|
||||
color: ${themeCssVariables.font.color.light};
|
||||
flex: 1;
|
||||
transition: color ${themeCssVariables.animation.duration.normal} ease;
|
||||
width: 100%;
|
||||
|
||||
> * {
|
||||
border-color: ${themeCssVariables.border.color.light};
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledVisibilityCardContentContainer = styled.div`
|
||||
const StyledContainer = styled.div`
|
||||
align-items: center;
|
||||
background-color: ${themeCssVariables.background.transparent.lighter};
|
||||
background: ${themeCssVariables.background.transparent.lighter};
|
||||
border: 1px solid ${themeCssVariables.border.color.light};
|
||||
border-radius: ${themeCssVariables.border.radius.sm};
|
||||
box-sizing: border-box;
|
||||
color: ${themeCssVariables.font.color.light};
|
||||
display: flex;
|
||||
font-size: ${themeCssVariables.font.size.sm};
|
||||
font-weight: ${themeCssVariables.font.weight.medium};
|
||||
gap: ${themeCssVariables.spacing[1]};
|
||||
height: ${themeCssVariables.spacing[6]};
|
||||
padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[1]};
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
export const CalendarEventNotSharedContent = () => {
|
||||
const { theme } = useContext(ThemeContext);
|
||||
|
||||
return (
|
||||
<StyledVisibilityCardContainer>
|
||||
<Card>
|
||||
<StyledVisibilityCardContentContainer>
|
||||
<CardContent>
|
||||
<IconLock size={theme.icon.size.sm} />
|
||||
<Trans>Not shared</Trans>
|
||||
</CardContent>
|
||||
</StyledVisibilityCardContentContainer>
|
||||
</Card>
|
||||
</StyledVisibilityCardContainer>
|
||||
<StyledContainer>
|
||||
<IconLock size={theme.icon.size.sm} />
|
||||
<Trans>Not shared</Trans>
|
||||
</StyledContainer>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user