mirror of
https://github.com/penpot/penpot.git
synced 2026-06-20 14:22:08 +00:00
♻️ Update in-app onboarding slides (#10086)
* ♻️ Modify social media icons in verification email * ♻️ Update verify email * ♻️ Update copies in 'check your email' * ♻️ Update onboarding images * ♻️ Refurbish create team slide * ♻️ Refactor SCSS for in-app onboarding * 🐛 Fix replace old uxbox with penpot image for all email HTMLs * 🐛 Fix use of link component
This commit is contained in:
Luis de Dios
GitHub
parent
c6ecfb7794
commit
4a41b2e5e0
@ -122,7 +122,7 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width:97px;">
|
||||
<img height="32" src="{{ public-uri }}/images/email/uxbox-title.png"
|
||||
<img height="32" src="{{ public-uri }}/images/email/logo-penpot.svg"
|
||||
style="border:0;display:block;outline:none;text-decoration:none;height:32px;width:100%;font-size:13px;"
|
||||
width="97" />
|
||||
</td>
|
||||
@ -254,4 +254,4 @@
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -122,7 +122,7 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width:97px;">
|
||||
<img height="32" src="{{ public-uri }}/images/email/uxbox-title.png"
|
||||
<img height="32" src="{{ public-uri }}/images/email/logo-penpot.svg"
|
||||
style="border:0;display:block;outline:none;text-decoration:none;height:32px;width:100%;font-size:13px;"
|
||||
width="97" />
|
||||
</td>
|
||||
|
||||
@ -122,7 +122,7 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width:97px;">
|
||||
<img height="32" src="{{ public-uri }}/images/email/uxbox-title.png"
|
||||
<img height="32" src="{{ public-uri }}/images/email/logo-penpot.svg"
|
||||
style="border:0;display:block;outline:none;text-decoration:none;height:32px;width:100%;font-size:13px;"
|
||||
width="97" />
|
||||
</td>
|
||||
|
||||
@ -122,7 +122,7 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width:97px;">
|
||||
<img height="32" src="{{ public-uri }}/images/email/uxbox-title.png"
|
||||
<img height="32" src="{{ public-uri }}/images/email/logo-penpot.svg"
|
||||
style="border:0;display:block;outline:none;text-decoration:none;height:32px;width:100%;font-size:13px;"
|
||||
width="97" />
|
||||
</td>
|
||||
|
||||
@ -29,10 +29,8 @@
|
||||
style="vertical-align:top;" width="100%">
|
||||
<tr>
|
||||
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
|
||||
<div
|
||||
style="font-family:Source Sans Pro, sans-serif;font-size:14px;line-height:150%;text-align:center;color:#64666A;">
|
||||
Penpot is the first Open Source design and prototyping platform meant for
|
||||
cross-domain teams.
|
||||
<div style="font-family:Source Sans Pro, sans-serif;font-size:14px;line-height:150%;text-align:center;color:#64666A;">
|
||||
Penpot is the open-source design platform for teams that need scalable collaboration.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@ -100,9 +98,9 @@
|
||||
<tr>
|
||||
<td
|
||||
style="font-size:0;height:24px;vertical-align:middle;width:24px;">
|
||||
<a href="https://penpot.app/" target="_blank">
|
||||
<a href="https://www.reddit.com/r/Penpot" target="_blank">
|
||||
<img height="24"
|
||||
src="{{ public-uri }}/images/email/logo-uxbox.png"
|
||||
src="{{ public-uri }}/images/email/logo-reddit.svg"
|
||||
style="border-radius:3px;display:block;"
|
||||
width="24" />
|
||||
</a>
|
||||
@ -126,9 +124,9 @@
|
||||
<tr>
|
||||
<td
|
||||
style="font-size:0;height:24px;vertical-align:middle;width:24px;">
|
||||
<a href="https://x.com/penpotapp" target="_blank">
|
||||
<a href="https://www.linkedin.com/company/penpot" target="_blank">
|
||||
<img height="24"
|
||||
src="{{ public-uri }}/images/email/logo-x.png"
|
||||
src="{{ public-uri }}/images/email/logo-linkedin.svg"
|
||||
style="border-radius:3px;display:block;"
|
||||
width="24" />
|
||||
</a>
|
||||
@ -152,9 +150,9 @@
|
||||
<tr>
|
||||
<td
|
||||
style="font-size:0;height:24px;vertical-align:middle;width:24px;">
|
||||
<a href="https://github.com/penpot/" target="_blank">
|
||||
<a href="https://bsky.app/profile/penpot.app" target="_blank">
|
||||
<img height="24"
|
||||
src="{{ public-uri }}/images/email/logo-github.png"
|
||||
src="{{ public-uri }}/images/email/logo-bluesky.svg"
|
||||
style="border-radius:3px;display:block;"
|
||||
width="24" />
|
||||
</a>
|
||||
@ -178,10 +176,36 @@
|
||||
<tr>
|
||||
<td
|
||||
style="font-size:0;height:24px;vertical-align:middle;width:24px;">
|
||||
<a href="https://www.linkedin.com/company/penpotdesign/"
|
||||
<a href="https://github.com/penpot" target="_blank">
|
||||
<img height="24"
|
||||
src="{{ public-uri }}/images/email/logo-github.svg"
|
||||
style="border-radius:3px;display:block;"
|
||||
width="24" />
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!--[if mso | IE]>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<![endif]-->
|
||||
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
|
||||
style="float:none;display:inline-table;">
|
||||
<tr>
|
||||
<td style="padding:0 8px;">
|
||||
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
|
||||
style="border-radius:3px;width:24px;">
|
||||
<tr>
|
||||
<td
|
||||
style="font-size:0;height:24px;vertical-align:middle;width:24px;">
|
||||
<a href="https://x.com/penpotapp"
|
||||
target="_blank">
|
||||
<img height="24"
|
||||
src="{{ public-uri }}/images/email/logo-linkedin.png"
|
||||
src="{{ public-uri }}/images/email/logo-x.svg"
|
||||
style="border-radius:3px;display:block;"
|
||||
width="24" />
|
||||
</a>
|
||||
@ -205,9 +229,9 @@
|
||||
<tr>
|
||||
<td
|
||||
style="font-size:0;height:24px;vertical-align:middle;width:24px;">
|
||||
<a href="https://fosstodon.org/@penpot/" target="_blank">
|
||||
<a href="https://www.youtube.com/@Penpot" target="_blank">
|
||||
<img height="24"
|
||||
src="{{ public-uri }}/images/email/logo-mastodon.png"
|
||||
src="{{ public-uri }}/images/email/logo-youtube.svg"
|
||||
style="border-radius:3px;display:block;"
|
||||
width="24" />
|
||||
</a>
|
||||
@ -231,10 +255,36 @@
|
||||
<tr>
|
||||
<td
|
||||
style="font-size:0;height:24px;vertical-align:middle;width:24px;">
|
||||
<a href="https://tree.taiga.io/project/penpot"
|
||||
<a href="https://www.instagram.com/penpot.app"
|
||||
target="_blank">
|
||||
<img height="24"
|
||||
src="{{ public-uri }}/images/email/logo-taiga.png"
|
||||
src="{{ public-uri }}/images/email/logo-instagram.svg"
|
||||
style="border-radius:3px;display:block;"
|
||||
width="24" />
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!--[if mso | IE]>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<![endif]-->
|
||||
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
|
||||
style="float:none;display:inline-table;">
|
||||
<tr>
|
||||
<td style="padding:0 8px;">
|
||||
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
|
||||
style="border-radius:3px;width:24px;">
|
||||
<tr>
|
||||
<td
|
||||
style="font-size:0;height:24px;vertical-align:middle;width:24px;">
|
||||
<a href="https://fosstodon.org/@penpot" target="_blank">
|
||||
<img height="24"
|
||||
src="{{ public-uri }}/images/email/logo-mastodon.svg"
|
||||
style="border-radius:3px;display:block;"
|
||||
width="24" />
|
||||
</a>
|
||||
@ -320,4 +370,4 @@
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<![endif]-->
|
||||
<![endif]-->
|
||||
|
||||
@ -122,7 +122,7 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width:97px;">
|
||||
<img height="32" src="{{ public-uri }}/images/email/uxbox-title.png"
|
||||
<img height="32" src="{{ public-uri }}/images/email/logo-penpot.svg"
|
||||
style="border:0;display:block;outline:none;text-decoration:none;height:32px;width:100%;font-size:13px;"
|
||||
width="97" />
|
||||
</td>
|
||||
|
||||
@ -122,7 +122,7 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width:97px;">
|
||||
<img height="32" src="{{ public-uri }}/images/email/uxbox-title.png"
|
||||
<img height="32" src="{{ public-uri }}/images/email/logo-penpot.svg"
|
||||
style="border:0;display:block;outline:none;text-decoration:none;height:32px;width:100%;font-size:13px;"
|
||||
width="97" />
|
||||
</td>
|
||||
|
||||
@ -122,7 +122,7 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width:97px;">
|
||||
<img height="32" src="{{ public-uri }}/images/email/uxbox-title.png"
|
||||
<img height="32" src="{{ public-uri }}/images/email/logo-penpot.svg"
|
||||
style="border:0;display:block;outline:none;text-decoration:none;height:32px;width:100%;font-size:13px;"
|
||||
width="97" />
|
||||
</td>
|
||||
@ -241,4 +241,4 @@
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -122,7 +122,7 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width:97px;">
|
||||
<img height="32" src="{{ public-uri }}/images/email/uxbox-title.png"
|
||||
<img height="32" src="{{ public-uri }}/images/email/logo-penpot.svg"
|
||||
style="border:0;display:block;outline:none;text-decoration:none;height:32px;width:100%;font-size:13px;"
|
||||
width="97" />
|
||||
</td>
|
||||
@ -249,4 +249,4 @@
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -122,7 +122,7 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width:97px;">
|
||||
<img height="32" src="{{ public-uri }}/images/email/uxbox-title.png"
|
||||
<img height="32" src="{{ public-uri }}/images/email/logo-penpot.svg"
|
||||
style="border:0;display:block;outline:none;text-decoration:none;height:32px;width:100%;font-size:13px;"
|
||||
width="97" />
|
||||
</td>
|
||||
@ -179,15 +179,21 @@
|
||||
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
|
||||
<div
|
||||
style="font-family:Source Sans Pro, sans-serif;font-size:24px;font-weight:600;line-height:150%;text-align:left;color:#000000;">
|
||||
Hello {{name|abbreviate:25}}!</div>
|
||||
Hi {{name|abbreviate:25}},</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
|
||||
<div
|
||||
style="font-family:Source Sans Pro, sans-serif;font-size:16px;line-height:150%;text-align:left;color:#000000;">
|
||||
Thanks for signing up for your Penpot account! Please verify your email using the link below and
|
||||
get started building mockups and prototypes today!</div>
|
||||
Welcome to Penpot!</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
|
||||
<div
|
||||
style="font-family:Source Sans Pro, sans-serif;font-size:16px;line-height:150%;text-align:left;color:#000000;">
|
||||
Please verify your email to get started with your first design and collaboration.</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -218,7 +224,7 @@
|
||||
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
|
||||
<div
|
||||
style="font-family:Source Sans Pro, sans-serif;font-size:16px;line-height:150%;text-align:left;color:#000000;">
|
||||
The Penpot team.</div>
|
||||
The Penpot team</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
@ -241,4 +247,4 @@
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -1 +1 @@
|
||||
Verify email.
|
||||
Verify your Penpot account
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
Hello {{name|abbreviate:25}}!
|
||||
Hi {{name|abbreviate:25}},
|
||||
|
||||
Thanks for signing up for your Penpot account! Please verify your email using the
|
||||
link below and get started building mockups and prototypes today!
|
||||
Welcome to Penpot!
|
||||
|
||||
Please verify your email to get started with your first design and collaboration.
|
||||
|
||||
{{ public-uri }}/#/auth/verify-token?token={{token}}
|
||||
|
||||
Enjoy!
|
||||
The Penpot team.
|
||||
|
||||
The Penpot team
|
||||
|
||||
@ -122,7 +122,7 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width:97px;">
|
||||
<img height="32" src="{{ public-uri }}/images/email/uxbox-title.png"
|
||||
<img height="32" src="{{ public-uri }}/images/email/logo-penpot.svg"
|
||||
style="border:0;display:block;outline:none;text-decoration:none;height:32px;width:100%;font-size:13px;"
|
||||
width="97" />
|
||||
</td>
|
||||
|
||||
@ -122,7 +122,7 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width:97px;">
|
||||
<img height="32" src="{{ public-uri }}/images/email/uxbox-title.png"
|
||||
<img height="32" src="{{ public-uri }}/images/email/logo-penpot.svg"
|
||||
style="border:0;display:block;outline:none;text-decoration:none;height:32px;width:100%;font-size:13px;"
|
||||
width="97" />
|
||||
</td>
|
||||
|
||||
@ -122,7 +122,7 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width:97px;">
|
||||
<img height="32" src="{{ public-uri }}/images/email/uxbox-title.png"
|
||||
<img height="32" src="{{ public-uri }}/images/email/logo-penpot.svg"
|
||||
style="border:0;display:block;outline:none;text-decoration:none;height:32px;width:100%;font-size:13px;"
|
||||
width="97" />
|
||||
</td>
|
||||
|
||||
@ -122,7 +122,7 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width:97px;">
|
||||
<img height="32" src="{{ public-uri }}/images/email/uxbox-title.png"
|
||||
<img height="32" src="{{ public-uri }}/images/email/logo-penpot.svg"
|
||||
style="border:0;display:block;outline:none;text-decoration:none;height:32px;width:100%;font-size:13px;"
|
||||
width="97" />
|
||||
</td>
|
||||
|
||||
@ -122,7 +122,7 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width:97px;">
|
||||
<img height="32" src="{{ public-uri }}/images/email/uxbox-title.png"
|
||||
<img height="32" src="{{ public-uri }}/images/email/logo-penpot.svg"
|
||||
style="border:0;display:block;outline:none;text-decoration:none;height:32px;width:100%;font-size:13px;"
|
||||
width="97" />
|
||||
</td>
|
||||
|
||||
1
frontend/resources/images/email/logo-bluesky.svg
Normal file
1
frontend/resources/images/email/logo-bluesky.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="138" xmlns="http://www.w3.org/2000/svg" height="138" id="screenshot-bee8e5b0-23fe-80cd-8008-263a7341cc32" viewBox="0 0 138 138" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-bee8e5b0-23fe-80cd-8008-263a7341cc32"><defs><clipPath id="frame-clip-bee8e5b0-23fe-80cd-8008-263a7341cc32-render-7" class="frame-clip frame-clip-def"><rect rx="0" ry="0" x="0" y="0" width="138" height="138" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"/></clipPath></defs><g class="frame-container-wrapper"><g class="frame-container-blur"><g class="frame-container-shadows"><g clip-path="url(#frame-clip-bee8e5b0-23fe-80cd-8008-263a7341cc32-render-7)" fill="none"><g class="fills" id="fills-bee8e5b0-23fe-80cd-8008-263a7341cc32"><rect rx="0" ry="0" x="0" y="0" width="138" height="138" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background"/></g><g class="frame-children"><g id="shape-bee8e5b0-23fe-80cd-8008-263a68fc01ed"><g class="fills" id="fills-bee8e5b0-23fe-80cd-8008-263a68fc01ed"><path d="M-0.5,16.678466796875C-0.5,7.197265625,7.197509765625,-0.5,16.678466796875,-0.5L121.32177734375,-0.5C130.802734375,-0.5,138.5,7.197265625,138.5,16.678466796875L138.5,121.321533203125C138.5,130.802734375,130.802734375,138.5,121.32177734375,138.5L16.678466796875,138.5C7.197509765625,138.5,-0.5,130.802734375,-0.5,121.321533203125L-0.5,16.678466796875M33.016845703125,20.808837890625C22.688720703125,13.05517578125,5.957275390625,7.05615234375,5.957275390625,26.1455078125C5.957275390625,29.9580078125,8.142333984375,58.173583984375,9.424560546875,62.755615234375C13.880126953125,78.679443359375,30.115966796875,82.7421875,44.559814453125,80.282958984375C19.312255859375,84.579345703125,12.888427734375,98.8154296875,26.760498046875,113.049072265625C53.105224609375,140.085205078125,64.623779296875,106.266357421875,67.575927734375,97.602294921875C68.116943359375,96.013427734375,68.369873046875,95.26953125,68.373779296875,95.902099609375C68.378173828125,95.26953125,68.630615234375,96.013427734375,69.172119140625,97.602294921875C72.123779296875,106.266357421875,83.642333984375,140.083251953125,109.987548828125,113.049072265625C123.85498046875,98.8154296875,117.431640625,84.581298828125,92.188232421875,80.282958984375C106.631591796875,82.7421875,122.86767578125,78.679443359375,127.32373046875,62.755615234375C128.60595703125,58.173583984375,130.791015625,29.9580078125,130.791015625,26.1455078125C130.791015625,7.05615234375,114.059326171875,13.05517578125,103.731201171875,20.808837890625C89.417724609375,31.553466796875,74.028076171875,53.34375,68.373779296875,65.0361328125C62.719970703125,53.34375,47.325439453125,31.5556640625,33.016845703125,20.808837890625" style="fill: rgb(100, 102, 106); fill-opacity: 1;"/></g></g></g></g></g></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 898 B |
1
frontend/resources/images/email/logo-github.svg
Normal file
1
frontend/resources/images/email/logo-github.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="140" xmlns="http://www.w3.org/2000/svg" height="139" id="screenshot-bee8e5b0-23fe-80cd-8008-263a68fc01e9" viewBox="0 0 140 139" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-bee8e5b0-23fe-80cd-8008-263a68fc01e9"><defs><clipPath id="frame-clip-bee8e5b0-23fe-80cd-8008-263a68fc01e9-render-24" class="frame-clip frame-clip-def"><rect rx="0" ry="0" x="0" y="0" width="139.999906539917" height="139.00002300739288" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"/></clipPath></defs><g class="frame-container-wrapper"><g class="frame-container-blur"><g class="frame-container-shadows"><g clip-path="url(#frame-clip-bee8e5b0-23fe-80cd-8008-263a68fc01e9-render-24)" fill="none"><g class="fills" id="fills-bee8e5b0-23fe-80cd-8008-263a68fc01e9"><rect rx="0" ry="0" x="0" y="0" width="139.999906539917" height="139.00002300739288" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background"/></g><g class="frame-children"><g id="shape-bee8e5b0-23fe-80cd-8008-263a68fc01ea"><g class="fills" id="fills-bee8e5b0-23fe-80cd-8008-263a68fc01ea"><path d="M17.59947967529297,138.98941040039062C9.095817565917969,137.95498657226562,2.5001139640808105,130.68472290039062,2.5001139640808105,121.88272094726562L2.5001139640808105,18.485017776489258C2.5001139640808105,8.974520683288574,10.200309753417969,1.2523523569107056,19.68761444091797,1.2523523569107056L122.81212615966797,1.2523523569107056C132.29893493652344,1.2523523569107056,139.99961853027344,8.974520683288574,139.99961853027344,18.485017776489258L139.99961853027344,121.88272094726562C139.99961853027344,129.29434204101562,135.32286071777344,135.61978149414062,128.76866149902344,138.05093383789062C118.05577850341797,138.01773071289062,106.21251678466797,137.34487915039062,93.12071990966797,135.94766235351562C91.50450897216797,136.03799438476562,89.92198944091797,135.45962524414062,88.74376678466797,134.34878540039062C87.56847381591797,133.23599243164062,86.90587615966797,131.69180297851562,86.90587615966797,130.07632446289062L86.90587615966797,109.84976196289062C87.24962615966797,106.60635375976562,86.68468475341797,103.33071899414062,85.26915740966797,100.38809204101562C107.51378631591797,96.47305297851562,119.61388397216797,83.42422485351562,119.61388397216797,65.80825805664062C119.93810272216797,56.66617202758789,116.64757537841797,47.76138687133789,110.45861053466797,41.01285171508789C113.73253631591797,34.30875015258789,113.23644256591797,26.380037307739258,109.14904022216797,20.134675979614258C101.22228240966797,20.243806838989258,93.67443084716797,23.537996292114258,88.21398162841797,29.270662307739258C82.48693084716797,27.572664260864258,76.52452850341797,26.800691604614258,70.55284881591797,26.985750198364258C64.55236053466797,26.777498245239258,58.56945037841797,27.663484573364258,52.89171600341797,29.596345901489258C47.50841522216797,23.712556838989258,39.93761444091797,20.292146682739258,31.95665740966797,20.134675979614258C27.76866912841797,26.373689651489258,27.39122772216797,34.41177749633789,30.97570037841797,41.01285171508789C24.66320037841797,47.71084976196289,21.25646209716797,56.61978530883789,21.49181365966797,65.80825805664062C21.49181365966797,83.42422485351562,33.59386444091797,96.47305297851562,55.83361053466797,100.38809204101562C54.41905975341797,103.33071899414062,53.85753631591797,106.60635375976562,54.19689178466797,109.84976196289062C50.27208709716797,111.48037719726562,37.84337615966797,112.45840454101562,32.28527069091797,102.99868774414062C29.92296600341797,99.24575805664062,25.91857147216797,96.82632446289062,21.49181365966797,96.47305297851562C21.49181365966797,96.47305297851562,14.622673034667969,96.14688110351562,21.16466522216797,100.71377563476562C24.57286834716797,103.38150024414062,27.08019256591797,107.02456665039062,28.35704803466797,111.15420532226562C28.35704803466797,111.15420532226562,34.57140350341797,124.85537719726562,54.19689178466797,120.61416625976562L54.19689178466797,130.07632446289062C54.19689178466797,133.01309204101562,51.58214569091797,136.59951782226562,48.30919647216797,135.94766235351562C37.17931365966797,137.68618774414062,26.96300506591797,138.67324829101562,17.58824920654297,138.99624633789062" style="fill: rgb(100, 102, 106); fill-opacity: 1;"/></g></g></g></g></g></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
1
frontend/resources/images/email/logo-instagram.svg
Normal file
1
frontend/resources/images/email/logo-instagram.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="138" xmlns="http://www.w3.org/2000/svg" height="137" id="screenshot-bee8e5b0-23fe-80cd-8008-263a68fc01f0" viewBox="0 0 138 137" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-bee8e5b0-23fe-80cd-8008-263a68fc01f0"><defs><clipPath id="frame-clip-bee8e5b0-23fe-80cd-8008-263a68fc01f0-render-21" class="frame-clip frame-clip-def"><rect rx="0" ry="0" x="0" y="0" width="138.00039291381836" height="137.00002562999725" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"/></clipPath></defs><g class="frame-container-wrapper"><g class="frame-container-blur"><g class="frame-container-shadows"><g clip-path="url(#frame-clip-bee8e5b0-23fe-80cd-8008-263a68fc01f0-render-21)" fill="none"><g class="fills" id="fills-bee8e5b0-23fe-80cd-8008-263a68fc01f0"><rect rx="0" ry="0" x="0" y="0" width="138.00039291381836" height="137.00002562999725" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background"/></g><g class="frame-children"><g id="shape-bee8e5b0-23fe-80cd-8008-263a68fc01f1" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-bee8e5b0-23fe-80cd-8008-263a68fc01f2"><g class="fills" id="fills-bee8e5b0-23fe-80cd-8008-263a68fc01f2"><path d="M0.00011405778059270233,16.552888870239258C0.00011405778059270233,7.071932315826416,7.6973795890808105,-0.6255772709846497,17.17833709716797,-0.6255772709846497L120.82189178466797,-0.6255772709846497C130.30284118652344,-0.6255772709846497,138.00059509277344,7.071932315826416,138.00059509277344,16.552888870239258L138.00059509277344,119.82168579101562C138.00059509277344,129.30264282226562,130.30284118652344,136.99990844726562,120.82189178466797,136.99990844726562L17.17833709716797,136.99990844726562C7.6973795890808105,136.99990844726562,0.00011405778059270233,129.30264282226562,0.00011405778059270233,119.82168579101562L0.00011405778059270233,16.552888870239258M24.46398162841797,85.59878540039062C24.46398162841797,100.16299438476562,36.30968475341797,111.97720336914062,50.91417694091797,111.97720336914062L87.71398162841797,111.97720336914062C102.31798553466797,111.97720336914062,114.16417694091797,100.16299438476562,114.16417694091797,85.59878540039062L114.16417694091797,48.89883804321289C114.16417694091797,34.33462905883789,102.31798553466797,22.520418167114258,87.71398162841797,22.520418167114258L50.91417694091797,22.520418167114258C36.30968475341797,22.520418167114258,24.46398162841797,34.33462905883789,24.46398162841797,48.89883804321289L24.46398162841797,85.59878540039062M93.46398162841797,38.57681655883789C96.68468475341797,38.57681655883789,99.21398162841797,41.09903335571289,99.21398162841797,44.31119155883789C99.21398162841797,47.52334976196289,96.68468475341797,50.04556655883789,93.46398162841797,50.04556655883789C90.24327850341797,50.04556655883789,87.71398162841797,47.52334976196289,87.71398162841797,44.31119155883789C87.71398162841797,41.09903335571289,90.24327850341797,38.57681655883789,93.46398162841797,38.57681655883789M69.31407928466797,45.45816421508789C81.38878631591797,45.45816421508789,91.16368865966797,55.20669937133789,91.16368865966797,67.24893188476562C91.16368865966797,79.29116821289062,81.38878631591797,89.03945922851562,69.31407928466797,89.03945922851562C57.23888397216797,89.03945922851562,47.46398162841797,79.29116821289062,47.46398162841797,67.24893188476562C47.46398162841797,55.20669937133789,57.23888397216797,45.45816421508789,69.31407928466797,45.45816421508789M84.68224334716797,67.56167602539062C84.68224334716797,59.26968765258789,77.94200897216797,52.54800796508789,69.62755584716797,52.54800796508789C61.31310272216797,52.54800796508789,54.57286834716797,59.26968765258789,54.57286834716797,67.56167602539062C54.57286834716797,75.85342407226562,61.31310272216797,82.57534790039062,69.62755584716797,82.57534790039062C77.94200897216797,82.57534790039062,84.68224334716797,75.85342407226562,84.68224334716797,67.56167602539062" style="fill: rgb(100, 102, 106); fill-opacity: 1;"/></g></g></g></g></g></g></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.5 KiB |
1
frontend/resources/images/email/logo-linkedin.svg
Normal file
1
frontend/resources/images/email/logo-linkedin.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="138" xmlns="http://www.w3.org/2000/svg" height="138" id="screenshot-bee8e5b0-23fe-80cd-8008-263ad1104cf3" viewBox="0 0 138 138" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-bee8e5b0-23fe-80cd-8008-263ad1104cf3"><defs><clipPath id="frame-clip-bee8e5b0-23fe-80cd-8008-263ad1104cf3-render-15" class="frame-clip frame-clip-def"><rect rx="0" ry="0" x="0" y="0" width="138" height="138" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"/></clipPath></defs><g class="frame-container-wrapper"><g class="frame-container-blur"><g class="frame-container-shadows"><g clip-path="url(#frame-clip-bee8e5b0-23fe-80cd-8008-263ad1104cf3-render-15)" fill="none"><g class="fills" id="fills-bee8e5b0-23fe-80cd-8008-263ad1104cf3"><rect rx="0" ry="0" x="0" y="0" width="138" height="138" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background"/></g><g class="frame-children"><g id="shape-bee8e5b0-23fe-80cd-8008-263ad1104cf4"><g class="fills" id="fills-bee8e5b0-23fe-80cd-8008-263ad1104cf4"><path d="M0,17.178466796875C0,7.697509765625,7.697265625,0,17.17822265625,0L120.8212890625,0C130.30224609375,0,138,7.697509765625,138,17.178466796875L138,120.821533203125C138,130.302734375,130.30224609375,138,120.8212890625,138L17.17822265625,138C7.697265625,138,0,130.302734375,0,120.821533203125L0,17.178466796875" style="fill: rgb(100, 102, 106); fill-opacity: 1;"/></g></g><g id="shape-bee8e5b0-23fe-80cd-8008-263acb5ee5fe" rx="0" ry="0" style="opacity: 1;"><g id="shape-bee8e5b0-23fe-80cd-8008-263acb5ee600" rx="0" ry="0" style="opacity: 1;"><g id="shape-bee8e5b0-23fe-80cd-8008-263acb5ee601" style="opacity: 1;"><g class="fills" id="fills-bee8e5b0-23fe-80cd-8008-263acb5ee601"><path d="M27.62060546875,42.41455078125C25.53515625,40.4755859375,24.5,38.07470703125,24.5,35.216796875C24.5,32.36181640625,25.54296875,29.855224609375,27.62060546875,27.910888671875C29.70556640625,25.969970703125,32.388671875,24.9990234375,35.6748046875,24.9990234375C38.962890625,24.9990234375,41.53955078125,25.969970703125,43.6171875,27.910888671875C45.703125,29.8525390625,46.7373046875,32.28955078125,46.7373046875,35.216796875C46.7373046875,38.14697265625,45.697265625,40.4755859375,43.6171875,42.41455078125C41.53466796875,44.353271484375,38.890625,45.32666015625,35.6748046875,45.32666015625C32.458984375,45.32666015625,29.70556640625,44.353271484375,27.62060546875,42.41455078125ZM44.98876953125,53.538330078125L44.98876953125,113L26.2470703125,113L26.2470703125,53.538330078125L44.98876953125,53.538330078125Z" fill-rule="nonzero" style="fill: rgb(245, 245, 245); fill-opacity: 1;"/></g></g><g id="shape-bee8e5b0-23fe-80cd-8008-263acb5ee602" style="opacity: 1;"><g class="fills" id="fills-bee8e5b0-23fe-80cd-8008-263acb5ee602"><path d="M107.37451171875,59.41162109375C111.458984375,63.859619140625,113.5009765625,69.960205078125,113.5009765625,77.727783203125L113.5009765625,111.949462890625L95.70068359375,111.949462890625L95.70068359375,80.1416015625C95.70068359375,76.225341796875,94.6865234375,73.178955078125,92.6630859375,71.010498046875C90.6396484375,68.842041015625,87.91357421875,67.75537109375,84.498046875,67.75537109375C81.08251953125,67.75537109375,78.3564453125,68.837158203125,76.3330078125,71.010498046875C74.3095703125,73.178955078125,73.29541015625,76.225341796875,73.29541015625,80.1416015625L73.29541015625,111.949462890625L55.39208984375,111.949462890625L55.39208984375,53.37353515625L73.29541015625,53.37353515625L73.29541015625,61.14111328125C75.10888671875,58.549560546875,77.55419921875,56.50732421875,80.625,54.999755859375C83.69580078125,53.494384765625,87.14697265625,52.745849609375,90.98974609375,52.745849609375C97.830078125,52.745849609375,103.2939453125,54.966064453125,107.37451171875,59.40625L107.37451171875,59.41162109375Z" fill-rule="nonzero" style="fill: rgb(245, 245, 245); fill-opacity: 1;"/></g></g></g></g></g></g></g></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
1
frontend/resources/images/email/logo-mastodon.svg
Normal file
1
frontend/resources/images/email/logo-mastodon.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="138" xmlns="http://www.w3.org/2000/svg" height="137" id="screenshot-bee8e5b0-23fe-80cd-8008-263a68fc01fc" viewBox="0 0 138 137" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-bee8e5b0-23fe-80cd-8008-263a68fc01fc"><defs><clipPath id="frame-clip-bee8e5b0-23fe-80cd-8008-263a68fc01fc-render-1" class="frame-clip frame-clip-def"><rect rx="0" ry="0" x="0" y="0" width="137.9999077320099" height="137.00002562999725" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"/></clipPath></defs><g class="frame-container-wrapper"><g class="frame-container-blur"><g class="frame-container-shadows"><g clip-path="url(#frame-clip-bee8e5b0-23fe-80cd-8008-263a68fc01fc-render-1)" fill="none"><g class="fills" id="fills-bee8e5b0-23fe-80cd-8008-263a68fc01fc"><rect rx="0" ry="0" x="0" y="0" width="137.9999077320099" height="137.00002562999725" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background"/></g><g class="frame-children"><g id="shape-bee8e5b0-23fe-80cd-8008-263a68fc01fd" rx="0" ry="0"><g id="shape-bee8e5b0-23fe-80cd-8008-263a68fc01fe"><g class="fills" id="fills-bee8e5b0-23fe-80cd-8008-263a68fc01fe"><path d="M0.00018483861640561372,16.552751541137695C0.00018483861640561372,7.071794033050537,7.697450637817383,-0.6254714727401733,17.178407669067383,-0.6254714727401733L120.82147216796875,-0.6254714727401733C130.30242919921875,-0.6254714727401733,137.99969482421875,7.071794033050537,137.99969482421875,16.552751541137695L137.99969482421875,119.82154846191406C137.99969482421875,129.30274963378906,130.30242919921875,137.00001525878906,120.82147216796875,137.00001525878906L17.178407669067383,137.00001525878906C7.697450637817383,137.00001525878906,0.00018483861640561372,129.30274963378906,0.00018483861640561372,119.82154846191406L0.00018483861640561372,16.552751541137695M113.97576904296875,82.34352111816406C116.32781982421875,71.20680236816406,116.03387451171875,55.08790588378906,116.03387451171875,55.08790588378906C116.03387451171875,33.40040588378906,101.62811279296875,26.952898025512695,101.62811279296875,26.952898025512695C89.27996826171875,20.505144119262695,51.06024169921875,19.919206619262695,36.36053466796875,26.952898025512695C36.36053466796875,26.952898025512695,21.954774856567383,33.40040588378906,21.954774856567383,55.08790588378906L21.954774856567383,72.37916564941406C22.542665481567383,93.48023986816406,26.070497512817383,114.87477111816406,45.76824951171875,119.85694885253906C55.47039794921875,122.49464416503906,71.93426513671875,125.13233947753906,86.92840576171875,118.09840393066406L86.34002685546875,110.18556213378906C86.34002685546875,110.18556213378906,78.40203857421875,112.23707580566406,69.28778076171875,112.23707580566406C47.53240966796875,112.82325744628906,49.59002685546875,100.80714416503906,48.70867919921875,96.99732971191406C48.70867919921875,96.99732971191406,63.70184326171875,101.97950744628906,88.98602294921875,98.75563049316406C101.33416748046875,96.99732971191406,112.50604248046875,89.37745666503906,113.97576904296875,82.34352111816406" style="fill: rgb(100, 102, 106); fill-opacity: 1;"/></g></g><g id="shape-bee8e5b0-23fe-80cd-8008-263a68fc01ff"><g class="fills" id="fills-bee8e5b0-23fe-80cd-8008-263a68fc01ff"><path d="M99.10906982421875,56.43385314941406L99.10906982421875,83.20094299316406L88.77752685546875,83.20094299316406L88.77752685546875,57.31642150878906C88.77752685546875,52.02174377441406,86.41619873046875,49.37452697753906,81.98846435546875,49.37452697753906C76.67498779296875,49.37452697753906,74.01824951171875,52.61012268066406,74.01824951171875,59.08131408691406L74.01824951171875,72.90602111816406L63.98211669921875,72.90602111816406L63.98211669921875,59.08131408691406C63.98211669921875,52.61012268066406,61.32537841796875,49.37452697753906,56.01190185546875,49.37452697753906C51.58416748046875,49.37452697753906,49.22283935546875,52.02174377441406,49.22283935546875,57.31642150878906L49.22283935546875,83.20094299316406L38.89080810546875,83.20094299316406L38.89080810546875,56.43385314941406C38.89080810546875,51.13941955566406,40.36688232421875,38.78541564941406,54.24090576171875,38.78541564941406C65.75311279296875,38.78541564941406,69.00018310546875,49.66871643066406,69.00018310546875,49.66871643066406C69.00018310546875,49.66871643066406,71.95184326171875,38.78541564941406,83.75946044921875,38.78541564941406C97.04315185546875,38.78541564941406,99.10906982421875,51.13941955566406,99.10906982421875,56.43385314941406" style="fill: rgb(100, 102, 106);"/></g></g></g></g></g></g></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 4.5 KiB |
3
frontend/resources/images/email/logo-penpot.svg
Normal file
3
frontend/resources/images/email/logo-penpot.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.4 KiB |
1
frontend/resources/images/email/logo-reddit.svg
Normal file
1
frontend/resources/images/email/logo-reddit.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 765 B |
Binary file not shown.
|
Before Width: | Height: | Size: 814 B |
Binary file not shown.
|
Before Width: | Height: | Size: 900 B |
Binary file not shown.
|
Before Width: | Height: | Size: 8.3 KiB |
1
frontend/resources/images/email/logo-x.svg
Normal file
1
frontend/resources/images/email/logo-x.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="138" xmlns="http://www.w3.org/2000/svg" height="138" id="screenshot-bee8e5b0-23fe-80cd-8008-263afbc3829c" viewBox="0 0 138 138" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-bee8e5b0-23fe-80cd-8008-263afbc3829c"><defs><clipPath id="frame-clip-bee8e5b0-23fe-80cd-8008-263afbc3829c-render-11" class="frame-clip frame-clip-def"><rect rx="0" ry="0" x="0" y="0" width="138" height="138" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"/></clipPath></defs><g class="frame-container-wrapper"><g class="frame-container-blur"><g class="frame-container-shadows"><g clip-path="url(#frame-clip-bee8e5b0-23fe-80cd-8008-263afbc3829c-render-11)" fill="none"><g class="fills" id="fills-bee8e5b0-23fe-80cd-8008-263afbc3829c"><rect rx="0" ry="0" x="0" y="0" width="138" height="138" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background"/></g><g class="frame-children"><g id="shape-bee8e5b0-23fe-80cd-8008-263afbc3829d"><g class="fills" id="fills-bee8e5b0-23fe-80cd-8008-263afbc3829d"><path d="M0,17.178466796875C0,7.697509765625,7.697265625,0,17.17822265625,0L120.8212890625,0C130.30224609375,0,138,7.697509765625,138,17.178466796875L138,120.821533203125C138,130.302734375,130.30224609375,138,120.8212890625,138L17.17822265625,138C7.697265625,138,0,130.302734375,0,120.821533203125L0,17.178466796875" style="fill: rgb(100, 102, 106); fill-opacity: 1;"/></g></g><g id="shape-bee8e5b0-23fe-80cd-8008-263b02ae724c" rx="0" ry="0" style="opacity: 1;"><g id="shape-bee8e5b0-23fe-80cd-8008-263b02ae724d" style="opacity: 1;"><g class="fills" id="fills-bee8e5b0-23fe-80cd-8008-263b02ae724d"><path d="M22.2275390625,24.498779296875L58.5185546875,73.58837890625L22.0009765625,113.49951171875L30.22119140625,113.49951171875L62.19677734375,78.556396484375L88.02783203125,113.49951171875L116.0009765625,113.49951171875L77.66650390625,61.64990234375L111.66162109375,24.498779296875L103.43896484375,24.498779296875L73.99658203125,56.67919921875L50.203125,24.498779296875L22.23291015625,24.498779296875L22.2275390625,24.498779296875ZM34.31103515625,30.622314453125L47.16064453125,30.622314453125L103.90185546875,107.373046875L91.05517578125,107.373046875L34.31103515625,30.622314453125Z" fill-rule="nonzero" style="fill: rgb(245, 245, 245); fill-opacity: 1;"/></g></g></g></g></g></g></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
1
frontend/resources/images/email/logo-youtube.svg
Normal file
1
frontend/resources/images/email/logo-youtube.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="138" xmlns="http://www.w3.org/2000/svg" height="138" id="screenshot-bee8e5b0-23fe-80cd-8008-263a92bec34d" viewBox="0 0 138 138" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-bee8e5b0-23fe-80cd-8008-263a92bec34d"><defs><clipPath id="frame-clip-bee8e5b0-23fe-80cd-8008-263a92bec34d-render-9" class="frame-clip frame-clip-def"><rect rx="0" ry="0" x="0" y="0" width="138" height="138" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"/></clipPath></defs><g class="frame-container-wrapper"><g class="frame-container-blur"><g class="frame-container-shadows"><g clip-path="url(#frame-clip-bee8e5b0-23fe-80cd-8008-263a92bec34d-render-9)" fill="none"><g class="fills" id="fills-bee8e5b0-23fe-80cd-8008-263a92bec34d"><rect rx="0" ry="0" x="0" y="0" width="138" height="138" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background"/></g><g class="frame-children"><g id="shape-bee8e5b0-23fe-80cd-8008-263a68fc01f6"><g class="fills" id="fills-bee8e5b0-23fe-80cd-8008-263a68fc01f6"><path d="M0,17.178466796875C0,7.697509765625,7.697265625,0,17.17822265625,0L120.8212890625,0C130.30224609375,0,138,7.697509765625,138,17.178466796875L138,120.821533203125C138,130.302734375,130.30224609375,138,120.8212890625,138L17.17822265625,138C7.697265625,138,0,130.302734375,0,120.821533203125L0,17.178466796875M97.2001953125,35.810546875C78.5810546875,33.226806640625,59.42236328125,33.226806640625,40.79833984375,35.810546875C33.11376953125,36.877685546875,27.1298828125,42.729736328125,25.9208984375,50.376708984375C24.9560546875,56.51611328125,24.46337890625,62.78466796875,24.46337890625,68.9951171875C24.46337890625,75.205810546875,24.951171875,81.536376953125,25.94482421875,87.714111328125C27.1298828125,95.188232421875,33.23779296875,101.126220703125,40.79833984375,102.1796875C50.107421875,103.476318359375,59.603515625,104.127197265625,69.00048828125,104.127197265625C78.39599609375,104.127197265625,87.89111328125,103.476318359375,97.20166015625,102.1796875C104.87158203125,101.112548828125,110.83984375,95.308349609375,112.05419921875,87.714111328125C113.0439453125,81.541259765625,113.5361328125,75.24365234375,113.5361328125,68.9951171875C113.5361328125,62.74658203125,113.048828125,56.453857421875,112.05419921875,50.2763671875C110.869140625,42.802001953125,104.76171875,36.864013671875,97.20166015625,35.810546875M84.927734375,71.1142578125L59.431640625,85.85205078125C59.05419921875,86.072021484375,58.63818359375,86.18212890625,58.2080078125,86.18212890625C57.7783203125,86.18212890625,57.3623046875,86.072021484375,56.98486328125,85.85205078125C56.224609375,85.42138671875,55.76171875,84.612548828125,55.76171875,83.732177734375L55.76171875,54.260498046875C55.76171875,53.380126953125,56.224609375,52.571533203125,56.98486328125,52.140625C57.74462890625,51.700439453125,58.671875,51.700439453125,59.431640625,52.140625L84.927734375,66.87841796875C85.6875,67.30908203125,86.1513671875,68.127197265625,86.1513671875,68.998046875C86.1513671875,69.869140625,85.6875,70.687255859375,84.927734375,71.1181640625" style="fill: rgb(100, 102, 106); fill-opacity: 1;"/></g></g></g></g></g></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 213 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 243 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.7 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 21 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 20 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 20 KiB |
1
frontend/resources/images/form/slide-3-prototyping.svg
Normal file
1
frontend/resources/images/form/slide-3-prototyping.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 11 KiB |
1
frontend/resources/images/form/slide-3-wireframing.svg
Normal file
1
frontend/resources/images/form/slide-3-wireframing.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 16 KiB |
1
frontend/resources/images/form/slide-final-team.svg
Normal file
1
frontend/resources/images/form/slide-final-team.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 253 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
@ -110,7 +110,7 @@
|
||||
[:div {:class (stl/css :auth-form-wrapper :register-success)}
|
||||
[:div {:class (stl/css :auth-title-wrapper)}
|
||||
[:h2 {:class (stl/css :auth-title)}
|
||||
(tr "auth.check-mail")]
|
||||
(tr "auth.check-email")]
|
||||
[:div {:class (stl/css :notification-text)} (tr "not-found.login.sent-recovery")]]
|
||||
[:div {:class (stl/css :notification-text-email)} email]
|
||||
[:div {:class (stl/css :notification-text)} (tr "not-found.login.sent-recovery-check")]])
|
||||
|
||||
@ -234,8 +234,8 @@
|
||||
[:div {:class (stl/css :auth-form-wrapper :register-success)}
|
||||
[:div {:class (stl/css :auth-title-wrapper)}
|
||||
[:h2 {:class (stl/css :auth-title)}
|
||||
(tr "auth.check-mail")]
|
||||
[:div {:class (stl/css :notification-text)} (tr "auth.verification-email-sent")]]
|
||||
(tr "auth.check-email")]
|
||||
[:div {:class (stl/css :notification-text)} (tr "auth.verification-sent-email")]]
|
||||
[:div {:class (stl/css :notification-text-email)} email]]))
|
||||
|
||||
(mf/defc terms-register*
|
||||
|
||||
@ -5,13 +5,18 @@
|
||||
;; Copyright (c) KALEIDOS INC Sucursal en España SL
|
||||
|
||||
(ns app.main.ui.forms
|
||||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.main.ui.ds.buttons.button :refer [button*]]
|
||||
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
|
||||
[app.main.ui.ds.controls.input :refer [input*]]
|
||||
[app.main.ui.ds.controls.select :refer [select*]]
|
||||
[app.main.ui.ds.foundations.assets.icon :as i]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.forms :as fm]
|
||||
[app.util.i18n :refer [tr]]
|
||||
[app.util.keyboard :as k]
|
||||
[cuerdas.core :as str]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(def context (mf/create-context nil))
|
||||
@ -49,8 +54,150 @@
|
||||
|
||||
[:> input* props]))
|
||||
|
||||
(defn- conj-dedup
|
||||
"Adds item into a vector and removes possible duplicates."
|
||||
[coll item]
|
||||
(into [] (distinct) (conj coll item)))
|
||||
|
||||
(mf/defc form-multi-input*
|
||||
[{:keys [name trim valid-item-fn caution-item-fn] :rest props}]
|
||||
(let [form (mf/use-ctx context)
|
||||
|
||||
touched? (and (contains? (:data @form) name)
|
||||
(get-in @form [:touched name]))
|
||||
|
||||
value (mf/use-state "")
|
||||
focus? (mf/use-state false)
|
||||
|
||||
items
|
||||
(mf/use-state
|
||||
(fn []
|
||||
(let [initial (get-in @form [:data name])]
|
||||
(if (or (vector? initial) (set? initial))
|
||||
(mapv (fn [val]
|
||||
{:text val
|
||||
:valid (valid-item-fn val)
|
||||
:caution (caution-item-fn val)})
|
||||
initial)
|
||||
[]))))
|
||||
|
||||
on-focus
|
||||
(mf/use-fn
|
||||
#(reset! focus? true))
|
||||
|
||||
on-change
|
||||
(mf/use-fn
|
||||
(fn [event]
|
||||
(let [content (-> event dom/get-target dom/get-input-value)]
|
||||
(reset! value content))))
|
||||
|
||||
on-key-down
|
||||
(mf/use-fn
|
||||
(mf/deps @value form name valid-item-fn caution-item-fn trim)
|
||||
(fn [event]
|
||||
(let [val (cond-> @value trim str/trim)]
|
||||
(cond
|
||||
(or (k/enter? event) (k/comma? event) (k/space? event))
|
||||
(do
|
||||
(dom/prevent-default event)
|
||||
(dom/stop-propagation event)
|
||||
(swap! form assoc-in [:touched name] true)
|
||||
(when (and (valid-item-fn val) (not (str/empty? @value)))
|
||||
(reset! value "")
|
||||
(swap! form assoc-in [:touched name] false)
|
||||
(doseq [v (str/split val #",|\s+")]
|
||||
(let [v (str/trim v)]
|
||||
(swap! items conj-dedup {:text v
|
||||
:valid (valid-item-fn v)
|
||||
:caution (caution-item-fn v)})))))
|
||||
|
||||
(and (k/backspace? event) (str/empty? @value))
|
||||
(do
|
||||
(dom/prevent-default event)
|
||||
(dom/stop-propagation event)
|
||||
(swap! items (fn [items]
|
||||
(if (empty? items) items (pop items)))))))))
|
||||
|
||||
on-paste
|
||||
(mf/use-fn
|
||||
(fn [event]
|
||||
(let [paste-data (-> event .-clipboardData (.getData "text"))]
|
||||
(when (and (string? paste-data)
|
||||
(re-find #"[,\s]" paste-data))
|
||||
(dom/prevent-default event)
|
||||
(dom/stop-propagation event)
|
||||
|
||||
;; Mark as touched
|
||||
(swap! form assoc-in [:touched name] true)
|
||||
|
||||
;; Split pasted text by commas and/or whitespace, add each valid part
|
||||
(let [parts (->> (str/split paste-data #",|\s+")
|
||||
(map str/trim)
|
||||
(remove str/empty?))]
|
||||
(doseq [part parts]
|
||||
(when (valid-item-fn part)
|
||||
(swap! items conj-dedup {:text part
|
||||
:valid true
|
||||
:caution (caution-item-fn part)})))
|
||||
|
||||
;; Reset input value and mark as untouched after successful paste
|
||||
(reset! value "")
|
||||
(swap! form assoc-in [:touched name] false))))))
|
||||
|
||||
on-blur
|
||||
(mf/use-fn
|
||||
(fn []
|
||||
(reset! focus? false)
|
||||
(when-not (get-in @form [:touched name])
|
||||
(swap! form assoc-in [:touched name] true))))
|
||||
|
||||
on-remove-item
|
||||
(mf/use-fn
|
||||
(fn [item]
|
||||
(swap! items #(filterv (fn [x] (not= x item)) %))))
|
||||
|
||||
props
|
||||
(mf/spread-props props {:value @value
|
||||
:on-change on-change
|
||||
:on-focus on-focus
|
||||
:on-blur on-blur
|
||||
:on-key-down on-key-down
|
||||
:on-paste on-paste
|
||||
:hint-type (when (and touched?
|
||||
(not (str/empty? @value))
|
||||
(not (valid-item-fn @value))) "error")})]
|
||||
|
||||
;; Sync form data whenever items or input value changes.
|
||||
;; This ensures the current (unconfirmed) input value is included in the
|
||||
;; form data when the user submits without pressing Enter/Space/Comma.
|
||||
(mf/with-effect [@items @value]
|
||||
(let [items-text (mapv :text @items)
|
||||
val (cond-> @value trim str/trim)
|
||||
combined (if (and (valid-item-fn val) (not (str/empty? val)))
|
||||
(conj items-text val)
|
||||
items-text)
|
||||
data (str/join " " combined)]
|
||||
(fm/update-input-value! form name data)))
|
||||
|
||||
[:div {:class (stl/css :multi-input)}
|
||||
[:> input* props]
|
||||
|
||||
(when-let [items-seq (seq @items)]
|
||||
[:div {:class (stl/css :multi-input-chips)}
|
||||
(for [item items-seq]
|
||||
[:div {:class (stl/css :multi-input-chip)
|
||||
:key (:text item)}
|
||||
[:span {:class (stl/css :multi-input-chip-text)}
|
||||
(:text item)]
|
||||
[:> icon-button* {:variant "ghost"
|
||||
:class (stl/css :multi-input-chip-icon)
|
||||
:icon i/close
|
||||
:icon-size "s"
|
||||
:aria-label (tr "labels.remove")
|
||||
:on-click (partial on-remove-item item)}]])])]))
|
||||
|
||||
(mf/defc form-select*
|
||||
[{:keys [name] :as props}]
|
||||
[{:keys [name] :rest props}]
|
||||
(let [select-name name
|
||||
form (mf/use-ctx context)
|
||||
value (get-in @form [:data select-name] "")
|
||||
|
||||
43
frontend/src/app/main/ui/forms.scss
Normal file
43
frontend/src/app/main/ui/forms.scss
Normal file
@ -0,0 +1,43 @@
|
||||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC Sucursal en España SL
|
||||
|
||||
@use "ds/typography.scss" as t;
|
||||
@use "ds/_borders.scss" as *;
|
||||
@use "ds/_sizes.scss" as *;
|
||||
@use "ds/_utils.scss" as *;
|
||||
|
||||
.multi-input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-s);
|
||||
}
|
||||
|
||||
.multi-input-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--sp-xs);
|
||||
}
|
||||
|
||||
.multi-input-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-xs);
|
||||
block-size: $sz-24;
|
||||
padding-inline-start: var(--sp-s);
|
||||
border-radius: $br-6;
|
||||
background-color: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
.multi-input-chip-text {
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.multi-input-chip-icon {
|
||||
inline-size: $sz-24;
|
||||
block-size: $sz-24;
|
||||
}
|
||||
@ -20,8 +20,7 @@
|
||||
[cuerdas.core :as str]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc step-container
|
||||
{::mf/props :obj}
|
||||
(mf/defc step-container*
|
||||
[{:keys [form step on-next on-prev children class label]}]
|
||||
|
||||
(let [on-next*
|
||||
@ -69,8 +68,7 @@
|
||||
(and (= role "other")
|
||||
(not (str/blank? role-other)))))]])
|
||||
|
||||
(mf/defc step-1
|
||||
{::mf/props :obj}
|
||||
(mf/defc step-1*
|
||||
[{:keys [on-next form show-step-3]}]
|
||||
(let [use-options
|
||||
(mf/with-memo []
|
||||
@ -89,24 +87,25 @@
|
||||
{:label (tr "labels.product-management") :value "manager" :key "manager"}])
|
||||
(conj {:label (tr "labels.other-short") :value "other"})))
|
||||
|
||||
|
||||
current-role
|
||||
(dm/get-in @form [:data :role])]
|
||||
|
||||
[:> step-container* {:form form
|
||||
:step 1
|
||||
:label "questions:about-you"
|
||||
:on-next on-next
|
||||
:class (stl/css :step)}
|
||||
|
||||
[:& step-container {:form form
|
||||
:step 1
|
||||
:label "questions:about-you"
|
||||
:on-next on-next
|
||||
:class (stl/css :step-1)}
|
||||
|
||||
[:div {:class (stl/css :paginator)} (str/ffmt "1/%" (if @show-step-3 4 3))]
|
||||
[:div {:class (stl/css :paginator)}
|
||||
(str/ffmt "1/%" (if @show-step-3 4 3))]
|
||||
|
||||
[:img {:class (stl/css :header-image)
|
||||
:src "images/form/use-for-1.png"
|
||||
:src "images/form/slide-1-help-us-know-you.svg"
|
||||
:alt (tr "onboarding.questions.lets-get-started")}]
|
||||
|
||||
[:h1 {:class (stl/css :modal-title)}
|
||||
(tr "onboarding.questions.step1.title")]
|
||||
|
||||
[:p {:class (stl/css :modal-text)}
|
||||
(tr "onboarding.questions.step1.subtitle")]
|
||||
|
||||
@ -116,17 +115,18 @@
|
||||
|
||||
[:& fm/radio-buttons {:options use-options
|
||||
:name :expected-use
|
||||
:class (stl/css :radio-btns)}]
|
||||
:class (stl/css :radio)}]
|
||||
|
||||
[:h3 {:class (stl/css :modal-subtitle)}
|
||||
(tr "onboarding.questions.step3.question1")]
|
||||
|
||||
[:h3 {:class (stl/css :modal-subtitle)} (tr "onboarding.questions.step3.question1")]
|
||||
[:& fm/select {:options role-options
|
||||
:select-class (stl/css :select-class)
|
||||
:select-class (stl/css :select)
|
||||
:default ""
|
||||
:name :role}]
|
||||
|
||||
(when (= current-role "other")
|
||||
[:& fm/input {:name :role-other
|
||||
:class (stl/css :input-spacing)
|
||||
:placeholder (tr "labels.other")
|
||||
:show-error false
|
||||
:label ""}])]]))
|
||||
@ -147,21 +147,20 @@
|
||||
(and (= experience "other")
|
||||
(not (str/blank? experience-other))))))]])
|
||||
|
||||
(mf/defc step-2
|
||||
{::mf/props :obj}
|
||||
(mf/defc step-2*
|
||||
[{:keys [on-next on-prev form show-step-3]}]
|
||||
(let [design-tool-options
|
||||
(mf/with-memo []
|
||||
(-> (shuffle [{:label (tr "labels.figma") :img-width "48px" :img-height "60px"
|
||||
:value "figma" :image "images/form/figma.png"}
|
||||
:value "figma" :image "images/form/slide-2-figma.png"}
|
||||
{:label (tr "labels.sketch") :img-width "48px" :img-height "60px"
|
||||
:value "sketch" :image "images/form/sketch.png"}
|
||||
:value "sketch" :image "images/form/slide-2-sketch.png"}
|
||||
{:label (tr "labels.adobe-xd") :img-width "48px" :img-height "60px"
|
||||
:value "adobe-xd" :image "images/form/adobe-xd.png"}
|
||||
:value "adobe-xd" :image "images/form/slide-2-adobe-xd.png"}
|
||||
{:label (tr "labels.canva") :img-width "48px" :img-height "60px"
|
||||
:value "canva" :image "images/form/canva.png"}
|
||||
:value "canva" :image "images/form/slide-2-canva.png"}
|
||||
{:label (tr "labels.invision") :img-width "48px" :img-height "60px"
|
||||
:value "invision" :image "images/form/invision.png"}])
|
||||
:value "invision" :image "images/form/slide-2-invision.png"}])
|
||||
(conj {:label (tr "labels.other-short") :value "other" :icon deprecated-icon/curve})))
|
||||
|
||||
current-experience
|
||||
@ -175,43 +174,41 @@
|
||||
(swap! form d/dissoc-in [:data :experience-design-tool-other])
|
||||
(swap! form d/dissoc-in [:errors :experience-design-tool-other]))))]
|
||||
|
||||
[:& step-container {:form form
|
||||
:step 2
|
||||
:label "questions:experience-design-tool"
|
||||
:on-next on-next
|
||||
:on-prev on-prev
|
||||
:class (stl/css :step-2)}
|
||||
|
||||
[:div {:class (stl/css :paginator)} (str/ffmt "2/%" (if @show-step-3 4 3))]
|
||||
[:> step-container* {:form form
|
||||
:step 2
|
||||
:label "questions:experience-design-tool"
|
||||
:on-next on-next
|
||||
:on-prev on-prev
|
||||
:class (stl/css :step)}
|
||||
|
||||
[:div {:class (stl/css :paginator)}
|
||||
(str/ffmt "2/%" (if @show-step-3 4 3))]
|
||||
|
||||
[:h1 {:class (stl/css :modal-title)}
|
||||
(tr "onboarding.questions.step2.title")]
|
||||
|
||||
[:div {:class (stl/css :radio-wrapper)}
|
||||
[:& fm/image-radio-buttons {:options design-tool-options
|
||||
:img-width "48px"
|
||||
:img-height "60px"
|
||||
:name :experience-design-tool
|
||||
:image true
|
||||
:class (stl/css :image-radio)
|
||||
:class (stl/css :radio-image)
|
||||
:on-change on-design-tool-change}]
|
||||
|
||||
(when (= current-experience "other")
|
||||
[:& fm/input {:name :experience-design-tool-other
|
||||
:class (stl/css :input-spacing)
|
||||
:placeholder (tr "labels.other")
|
||||
:show-error false
|
||||
:label ""}])]]))
|
||||
|
||||
|
||||
(def ^:private schema:questions-form-3
|
||||
[:and
|
||||
[:map {:title "QuestionsFormStep3"}
|
||||
[:team-size
|
||||
[:enum "1" "2-100" "101-500" "501-1000" "1001-5000" "5001+"]]]])
|
||||
|
||||
(mf/defc step-3
|
||||
{::mf/props :obj}
|
||||
(mf/defc step-3*
|
||||
[{:keys [on-next on-prev form show-step-3]}]
|
||||
(let [team-size-options
|
||||
(mf/with-memo []
|
||||
@ -231,14 +228,15 @@
|
||||
{:label (tr "onboarding.questions.team-size.more-than-5001")
|
||||
:value "5001+" :key "5001+"}])]
|
||||
|
||||
[:& step-container {:form form
|
||||
:step 3
|
||||
:label "questions:about-your-job"
|
||||
:on-next on-next
|
||||
:on-prev on-prev
|
||||
:class (stl/css :step-3)}
|
||||
[:> step-container* {:form form
|
||||
:step 3
|
||||
:label "questions:about-your-job"
|
||||
:on-next on-next
|
||||
:on-prev on-prev
|
||||
:class (stl/css :step)}
|
||||
|
||||
[:div {:class (stl/css :paginator)} (str/ffmt "3/%" (if @show-step-3 4 3))]
|
||||
[:div {:class (stl/css :paginator)}
|
||||
(str/ffmt "3/%" (if @show-step-3 4 3))]
|
||||
|
||||
[:h1 {:class (stl/css :modal-title)}
|
||||
(tr "onboarding.questions.step3.title")]
|
||||
@ -246,7 +244,7 @@
|
||||
[:div {:class (stl/css :modal-question)}
|
||||
[:& fm/select {:options team-size-options
|
||||
:default ""
|
||||
:select-class (stl/css :select-class)
|
||||
:select-class (stl/css :select)
|
||||
:name :team-size}]]]))
|
||||
|
||||
(def ^:private schema:questions-form-4
|
||||
@ -262,21 +260,20 @@
|
||||
(and (= start-with "other")
|
||||
(not (str/blank? start-with-other)))))]])
|
||||
|
||||
(mf/defc step-4
|
||||
{::mf/props :obj}
|
||||
(mf/defc step-4*
|
||||
[{:keys [on-next on-prev form show-step-3]}]
|
||||
(let [start-options
|
||||
(mf/with-memo []
|
||||
(-> (shuffle [{:label (tr "onboarding.questions.start-with.ui")
|
||||
:value "ui" :image "images/form/Design.png"}
|
||||
:value "ui" :image "images/form/slide-3-design-app-ui-ux.svg"}
|
||||
{:label (tr "onboarding.questions.start-with.wireframing")
|
||||
:value "wireframing" :image "images/form/templates.png"}
|
||||
:value "wireframing" :image "images/form/slide-3-wireframing.svg"}
|
||||
{:label (tr "onboarding.questions.start-with.prototyping")
|
||||
:value "prototyping" :image "images/form/Prototype.png"}
|
||||
:value "prototyping" :image "images/form/slide-3-prototyping.svg"}
|
||||
{:label (tr "onboarding.questions.start-with.ds")
|
||||
:value "ds" :image "images/form/components.png"}
|
||||
:value "ds" :image "images/form/slide-3-design-systems.svg"}
|
||||
{:label (tr "onboarding.questions.start-with.code")
|
||||
:value "code" :image "images/form/design-and-dev.png"}])
|
||||
:value "code" :image "images/form/slide-3-code-from-design.svg"}])
|
||||
(conj {:label (tr "labels.other-short") :value "other" :icon deprecated-icon/curve})))
|
||||
|
||||
current-start (dm/get-in @form [:data :start-with])
|
||||
@ -284,37 +281,37 @@
|
||||
on-start-change
|
||||
(mf/use-fn
|
||||
(mf/deps current-start)
|
||||
(fn [_ _]
|
||||
(fn []
|
||||
(when (not= current-start "other")
|
||||
(swap! form d/dissoc-in [:data :start-with-other])
|
||||
(swap! form d/dissoc-in [:errors :start-with-other]))))]
|
||||
|
||||
[:& step-container {:form form
|
||||
:step 4
|
||||
:label "questions:how-start"
|
||||
:on-next on-next
|
||||
:on-prev on-prev
|
||||
:class (stl/css :step-4)}
|
||||
[:> step-container* {:form form
|
||||
:step 4
|
||||
:label "questions:how-start"
|
||||
:on-next on-next
|
||||
:on-prev on-prev
|
||||
:class (stl/css :step)}
|
||||
|
||||
[:div {:class (stl/css :paginator)} (str/ffmt "%/%" (if @show-step-3 4 3) (if @show-step-3 4 3))]
|
||||
[:div {:class (stl/css :paginator)}
|
||||
(str/ffmt "%/%" (if @show-step-3 4 3) (if @show-step-3 4 3))]
|
||||
|
||||
[:h1 {:class (stl/css :modal-title)}
|
||||
(tr "onboarding.questions.step4.title")]
|
||||
|
||||
[:h1 {:class (stl/css :modal-title)} (tr "onboarding.questions.step4.title")]
|
||||
[:div {:class (stl/css :radio-wrapper)}
|
||||
[:& fm/image-radio-buttons {:options start-options
|
||||
:img-width "159px"
|
||||
:img-height "120px"
|
||||
:img-width "100px"
|
||||
:img-height "110px"
|
||||
:name :start-with
|
||||
:on-change on-start-change}]
|
||||
|
||||
(when (= current-start "other")
|
||||
[:& fm/input {:name :start-with-other
|
||||
:class (stl/css :input-spacing)
|
||||
:label ""
|
||||
:show-error false
|
||||
:placeholder (tr "labels.other")}])]]))
|
||||
|
||||
|
||||
|
||||
(mf/defc questions-modal
|
||||
[]
|
||||
(let [container (mf/use-ref)
|
||||
@ -369,10 +366,10 @@
|
||||
:ref container}
|
||||
|
||||
(case @step
|
||||
1 [:& step-1 {:on-next on-next :on-prev on-prev :form step-1-form :show-step-3 show-step-3}]
|
||||
2 [:& step-2 {:on-next on-next :on-prev on-prev :form step-2-form :show-step-3 show-step-3}]
|
||||
1 [:> step-1* {:on-next on-next :on-prev on-prev :form step-1-form :show-step-3 show-step-3}]
|
||||
2 [:> step-2* {:on-next on-next :on-prev on-prev :form step-2-form :show-step-3 show-step-3}]
|
||||
3 (if @show-step-3
|
||||
[:& step-3 {:on-next on-next :on-prev on-prev :form step-3-form :show-step-3 show-step-3}]
|
||||
[:& step-4 {:on-next on-submit :on-prev on-prev :form step-4-form :show-step-3 show-step-3}])
|
||||
[:> step-3* {:on-next on-next :on-prev on-prev :form step-3-form :show-step-3 show-step-3}]
|
||||
[:> step-4* {:on-next on-submit :on-prev on-prev :form step-4-form :show-step-3 show-step-3}])
|
||||
(when @show-step-3
|
||||
4 [:& step-4 {:on-next on-submit :on-prev on-prev :form step-4-form :show-step-3 show-step-3}]))]]))
|
||||
4 [:> step-4* {:on-next on-submit :on-prev on-prev :form step-4-form :show-step-3 show-step-3}]))]]))
|
||||
|
||||
@ -5,37 +5,15 @@
|
||||
// Copyright (c) KALEIDOS INC Sucursal en España SL
|
||||
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "ds/typography.scss" as t;
|
||||
@use "ds/_borders.scss" as *;
|
||||
@use "ds/_sizes.scss" as *;
|
||||
@use "ds/_utils.scss" as *;
|
||||
|
||||
.modal-overlay {
|
||||
@extend %modal-overlay-base;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
max-width: deprecated.$s-960;
|
||||
max-height: fit-content;
|
||||
width: fit-content;
|
||||
padding-inline: deprecated.$s-100;
|
||||
padding-block: deprecated.$s-40 deprecated.$s-72;
|
||||
border-radius: deprecated.$br-8;
|
||||
border: deprecated.$s-2 solid var(--modal-border-color);
|
||||
background-color: var(--modal-background-color);
|
||||
}
|
||||
|
||||
.form-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: deprecated.$s-24;
|
||||
}
|
||||
|
||||
// STEP CONTAINER
|
||||
.paginator {
|
||||
@include deprecated.small-title-typography;
|
||||
|
||||
height: deprecated.$s-20;
|
||||
text-align: right;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
@extend %modal-action-btns;
|
||||
}
|
||||
@ -48,29 +26,51 @@
|
||||
@extend %modal-cancel-btn;
|
||||
}
|
||||
|
||||
.radio-btns label,
|
||||
.select-class span {
|
||||
@include deprecated.body-medium-typography;
|
||||
.modal-container {
|
||||
max-width: $sz-964;
|
||||
max-height: fit-content;
|
||||
inline-size: fit-content;
|
||||
padding-inline: $sz-96;
|
||||
padding-block: $sz-40 $sz-64;
|
||||
border-radius: $br-8;
|
||||
border: $b-2 solid var(--modal-border-color);
|
||||
background-color: var(--modal-background-color);
|
||||
}
|
||||
|
||||
// STEP 1
|
||||
.form-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--sp-xxl);
|
||||
}
|
||||
|
||||
.paginator {
|
||||
@include t.use-typography("title-small");
|
||||
|
||||
text-align: right;
|
||||
color: var(--modal-text-foreground-color);
|
||||
}
|
||||
|
||||
.radio label,
|
||||
.select span {
|
||||
@include t.use-typography("body-medium");
|
||||
}
|
||||
|
||||
.header-image {
|
||||
height: deprecated.$s-60;
|
||||
width: auto;
|
||||
block-size: $sz-120;
|
||||
inline-size: auto;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.big-title-typography;
|
||||
@include t.use-typography("title-large");
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
min-height: deprecated.$s-32;
|
||||
min-block-size: $sz-32;
|
||||
margin-block: auto;
|
||||
}
|
||||
|
||||
.modal-subtitle {
|
||||
@include deprecated.body-large-typography;
|
||||
@include t.use-typography("body-large");
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
margin: 0;
|
||||
@ -78,71 +78,35 @@
|
||||
}
|
||||
|
||||
.modal-text {
|
||||
@include deprecated.body-large-typography;
|
||||
@include t.use-typography("body-large");
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// STEP-2
|
||||
.step-1,
|
||||
.step-2,
|
||||
.step-3,
|
||||
.step-5 {
|
||||
max-width: deprecated.$s-540;
|
||||
width: deprecated.$s-540;
|
||||
}
|
||||
|
||||
.step-2 {
|
||||
grid-template-rows: deprecated.$s-20 auto auto deprecated.$s-32;
|
||||
.step {
|
||||
max-inline-size: $sz-520;
|
||||
inline-size: $sz-520;
|
||||
}
|
||||
|
||||
.modal-question {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: deprecated.$s-16 deprecated.$s-32;
|
||||
gap: deprecated.$s-16;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.question-centered {
|
||||
width: deprecated.$s-424;
|
||||
grid-template-rows: auto deprecated.$s-32;
|
||||
margin: 0 auto;
|
||||
grid-template-rows: $sz-16 $sz-32;
|
||||
gap: var(--sp-l);
|
||||
block-size: fit-content;
|
||||
}
|
||||
|
||||
.radio-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: deprecated.$s-16;
|
||||
gap: var(--sp-l);
|
||||
}
|
||||
|
||||
// STEP-3
|
||||
.step-3 {
|
||||
grid-template-rows: deprecated.$s-20 auto auto deprecated.$s-32;
|
||||
}
|
||||
|
||||
.image-radio {
|
||||
.radio-image {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-template-columns: deprecated.$s-92 deprecated.$s-92 deprecated.$s-92;
|
||||
gap: deprecated.$s-16 deprecated.$s-24;
|
||||
grid-template-columns: $sz-96 $sz-96 $sz-96;
|
||||
gap: var(--sp-l) var(--sp-xxl);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.input-spacing {
|
||||
height: deprecated.$s-32;
|
||||
width: 100%;
|
||||
margin-block-end: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.input-spacing input {
|
||||
@include deprecated.body-medium-typography;
|
||||
}
|
||||
|
||||
// STEP-4
|
||||
|
||||
.step-4 {
|
||||
grid-template-rows: deprecated.$s-20 auto auto deprecated.$s-32;
|
||||
row-gap: deprecated.$s-16;
|
||||
}
|
||||
|
||||
@ -14,47 +14,61 @@
|
||||
[app.main.data.profile :as du]
|
||||
[app.main.data.team :as dtm]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.forms :as fm]
|
||||
[app.main.ui.icons :as deprecated-icon]
|
||||
[app.main.ui.notifications.context-notification :refer [context-notification]]
|
||||
[app.main.ui.components.link :refer [link*]]
|
||||
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
|
||||
[app.main.ui.ds.foundations.typography :as t]
|
||||
[app.main.ui.ds.foundations.typography.heading :refer [heading*]]
|
||||
[app.main.ui.ds.foundations.typography.text :refer [text*]]
|
||||
[app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
|
||||
[app.main.ui.forms :as fc]
|
||||
[app.util.forms :as fm]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc left-sidebar*
|
||||
(mf/defc team-info-feature*
|
||||
{::mf/private true}
|
||||
[{:keys [icon-id text]}]
|
||||
[:li {:class (stl/css :modal-info-item)}
|
||||
[:div {:class (stl/css :modal-info-icon)}
|
||||
[:> icon* {:icon-id icon-id :size "m"}]]
|
||||
[:> text* {:as "div"
|
||||
:typography t/body-medium
|
||||
:class (stl/css :color-light)}
|
||||
text]])
|
||||
|
||||
(mf/defc team-info*
|
||||
{::mf/private true}
|
||||
[]
|
||||
[:div {:class (stl/css :modal-left)}
|
||||
[:h2 {:class (stl/css :modal-subtitle)}
|
||||
[:div {:class (stl/css :modal-info)}
|
||||
[:img {:src "images/form/slide-final-team.svg"}]
|
||||
|
||||
[:> heading* {:level 2
|
||||
:typography t/title-medium
|
||||
:class (stl/css :color-light)}
|
||||
(tr "onboarding.team-modal.team-definition")]
|
||||
[:p {:class (stl/css :modal-text)}
|
||||
|
||||
[:> text* {:as "div"
|
||||
:typography t/body-medium
|
||||
:class (stl/css :color-dimmed :margin-bottom)}
|
||||
(tr "onboarding.team-modal.create-team-desc")]
|
||||
[:ul {:class (stl/css :team-features)}
|
||||
[:li {:class (stl/css :feature)}
|
||||
[:span {:class (stl/css :icon)} deprecated-icon/document]
|
||||
[:p {:class (stl/css :modal-desc)}
|
||||
(tr "onboarding.team-modal.create-team-feature-1")]]
|
||||
[:li {:class (stl/css :feature)}
|
||||
[:span {:class (stl/css :icon)} deprecated-icon/move]
|
||||
[:p {:class (stl/css :modal-desc)}
|
||||
(tr "onboarding.team-modal.create-team-feature-2")]]
|
||||
[:li {:class (stl/css :feature)}
|
||||
[:span {:class (stl/css :icon)} deprecated-icon/tree]
|
||||
[:p {:class (stl/css :modal-desc)}
|
||||
(tr "onboarding.team-modal.create-team-feature-3")]]
|
||||
[:li {:class (stl/css :feature)}
|
||||
[:span {:class (stl/css :icon)} deprecated-icon/user]
|
||||
[:p {:class (stl/css :modal-desc)}
|
||||
(tr "onboarding.team-modal.create-team-feature-4")]]
|
||||
[:li {:class (stl/css :feature)}
|
||||
[:span {:class (stl/css :icon)} deprecated-icon/tick]
|
||||
[:p {:class (stl/css :modal-desc)}
|
||||
(tr "onboarding.team-modal.create-team-feature-5")]]]])
|
||||
|
||||
[:ul {:class (stl/css :modal-info-features)}
|
||||
[:> team-info-feature* {:icon-id i/document
|
||||
:text (tr "onboarding.team-modal.create-team-feature-1")}]
|
||||
[:> team-info-feature* {:icon-id i/move
|
||||
:text (tr "onboarding.team-modal.create-team-feature-2")}]
|
||||
[:> team-info-feature* {:icon-id i/tree
|
||||
:text (tr "onboarding.team-modal.create-team-feature-3")}]
|
||||
[:> team-info-feature* {:icon-id i/user
|
||||
:text (tr "onboarding.team-modal.create-team-feature-4")}]
|
||||
[:> team-info-feature* {:icon-id i/tick
|
||||
:text (tr "onboarding.team-modal.create-team-feature-5")}]]])
|
||||
|
||||
(defn- get-available-roles
|
||||
[]
|
||||
[{:value "viewer" :label (tr "labels.viewer")}
|
||||
{:value "editor" :label (tr "labels.editor")}
|
||||
{:value "admin" :label (tr "labels.admin")}])
|
||||
[{:id "viewer" :value "viewer" :label (tr "labels.viewer")}
|
||||
{:id "editor" :value "editor" :label (tr "labels.editor")}
|
||||
{:id "admin" :value "admin" :label (tr "labels.admin")}])
|
||||
|
||||
(def ^:private schema:team-form
|
||||
[:map {:title "TeamForm"}
|
||||
@ -68,8 +82,8 @@
|
||||
(let [initial (mf/with-memo []
|
||||
{:role "editor"})
|
||||
|
||||
form (fm/use-form :schema schema:team-form
|
||||
:initial initial)
|
||||
form (fm/use-form :schema schema:team-form
|
||||
:initial initial)
|
||||
|
||||
roles (mf/use-memo get-available-roles)
|
||||
|
||||
@ -109,7 +123,7 @@
|
||||
:else
|
||||
(swap! error* (tr "errors.generic"))))))
|
||||
|
||||
on-invite-later
|
||||
on-create-without-invitations
|
||||
(mf/use-fn
|
||||
(fn [{:keys [name]}]
|
||||
(let [mdata {:on-success on-success
|
||||
@ -117,126 +131,123 @@
|
||||
params {:name name}]
|
||||
(st/emit! (-> (dtm/create-team (with-meta params mdata))
|
||||
(with-meta {::ev/origin :onboarding-without-invitations}))
|
||||
(ev/event
|
||||
{::ev/name "onboarding-step"
|
||||
:label "team:create-team-and-invite-later"
|
||||
:team-name name
|
||||
:step 8})
|
||||
(ev/event
|
||||
{::ev/name "onboarding-finish"})))))
|
||||
(ev/event {::ev/name "onboarding-step"
|
||||
:label "team:create-team-and-invite-later"
|
||||
:team-name name
|
||||
:step 8})
|
||||
(ev/event {::ev/name "onboarding-finish"})))))
|
||||
|
||||
on-invite-now
|
||||
on-create-with-invitations
|
||||
(mf/use-fn
|
||||
(fn [{:keys [name emails] :as params}]
|
||||
(let [mdata {:on-success on-success
|
||||
:on-error on-error}]
|
||||
|
||||
(st/emit! (-> (dtm/create-team-with-invitations (with-meta params mdata))
|
||||
(with-meta {::ev/origin :onboarding-with-invitations}))
|
||||
(ev/event
|
||||
{::ev/name "onboarding-step"
|
||||
:label "team:create-team-and-invite"
|
||||
:invites (count emails)
|
||||
:team-name name
|
||||
:role (:role params)
|
||||
:step 8})
|
||||
(ev/event
|
||||
{::ev/name "onboarding-finish"})))))
|
||||
(ev/event {::ev/name "onboarding-step"
|
||||
:label "team:create-team-and-invite"
|
||||
:invites (count emails)
|
||||
:team-name name
|
||||
:role (:role params)
|
||||
:step 8})
|
||||
(ev/event {::ev/name "onboarding-finish"})))))
|
||||
|
||||
on-submit*
|
||||
on-submit
|
||||
(mf/use-fn
|
||||
(fn [form]
|
||||
(let [params (:clean-data @form)
|
||||
emails (:emails params)]
|
||||
(if (> (count emails) 0)
|
||||
(on-invite-now params)
|
||||
(on-invite-later params)))))
|
||||
(on-create-with-invitations params)
|
||||
(on-create-without-invitations params)))))
|
||||
|
||||
on-skip
|
||||
(mf/use-fn
|
||||
(fn []
|
||||
(st/emit! (du/update-profile-props {:onboarding-viewed true})
|
||||
(ev/event
|
||||
{::ev/name "onboarding-step"
|
||||
:label "team:skip-team-creation"
|
||||
:step 7})
|
||||
(ev/event
|
||||
{::ev/name "onboarding-finish"}))))]
|
||||
[:*
|
||||
[:div {:class (stl/css :modal-right)}
|
||||
[:div {:class (stl/css :first-block)}
|
||||
[:& fm/form {:form form
|
||||
:class (stl/css :modal-form)
|
||||
:on-submit on-submit*}
|
||||
[:h2 {:class (stl/css :modal-subtitle)}
|
||||
(tr "onboarding.team-modal.create-team")]
|
||||
[:p {:class (stl/css :modal-text)}
|
||||
(tr "onboarding.choice.team-up.create-team-desc")]
|
||||
(ev/event {::ev/name "onboarding-step"
|
||||
:label "team:skip-team-creation"
|
||||
:step 7})
|
||||
(ev/event {::ev/name "onboarding-finish"}))))]
|
||||
|
||||
[:div {:class (stl/css :modal-team)}
|
||||
[:> fc/form* {:form form
|
||||
:class (stl/css :modal-team-form)
|
||||
:on-submit on-submit}
|
||||
|
||||
[:& fm/input {:type "text"
|
||||
:class (stl/css :team-name-input)
|
||||
:name :name
|
||||
:auto-focus? true
|
||||
:placeholder "Team name"
|
||||
:label (tr "onboarding.choice.team-up.create-team-placeholder")}]
|
||||
[:div {:class (stl/css :modal-team-block)}
|
||||
[:> heading* {:level 2
|
||||
:typography t/title-medium
|
||||
:class (stl/css :color-light)}
|
||||
(tr "onboarding.team-modal.create-team")]
|
||||
|
||||
[:h2 {:class (stl/css :modal-subtitle :invite-subtitle)} (tr "onboarding.choice.team-up.invite-members")]
|
||||
[:p {:class (stl/css :modal-text)} (tr "onboarding.choice.team-up.invite-members-info")]
|
||||
[:> fc/form-input* {:type "text"
|
||||
:name :name
|
||||
:auto-focus true
|
||||
:auto-complete "off"
|
||||
:placeholder (tr "onboarding.choice.team-up.create-team-placeholder")}]
|
||||
|
||||
(when-let [content (deref error*)]
|
||||
[:& context-notification {:content content :level :error}])
|
||||
[:> text* {:as "div"
|
||||
:typography t/body-small
|
||||
:class (stl/css :color-dimmed)}
|
||||
(tr "onboarding.choice.team-up.create-team-desc")]]
|
||||
|
||||
[:div {:class (stl/css :role-select)}
|
||||
[:p {:class (stl/css :role-title)} (tr "onboarding.choice.team-up.roles")]
|
||||
[:& fm/select {:name :role :options roles}]]
|
||||
[:div {:class (stl/css :modal-team-block)}
|
||||
[:> heading* {:level 2
|
||||
:typography t/title-medium
|
||||
:class (stl/css :color-light)}
|
||||
(tr "onboarding.choice.team-up.invite-members")]
|
||||
|
||||
[:div {:class (stl/css :invitation-row)}
|
||||
[:& fm/multi-input {:type "email"
|
||||
:name :emails
|
||||
:trim true
|
||||
:valid-item-fn sm/parse-email
|
||||
:caution-item-fn #{}
|
||||
:label (tr "modals.invite-member.emails")}]]
|
||||
(when-let [content (deref error*)]
|
||||
[:> context-notification* {:level :error}
|
||||
content])
|
||||
|
||||
[:div {:class (stl/css :modal-team-sub-block)}
|
||||
[:> fc/form-select* {:name :role
|
||||
:options roles}]
|
||||
[:> fc/form-multi-input* {:type "email"
|
||||
:name :emails
|
||||
:trim true
|
||||
:valid-item-fn sm/parse-email
|
||||
:caution-item-fn #{}
|
||||
:auto-complete "off"
|
||||
:placeholder (tr "modals.invite-member.emails")}]]
|
||||
[:> text* {:as "div"
|
||||
:typography t/body-small
|
||||
:class (stl/css :color-dimmed)}
|
||||
(tr "onboarding.choice.team-up.invite-members-info")]
|
||||
|
||||
(let [params (:clean-data @form)
|
||||
emails (:emails params)]
|
||||
[:*
|
||||
[:div {:class (stl/css :action-buttons)}
|
||||
(let [params (:clean-data @form)
|
||||
emails (:emails params)
|
||||
num-emails (count emails)]
|
||||
[:*
|
||||
[:div {:class (stl/css :flex-align-right)}
|
||||
[:> fc/form-submit* {:variant "primary"}
|
||||
(if (> num-emails 0)
|
||||
(tr "onboarding.choice.team-up.create-team-and-invite")
|
||||
(tr "onboarding.choice.team-up.create-team-without-invite"))]]
|
||||
|
||||
[:> fm/submit-button*
|
||||
{:class (stl/css :accept-button)
|
||||
:label (if (> (count emails) 0)
|
||||
(tr "onboarding.choice.team-up.create-team-and-invite")
|
||||
(tr "onboarding.choice.team-up.create-team-without-invite"))}]]
|
||||
(when (= num-emails 0)
|
||||
[:> text* {:as "div"
|
||||
:typography t/body-small
|
||||
:class (stl/css :color-dimmed :text-align-right)}
|
||||
"(" (tr "onboarding.choice.team-up.create-team-and-send-invites-description") ")"])])]]
|
||||
|
||||
(when (= (count emails) 0)
|
||||
[:> :div {:class (stl/css :modal-hint)}
|
||||
"(" (tr "onboarding.choice.team-up.create-team-and-send-invites-description") ")"])])]]
|
||||
|
||||
[:div {:class (stl/css :second-block)}
|
||||
[:h2 {:class (stl/css :modal-subtitle)}
|
||||
(tr "onboarding.choice.team-up.start-without-a-team")]
|
||||
[:p {:class (stl/css :modal-text)}
|
||||
(tr "onboarding.choice.team-up.start-without-a-team-description")]
|
||||
|
||||
[:div {:class (stl/css :action-buttons)}
|
||||
[:button {:class (stl/css :accept-button)
|
||||
:on-click on-skip}
|
||||
(tr "onboarding.choice.team-up.continue-without-a-team")]]]]]))
|
||||
[:div {:class (stl/css :link-wrapper)}
|
||||
[:> link* {:class (stl/css :link)
|
||||
:action on-skip}
|
||||
(tr "onboarding.choice.team-up.continue-without-a-team")]]]))
|
||||
|
||||
(mf/defc onboarding-team-modal*
|
||||
[{:keys [go-to-team]}]
|
||||
|
||||
[:div {:class (stl/css-case
|
||||
:modal-overlay true)}
|
||||
|
||||
[:div {:class (stl/css-case :modal-overlay true)}
|
||||
[:div.animated.fade-in {:class (stl/css :modal-container)}
|
||||
[:h1 {:class (stl/css :modal-title)}
|
||||
[:> heading* {:level 1
|
||||
:typography t/title-large
|
||||
:class (stl/css :color-light)}
|
||||
(tr "onboarding-v2.welcome.title")]
|
||||
[:div {:class (stl/css :modal-sections)}
|
||||
[:> left-sidebar*]
|
||||
[:div {:class (stl/css :separator)}]
|
||||
[:> team-info*]
|
||||
[:div {:class (stl/css :modal-separator)}
|
||||
[:div {:class (stl/css :modal-separator-line)}]]
|
||||
[:> team-form* {:go-to-team go-to-team}]]]])
|
||||
|
||||
|
||||
@ -5,216 +5,140 @@
|
||||
// Copyright (c) KALEIDOS INC Sucursal en España SL
|
||||
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "ds/typography.scss" as t;
|
||||
@use "ds/_borders.scss" as *;
|
||||
@use "ds/_sizes.scss" as *;
|
||||
@use "ds/_utils.scss" as *;
|
||||
|
||||
.color-light {
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.color-dimmed {
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
.text-align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.flex-align-right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.margin-bottom {
|
||||
margin-bottom: var(--sp-xxl);
|
||||
}
|
||||
|
||||
.link-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.link {
|
||||
@include t.use-typography("body-small");
|
||||
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-foreground-secondary);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
@extend %modal-overlay-base;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
position: relative;
|
||||
width: deprecated.$s-908;
|
||||
max-height: deprecated.$s-800;
|
||||
height: 100%;
|
||||
padding-inline: deprecated.$s-100;
|
||||
padding-block: deprecated.$s-40 deprecated.$s-40;
|
||||
border-radius: deprecated.$br-8;
|
||||
background-color: var(--modal-background-color);
|
||||
border: deprecated.$s-2 solid var(--modal-border-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: deprecated.$s-24;
|
||||
gap: var(--sp-xxl);
|
||||
position: relative;
|
||||
inline-size: px2rem(908);
|
||||
padding: $sz-64 px2rem(100);
|
||||
border-radius: $br-8;
|
||||
background-color: var(--color-background-primary);
|
||||
border: $b-2 solid var(--color-background-quaternary);
|
||||
}
|
||||
|
||||
.modal-sections {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr deprecated.$s-32 1fr;
|
||||
gap: deprecated.$s-24;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
grid-template-columns: px2rem(310) $sz-32 1fr;
|
||||
gap: var(--sp-xxl);
|
||||
block-size: 100%;
|
||||
}
|
||||
|
||||
.paginator {
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
position: absolute;
|
||||
top: deprecated.$s-40;
|
||||
right: deprecated.$s-100;
|
||||
padding: deprecated.$s-4;
|
||||
border-radius: deprecated.$br-6;
|
||||
color: var(--color-foreground-secondary);
|
||||
.modal-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-xl);
|
||||
border: $b-1 solid var(--color-foreground-secondary);
|
||||
padding: var(--sp-m);
|
||||
border-radius: $br-12;
|
||||
background-color: var(--color-background-quaternary);
|
||||
}
|
||||
|
||||
// MODAL LEFT
|
||||
.modal-left {
|
||||
.modal-info-features {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-m);
|
||||
}
|
||||
|
||||
.modal-info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-l);
|
||||
}
|
||||
|
||||
.modal-info-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
inline-size: $sz-32;
|
||||
block-size: $sz-32;
|
||||
border-radius: $br-circle;
|
||||
border: $b-1 solid var(--color-accent-primary);
|
||||
color: var(--color-accent-primary);
|
||||
}
|
||||
|
||||
.modal-separator {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-separator-line {
|
||||
inline-size: px2rem(8);
|
||||
block-size: 100%;
|
||||
border-radius: $br-8;
|
||||
opacity: 0.5;
|
||||
background-color: var(--color-background-quaternary);
|
||||
}
|
||||
|
||||
.modal-team {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-xl);
|
||||
}
|
||||
|
||||
.modal-team-form {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: deprecated.$s-32 auto auto 1fr;
|
||||
gap: deprecated.$s-16;
|
||||
overflow: auto;
|
||||
gap: var(--sp-xxl);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include deprecated.big-title-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
.modal-team-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-m);
|
||||
}
|
||||
|
||||
.modal-subtitle {
|
||||
@include deprecated.med-title-typography;
|
||||
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.invite-subtitle {
|
||||
padding-top: deprecated.$s-16;
|
||||
}
|
||||
|
||||
.modal-text {
|
||||
@include deprecated.body-large-typography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-desc {
|
||||
@include deprecated.small-title-typography;
|
||||
|
||||
margin: 0;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.team-features {
|
||||
@include deprecated.flex-column;
|
||||
|
||||
gap: deprecated.$s-16;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.feature {
|
||||
@include deprecated.flex-row;
|
||||
|
||||
gap: deprecated.$s-16;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include deprecated.flex-center;
|
||||
|
||||
height: deprecated.$s-32;
|
||||
width: deprecated.$s-32;
|
||||
border-radius: deprecated.$br-circle;
|
||||
border: deprecated.$s-1 solid var(--color-accent-primary);
|
||||
|
||||
svg {
|
||||
@extend %button-icon;
|
||||
|
||||
stroke: var(--color-accent-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
@extend %modal-action-btns;
|
||||
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.accept-button {
|
||||
@extend %modal-accept-btn;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
@extend %modal-cancel-btn;
|
||||
}
|
||||
|
||||
// SEPARATOR
|
||||
.separator {
|
||||
width: deprecated.$s-8;
|
||||
height: 100%;
|
||||
border-radius: deprecated.$br-8;
|
||||
opacity: 0.42;
|
||||
background-color: var(--modal-separator-background-color);
|
||||
}
|
||||
|
||||
// MODAL RIGHT TEAM
|
||||
.modal-right {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr auto;
|
||||
gap: deprecated.$s-24;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.first-block {
|
||||
overflow: auto;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.first-block,
|
||||
.second-block {
|
||||
@include deprecated.flex-column;
|
||||
|
||||
gap: deprecated.$s-16;
|
||||
}
|
||||
|
||||
.modal-form {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: deprecated.$s-16;
|
||||
}
|
||||
|
||||
.team-name-input {
|
||||
@extend %input-element-label;
|
||||
|
||||
label {
|
||||
@include deprecated.flex-column;
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
height: 100%;
|
||||
|
||||
input {
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
margin-top: deprecated.$s-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// MODAL RIGHT INVITATIONS
|
||||
|
||||
.modal-right-invitations {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
gap: deprecated.$s-16;
|
||||
max-height: deprecated.$s-512;
|
||||
}
|
||||
|
||||
.modal-form-invitations {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto 1fr auto auto;
|
||||
margin-block-end: deprecated.$s-72;
|
||||
gap: deprecated.$s-8;
|
||||
}
|
||||
|
||||
.role-title {
|
||||
@include deprecated.uppercase-title-typography;
|
||||
|
||||
margin-block-end: deprecated.$s-8;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.invitation-row {
|
||||
margin: 0;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.modal-hint {
|
||||
@include deprecated.body-small-typography;
|
||||
|
||||
color: var(--modal-text-foreground-color);
|
||||
text-align: right;
|
||||
.modal-team-sub-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-s);
|
||||
}
|
||||
|
||||
@ -19,6 +19,9 @@ msgstr "Already have an account?"
|
||||
msgid "auth.check-mail"
|
||||
msgstr "Check your email"
|
||||
|
||||
msgid "auth.check-email"
|
||||
msgstr "Check your email!"
|
||||
|
||||
#: src/app/main/ui/auth/register.cljs:277
|
||||
#, unused
|
||||
msgid "auth.check-your-email"
|
||||
@ -193,6 +196,9 @@ msgstr ""
|
||||
msgid "auth.verification-email-sent"
|
||||
msgstr "We've sent a verification email to"
|
||||
|
||||
msgid "auth.verification-sent-email"
|
||||
msgstr "We've sent a verification email to:"
|
||||
|
||||
#: src/app/main/ui/auth/login.cljs:178, src/app/main/ui/auth/recovery_request.cljs:77, src/app/main/ui/auth/register.cljs:168
|
||||
msgid "auth.work-email"
|
||||
msgstr "Work email"
|
||||
@ -4746,7 +4752,7 @@ msgstr "Invite members"
|
||||
#: src/app/main/ui/onboarding/team_choice.cljs:187
|
||||
msgid "onboarding.choice.team-up.invite-members-info"
|
||||
msgstr ""
|
||||
"Remember to include everyone. Developers, designers, managers... diversity "
|
||||
"Remember to include everyone. Developers, designers, managers... Diversity "
|
||||
"adds up :)"
|
||||
|
||||
#: src/app/main/ui/dashboard/team.cljs:258, src/app/main/ui/onboarding/team_choice.cljs:193
|
||||
|
||||
@ -19,6 +19,9 @@ msgstr "¿Tienes ya una cuenta?"
|
||||
msgid "auth.check-mail"
|
||||
msgstr "Comprueba tu correo"
|
||||
|
||||
msgid "auth.check-email"
|
||||
msgstr "¡Comprueba tu correo!"
|
||||
|
||||
#: src/app/main/ui/auth/register.cljs:277
|
||||
#, unused
|
||||
msgid "auth.check-your-email"
|
||||
@ -198,6 +201,9 @@ msgstr ""
|
||||
msgid "auth.verification-email-sent"
|
||||
msgstr "Hemos enviado un email de verificación a"
|
||||
|
||||
msgid "auth.verification-sent-email"
|
||||
msgstr "Hemos enviado un email de verificación a:"
|
||||
|
||||
#: src/app/main/ui/auth/login.cljs:178, src/app/main/ui/auth/recovery_request.cljs:77, src/app/main/ui/auth/register.cljs:168
|
||||
msgid "auth.work-email"
|
||||
msgstr "Correo electrónico"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user