fix(clerk-js): SuccessPage multiple localizations as text (#1725)

clerk · Sep 14, 2023 · 634948f · 634948f
1 parent 6a1c09a
commit 634948f
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/.changeset/strong-shoes-attack.md 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
@@ -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<PropsOfComponent<typeof ContentPage>, 'headerTitle' | 'title'> & {
@@ -23,16 +22,19 @@ export const SuccessPage = (props: SuccessPageProps) => {
       headerTitle={title}
       {...rest}
     >
-      <Flex
-        direction={'row'}
-        gap={1}
-      >
+      <Box>
         {Array.isArray(text) ? (
           text.map(t => (
             <Text
               key={t.key}
               localizationKey={t}
               variant='regularRegular'
+              sx={t => ({
+                display: 'inline',
+                ':not(:last-of-type)': {
+                  marginRight: t.sizes.$1,
+                },
+              })}
             />
           ))
         ) : (
@@ -41,7 +43,7 @@ export const SuccessPage = (props: SuccessPageProps) => {
             variant='regularRegular'
           />
         )}
-      </Flex>
+      </Box>
       {contents}
 
       <FormButtonContainer>