From 59c16ef46f0bb8f9126f60d9474ed1792daeff23 Mon Sep 17 00:00:00 2001
From: Thomas des Francs <tdesfrancs@gmail.com>
Date: Sat, 4 Jul 2026 23:27:40 +0200
Subject: [PATCH] Polish settings billing and MCP UI (#22554)

## Summary

- Polish Billing credits progress rounding and secondary action styling.
- Update MCP setup logos, card spacing, grouping, and badge color.

## Before/After

MCP & APIs

<img width="2258" height="2010" alt="MCP & APIs settings visual"
src="https://github.com/user-attachments/assets/915c8b50-5b98-4ba9-8e5c-a33f36440f6e"
/>

Billing

<img width="2240" height="1644" alt="Billing settings visual"
src="https://github.com/user-attachments/assets/9e3eb332-5792-4a4a-80b0-1b984e574008"
/>
---
 .../internal/AiChatContextUsageButton.tsx     |   1 +
 .../SettingsBillingCreditsSection.tsx         |   2 +-
 .../assets/mcp-clients/augment-code.svg       |   5 +---
 .../assets/mcp-clients/claude-color.png       | Bin 0 -> 9337 bytes
 .../assets/mcp-clients/openai.svg             |   1 +
 .../mcp-and-apis/components/McpClientLogo.tsx |  15 +----------
 .../components/SettingsMcpSetupCard.tsx       |   6 ++---
 .../utils/buildMcpSetupCategories.tsx         |  24 ++++++++----------
 .../src/data-display/Pill/Pill.module.scss    |   2 +-
 .../ProgressBar/ProgressBar.module.scss       |   6 +++--
 10 files changed, 24 insertions(+), 38 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/settings/mcp-and-apis/assets/mcp-clients/claude-color.png
 create mode 100644 packages/twenty-front/src/modules/settings/mcp-and-apis/assets/mcp-clients/openai.svg

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 = ({
           <Button
             Icon={IconChartBar}
             title={t`View usage`}
-            variant="primary"
+            variant="secondary"
             size="small"
           />
         </UndecoratedLink>
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 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" fill="none">
   <style>
     path { fill: #000000; }
-    @media (prefers-color-scheme: dark) {
-      path { fill: #ffffff; }
-    }
   </style>
   <path d="M78.844 464.762c-8.453 0-15.573-1.451-21.359-4.339-5.77-2.888-10.144-7.289-13.076-13.095-2.932-5.807-4.436-12.912-4.436-21.255v-86.028c0-10.605-2.125-18.321-6.329-23.135-4.234-4.798-11.742-7.334-22.507-7.579-3.35 0-6.034-1.253-8.066-3.804C1.008 303.005 0 300.087 0 296.832c0-3.53 1.008-6.448 3.071-8.725 2.048-2.277 4.762-3.53 8.066-3.774 10.765-.26 18.273-2.781 22.507-7.579 4.235-4.798 6.329-12.392 6.329-22.752v-86.028c0-12.637 3.35-22.249 10.005-28.804 6.654-6.555 16.287-9.856 28.866-9.856H181.5c3.862 0 7.042 1.146 9.617 3.408 2.559 2.277 3.862 5.195 3.862 8.694 0 3.301-1.086 6.128-3.257 8.542-2.172 2.414-5.057 3.622-8.671 3.622H87.732c-5.413 0-9.508 1.39-12.316 4.171-2.823 2.781-4.234 7.075-4.234 12.912v86.425c0 7.579-1.551 14.455-4.623 20.644-3.07 6.204-7.181 11.063-12.316 14.623-5.134 3.53-11.137 5.302-18.07 5.302v-1.528c6.933 0 12.936 1.773 18.07 5.303 5.135 3.529 9.245 8.404 12.316 14.623 3.072 6.188 4.623 13.064 4.623 20.643v86.808c0 5.837 1.411 10.115 4.234 12.911 2.823 2.812 6.934 4.172 12.316 4.172h95.318c3.583 0 6.468 1.207 8.671 3.606 2.202 2.414 3.257 5.257 3.257 8.542s-1.272 6.097-3.862 8.511c-2.575 2.414-5.771 3.606-9.617 3.606H78.844v-.092ZM330.501 464.768c-3.862 0-7.042-1.207-9.617-3.606-2.575-2.414-3.863-5.256-3.863-8.511 0-3.255 1.086-6.128 3.258-8.542 2.171-2.414 5.057-3.606 8.671-3.606h95.317c5.414 0 9.509-1.36 12.316-4.171 2.823-2.781 4.235-7.075 4.235-12.912v-86.808c0-7.579 1.551-14.455 4.622-20.643 3.071-6.204 7.182-11.063 12.316-14.623 5.134-3.53 11.137-5.303 18.071-5.303v1.528c-6.934 0-12.937-1.772-18.071-5.302-5.134-3.53-9.245-8.404-12.316-14.623-3.071-6.189-4.622-13.065-4.622-20.644v-86.425c0-5.807-1.412-10.1-4.235-12.912-2.823-2.781-6.933-4.171-12.316-4.171H328.95c-3.583 0-6.469-1.208-8.671-3.622-2.172-2.384-3.258-5.241-3.258-8.542 0-3.529 1.272-6.417 3.863-8.694 2.559-2.277 5.755-3.407 9.617-3.407h102.654c12.58 0 22.181 3.3 28.867 9.855 6.685 6.556 10.005 16.167 10.005 28.804v86.028c0 10.36 2.125 17.969 6.328 22.752 4.235 4.798 11.742 7.334 22.507 7.579 3.351.244 6.034 1.497 8.066 3.774 2.063 2.277 3.071 5.195 3.071 8.725 0 3.301-1.008 6.189-3.071 8.695-2.032 2.521-4.762 3.804-8.066 3.804-10.765.245-18.257 2.781-22.507 7.579-4.234 4.798-6.328 12.5-6.328 23.135v86.028c0 8.358-1.474 15.418-4.437 21.255-2.962 5.837-7.305 10.176-13.076 13.095-5.785 2.888-12.905 4.339-21.359 4.339H330.501v.092Z"/>
   <path d="M356.885 329.738c18.691 0 33.846-14.929 33.846-33.342 0-18.412-15.155-33.341-33.846-33.341-18.691 0-33.846 14.929-33.846 33.341 0 18.413 15.155 33.342 33.846 33.342ZM167.305 329.738c18.691 0 33.846-14.929 33.846-33.342 0-18.412-15.155-33.341-33.846-33.341-18.691 0-33.846 14.929-33.846 33.341 0 18.413 15.155 33.342 33.846 33.342ZM244.477 32.846l-2.59 68.135c0 3.82-3.661 5.73-10.983 5.73-7.321 0-10.982-1.91-10.982-5.73-.651-16.976-1.178-30.148-1.613-39.484-.217-9.55-.434-16.35-.651-20.384-.217-4.034-.326-6.479-.326-7.32v-1.268c0-4.874 4.529-7.319 13.572-7.319 9.044 0 13.573 2.552 13.573 7.64Zm54.941 0-2.59 68.135c0 3.82-3.661 5.73-10.982 5.73-7.322 0-10.982-1.91-10.982-5.73-.652-16.976-1.179-30.148-1.613-39.484-.218-9.55-.435-16.35-.652-20.384-.217-4.034-.326-6.479-.326-7.32v-1.268c0-4.874 4.53-7.319 13.573-7.319s13.572 2.552 13.572 7.64Z"/>
-</svg>
\ No newline at end of file
+</svg>
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 0000000000000000000000000000000000000000..e29be47a1fe665d82baa6abf711197b1b17ba56a
GIT binary patch
literal 9337
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
S?RN)%0LqH$3KeqZnEwZ{`$%*E

literal 0
HcmV?d00001

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 @@
+<?xml version="1.0" encoding="utf-8"?><svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><title>OpenAI icon</title><path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"/></svg>
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 <IconModelClaude size={theme.icon.size.xl} />;
-};
-
-export const McpOpenAiLogo = () => {
-  const theme = useTheme();
-
-  return <IconProviderOpenai size={theme.icon.size.xl} />;
-};
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: <McpOpenAiLogo />,
+        logo: <McpClientLogo src={OpenAiLogo} invertInDarkMode />,
       },
       {
         title: t`Claude`,
@@ -63,9 +61,15 @@ export const buildMcpSetupCategories = ({
           ? buildClaudeInstallLink(mcpServerUrl)
           : undefined,
         isDisabled: !isHttpsInstallLinkEnabled,
-        logo: <McpClaudeLogo />,
+        logo: <McpClientLogo src={ClaudeLogo} />,
         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: <McpClientLogo src={LmStudioLogo} invertInDarkMode />,
       },
-    ],
-  },
-  {
-    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] {