From a296a24728a976459d890366e19b20c56efa6428 Mon Sep 17 00:00:00 2001 From: kaftarmery Date: Fri, 10 Jan 2025 13:21:35 +0300 Subject: [PATCH 1/7] Adjust toast UI interactions --- .changeset/cool-windows-drop.md | 5 + .../src/ui/components/KeylessPrompt/index.tsx | 158 ++++++------------ 2 files changed, 57 insertions(+), 106 deletions(-) create mode 100644 .changeset/cool-windows-drop.md diff --git a/.changeset/cool-windows-drop.md b/.changeset/cool-windows-drop.md new file mode 100644 index 00000000000..e1ba5403052 --- /dev/null +++ b/.changeset/cool-windows-drop.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Simplify animations and restructure flow by removing the “Claim Keys” button in the collapsed state diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx index ea13b3fe99c..72eb7419a30 100644 --- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx +++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx @@ -37,15 +37,18 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { right: '1.25rem', zIndex: t.zIndices.$fab, height: `${t.sizes.$10}`, - minWidth: '18.5625rem', - maxWidth: 'fit-content', + minWidth: '16.125rem', padding: `${t.space.$1x5} ${t.space.$1x5} ${t.space.$1x5} ${t.space.$3}`, borderRadius: '1.25rem', fontFamily: t.fonts.$main, background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f', boxShadow: '0px 0px 0px 0.5px #2f3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 1px 1px rgba(255, 255, 255, 0.15) inset, 0px 0px 1px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.2)', - transition: 'all 325ms cubic-bezier(0.18, 0.98, 0.1, 1)', + transition: 'all 160ms cubic-bezier(0.6, 0.6, 0, 1)', + + '&[data-expanded="false"]:hover': { + background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f', + }, '&[data-expanded="true"]': { flexDirection: 'column', @@ -57,7 +60,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { gap: `${t.space.$1x5}`, padding: `${t.space.$2x5} ${t.space.$3} 3.25rem ${t.space.$3}`, borderRadius: `${t.radii.$xl}`, - transition: 'all 205ms cubic-bezier(0.4, 1, 0.20, 0.9)', + transition: 'all 220ms cubic-bezier(0.5, 1, 0.20, 0.8)', }, })} > @@ -109,10 +112,10 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { @keyframes coinFlipAnimation { 0%, - 70% { + 55% { transform: rotateY(0); } - 75%, + 60%, 95% { transform: rotateY(180deg); } @@ -172,7 +175,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { white-space: nowrap; animation: show-title 160ms ease-out forwards; - ${!claimed && + ${!isForcedExpanded && `&::after { content: attr(data-text); z-index: 1; @@ -192,11 +195,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { background-size: 180% 100%; background-clip: text; filter: blur(1.2px); - animation: ${ - isForcedExpanded - ? 'text-shimmer-expanded 3s infinite ease-out forwards' - : 'text-shimmer 3s infinite ease-out forwards' - }; + animation: text-shimmer 6.5s infinite ease-out forwards; -webkit-user-select: none; user-select: none; } @@ -221,11 +220,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { ); background-size: 180% 100%; background-clip: text; - animation: ${ - isForcedExpanded - ? 'text-shimmer-expanded 3s infinite ease-out forwards' - : 'text-shimmer 3s infinite ease-out forwards' - }; + animation: text-shimmer 6.5s infinite ease-out forwards; -webkit-user-select: none; user-select: none; } @@ -238,25 +233,21 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { } } - @keyframes text-shimmer { + @keyframes text-shimmer { 0% { background-position: 120% center; } - 30%, - 100% { + 15% { background-position: -60% center; } - } - - @keyframes text-shimmer-expanded { - 0% { - background-position: 120% center; + 85% { + background-position: -60% center; } - 30%, 100% { background-position: -60% center; } } + `} @keyframes show-title { from { transform: translateY(-1.5px); @@ -328,11 +319,11 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { line-height: 1rem; max-width: 14.625rem; min-height: 2rem; - animation: show-description 208ms ease forwards; + animation: show-description 210ms ease forwards; @keyframes show-description { from { - transform: translateY(-1.5px); + transform: translateY(-3px); opacity: 0; } to { @@ -351,6 +342,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { <> We generated temporary API keys for you. Link this instance to your Clerk account to configure it.{' '} ({ @@ -369,55 +361,38 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {

- { 0px 0px 0px 1px rgba(0, 0, 0, 0.12), 0px 1.5px 2px 0px rgba(0, 0, 0, 0.48);`} } - - box-shadow: - 0px 0px 3px 0px rgba(253, 224, 71, 0) 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); - } - - @keyframes small-btn-glow { - 0%, - 5%, - 95% { - box-shadow: - 0px 0px 4px 0px rgba(243, 107, 22, 0) 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); - } - - 22% { - box-shadow: - 0px 0px 6px 0px #fde047 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'} - + `} + > + {claimed ? 'Get API keys' : 'Claim keys'} + + )} Date: Fri, 10 Jan 2025 13:59:56 +0300 Subject: [PATCH 2/7] Easing fix --- 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 72eb7419a30..f3ed7ee59b9 100644 --- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx +++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx @@ -44,7 +44,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f', boxShadow: '0px 0px 0px 0.5px #2f3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 1px 1px rgba(255, 255, 255, 0.15) inset, 0px 0px 1px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.2)', - transition: 'all 160ms cubic-bezier(0.6, 0.6, 0, 1)', + transition: 'all 120ms cubic-bezier(0.3, 0, 0.2, 1)', '&[data-expanded="false"]:hover': { background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f', From 1f95d5d3737087e524bcea89ce4be6b2688d7013 Mon Sep 17 00:00:00 2001 From: kaftarmery Date: Mon, 13 Jan 2025 14:42:38 +0300 Subject: [PATCH 3/7] Remove unused code --- .../src/ui/components/KeylessPrompt/index.tsx | 28 +++++-------------- 1 file changed, 7 insertions(+), 21 deletions(-) diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx index f3ed7ee59b9..e96e0bb4433 100644 --- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx +++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx @@ -37,14 +37,14 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { right: '1.25rem', zIndex: t.zIndices.$fab, height: `${t.sizes.$10}`, - minWidth: '16.125rem', + minWidth: '13.4rem', padding: `${t.space.$1x5} ${t.space.$1x5} ${t.space.$1x5} ${t.space.$3}`, borderRadius: '1.25rem', fontFamily: t.fonts.$main, background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f', boxShadow: '0px 0px 0px 0.5px #2f3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 1px 1px rgba(255, 255, 255, 0.15) inset, 0px 0px 1px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.2)', - transition: 'all 120ms cubic-bezier(0.3, 0, 0.2, 1)', + transition: 'all 135ms cubic-bezier(0.25, 0.46, 0.45, 0.94)', '&[data-expanded="false"]:hover': { background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f', @@ -60,7 +60,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { gap: `${t.space.$1x5}`, padding: `${t.space.$2x5} ${t.space.$3} 3.25rem ${t.space.$3}`, borderRadius: `${t.radii.$xl}`, - transition: 'all 220ms cubic-bezier(0.5, 1, 0.20, 0.8)', + transition: 'all 210ms cubic-bezier(0.3, 0, 0.2, 1)', }, })} > @@ -173,7 +173,6 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { position: relative; isolation: isolate; white-space: nowrap; - animation: show-title 160ms ease-out forwards; ${!isForcedExpanded && `&::after { @@ -248,17 +247,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { } } - `} @keyframes show-title { - from { - transform: translateY(-1.5px); - opacity: 0; - } - - to { - transform: translateY(0); - opacity: 1; - } - } + `} `} > {claimed ? 'Missing environment keys' : 'Clerk is in keyless mode'} @@ -275,13 +264,13 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { css={css` color: #8c8c8c; transition: color 130ms ease-out; - visibility: ${isExpanded && !claimed ? 'visible' : 'hidden'}; + display: ${isExpanded && !claimed ? 'block' : 'none'}; :hover { color: #eeeeee; } - animation: show-button 285ms cubic-bezier(0.4, 0, 0, 1.1) forwards; + animation: show-button 220ms ease; @keyframes show-button { from { @@ -318,16 +307,13 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { font-weight: 400; line-height: 1rem; max-width: 14.625rem; - min-height: 2rem; - animation: show-description 210ms ease forwards; + animation: show-description 290ms cubic-bezier(0.4, 0, 0.2, 1) forwards; @keyframes show-description { from { - transform: translateY(-3px); opacity: 0; } to { - transform: translateY(0); opacity: 1; } } From c859fcb2465f5e13b1692ba3fa34ef0437d9ef16 Mon Sep 17 00:00:00 2001 From: kaftarmery Date: Mon, 13 Jan 2025 22:12:54 +0300 Subject: [PATCH 4/7] Fixes --- .../src/ui/components/KeylessPrompt/index.tsx | 231 ++++++++++-------- 1 file changed, 124 insertions(+), 107 deletions(-) diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx index e96e0bb4433..17c87eb55d4 100644 --- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx +++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx @@ -38,13 +38,13 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { zIndex: t.zIndices.$fab, height: `${t.sizes.$10}`, minWidth: '13.4rem', - padding: `${t.space.$1x5} ${t.space.$1x5} ${t.space.$1x5} ${t.space.$3}`, + paddingLeft: `${t.space.$3}`, borderRadius: '1.25rem', fontFamily: t.fonts.$main, background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f', boxShadow: '0px 0px 0px 0.5px #2f3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 1px 1px rgba(255, 255, 255, 0.15) inset, 0px 0px 1px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.2)', - transition: 'all 135ms cubic-bezier(0.25, 0.46, 0.45, 0.94)', + transition: 'all 130ms cubic-bezier(0.25, 0.46, 0.45, 0.94)', '&[data-expanded="false"]:hover': { background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f', @@ -52,15 +52,17 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { '&[data-expanded="true"]': { flexDirection: 'column', - alignItems: 'flex-start', - justifyContent: 'flex-start', - height: 'fit-content', + alignItems: 'flex-center', + justifyContent: 'flex-center', + height: '8.75rem', + overflow: 'hidden', width: 'fit-content', minWidth: '16.125rem', gap: `${t.space.$1x5}`, - padding: `${t.space.$2x5} ${t.space.$3} 3.25rem ${t.space.$3}`, + padding: `${t.space.$2x5} ${t.space.$3} ${t.space.$3} ${t.space.$3}`, + borderRadius: `${t.radii.$xl}`, - transition: 'all 210ms cubic-bezier(0.3, 0, 0.2, 1)', + transition: 'all 135ms cubic-bezier(0.25, 0.46, 0.45, 0.94)', }, })} > @@ -174,7 +176,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { isolation: isolate; white-space: nowrap; - ${!isForcedExpanded && + ${!claimed && `&::after { content: attr(data-text); z-index: 1; @@ -191,10 +193,10 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { transparent 60%, transparent 100% ); - background-size: 180% 100%; + background-size: 260% 100%; background-clip: text; filter: blur(1.2px); - animation: text-shimmer 6.5s infinite ease-out forwards; + animation: text-shimmer 12s 1s 1 ease-out forwards; -webkit-user-select: none; user-select: none; } @@ -217,9 +219,9 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { transparent 65%, transparent 100% ); - background-size: 180% 100%; + background-size: 260% 100%; background-clip: text; - animation: text-shimmer 6.5s infinite ease-out forwards; + animation: text-shimmer 12s 1s 1 ease-out forwards; -webkit-user-select: none; user-select: none; } @@ -246,7 +248,6 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { background-position: -60% center; } } - `} `} > @@ -270,7 +271,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { color: #eeeeee; } - animation: show-button 220ms ease; + animation: show-button 300ms ease; @keyframes show-button { from { @@ -293,111 +294,127 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { /> - - +

+ {claimed ? ( + <> + You claimed this application but haven't set keys in your environment. Get them from the Clerk + Dashboard. + + ) : ( + <> + We generated temporary API keys for you. Link this instance to your Clerk account to configure it.{' '} + ({ + color: t.colors.$whiteAlpha600, + textDecoration: 'underline solid', + transition: `${t.transitionTiming.$common} ${t.transitionDuration.$fast}`, + ':hover': { + color: t.colors.$whiteAlpha800, + }, + })} + > + Learn more + + + )} +

+ - {isForcedExpanded && ( - - {claimed ? 'Get API keys' : 'Claim keys'} - - )} + } + `} + > + {claimed ? 'Get API keys' : 'Claim keys'} + + )} + Date: Tue, 14 Jan 2025 12:02:24 +0300 Subject: [PATCH 5/7] Tweak easings --- .../src/ui/components/KeylessPrompt/index.tsx | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx index 17c87eb55d4..a5caa84e2a3 100644 --- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx +++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx @@ -30,7 +30,6 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { ({ position: 'fixed', bottom: '1.25rem', @@ -44,7 +43,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f', boxShadow: '0px 0px 0px 0.5px #2f3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 1px 1px rgba(255, 255, 255, 0.15) inset, 0px 0px 1px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.2)', - transition: 'all 130ms cubic-bezier(0.25, 0.46, 0.45, 0.94)', + transition: 'all 210ms cubic-bezier(0.2, 0.9, 0.25, 1)', '&[data-expanded="false"]:hover': { background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f', @@ -60,9 +59,8 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { minWidth: '16.125rem', gap: `${t.space.$1x5}`, padding: `${t.space.$2x5} ${t.space.$3} ${t.space.$3} ${t.space.$3}`, - borderRadius: `${t.radii.$xl}`, - transition: 'all 135ms cubic-bezier(0.25, 0.46, 0.45, 0.94)', + transition: 'all 215ms cubic-bezier(0.5, 0.8, 0.25, 1)', }, })} > @@ -272,7 +270,6 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { } animation: show-button 300ms ease; - @keyframes show-button { from { transform: scaleX(0.9); @@ -294,6 +291,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { /> + ({ flexDirection: 'column', @@ -313,13 +311,13 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { font-weight: 400; line-height: 1rem; max-width: 14.625rem; - animation: ${isForcedExpanded && 'show-description 500ms ease-in forwards'}; + animation: ${isForcedExpanded && 'show-description 600ms ease-in forwards'}; @keyframes show-description { 0%, - 10% { + 7% { opacity: 0; } - 20%, + 22%, 100% { opacity: 1; } @@ -384,13 +382,13 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { 0px 1.5px 2px 0px rgba(0, 0, 0, 0.48), 0px 0px 4px 0px rgba(243, 107, 22, 0) inset; - animation: ${isForcedExpanded && 'show-main-title 600ms ease-in forwards'}; - @keyframes show-main-title { + animation: ${isForcedExpanded && 'show-button 520ms ease-in forwards'}; + @keyframes show-button { 0%, - 10% { + 14% { opacity: 0; } - 29%, + 24%, 100% { opacity: 1; } From a7d99b1866946c010248c054c40ba8cea2adc1d4 Mon Sep 17 00:00:00 2001 From: kaftarmery Date: Wed, 15 Jan 2025 18:21:23 +0300 Subject: [PATCH 6/7] Add base styles --- .../src/ui/components/KeylessPrompt/index.tsx | 45 +++++++++++++++---- 1 file changed, 37 insertions(+), 8 deletions(-) diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx index a5caa84e2a3..6cbfd7b4c31 100644 --- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx +++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx @@ -26,6 +26,30 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { const isForcedExpanded = claimed || isExpanded; + const baseElementStyles = css` + box-sizing: border-box; + padding: 0; + margin: 0; + background: none; + border: none; + line-height: 1.5; + font-family: + -apple-system, + BlinkMacSystemFont, + avenir next, + avenir, + segoe ui, + helvetica neue, + helvetica, + Cantarell, + Ubuntu, + roboto, + noto, + arial, + sans-serif; + text-decoration: none; + `; + return ( { gap: `${t.space.$1x5}`, padding: `${t.space.$2x5} ${t.space.$3} ${t.space.$3} ${t.space.$3}`, borderRadius: `${t.radii.$xl}`, - transition: 'all 215ms cubic-bezier(0.5, 0.8, 0.25, 1)', + transition: 'all 220ms cubic-bezier(0.25, 0.8, 0.25, 1)', }, })} > @@ -71,6 +95,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { id={buttonIdentifier} onClick={() => !claimed && setIsExpanded(prev => !prev)} css={css` + ${baseElementStyles}; width: 100%; display: flex; justify-content: space-between; @@ -167,12 +192,14 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { data-text='Clerk is in keyless mode' aria-label={claimed ? 'Missing environment keys' : 'Clerk is in keyless mode'} css={css` + ${baseElementStyles}; color: #d9d9d9; font-size: 0.875rem; font-weight: 500; position: relative; isolation: isolate; white-space: nowrap; + cursor: pointer; ${!claimed && `&::after { @@ -246,7 +273,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { background-position: -60% center; } } - `} + `}; `} > {claimed ? 'Missing environment keys' : 'Clerk is in keyless mode'} @@ -306,18 +333,19 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { >

{ rel='noopener noreferrer' data-expanded={isForcedExpanded} css={css` + ${baseElementStyles}; display: flex; align-items: center; justify-content: center; @@ -382,13 +411,13 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { 0px 1.5px 2px 0px rgba(0, 0, 0, 0.48), 0px 0px 4px 0px rgba(243, 107, 22, 0) inset; - animation: ${isForcedExpanded && 'show-button 520ms ease-in forwards'}; + animation: ${isForcedExpanded && 'show-button 590ms ease-in forwards'}; @keyframes show-button { 0%, - 14% { + 8% { opacity: 0; } - 24%, + 21%, 100% { opacity: 1; } From 756bf45c1b90f0ef8cf8e673e178f5a5dcee8119 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Wed, 15 Jan 2025 17:26:29 +0200 Subject: [PATCH 7/7] Update .changeset/cool-windows-drop.md --- .changeset/cool-windows-drop.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.changeset/cool-windows-drop.md b/.changeset/cool-windows-drop.md index e1ba5403052..92bed0dc046 100644 --- a/.changeset/cool-windows-drop.md +++ b/.changeset/cool-windows-drop.md @@ -2,4 +2,5 @@ '@clerk/clerk-js': patch --- -Simplify animations and restructure flow by removing the “Claim Keys” button in the collapsed state +Simplify animations on Keyless prompt. +Bug fix: Add base element styles to override default styling of elements on Keyless prompt.