diff --git a/.changeset/unlucky-horses-brush.md b/.changeset/unlucky-horses-brush.md new file mode 100644 index 00000000000..712c5e9da84 --- /dev/null +++ b/.changeset/unlucky-horses-brush.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': minor +--- + +Add a "Go to dashboard" link to the success state on the Keyless popover. diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx index 9f13df41e1f..014c3760bbb 100644 --- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx +++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx @@ -4,7 +4,7 @@ import type { PropsWithChildren } from 'react'; import { useEffect, useState } from 'react'; import { createPortal } from 'react-dom'; -import { Flex } from '../../customizables'; +import { Flex, Link } from '../../customizables'; import { Portal } from '../../elements/Portal'; import { InternalThemeProvider } from '../../styledSystem'; import { ClerkLogoIcon } from './ClerkLogoIcon'; @@ -245,11 +245,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
{ cursor: pointer; `} > - {success - ? 'Application claim completed' - : claimed - ? 'Missing environment keys' - : 'Clerk is in keyless mode'} + {success ? 'Claim completed' : claimed ? 'Missing environment keys' : 'Clerk is in keyless mode'}
@@ -351,11 +343,29 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { text-overflow: ellipsis; max-width: 8.125rem; vertical-align: bottom; + font-weight: 500; + color: #d5d5d5; `} > {appName} {' '} - has been successfully claimed. + has been claimed. Configure settings from the{' '} + ({ + color: t.colors.$whiteAlpha600, + + textDecoration: 'underline solid', + transition: `${t.transitionTiming.$common} ${t.transitionDuration.$fast}`, + ':hover': { + color: t.colors.$whiteAlpha800, + }, + })} + > + Clerk Dashboard + > ) : claimed ? ( <>