Félix Malfait
b841b92cb5
## 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. -->
