diff --git a/packages/twenty-front/src/modules/ai/components/internal/AiChatContextUsageButton.tsx b/packages/twenty-front/src/modules/ai/components/internal/AiChatContextUsageButton.tsx
index 8739a64008..881de90dea 100644
--- a/packages/twenty-front/src/modules/ai/components/internal/AiChatContextUsageButton.tsx
+++ b/packages/twenty-front/src/modules/ai/components/internal/AiChatContextUsageButton.tsx
@@ -28,6 +28,7 @@ const StyledContainer = styled.div`
const StyledTrigger = styled.div<{ hasUsage: boolean }>`
align-items: center;
+ border-radius: ${themeCssVariables.border.radius.md};
cursor: ${({ hasUsage }) => (hasUsage ? 'pointer' : 'default')};
display: flex;
height: 24px;
diff --git a/packages/twenty-front/src/modules/settings/billing/components/SettingsBillingCreditsSection.tsx b/packages/twenty-front/src/modules/settings/billing/components/SettingsBillingCreditsSection.tsx
index d3167336ac..2bcad7fd88 100644
--- a/packages/twenty-front/src/modules/settings/billing/components/SettingsBillingCreditsSection.tsx
+++ b/packages/twenty-front/src/modules/settings/billing/components/SettingsBillingCreditsSection.tsx
@@ -303,7 +303,7 @@ export const SettingsBillingCreditsSection = ({
diff --git a/packages/twenty-front/src/modules/settings/mcp-and-apis/assets/mcp-clients/augment-code.svg b/packages/twenty-front/src/modules/settings/mcp-and-apis/assets/mcp-clients/augment-code.svg
index 2438545ea4..f19714ceaa 100644
--- a/packages/twenty-front/src/modules/settings/mcp-and-apis/assets/mcp-clients/augment-code.svg
+++ b/packages/twenty-front/src/modules/settings/mcp-and-apis/assets/mcp-clients/augment-code.svg
@@ -1,10 +1,7 @@
\ No newline at end of file
+
diff --git a/packages/twenty-front/src/modules/settings/mcp-and-apis/assets/mcp-clients/claude-color.png b/packages/twenty-front/src/modules/settings/mcp-and-apis/assets/mcp-clients/claude-color.png
new file mode 100644
index 0000000000..e29be47a1f
Binary files /dev/null and b/packages/twenty-front/src/modules/settings/mcp-and-apis/assets/mcp-clients/claude-color.png differ
diff --git a/packages/twenty-front/src/modules/settings/mcp-and-apis/assets/mcp-clients/openai.svg b/packages/twenty-front/src/modules/settings/mcp-and-apis/assets/mcp-clients/openai.svg
new file mode 100644
index 0000000000..c5a5dc3e4e
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/mcp-and-apis/assets/mcp-clients/openai.svg
@@ -0,0 +1 @@
+
diff --git a/packages/twenty-front/src/modules/settings/mcp-and-apis/components/McpClientLogo.tsx b/packages/twenty-front/src/modules/settings/mcp-and-apis/components/McpClientLogo.tsx
index e109a4346a..5dce0d9d9d 100644
--- a/packages/twenty-front/src/modules/settings/mcp-and-apis/components/McpClientLogo.tsx
+++ b/packages/twenty-front/src/modules/settings/mcp-and-apis/components/McpClientLogo.tsx
@@ -1,7 +1,6 @@
import { styled } from '@linaria/react';
-import { IconModelClaude, IconProviderOpenai } from 'twenty-ui/icon';
-import { useTheme, useThemeColorScheme } from 'twenty-ui/theme-constants';
+import { useThemeColorScheme } from 'twenty-ui/theme-constants';
const StyledLogoImage = styled.img<{ isInverted: boolean }>`
display: block;
@@ -30,15 +29,3 @@ export const McpClientLogo = ({
/>
);
};
-
-export const McpClaudeLogo = () => {
- const theme = useTheme();
-
- return ;
-};
-
-export const McpOpenAiLogo = () => {
- const theme = useTheme();
-
- return ;
-};
diff --git a/packages/twenty-front/src/modules/settings/mcp-and-apis/components/SettingsMcpSetupCard.tsx b/packages/twenty-front/src/modules/settings/mcp-and-apis/components/SettingsMcpSetupCard.tsx
index 6f669819de..215fdb5e18 100644
--- a/packages/twenty-front/src/modules/settings/mcp-and-apis/components/SettingsMcpSetupCard.tsx
+++ b/packages/twenty-front/src/modules/settings/mcp-and-apis/components/SettingsMcpSetupCard.tsx
@@ -16,10 +16,9 @@ const StyledCardContent = styled(CardContent)`
align-items: center;
display: flex;
gap: ${themeCssVariables.spacing[4]};
- min-height: ${themeCssVariables.spacing[25]};
min-width: 0;
- padding: ${themeCssVariables.spacing[3]};
- padding-left: ${themeCssVariables.spacing[4]};
+ padding: ${themeCssVariables.spacing[3]} ${themeCssVariables.spacing[3]}
+ ${themeCssVariables.spacing[3]} ${themeCssVariables.spacing[4]};
`;
const StyledLogo = styled.div`
@@ -33,6 +32,7 @@ const StyledLogo = styled.div`
`;
const StyledBody = styled.div`
+ align-self: stretch;
display: flex;
flex: 1 1 0;
flex-direction: column;
diff --git a/packages/twenty-front/src/modules/settings/mcp-and-apis/utils/buildMcpSetupCategories.tsx b/packages/twenty-front/src/modules/settings/mcp-and-apis/utils/buildMcpSetupCategories.tsx
index 065f5944fa..45ed0244c2 100644
--- a/packages/twenty-front/src/modules/settings/mcp-and-apis/utils/buildMcpSetupCategories.tsx
+++ b/packages/twenty-front/src/modules/settings/mcp-and-apis/utils/buildMcpSetupCategories.tsx
@@ -2,6 +2,7 @@ import { t } from '@lingui/core/macro';
import AmazonQLogo from '@/settings/mcp-and-apis/assets/mcp-clients/amazon-q.svg';
import AugmentCodeLogo from '@/settings/mcp-and-apis/assets/mcp-clients/augment-code.svg';
+import ClaudeLogo from '@/settings/mcp-and-apis/assets/mcp-clients/claude-color.png';
import ClineLogo from '@/settings/mcp-and-apis/assets/mcp-clients/cline.svg';
import CursorLogo from '@/settings/mcp-and-apis/assets/mcp-clients/cursor.svg';
import GeminiCliLogo from '@/settings/mcp-and-apis/assets/mcp-clients/gemini-cli.svg';
@@ -9,17 +10,14 @@ import GooseLogo from '@/settings/mcp-and-apis/assets/mcp-clients/goose.svg';
import JetBrainsLogo from '@/settings/mcp-and-apis/assets/mcp-clients/jetbrains.svg';
import LibreChatLogo from '@/settings/mcp-and-apis/assets/mcp-clients/librechat.svg';
import LmStudioLogo from '@/settings/mcp-and-apis/assets/mcp-clients/lm-studio.svg';
+import OpenAiLogo from '@/settings/mcp-and-apis/assets/mcp-clients/openai.svg';
import RaycastLogo from '@/settings/mcp-and-apis/assets/mcp-clients/raycast.svg';
import ReplitLogo from '@/settings/mcp-and-apis/assets/mcp-clients/replit.svg';
import VsCodeLogo from '@/settings/mcp-and-apis/assets/mcp-clients/vs-code.svg';
import WarpLogo from '@/settings/mcp-and-apis/assets/mcp-clients/warp.svg';
import WindsurfLogo from '@/settings/mcp-and-apis/assets/mcp-clients/windsurf.svg';
import ZedLogo from '@/settings/mcp-and-apis/assets/mcp-clients/zed.svg';
-import {
- McpClaudeLogo,
- McpClientLogo,
- McpOpenAiLogo,
-} from '@/settings/mcp-and-apis/components/McpClientLogo';
+import { McpClientLogo } from '@/settings/mcp-and-apis/components/McpClientLogo';
import { MCP_SETUP } from '@/settings/mcp-and-apis/constants/McpSetup';
import { type McpSetupCategory } from '@/settings/mcp-and-apis/types/McpSetup';
import {
@@ -51,7 +49,7 @@ export const buildMcpSetupCategories = ({
description: t`Open Twenty's official ChatGPT integration for your workspace.`,
ctaLabel: t`Open`,
href: MCP_SETUP.chatGptTwentyAppUrl,
- logo: ,
+ logo: ,
},
{
title: t`Claude`,
@@ -63,9 +61,15 @@ export const buildMcpSetupCategories = ({
? buildClaudeInstallLink(mcpServerUrl)
: undefined,
isDisabled: !isHttpsInstallLinkEnabled,
- logo: ,
+ logo: ,
tooltipId: MCP_SETUP.tooltipIds.claudeInstallDisabled,
},
+ ],
+ },
+ {
+ title: t`Other clients`,
+ description: t`Connect additional MCP clients using install links or client docs.`,
+ cards: [
{
title: t`Cursor`,
badge: t`Install link`,
@@ -111,12 +115,6 @@ export const buildMcpSetupCategories = ({
href: buildLmStudioInstallLink(mcpServerUrl),
logo: ,
},
- ],
- },
- {
- title: t`Other manual clients`,
- description: t`Follow client docs to connect your MCP manually.`,
- cards: [
{
title: t`Cline`,
badge: t`Manual`,
diff --git a/packages/twenty-ui/src/data-display/Pill/Pill.module.scss b/packages/twenty-ui/src/data-display/Pill/Pill.module.scss
index 35217bc01c..cf98896ba4 100644
--- a/packages/twenty-ui/src/data-display/Pill/Pill.module.scss
+++ b/packages/twenty-ui/src/data-display/Pill/Pill.module.scss
@@ -3,7 +3,7 @@
background: var(--t-background-transparent-light);
border-radius: var(--t-border-radius-pill);
corner-shape: round;
- color: var(--t-font-color-light);
+ color: var(--t-font-color-tertiary);
display: inline-flex;
font-size: var(--t-font-size-xs);
font-style: normal;
diff --git a/packages/twenty-ui/src/feedback/ProgressBar/ProgressBar.module.scss b/packages/twenty-ui/src/feedback/ProgressBar/ProgressBar.module.scss
index 7cfb6f3319..8eb2e60e52 100644
--- a/packages/twenty-ui/src/feedback/ProgressBar/ProgressBar.module.scss
+++ b/packages/twenty-ui/src/feedback/ProgressBar/ProgressBar.module.scss
@@ -7,7 +7,8 @@
overflow: hidden;
&[data-with-border-radius] {
- border-radius: var(--t-border-radius-xxl);
+ border-radius: var(--t-border-radius-pill);
+ corner-shape: round;
}
}
@@ -24,7 +25,8 @@
transition: width duration(normal) linear;
&[data-with-border-radius] {
- border-radius: var(--t-border-radius-md);
+ border-radius: var(--t-border-radius-pill);
+ corner-shape: round;
}
&[data-nonzero] {