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:
Abdul Rahman
2026-04-16 14:08:09 +05:30
committed by GitHub
parent e420ee8746
commit a49d8386aa
@@ -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>
);
};