Squirclesssss 🟦🔵 (#22535)

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageFolderIcon.tsx

@@ -23,7 +23,7 @@ const StyledCardMedia = styled.div`
 const StyledCardMediaContent = styled.div`
   align-items: stretch;
   background-color: ${themeCssVariables.background.secondary};
-  border-radius: 2px;
+  border-radius: ${themeCssVariables.border.radius.xs};
   box-sizing: border-box;
   display: flex;
   flex: 1;

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkerMetricsTooltip.tsx

@@ -25,6 +25,7 @@ const StyledTooltipItem = styled.div`
 const StyledTooltipColorCircle = styled.div<{ color: string }>`
   background-color: ${({ color }) => color};
   border-radius: 50%;
+  corner-shape: round;
   height: 8px;
   margin-right: ${themeCssVariables.spacing[2]};
   width: 8px;

packages/twenty-front/src/modules/settings/ai/components/SettingsAiModelsTable.tsx

@@ -42,6 +42,7 @@ const StyledDeprecatedSuffix = styled.span`
 
 const hoverCardTooltipClass = css`
   border-radius: ${themeCssVariables.border.radius.rounded} !important;
+  corner-shape: round;
 
   padding: 0 !important;
 `;

packages/twenty-front/src/modules/settings/billing/components/SubscriptionBenefit.tsx

@@ -14,6 +14,7 @@ const StyledCheckContainer = styled.div`
   align-items: center;
   background-color: ${themeCssVariables.background.tertiary};
   border-radius: 50%;
+  corner-shape: round;
   display: flex;
   height: 16px;
   justify-content: center;

packages/twenty-front/src/modules/settings/billing/components/internal/SettingsBillingSubscriptionInfoCard.tsx

@@ -81,6 +81,7 @@ const StyledStatusPill = styled.span<{ tone: BillingStatusTone }>`
   background-color: ${({ tone }) => STATUS_PILL_COLORS[tone].background};
   border-radius: ${themeCssVariables.border.radius.pill};
   color: ${({ tone }) => STATUS_PILL_COLORS[tone].color};
+  corner-shape: round;
   display: inline-flex;
   font-size: ${themeCssVariables.font.size.sm};
   font-weight: ${themeCssVariables.font.weight.medium};
@@ -93,6 +94,7 @@ const StyledStatusPill = styled.span<{ tone: BillingStatusTone }>`
 const StyledStatusDot = styled.span<{ tone: BillingStatusTone }>`
   background-color: currentColor;
   border-radius: 50%;
+  corner-shape: round;
   height: 4px;
   width: 4px;
 `;

packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx

@@ -46,7 +46,8 @@ const StyledHeader = styled.div`
 
 const StyledObjectName = styled.div`
   border: 0;
-  border-radius: 4px 4px 0 0;
+  border-radius: ${themeCssVariables.border.radius.sm}
+    ${themeCssVariables.border.radius.sm} 0 0;
   display: flex;
   font-weight: ${themeCssVariables.font.weight.medium};
   gap: ${themeCssVariables.spacing[1]};