feat(clerk-js): Add static toast UI for Keyless mode (#4658)

Co-authored-by: Alex Carpenter <[email protected]>
clerk · Dec 10, 2024 · 8db72d1 · 8db72d1
1 parent 80f2402
commit 8db72d1
Show file tree

Hide file tree

Showing 4 changed files with 468 additions and 143 deletions.
diff --git a/.changeset/afraid-pumas-design.md b/.changeset/afraid-pumas-design.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/ClerkLogoIcon.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/ClerkLogoIcon.tsx
@@ -0,0 +1,74 @@
+// Custom icon specifically used for the Keyless toast. Not intended to be used anywhere else
+
+export function ClerkLogoIcon() {
+  return (
+    <svg
+      width='1rem'
+      height='1.25rem'
+      viewBox='0 0 16 20'
+      fill='none'
+      aria-hidden
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <g filter='url(#filter0_i_438_501)'>
+        <path
+          d='M10.4766 9.99979C10.4766 11.3774 9.35978 12.4942 7.98215 12.4942C6.60452 12.4942 5.48773 11.3774 5.48773 9.99979C5.48773 8.62216 6.60452 7.50537 7.98215 7.50537C9.35978 7.50537 10.4766 8.62216 10.4766 9.99979Z'
+          fill='#BBBBBB'
+        />
+        <path
+          d='M12.4176 3.36236C12.6676 3.52972 12.6889 3.88187 12.4762 4.09457L10.6548 5.91595C10.4897 6.08107 10.2336 6.10714 10.0257 6.00071C9.41273 5.68684 8.71811 5.50976 7.98214 5.50976C5.5024 5.50976 3.49219 7.51998 3.49219 9.99972C3.49219 10.7357 3.66926 11.4303 3.98314 12.0433C4.08957 12.2511 4.06349 12.5073 3.89837 12.6724L2.07699 14.4938C1.86429 14.7065 1.51215 14.6851 1.34479 14.4352C0.495381 13.1666 0 11.641 0 9.99972C0 5.5913 3.57373 2.01758 7.98214 2.01758C9.62345 2.01758 11.1491 2.51296 12.4176 3.36236Z'
+          fill='#8F8F8F'
+        />
+        <path
+          d='M12.4762 15.905C12.6889 16.1177 12.6675 16.4698 12.4176 16.6372C11.149 17.4866 9.62342 17.982 7.9821 17.982C6.34078 17.982 4.81516 17.4866 3.54661 16.6372C3.29666 16.4698 3.27531 16.1177 3.48801 15.905L5.30938 14.0836C5.4745 13.9185 5.73066 13.8924 5.93851 13.9988C6.55149 14.3127 7.24612 14.4898 7.9821 14.4898C8.71808 14.4898 9.4127 14.3127 10.0257 13.9988C10.2335 13.8924 10.4897 13.9185 10.6548 14.0836L12.4762 15.905Z'
+          fill='#BBBBBB'
+        />
+      </g>
+      <defs>
+        <filter
+          id='filter0_i_438_501'
+          x='0'
+          y='1.86758'
+          width='12.6217'
+          height='16.1144'
+          filterUnits='userSpaceOnUse'
+          colorInterpolationFilters='sRGB'
+        >
+          <feFlood
+            floodOpacity='0'
+            result='BackgroundImageFix'
+          />
+          <feBlend
+            mode='normal'
+            in='SourceGraphic'
+            in2='BackgroundImageFix'
+            result='shape'
+          />
+          <feColorMatrix
+            in='SourceAlpha'
+            type='matrix'
+            values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'
+            result='hardAlpha'
+          />
+          <feOffset dy='-0.15' />
+          <feGaussianBlur stdDeviation='0.15' />
+          <feComposite
+            in2='hardAlpha'
+            operator='arithmetic'
+            k2='-1'
+            k3='1'
+          />
+          <feColorMatrix
+            type='matrix'
+            values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'
+          />
+          <feBlend
+            mode='normal'
+            in2='shape'
+            result='effect1_innerShadow_438_501'
+          />
+        </filter>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/KeySlashIcon.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/KeySlashIcon.tsx
@@ -0,0 +1,22 @@
+// Custom icon specifically used for the Keyless toast. Not intended to be used anywhere else
+
+export function KeySlashIcon() {
+  return (
+    <svg
+      width='1rem'
+      height='1rem'
+      viewBox='0 0 16 16'
+      fill='none'
+      aria-hidden
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M2.75 2.75L13.25 13.25M7.02665 6.38227C7.00046 6.21924 6.98684 6.052 6.98684 5.88158C6.98684 4.15206 8.3889 2.75 10.1184 2.75C11.8479 2.75 13.25 4.15206 13.25 5.88158C13.25 7.6111 11.8479 9.01316 10.1184 9.01316C9.89357 9.01316 9.67425 8.98946 9.46283 8.94442M4.39638 8.74013L3.21279 9.92371C2.91768 10.1977 2.75 10.5823 2.75 10.985V13.25H5.25V11.25H6.55172L7.02665 10.7751M10 5.97998V5.99998'
+        stroke='#F0D653'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  );
+}