From bf5fadb1b1a9ea0836149c51649c360e0e5fec1d Mon Sep 17 00:00:00 2001 From: kaftarmery Date: Fri, 17 Jan 2025 18:40:42 +0300 Subject: [PATCH 1/9] Add success state --- .../src/ui/components/KeylessPrompt/index.tsx | 185 ++++++++++++------ 1 file changed, 121 insertions(+), 64 deletions(-) diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx index 6cbfd7b4c31..d255038a1f9 100644 --- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx +++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx @@ -24,7 +24,9 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { const [isExpanded, setIsExpanded] = useState(false); const claimed = Boolean(useRevalidateEnvironment().authConfig.claimedAt); - const isForcedExpanded = claimed || isExpanded; + const success = true; + + const isForcedExpanded = claimed || success || isExpanded; const baseElementStyles = css` box-sizing: border-box; @@ -50,6 +52,32 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { text-decoration: none; `; + const mainCTAStyles = css` + ${baseElementStyles}; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 1.75rem; + max-width: 14.625rem; + padding: 0.25rem 0.625rem; + border-radius: 0.375rem; + font-size: 0.75rem; + font-weight: 500; + letter-spacing: 0.12px; + color: ${claimed ? 'white' : success ? 'white' : '#fde047'}; + text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.32); + white-space: nowrap; + user-select: none; + background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545; + box-shadow: + 0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset, + 0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset, + 0px 0px 0px 1px rgba(0, 0, 0, 0.12), + 0px 1.5px 2px 0px rgba(0, 0, 0, 0.48), + 0px 0px 4px 0px rgba(243, 107, 22, 0) inset; + `; + return ( { flexDirection: 'column', alignItems: 'flex-center', justifyContent: 'flex-center', - height: '8.75rem', + height: success ? '7.75rem' : '8.75rem', overflow: 'hidden', width: 'fit-content', minWidth: '16.125rem', @@ -108,7 +136,31 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { gap: t.space.$2, })} > - {claimed ? ( + {success ? ( + + + + + + + ) : claimed ? ( {

{ cursor: pointer; ${!claimed && + !success && `&::after { content: attr(data-text); z-index: 1; @@ -276,7 +335,11 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { `}; `} > - {claimed ? 'Missing environment keys' : 'Clerk is in keyless mode'} + {success + ? 'Application claim completed' + : claimed + ? 'Missing environment keys' + : 'Clerk is in keyless mode'}

@@ -290,7 +353,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { css={css` color: #8c8c8c; transition: color 130ms ease-out; - display: ${isExpanded && !claimed ? 'block' : 'none'}; + display: ${isExpanded && !claimed && !success ? 'block' : 'none'}; :hover { color: #eeeeee; @@ -352,7 +415,9 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { } `} > - {claimed ? ( + {success ? ( + <>Your application Keyless-Test has been successfully claimed. + ) : claimed ? ( <> You claimed this application but haven't set keys in your environment. Get them from the Clerk Dashboard. @@ -380,67 +445,59 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {

- {isForcedExpanded && ( - + Dismiss + + ) : ( + - {claimed ? 'Get API keys' : 'Claim keys'} - - )} + &:hover { + ${claimed + ? ` + background: #4B4B4B; + transition: all 120ms ease-in-out;` + : ` + box-shadow: + 0px 0px 6px 0px rgba(253, 224, 71, 0.24) inset, + 0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset, + 0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset, + 0px 0px 0px 1px rgba(0, 0, 0, 0.12), + 0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);`} + } + `} + > + {claimed ? 'Get API keys' : 'Claim keys'} + + ))} From 967a3e1a7ff801545f26bf3187bed9c7f45538a4 Mon Sep 17 00:00:00 2001 From: kaftarmery Date: Fri, 17 Jan 2025 18:42:33 +0300 Subject: [PATCH 2/9] Changeset --- .changeset/new-teachers-reflect.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/new-teachers-reflect.md diff --git a/.changeset/new-teachers-reflect.md b/.changeset/new-teachers-reflect.md new file mode 100644 index 00000000000..8b5a908e1d5 --- /dev/null +++ b/.changeset/new-teachers-reflect.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': minor +--- + +Add a confirmation state that the Application has been successfully claimed From ecfae25fea59f607c22d209d2ef24d247f0f6954 Mon Sep 17 00:00:00 2001 From: kaftarmery Date: Fri, 17 Jan 2025 20:04:03 +0300 Subject: [PATCH 3/9] Add fit-content to success state --- packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx index d255038a1f9..23be62a00d4 100644 --- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx +++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx @@ -105,7 +105,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { flexDirection: 'column', alignItems: 'flex-center', justifyContent: 'flex-center', - height: success ? '7.75rem' : '8.75rem', + height: success ? 'fit-content' : '8.75rem', overflow: 'hidden', width: 'fit-content', minWidth: '16.125rem', From 244a584c8f0cf62b9bc605441c927f8039bc133e Mon Sep 17 00:00:00 2001 From: kaftarmery Date: Fri, 17 Jan 2025 21:25:25 +0300 Subject: [PATCH 4/9] Add truncate on user's app name --- .../src/ui/components/KeylessPrompt/index.tsx | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx index 23be62a00d4..6c009ac0439 100644 --- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx +++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx @@ -25,6 +25,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { const claimed = Boolean(useRevalidateEnvironment().authConfig.claimedAt); const success = true; + const appName = 'ThiIsAVeryLongNamee'; const isForcedExpanded = claimed || success || isExpanded; @@ -416,7 +417,22 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { `} > {success ? ( - <>Your application Keyless-Test has been successfully claimed. + <> + Your application{' '} + + {appName} + {' '} + has been successfully claimed. + ) : claimed ? ( <> You claimed this application but haven't set keys in your environment. Get them from the Clerk From 7f6708e6e602160f33a4d76b153c4d11bd725ed6 Mon Sep 17 00:00:00 2001 From: kaftarmery Date: Fri, 17 Jan 2025 21:29:46 +0300 Subject: [PATCH 5/9] Toggle success variable to false --- packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx index 6c009ac0439..c6ad3441143 100644 --- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx +++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx @@ -24,7 +24,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { const [isExpanded, setIsExpanded] = useState(false); const claimed = Boolean(useRevalidateEnvironment().authConfig.claimedAt); - const success = true; + const success = false; const appName = 'ThiIsAVeryLongNamee'; const isForcedExpanded = claimed || success || isExpanded; From d772f0dc939b921ac82e582a1762dc7230551bc7 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Mon, 20 Jan 2025 10:57:14 +0200 Subject: [PATCH 6/9] Apply suggestions from code review --- packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx index c6ad3441143..61e63e056ec 100644 --- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx +++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx @@ -25,7 +25,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { const claimed = Boolean(useRevalidateEnvironment().authConfig.claimedAt); const success = false; - const appName = 'ThiIsAVeryLongNamee'; + const appName = useRevalidateEnvironment().displayConfig. applicationName const isForcedExpanded = claimed || success || isExpanded; From ee6beeac36e594b38cd4d411d97e2b40fc9d4a08 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Mon, 20 Jan 2025 10:58:10 +0200 Subject: [PATCH 7/9] Update .changeset/new-teachers-reflect.md --- .changeset/new-teachers-reflect.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/new-teachers-reflect.md b/.changeset/new-teachers-reflect.md index 8b5a908e1d5..bbaf229effb 100644 --- a/.changeset/new-teachers-reflect.md +++ b/.changeset/new-teachers-reflect.md @@ -2,4 +2,4 @@ '@clerk/clerk-js': minor --- -Add a confirmation state that the Application has been successfully claimed +Add a confirmation state that the Application has been successfully claimed on the Keyless prompt From d1e159551591ed5f33207364b98bed6564287293 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Mon, 20 Jan 2025 10:58:22 +0200 Subject: [PATCH 8/9] Update .changeset/new-teachers-reflect.md --- .changeset/new-teachers-reflect.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/new-teachers-reflect.md b/.changeset/new-teachers-reflect.md index bbaf229effb..701998797bd 100644 --- a/.changeset/new-teachers-reflect.md +++ b/.changeset/new-teachers-reflect.md @@ -2,4 +2,4 @@ '@clerk/clerk-js': minor --- -Add a confirmation state that the Application has been successfully claimed on the Keyless prompt +Add a confirmation state that the Application has been successfully claimed on the Keyless prompt. From c0d922f03271473d6f568c7ee4d317efd76c67b2 Mon Sep 17 00:00:00 2001 From: kaftarmery Date: Mon, 20 Jan 2025 12:20:48 +0300 Subject: [PATCH 9/9] Fix styling issue --- .../src/ui/components/KeylessPrompt/index.tsx | 50 +++++++++---------- 1 file changed, 24 insertions(+), 26 deletions(-) diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx index cc7e3f5b39c..bf2c3a3f2b7 100644 --- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx +++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx @@ -25,7 +25,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { const claimed = Boolean(useRevalidateEnvironment().authConfig.claimedAt); const success = false; - const appName = useRevalidateEnvironment().displayConfig. applicationName + const appName = useRevalidateEnvironment().displayConfig.applicationName; const isForcedExpanded = claimed || success || isExpanded; @@ -106,7 +106,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { flexDirection: 'column', alignItems: 'flex-center', justifyContent: 'flex-center', - height: success ? 'fit-content' : '8.75rem', + height: success ? 'fit-content' : '8.563rem', overflow: 'hidden', width: 'fit-content', minWidth: '16.125rem', @@ -278,7 +278,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { transparent 60%, transparent 100% ); - background-size: 260% 100%; + background-size: 275% 100%; background-clip: text; filter: blur(1.2px); animation: text-shimmer 12s 1s 1 ease-out forwards; @@ -304,7 +304,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { transparent 65%, transparent 100% ); - background-size: 260% 100%; + background-size: 275% 100%; background-clip: text; animation: text-shimmer 12s 1s 1 ease-out forwards; -webkit-user-select: none; @@ -425,7 +425,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - max-width: 130px; + max-width: 8.125rem; vertical-align: bottom; `} > @@ -452,7 +452,6 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { type='button' css={css` ${mainCTAStyles}; - &:hover { background: #4b4b4b; transition: all 120ms ease-in-out; @@ -470,36 +469,35 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { css={css` ${mainCTAStyles}; animation: ${isForcedExpanded && 'show-button 600ms ease-in forwards'}; - @keyframes show-button { - 0%, - 5% { - opacity: 0; - } - 14%, - 100% { - opacity: 1; + @keyframes show-button { + 0%, + 5% { + opacity: 0; + } + 14%, + 100% { + opacity: 1; } } - - &:hover { - ${claimed - ? ` + + &:hover { + ${claimed + ? ` background: #4B4B4B; transition: all 120ms ease-in-out;` - : ` + : ` box-shadow: 0px 0px 6px 0px rgba(253, 224, 71, 0.24) inset, 0px 0px 0px 1px rgba(255, 255, 255, 0.04) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.12), 0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);`} - } - `} - > - {claimed ? 'Get API keys' : 'Claim application'} - - )} - + } + `} + > + {claimed ? 'Get API keys' : 'Claim application'} + + ))}