diff --git a/.changeset/thin-owls-draw.md b/.changeset/thin-owls-draw.md new file mode 100644 index 00000000000..c1cdd6bffbe --- /dev/null +++ b/.changeset/thin-owls-draw.md @@ -0,0 +1,7 @@ +--- +'@clerk/localizations': patch +'@clerk/clerk-js': patch +'@clerk/types': patch +--- + +Update checkout downgrade notice placement and text. diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx index 81cae6377c5..917c1b61ca1 100644 --- a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx +++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx @@ -11,7 +11,7 @@ import type { SetupIntent } from '@stripe/stripe-js'; import { useEffect, useMemo, useState } from 'react'; import { useCheckoutContext } from '../../contexts'; -import { Box, Button, Col, descriptors, Form, localizationKeys, Span } from '../../customizables'; +import { Box, Button, Col, descriptors, Form, localizationKeys, Text } from '../../customizables'; import { Alert, Drawer, LineItems, SegmentedControl, Select, SelectButton, SelectOptionList } from '../../elements'; import { useFetch } from '../../hooks'; import { ArrowUpDown } from '../../icons'; @@ -47,18 +47,6 @@ export const CheckoutForm = ({ })} > - {/* TODO(@Commerce): needs localization */} - {showDowngradeInfo && ( - ({ - fontSize: t.fontSizes.$sm, - color: t.colors.$colorTextSecondary, - })} - /> - )} - {/* TODO(@Commerce): needs localization */} @@ -94,6 +82,23 @@ export const CheckoutForm = ({ + {/* TODO(@Commerce): needs localization */} + {showDowngradeInfo && ( + ({ + paddingBlockStart: t.space.$4, + paddingInline: t.space.$4, + })} + > + + + )} +