From 634948fdaf9276b593f8fabcb2af45f3c3457048 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Thu, 14 Sep 2023 16:48:47 +0300 Subject: [PATCH] fix(clerk-js): SuccessPage multiple localizations as text (#1725) --- .changeset/strong-shoes-attack.md | 5 +++++ .../clerk-js/src/ui/elements/SuccessPage.tsx | 16 +++++++++------- 2 files changed, 14 insertions(+), 7 deletions(-) create mode 100644 .changeset/strong-shoes-attack.md 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}