From 5341d92636a43a2892194040bd474ef3e2ad8ae2 Mon Sep 17 00:00:00 2001 From: kaftarmery Date: Mon, 20 Jan 2025 21:46:14 +0300 Subject: [PATCH 1/3] Remove text animation --- .changeset/dirty-students-hang.md | 5 ++ .../src/ui/components/KeylessPrompt/index.tsx | 77 ------------------- 2 files changed, 5 insertions(+), 77 deletions(-) create mode 100644 .changeset/dirty-students-hang.md diff --git a/.changeset/dirty-students-hang.md b/.changeset/dirty-students-hang.md new file mode 100644 index 00000000000..81e3d7ce50c --- /dev/null +++ b/.changeset/dirty-students-hang.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': minor +--- + +Remove text-shimmer animation on the Keyless prompt UI diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx index a30b4c9984b..9f13df41e1f 100644 --- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx +++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx @@ -256,85 +256,8 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { color: #d9d9d9; font-size: 0.875rem; font-weight: 500; - position: relative; - isolation: isolate; white-space: nowrap; cursor: pointer; - - ${!claimed && - !success && - `&::after { - content: attr(data-text); - z-index: 1; - position: absolute; - left: 0; - top: 0; - color: transparent; - background: linear-gradient( - -100deg, - transparent 0%, - transparent 45%, - rgb(198, 179, 86) 51%, - rgb(198, 179, 86) 55%, - transparent 60%, - transparent 100% - ); - background-size: 275% 100%; - background-clip: text; - filter: blur(1.2px); - animation: text-shimmer 12s 1s 1 ease-out forwards; - -webkit-user-select: none; - user-select: none; - } - - &::before { - z-index: 2; - content: attr(data-text); - position: absolute; - left: 0; - top: 0; - color: transparent; - background: linear-gradient( - -100deg, - transparent 0%, - transparent 45%, - rgba(240, 214, 83, 0.7) 50%, - rgb(240, 214, 83) 51%, - rgb(240, 214, 83) 55%, - rgba(240, 214, 83, 0.7) 60%, - transparent 65%, - transparent 100% - ); - background-size: 275% 100%; - background-clip: text; - animation: text-shimmer 12s 1s 1 ease-out forwards; - -webkit-user-select: none; - user-select: none; - } - - @media (prefers-reduced-motion: reduce) { - &::after, - &::before { - animation: none; - background: transparent; - } - } - - @keyframes text-shimmer { - 0% { - background-position: 120% center; - } - 15% { - background-position: -60% center; - } - 85% { - background-position: -60% center; - } - 100% { - background-position: -60% center; - } - } - `}; `} > {success From ca949eb2874fedea3485fc904bc15af625312c4b Mon Sep 17 00:00:00 2001 From: Meryem Kaftar Date: Mon, 20 Jan 2025 21:52:29 +0300 Subject: [PATCH 2/3] Update dirty-students-hang.md --- .changeset/dirty-students-hang.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/dirty-students-hang.md b/.changeset/dirty-students-hang.md index 81e3d7ce50c..59979ae356e 100644 --- a/.changeset/dirty-students-hang.md +++ b/.changeset/dirty-students-hang.md @@ -2,4 +2,4 @@ '@clerk/clerk-js': minor --- -Remove text-shimmer animation on the Keyless prompt UI +Remove text-shimmer animation from the Keyless prompt UI. From 1c6a556771785841540739cf0ee1af8f84c9e869 Mon Sep 17 00:00:00 2001 From: Meryem Kaftar Date: Mon, 20 Jan 2025 21:54:00 +0300 Subject: [PATCH 3/3] Update dirty-students-hang.md --- .changeset/dirty-students-hang.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/dirty-students-hang.md b/.changeset/dirty-students-hang.md index 59979ae356e..ff6add94238 100644 --- a/.changeset/dirty-students-hang.md +++ b/.changeset/dirty-students-hang.md @@ -1,5 +1,5 @@ --- -'@clerk/clerk-js': minor +'@clerk/clerk-js': patch --- Remove text-shimmer animation from the Keyless prompt UI.