diff --git a/.changeset/green-ravens-bathe.md b/.changeset/green-ravens-bathe.md new file mode 100644 index 00000000000..dc12a5a17fc --- /dev/null +++ b/.changeset/green-ravens-bathe.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': minor +--- + +Improve Keyless prompt's copy and add secondary CTA button for navigating to API keys page in the Dashboard. diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json index 7335d9c08dd..f0e94853289 100644 --- a/packages/clerk-js/bundlewatch.config.json +++ b/packages/clerk-js/bundlewatch.config.json @@ -18,6 +18,6 @@ { "path": "./dist/userverification*.js", "maxSize": "5KB" }, { "path": "./dist/onetap*.js", "maxSize": "1KB" }, { "path": "./dist/waitlist*.js", "maxSize": "1.3KB" }, - { "path": "./dist/keylessPrompt*.js", "maxSize": "5.5KB" } + { "path": "./dist/keylessPrompt*.js", "maxSize": "5.7KB" } ] } diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx index 8ceb175fa48..c154c2b6a32 100644 --- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx +++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx @@ -34,7 +34,6 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { const environment = useRevalidateEnvironment(); const claimed = Boolean(environment.authConfig.claimedAt); - const success = typeof _props.onDismiss === 'function' && claimed; const appName = environment.displayConfig.applicationName; @@ -129,7 +128,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { flexDirection: 'column', alignItems: 'flex-center', justifyContent: 'flex-center', - height: success ? 'fit-content' : '8.563rem', + height: claimed || success ? 'fit-content' : isSignedIn ? '11rem' : '12rem', overflow: 'hidden', width: 'fit-content', minWidth: '16.125rem', @@ -291,7 +290,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { xmlns='http://www.w3.org/2000/svg' css={css` color: #8c8c8c; - transition: color 130ms ease-out; + transition: color 120ms ease-out; display: ${isExpanded && !claimed && !success ? 'block' : 'none'}; cursor: pointer; @@ -379,7 +378,6 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { href='https://dashboard.clerk.com/last-active?path=user-authentication/email-phone-username' sx={t => ({ color: t.colors.$whiteAlpha600, - textDecoration: 'underline solid', transition: `${t.transitionTiming.$common} ${t.transitionDuration.$fast}`, ':hover': { @@ -399,7 +397,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { {isSignedIn ? "You've created your first user! Link this application to your Clerk account to explore the Dashboard." - : 'We generated temporary API keys for you. Link this application to your Clerk account to configure it.'} + : 'This app uses Clerk for authentication. We generated temporary API keys for you. Link this application to your Clerk account to configure it.'} )}
@@ -424,45 +422,99 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { Dismiss ) : ( - ({ + flexDirection: 'column', + alignItems: 'center', + gap: t.space.$2x5, + })} + > + - {claimed ? 'Get API keys' : 'Claim application'} - + } + `} + > + {claimed ? 'Get API keys' : 'Claim application'} + + + {!claimed && ( + <> + + + + Already have a Clerk app? Get keys + + > + )} + ))}