diff --git a/.changeset/strong-shoes-attack.md b/.changeset/strong-shoes-attack.md new file mode 100644 index 0000000000..eb69be2e22 --- /dev/null +++ b/.changeset/strong-shoes-attack.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Fixes minor bug in UI of a success page diff --git a/packages/clerk-js/src/ui/elements/SuccessPage.tsx b/packages/clerk-js/src/ui/elements/SuccessPage.tsx index 1b61dfe887..a97449e4f0 100644 --- a/packages/clerk-js/src/ui/elements/SuccessPage.tsx +++ b/packages/clerk-js/src/ui/elements/SuccessPage.tsx @@ -1,10 +1,9 @@ import React from 'react'; -import { descriptors, Text } from '../customizables'; +import { Box, descriptors, Text } from '../customizables'; import { ContentPage, FormButtonContainer, NavigateToFlowStartButton } from '../elements'; import type { LocalizationKey } from '../localization'; import { localizationKeys } from '../localization'; -import { Flex } from '../primitives'; import type { PropsOfComponent } from '../styledSystem'; type SuccessPageProps = Omit, 'headerTitle' | 'title'> & { @@ -23,16 +22,19 @@ export const SuccessPage = (props: SuccessPageProps) => { headerTitle={title} {...rest} > - + {Array.isArray(text) ? ( text.map(t => ( ({ + display: 'inline', + ':not(:last-of-type)': { + marginRight: t.sizes.$1, + }, + })} /> )) ) : ( @@ -41,7 +43,7 @@ export const SuccessPage = (props: SuccessPageProps) => { variant='regularRegular' /> )} - + {contents}