Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 32 commits into
base: main
Choose a base branch
from
+468 −143
Open

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

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
151234f
WIP:
kaftarmery Nov 26, 2024
a4324f0
Merge branch 'main' into keyless-ui
kaftarmery Nov 26, 2024
73952b2
Merge branch 'main' into keyless-ui
kaftarmery Nov 27, 2024
29de335
More UI polish
kaftarmery Nov 27, 2024
d7574a5
Text shimmer animation
kaftarmery Nov 27, 2024
a6dbcd0
Text shimmer
kaftarmery Nov 27, 2024
0dc0383
Improve animation coordinations
kaftarmery Nov 28, 2024
ce7e200
WIP
kaftarmery Nov 28, 2024
365f442
Fix durations
kaftarmery Nov 28, 2024
8ecd006
Add changeset
kaftarmery Nov 28, 2024
9a3704e
Merge branch 'main' into keyless-ui
kaftarmery Nov 28, 2024
b8450ba
Fix
kaftarmery Nov 28, 2024
5d7bbd3
Fix error
kaftarmery Nov 28, 2024
a0ed896
Update changeset
kaftarmery Nov 28, 2024
d243198
Merge branch 'main' into keyless-ui
kaftarmery Nov 28, 2024
4fc6845
Merge branch 'main' into keyless-ui
kaftarmery Dec 2, 2024
f28a793
Merge branch 'main' into keyless-ui
kaftarmery Dec 2, 2024
53ca021
Add comments to icons
kaftarmery Dec 2, 2024
3359670
Improve based on feedback
kaftarmery Dec 2, 2024
53a1f83
Improve animations and allow text expand
kaftarmery Dec 3, 2024
5001a45
Merge branch 'main' into keyless-ui
kaftarmery Dec 3, 2024
0be031c
Improvements
kaftarmery Dec 3, 2024
fb60992
Merge branch 'main' into keyless-ui
kaftarmery Dec 3, 2024
428038a
Merge branch 'main' into keyless-ui
kaftarmery Dec 3, 2024
914dd70
Merge branch 'main' into keyless-ui
kaftarmery Dec 4, 2024
c3546a5
Small animation improvements
kaftarmery Dec 4, 2024
86b7d67
wip
kaftarmery Dec 4, 2024
d828748
Update packages/clerk-js/src/ui/components/AccountlessPrompt/ClerkLog…
alexcarpenter Dec 4, 2024
626fd6e
Update packages/clerk-js/src/ui/components/AccountlessPrompt/ClerkLog…
alexcarpenter Dec 4, 2024
333e83c
Update packages/clerk-js/src/ui/components/AccountlessPrompt/KeySlash…
alexcarpenter Dec 4, 2024
e331d10
Update packages/clerk-js/src/ui/components/AccountlessPrompt/index.tsx
alexcarpenter Dec 4, 2024
e1b377a
Fixes
kaftarmery Dec 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/afraid-pumas-design.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': minor
---

Add new toast UI for Keyless mode
Comment on lines +2 to +5
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@panteliselef should we just do an empty changeset for this? Assuming your pulling this into your work for a release?

236 changes: 236 additions & 0 deletions packages/clerk-js/src/ui/components/AccountlessPrompt/ClerkLogoIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,236 @@
export function ClerkLogoIcon() {
kaftarmery marked this conversation as resolved.
Show resolved Hide resolved
return (
<svg
kaftarmery marked this conversation as resolved.
Show resolved Hide resolved
width='16'
height='20'
kaftarmery marked this conversation as resolved.
Show resolved Hide resolved
alexcarpenter marked this conversation as resolved.
Show resolved Hide resolved
viewBox='0 0 16 20'
fill='none'
xmlns='http://www.w3.org/2000/svg'
alexcarpenter marked this conversation as resolved.
Show resolved Hide resolved
>
<g filter='url(#filter0_ii_188_1906)'>
<ellipse
cx='8.00017'
cy='10'
rx='2.49999'
ry='2.5'
fill='#BBBBBB'
/>
</g>
<g filter='url(#filter1_ii_188_1906)'>
<path
d='M12.5247 15.9391C12.7266 16.1411 12.7063 16.4753 12.4696 16.6351C11.1933 17.4966 9.65508 17.9996 7.99937 17.9996C6.34367 17.9996 4.80544 17.4966 3.52916 16.6351C3.29245 16.4753 3.27215 16.1411 3.4741 15.9391L5.33559 14.0776C5.49237 13.9208 5.73562 13.8959 5.93249 13.9979C6.5514 14.3185 7.25424 14.4996 7.99937 14.4996C8.74451 14.4996 9.44734 14.3185 10.0663 13.9979C10.2631 13.8959 10.5064 13.9208 10.6632 14.0776L12.5247 15.9391Z'
fill='#BBBBBB'
/>
</g>
<g
opacity='0.5'
filter='url(#filter2_ii_188_1906)'
>
<path
d='M12.4702 3.36449C12.7069 3.52427 12.7272 3.85854 12.5252 4.06049L10.6637 5.922C10.507 6.07877 10.2637 6.10367 10.0668 6.0017C9.44792 5.68111 8.74509 5.5 7.99996 5.5C5.51469 5.5 3.49998 7.51472 3.49998 10C3.49998 10.7451 3.68109 11.448 4.00168 12.0669C4.10366 12.2638 4.07875 12.507 3.92198 12.6638L2.06048 14.5253C1.85854 14.7272 1.52426 14.7069 1.36448 14.4702C0.50298 13.1939 0 11.6557 0 10C0 5.58172 3.5817 2 7.99996 2C9.65566 2 11.1939 2.50298 12.4702 3.36449Z'
fill='#BBBBBB'
/>
</g>
<defs>
<filter
id='filter0_ii_188_1906'
x='5.50018'
y='7.37341'
width='5'
height='5.25318'
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.126591' />
<feGaussianBlur stdDeviation='0.0632957' />
<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_188_1906'
/>
<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.316478' />
<feGaussianBlur stdDeviation='0.0632957' />
<feComposite
in2='hardAlpha'
operator='arithmetic'
k2='-1'
k3='1'
/>
<feColorMatrix
type='matrix'
values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'
/>
<feBlend
mode='normal'
in2='effect1_innerShadow_188_1906'
result='effect2_innerShadow_188_1906'
/>
</filter>
<filter
id='filter1_ii_188_1906'
x='3.33594'
y='13.8102'
width='9.3269'
height='4.31593'
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.126591' />
<feGaussianBlur stdDeviation='0.0632957' />
<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_188_1906'
/>
<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.316478' />
<feGaussianBlur stdDeviation='0.0632957' />
<feComposite
in2='hardAlpha'
operator='arithmetic'
k2='-1'
k3='1'
/>
<feColorMatrix
type='matrix'
values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'
/>
<feBlend
mode='normal'
in2='effect1_innerShadow_188_1906'
result='effect2_innerShadow_188_1906'
/>
</filter>
<filter
id='filter2_ii_188_1906'
x='0'
y='1.87341'
width='12.6634'
height='12.9168'
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.126591' />
<feGaussianBlur stdDeviation='0.0632957' />
<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_188_1906'
/>
<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.316478' />
<feGaussianBlur stdDeviation='0.0632957' />
<feComposite
in2='hardAlpha'
operator='arithmetic'
k2='-1'
k3='1'
/>
<feColorMatrix
type='matrix'
values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'
/>
<feBlend
mode='normal'
in2='effect1_innerShadow_188_1906'
result='effect2_innerShadow_188_1906'
/>
</filter>
</defs>
</svg>
);
}
19 changes: 19 additions & 0 deletions packages/clerk-js/src/ui/components/AccountlessPrompt/KeySlashIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
export function KeySlashIcon() {
kaftarmery marked this conversation as resolved.
Show resolved Hide resolved
return (
<svg
width='16'
height='16'
kaftarmery marked this conversation as resolved.
Show resolved Hide resolved
viewBox='0 0 16 16'
fill='none'
xmlns='http://www.w3.org/2000/svg'
alexcarpenter marked this conversation as resolved.
Show resolved Hide resolved
>
<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>
);
}
Loading
Loading