From a49d8386aa090f8cbee006c0fc03dfb0f353eb05 Mon Sep 17 00:00:00 2001
From: Abdul Rahman <81605929+abdulrahmancodes@users.noreply.github.com>
Date: Thu, 16 Apr 2026 14:08:09 +0530
Subject: [PATCH] Fix calendar event "Not shared" content alignment and
 background (#19743)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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"
/>
---
 .../CalendarEventNotSharedContent.tsx         | 34 ++++++-------------
 1 file changed, 10 insertions(+), 24 deletions(-)

diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventNotSharedContent.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventNotSharedContent.tsx
index 0892e523fd..fc2b2f190e 100644
--- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventNotSharedContent.tsx
+++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventNotSharedContent.tsx
@@ -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>
   );
 };