Skip to content

Commit 11c6458

Browse files
author
Meryem Kaftar
authored
fix(clerk-js): Improve copy and add secondary CTA to Keyless Prompt (#4993)
1 parent 7f8b63d commit 11c6458

File tree

3 files changed

+90
-33
lines changed

3 files changed

+90
-33
lines changed

‎.changeset/green-ravens-bathe.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@clerk/clerk-js': minor
3+
---
4+
5+
Improve Keyless prompt's copy and add secondary CTA button for navigating to API keys page in the Dashboard.

‎packages/clerk-js/bundlewatch.config.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,6 @@
1818
{ "path": "./dist/userverification*.js", "maxSize": "5KB" },
1919
{ "path": "./dist/onetap*.js", "maxSize": "1KB" },
2020
{ "path": "./dist/waitlist*.js", "maxSize": "1.3KB" },
21-
{ "path": "./dist/keylessPrompt*.js", "maxSize": "5.5KB" }
21+
{ "path": "./dist/keylessPrompt*.js", "maxSize": "5.7KB" }
2222
]
2323
}

‎packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx‎

Lines changed: 84 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
3434

3535
const environment = useRevalidateEnvironment();
3636
const claimed = Boolean(environment.authConfig.claimedAt);
37-
3837
const success = typeof _props.onDismiss === 'function' && claimed;
3938
const appName = environment.displayConfig.applicationName;
4039

@@ -129,7 +128,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
129128
flexDirection: 'column',
130129
alignItems: 'flex-center',
131130
justifyContent: 'flex-center',
132-
height: success ? 'fit-content' : '8.563rem',
131+
height: claimed || success ? 'fit-content' : isSignedIn ? '11rem' : '12rem',
133132
overflow: 'hidden',
134133
width: 'fit-content',
135134
minWidth: '16.125rem',
@@ -291,7 +290,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
291290
xmlns='http://www.w3.org/2000/svg'
292291
css={css`
293292
color: #8c8c8c;
294-
transition: color 130ms ease-out;
293+
transition: color 120ms ease-out;
295294
display: ${isExpanded && !claimed && !success ? 'block' : 'none'};
296295
cursor: pointer;
297296
@@ -379,7 +378,6 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
379378
href='https://dashboard.clerk.com/last-active?path=user-authentication/email-phone-username'
380379
sx={t => ({
381380
color: t.colors.$whiteAlpha600,
382-
383381
textDecoration: 'underline solid',
384382
transition: `${t.transitionTiming.$common} ${t.transitionDuration.$fast}`,
385383
':hover': {
@@ -399,7 +397,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
399397
<span>
400398
{isSignedIn
401399
? "You've created your first user! Link this application to your Clerk account to explore the Dashboard."
402-
: 'We generated temporary API keys for you. Link this application to your Clerk account to configure it.'}
400+
: 'This app uses Clerk for authentication. We generated temporary API keys for you. Link this application to your Clerk account to configure it.'}
403401
</span>
404402
)}
405403
</p>
@@ -424,45 +422,99 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {
424422
Dismiss
425423
</button>
426424
) : (
427-
<a
428-
href={urlToDashboard}
429-
target='_blank'
430-
rel='noopener noreferrer'
425+
<Flex
431426
data-expanded={isForcedExpanded}
432-
css={css`
433-
${mainCTAStyles};
434-
animation: ${isForcedExpanded && isSignedIn
435-
? 'show-button 800ms ease forwards'
436-
: 'show-button 650ms ease-in forwards'};
427+
sx={t => ({
428+
flexDirection: 'column',
429+
alignItems: 'center',
430+
gap: t.space.$2x5,
431+
})}
432+
>
433+
<a
434+
href={urlToDashboard}
435+
target='_blank'
436+
rel='noopener noreferrer'
437+
css={css`
438+
${mainCTAStyles};
439+
animation: ${isForcedExpanded && isSignedIn
440+
? 'show-main-CTA 800ms ease forwards'
441+
: 'show-main-CTA 650ms ease-in forwards'};
437442
438-
@keyframes show-button {
439-
0%,
440-
5% {
441-
opacity: 0;
442-
}
443-
14%,
444-
100% {
445-
opacity: 1;
443+
@keyframes show-main-CTA {
444+
0%,
445+
5% {
446+
opacity: 0;
447+
}
448+
14%,
449+
100% {
450+
opacity: 1;
451+
}
446452
}
447-
}
448453
449-
&:hover {
450-
${claimed
451-
? `
454+
&:hover {
455+
${claimed
456+
? `
452457
background: #4B4B4B;
453458
transition: all 120ms ease-in-out;`
454-
: `
459+
: `
455460
box-shadow:
456461
0px 0px 6px 0px rgba(253, 224, 71, 0.24) inset,
457462
0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset,
458463
0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset,
459464
0px 0px 0px 1px rgba(0, 0, 0, 0.12),
460465
0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);`}
461-
}
462-
`}
463-
>
464-
{claimed ? 'Get API keys' : 'Claim application'}
465-
</a>
466+
}
467+
`}
468+
>
469+
{claimed ? 'Get API keys' : 'Claim application'}
470+
</a>
471+
472+
{!claimed && (
473+
<>
474+
<span
475+
css={css`
476+
height: 1px;
477+
background-color: #151515;
478+
width: 100%;
479+
box-shadow: 0px 1px 0px 0px #424242;
480+
`}
481+
/>
482+
483+
<a
484+
href='https://dashboard.clerk.com/last-active?path=api-keys'
485+
target='_blank'
486+
rel='noopener noreferrer'
487+
css={css`
488+
${baseElementStyles};
489+
color: #ffffff9e;
490+
font-size: 0.75rem;
491+
transition: color 120ms ease-out;
492+
:hover {
493+
color: #ffffffcf;
494+
text-decoration: none;
495+
}
496+
497+
animation: ${isForcedExpanded && isSignedIn
498+
? 'show-secondary-CTA 800ms ease forwards'
499+
: 'show-secondary-CTA 650ms ease-in forwards'};
500+
501+
@keyframes show-secondary-CTA {
502+
0%,
503+
9% {
504+
opacity: 0;
505+
}
506+
19%,
507+
100% {
508+
opacity: 1;
509+
}
510+
}
511+
`}
512+
>
513+
Already have a Clerk app? Get keys
514+
</a>
515+
</>
516+
)}
517+
</Flex>
466518
))}
467519
</Flex>
468520
</Flex>

0 commit comments

Comments
 (0)