houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish settings billing and MCP UI (#22554)

Browse Source 
## 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"
/>
This commit is contained in:
Thomas des Francs
2026-07-04 23:27:40 +02:00
committed by GitHub
parent ea851f7d9c
commit 59c16ef46f
10 changed files with 24 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/ai/components/internal/AiChatContextUsageButton.tsx
+1
View File
@@ -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;
packages/twenty-front/src/modules/settings/billing/components/SettingsBillingCreditsSection.tsx
+1 -1
View File
@@ -303,7 +303,7 @@ export const SettingsBillingCreditsSection = ({
<Button
Icon={IconChartBar}
title={t`View usage`}
variant="primary"
variant="secondary"
size="small"
/>
</UndecoratedLink>
packages/twenty-front/src/modules/settings/mcp-and-apis/assets/mcp-clients/augment-code.svg
+1 -4
View File
@@ -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>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

packages/twenty-front/src/modules/settings/mcp-and-apis/assets/mcp-clients/claude-color.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

packages/twenty-front/src/modules/settings/mcp-and-apis/assets/mcp-clients/openai.svg
+1
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

packages/twenty-front/src/modules/settings/mcp-and-apis/components/McpClientLogo.tsx
+1 -14
View File
@@ -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} />;
};
packages/twenty-front/src/modules/settings/mcp-and-apis/components/SettingsMcpSetupCard.tsx
+3 -3
View File
@@ -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;
packages/twenty-front/src/modules/settings/mcp-and-apis/utils/buildMcpSetupCategories.tsx
+11 -13
View File
@@ -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`,
packages/twenty-ui/src/data-display/Pill/Pill.module.scss
+1 -1
View File
@@ -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;
packages/twenty-ui/src/feedback/ProgressBar/ProgressBar.module.scss
+4 -2
View File
@@ -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] {