From b841b92cb5e1a0783f709c728ab41eb4a8e0134f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Malfait?= <felix.malfait@gmail.com>
Date: Thu, 25 Jun 2026 06:52:49 +0200
Subject: [PATCH] fix(billing): widen embedded add-card modal and align its
 buttons (#22141)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Context

Follow-up to #22125. The embedded "Add your credit card" modal had two
visual issues:
1. **Too narrow** — it used `narrowWidth` (~368px), which capped the
Stripe Payment Element too tightly (cramped card fields, country
dropdown, and the Google Pay / Cash App / bank-account accordions).
2. **Mismatched buttons** — the submit used `MainButton` (onboarding's
filled CTA) while Cancel used `Button` (the settings/`ConfirmationModal`
outlined style), so the two never matched.

No new components or behavior — purely prop/component swaps within
existing primitives.

## Changes

- **`AddCreditCardModal`**: drop `narrowWidth`, use `size="medium"` so
the Payment Element has room.
- **`AddPaymentMethodForm`**: replace `MainButton` with `Button`
(`variant="secondary"`, `accent="blue"`, `fullWidth`), using `Button`'s
built-in `isLoading` spinner. Both buttons are now full-width outlined
`Button`s, matching the sibling `StartSubscriptionConfirmationModal`
(which renders `ConfirmationModal`'s blue-accented confirm + plain
cancel). Removed the now-unused `MainButton`/`Loader` imports and
`StyledButtonContainer`.

## Notes
- Frontend-only; no GraphQL/schema/codegen impact.

https://claude.ai/code/session_01VU7SfrSgaYWr2AhVL8DMfu

---
_Generated by [Claude
Code](https://claude.ai/code/session_01VU7SfrSgaYWr2AhVL8DMfu)_

<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/22141?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->
---
 .../billing/components/AddCreditCardModal.tsx |  2 +-
 .../components/AddPaymentMethodForm.tsx       | 28 ++++++++-----------
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/billing/components/AddCreditCardModal.tsx b/packages/twenty-front/src/modules/settings/billing/components/AddCreditCardModal.tsx
index 8558788a1d..d739e5e34e 100644
--- a/packages/twenty-front/src/modules/settings/billing/components/AddCreditCardModal.tsx
+++ b/packages/twenty-front/src/modules/settings/billing/components/AddCreditCardModal.tsx
@@ -43,12 +43,12 @@ export const AddCreditCardModal = ({
     <ModalStatefulWrapper
       modalInstanceId={modalInstanceId}
       isClosable={true}
+      size="medium"
       padding="large"
       overlay="dark"
       dataGloballyPreventClickOutside
       renderInDocumentBody
       smallBorderRadius
-      narrowWidth
       autoHeight
     >
       <StyledCenteredTitle>
diff --git a/packages/twenty-front/src/modules/settings/billing/components/AddPaymentMethodForm.tsx b/packages/twenty-front/src/modules/settings/billing/components/AddPaymentMethodForm.tsx
index b8a867d351..9f5b1acaeb 100644
--- a/packages/twenty-front/src/modules/settings/billing/components/AddPaymentMethodForm.tsx
+++ b/packages/twenty-front/src/modules/settings/billing/components/AddPaymentMethodForm.tsx
@@ -17,8 +17,8 @@ import {
 import { useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { isDefined } from 'twenty-shared/utils';
-import { Info, Loader } from 'twenty-ui/feedback';
-import { MainButton } from 'twenty-ui/input';
+import { Info } from 'twenty-ui/feedback';
+import { Button } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { CreateBillingPaymentMethodSetupIntentDocument } from '~/generated-metadata/graphql';
 
@@ -36,11 +36,6 @@ const StyledFormContainer = styled.div`
   width: 100%;
 `;
 
-const StyledButtonContainer = styled.div`
-  display: flex;
-  justify-content: center;
-`;
-
 const AddPaymentMethodFormContent = ({
   finalRedirectPath,
   onPaymentMethodAdded,
@@ -144,15 +139,16 @@ const AddPaymentMethodFormContent = ({
             : undefined,
         }}
       />
-      <StyledButtonContainer>
-        <MainButton
-          title={t`Add credit card`}
-          onClick={handleSubmit}
-          width={200}
-          Icon={() => (isSubmitting ? <Loader /> : null)}
-          disabled={!isStripeReady || isSubmitting}
-        />
-      </StyledButtonContainer>
+      <Button
+        title={t`Add credit card`}
+        onClick={handleSubmit}
+        variant="secondary"
+        accent="blue"
+        fullWidth
+        justify="center"
+        isLoading={isSubmitting}
+        disabled={!isStripeReady || isSubmitting}
+      />
     </StyledFormContainer>
   );
 };