Squirclesssss 🟦🔵 (#22535)

packages/twenty-front/src/pages/onboarding/InstallAppsContent.tsx

@@ -31,6 +31,7 @@ const StyledBetaTag = styled.span`
   border-radius: ${themeCssVariables.border.radius.pill};
   box-sizing: border-box;
   color: ${themeCssVariables.grayScale.gray10};
+  corner-shape: round;
   display: flex;
   font-size: ${themeCssVariables.font.size.md};
   font-weight: ${themeCssVariables.font.weight.medium};

packages/twenty-front/src/pages/onboarding/UpgradeFreeTrial.tsx

@@ -73,6 +73,7 @@ const StyledLinkGroup = styled.div`
   > span {
     background-color: ${themeCssVariables.font.color.extraLight};
     border-radius: 50%;
+    corner-shape: round;
     height: 2px;
     width: 2px;
   }

packages/twenty-front/src/pages/settings/ai/components/SettingsToolIcon.tsx

@@ -45,7 +45,7 @@ const getOperationIcon = (toolName: string): IconComponent | null => {
 
 const StyledCompositeContainer = styled.div`
   align-items: center;
-  border-radius: 4px;
+  border-radius: ${themeCssVariables.border.radius.sm};
   box-sizing: border-box;
   display: flex;
   flex-shrink: 0;
@@ -63,7 +63,7 @@ const StyledMainIconWrapper = styled.div<{
   background-color: ${({ $backgroundColor }) => $backgroundColor};
   border: ${({ $borderColor }) =>
     $borderColor ? `1px solid ${$borderColor}` : 'none'};
-  border-radius: 4px;
+  border-radius: ${themeCssVariables.border.radius.sm};
   box-sizing: border-box;
   display: flex;
   inset: 0;
@@ -74,7 +74,7 @@ const StyledMainIconWrapper = styled.div<{
 const StyledOperationOverlay = styled.div`
   align-items: center;
   background-color: ${themeCssVariables.grayScale.gray4};
-  border-radius: 4px;
+  border-radius: ${themeCssVariables.border.radius.sm};
   bottom: -5px;
   display: flex;
   height: 14px;

packages/twenty-front/src/pages/settings/enterprise/SettingsEnterprise.tsx

@@ -54,6 +54,7 @@ const StyledStatusDot = styled.div<{ isActive: boolean }>`
   background-color: ${({ isActive }) =>
     isActive ? themeCssVariables.color.green : themeCssVariables.color.red};
   border-radius: 50%;
+  corner-shape: round;
   height: 8px;
   width: 8px;
 `;

packages/twenty-front/src/pages/settings/enterprise/components/OrganizationAdornment.tsx

@@ -13,8 +13,9 @@ const pillClassName = css`
   align-items: center;
   background: ${themeCssVariables.background.secondary};
   border: 1px solid ${themeCssVariables.border.color.light};
-  border-radius: 40px;
+  border-radius: ${themeCssVariables.border.radius.pill};
   color: ${themeCssVariables.font.color.tertiary};
+  corner-shape: round;
   display: inline-flex;
   font-weight: ${themeCssVariables.font.weight.medium};
   gap: ${themeCssVariables.spacing[1]};