Merge pull request #527 from LucasXu0/update_invitation_email

chore: update invitation email template
This commit is contained in:
Zack 2024-05-06 15:04:25 +08:00 committed by GitHub
commit 48281f43e5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 35 additions and 137 deletions

View File

@ -1,6 +0,0 @@
<svg xmlns='http://www.w3.org/2000/svg' width='18' height='22' viewBox='0 0 18 22' fill='none'>
<path
d='M12.0713 4.13312C12.4659 3.69379 12.7669 3.1835 12.9568 2.63154C13.1467 2.07958 13.2218 1.49683 13.1779 0.916748C11.9662 1.01121 10.8414 1.56159 10.0459 2.44931C9.66497 2.87478 9.37629 3.36974 9.19696 3.90489C9.01764 4.44004 8.95132 5.00451 9.00194 5.56486C9.59299 5.56961 10.1772 5.44295 10.7095 5.19468C11.2417 4.94641 11.7077 4.58318 12.0713 4.13312ZM14.7021 11.6346C14.7091 10.862 14.9198 10.1039 15.3144 9.43176C15.7089 8.75963 16.2743 8.19568 16.9571 7.79312C16.5262 7.19345 15.9565 6.69899 15.2933 6.34896C14.63 5.99893 13.8914 5.80296 13.1361 5.77659C11.5075 5.61527 10.0042 6.69411 9.13766 6.69411C8.27114 6.69411 7.04968 5.79676 5.69249 5.81692C4.80524 5.84515 3.9407 6.09498 3.18321 6.54205C2.42572 6.98913 1.80114 7.61817 1.37038 8.36784C-0.467035 11.4531 0.900589 16.0407 2.73801 18.5312C3.5732 19.7512 4.61719 21.1325 5.99525 21.0821C7.37332 21.0317 7.82223 20.2553 9.41953 20.2553C11.0168 20.2553 11.5075 21.0821 12.8647 21.0518C14.2219 21.0216 15.1823 19.8016 16.0593 18.5816C16.6805 17.6958 17.1658 16.728 17.5 15.708C16.6726 15.3672 15.9667 14.7999 15.4695 14.0759C14.9723 13.352 14.7055 12.5033 14.7021 11.6346Z'
fill='white'
/>
</svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 979 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -1,6 +0,0 @@
<svg xmlns='http://www.w3.org/2000/svg' width='19' height='18' viewBox='0 0 19 18' fill='none'>
<path
d='M4.06325 0.4575L13.9062 6.117L11.7965 8.22675L4.06325 0.4575ZM2.024 0L11.0592 9L2.02475 18C1.565 17.7967 1.25 17.3445 1.25 16.8187C1.25 16.8015 1.25 16.7843 1.25075 16.7677V16.77V1.23075C1.25 1.2165 1.25 1.19925 1.25 1.182C1.25 0.65625 1.565 0.204 2.0165 0.00375L2.02475 0.00075L2.024 0ZM16.9655 7.9455C17.276 8.17575 17.4748 8.54175 17.4748 8.9535C17.4748 8.97 17.4748 8.98575 17.474 9.00225V9C17.477 9.03225 17.4792 9.0705 17.4792 9.10875C17.4792 9.49575 17.2917 9.83925 17.0023 10.0522L16.9993 10.0545L14.8895 11.2492L12.605 9L14.8903 6.71475L16.9655 7.9455ZM4.06325 17.5425L11.7972 9.77325L13.907 11.883L4.06325 17.5425Z'
fill='white'
/>
</svg>

Before

Width:  |  Height:  |  Size: 785 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -42,7 +42,7 @@
&#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847;
</div>
<div role="article" aria-roledescription="email" aria-label="Confirm to join the workspace" lang="en">
<div class="sm-px-4 sm-py-12" style="background-color: #faf5ff; padding: 96px 48px; color: #000">
<div class="sm-px-4 sm-py-12" style="background-color: #faf5ff; padding: 96px 48px; font-family: Helvetica, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; color: #000">
<table align="center" cellpadding="0" cellspacing="0" role="none">
<tr>
<td style="width: 552px; max-width: 100%">
@ -51,9 +51,8 @@
</div>
<p style="width: 100%; white-space: normal; overflow-wrap: break-word; text-align: center; font-size: 24px">
<span style="font-size: 30px; font-weight: 700">{{ username }}</span>
<span>invited you to Join</span>
<span>invited you to </span>
<span style="font-size: 30px; font-weight: 700;">{{ workspace_name }}</span>
<span>on AppFlowy</span>
</p>
<div role="separator" style="background-color: #cbd5e1; height: 1px; line-height: 1px; margin: 24px 20%">&zwj;</div>
<table align="center" cellpadding="0" cellspacing="0" role="none">
@ -72,32 +71,31 @@
</tr>
</table>
<div style="text-align: center;">
<a href="{{ accept_url }}" class="hover-opacity-90" style="margin-top: 32px; margin-bottom: 32px; display: inline-block; height: 34px; width: 60%; cursor: pointer; border-radius: 16px; padding: 16px 24px; color: #f8fafc; text-decoration: none; background-color: #9327ff; font-size: 20px; font-weight: 400; line-height: 34px">
<a href="{{ accept_url }}" class="hover-opacity-90" style="margin-top: 32px; margin-bottom: 32px; display: inline-block; width: 60%; cursor: pointer; border-radius: 16px; padding: 16px 24px; color: #f8fafc; text-decoration: none; background-color: #9327ff; font-size: 20px; font-weight: 400; line-height: 20px">
<!--[if mso]>
<i style="mso-font-width: 150%; mso-text-raise: 30px" hidden>&emsp;</i>
<![endif]-->
<span style="mso-text-raise: 16px">
Join workspace
<div style="font-size: 24px; font-weight: 500">
Join workspace
<div style="font-size: 12px">require v0.5.6+ to continue</div>
</div>
</span>
<!--[if mso]>
<i hidden style="mso-font-width: 150%;">&emsp;&#8203;</i>
<![endif]-->
</a>
</div>
<p style="margin: 0; text-align: center; font-size: 14px; line-height: 18px; color: #64748b">
By clicking "Join workspace"
<br>
you acknowledge that you have read and understood,
<br>
and agree to AppFlowy's <a href="https://appflowy.io/terms" style="color: #64748b;">Terms & Conditions</a> and <a href="https://appflowy.io/privacy" style="color: #64748b;">Privacy
<div style="margin-left: auto; margin-right: auto; width: 70%; text-align: center; font-size: 14px; line-height: 18px; color: #64748b">
By clicking "Join workspace" above, you confirm that you have read, understood, and agreed to
AppFlowy's <a href="https://appflowy.io/terms/app" style="color: #64748b;">Terms &
Conditions</a>
and <a href="https://appflowy.io/privacy/app" style="color: #64748b;">Privacy
Policy</a>.
</p>
</div>
<div role="separator" style="background-color: #cbd5e1; height: 1px; line-height: 1px; margin: 24px 20%;">&zwj;</div>
</td>
</tr>
<tr role="separator">
<td style="line-height: 96px">&zwj;</td>
</tr>
<tr>
<td style="padding-left: 24px; padding-right: 24px; text-align: center; font-size: 12px; color: #475569">
<p style="margin: 0 0 16px; cursor: pointer; text-transform: uppercase">
@ -105,47 +103,9 @@
<img src="https://raw.githubusercontent.com/AppFlowy-IO/AppFlowy-Cloud/main/assets/mailer_templates/build_production/images/appflowy-logo.png" width="150px" style="max-width: 100%; vertical-align: middle; line-height: 1;" alt="">
</a>
</p>
<p style="margin: 0; font-size: 14px;">
Try the AppFlowy mobile app to stay on top of activity like comments, replies, and @mentions
when you're on
the go.
<p style="margin: 0; font-size: 14px; font-weight: 500; color: #000;">
Bring projects, knowledge, and teams together with the power of AI.
</p>
<table style="margin-top: 16px; margin-bottom: 16px; width: 100%" cellpadding="0" cellspacing="0" role="none">
<tr>
<td>
<div style="text-align: right">
<a href="https://testflight.apple.com/join/6CexvkDz" class="hover-opacity-90" style="position: relative; margin-right: 8px; display: inline-block; border-radius: 16px; padding: 16px 24px; font-size: 16px; line-height: 1; color: #f8fafc; text-decoration: none; background-color: #9327ff; font-weight: 400">
<!--[if mso]>
<i style="mso-font-width: 150%; mso-text-raise: 30px;" hidden>&emsp;</i>
<![endif]-->
<span style="mso-text-raise: 16px">
<img src="https://raw.githubusercontent.com/AppFlowy-IO/AppFlowy-Cloud/main/assets/mailer_templates/build_production/images/appstore-badge.png" width="16px" alt="Download on the App Store" style="max-width: 100%; vertical-align: middle; line-height: 1; position: absolute; top: 16px">
<span style="margin-left: 24px; font-size: 14px">Test Flight</span>
</span>
<!--[if mso]>
<i hidden style="mso-font-width: 150%;">&emsp;&#8203;</i>
<![endif]-->
</a>
</div>
</td>
<td>
<div style="text-align: left">
<a href="https://play.google.com/store/apps/details?id=io.appflowy.appflowy" class="hover-opacity-90" style="position: relative; margin-left: 8px; display: inline-block; border-radius: 16px; padding: 16px 24px; font-size: 16px; line-height: 1; color: #f8fafc; text-decoration: none; background-color: #9327ff; font-weight: 400">
<!--[if mso]>
<i style="mso-font-width: 150%; mso-text-raise: 30px;" hidden>&emsp;</i>
<![endif]-->
<span style="mso-text-raise: 16px">
<img src="https://raw.githubusercontent.com/AppFlowy-IO/AppFlowy-Cloud/main/assets/mailer_templates/build_production/images/google-play-badge.png" width="16px" alt="Get it on Google Play" style="max-width: 100%; vertical-align: middle; line-height: 1; position: absolute; top: 16px;">
<span style="margin-left: 24px; font-size: 14px;">Google Play</span>
</span>
<!--[if mso]>
<i hidden style="mso-font-width: 150%;">&emsp;&#8203;</i>
<![endif]-->
</a>
</div>
</td>
</tr>
</table>
<p style="cursor: default">
<a href="https://twitter.com/appflowy" style="margin-right: 16px; color: #4338ca; text-decoration: none">
<img src="https://raw.githubusercontent.com/AppFlowy-IO/AppFlowy-Cloud/main/assets/mailer_templates/build_production/images/twitter.png" width="20" alt="Maizzle" style="max-width: 100%; vertical-align: middle; line-height: 1;">
@ -159,14 +119,6 @@
<a href="https://discord.gg/9Q2xaN37tV" style="margin-right: 16px; color: #4338ca; text-decoration: none;">
<img src="https://raw.githubusercontent.com/AppFlowy-IO/AppFlowy-Cloud/main/assets/mailer_templates/build_production/images/discord.png" width="20" alt="Maizzle" style="max-width: 100%; vertical-align: middle; line-height: 1;">
</a>
<a href="https://forum.appflowy.io/" style="color: #4338ca; text-decoration: none;">
<img src="https://raw.githubusercontent.com/AppFlowy-IO/AppFlowy-Cloud/main/assets/mailer_templates/build_production/images/forum.png" width="20" alt="Maizzle" style="max-width: 100%; vertical-align: middle; line-height: 1;">
</a>
</p>
<p style="font-size: 12px; line-height: 18px;">
<span>Cupyright © 2024, AppFlowy Inc.</span>
<br>
<span>Need Help? support@appflowy.io</span>
</p>
</td>
</tr>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 979 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -5,7 +5,7 @@ bodyClass: bg-purple-50
---
<x-main>
<div class="bg-purple-50 sm:px-4 px-12 sm:py-12 py-24 text-black">
<div class="bg-purple-50 font-helvetica sm:px-4 px-12 sm:py-12 py-24 text-black">
<table align="center">
<tr>
<td class="w-[552px] max-w-full">
@ -16,9 +16,8 @@ bodyClass: bg-purple-50
</div>
<p class="w-full text-center break-words whitespace-normal text-2xl">
<span class="text-3xl font-bold">{{ userName }}</span>
<span class="mx-2=1">invited you to Join</span>
<span class="mx-2=1">invited you to </span>
<span class="text-3xl font-bold">{{ workspaceName }}</span>
<span class="mx-2=1">on AppFlowy</span>
</p>
<x-divider space-x="20%"/>
<table align="center">
@ -43,27 +42,24 @@ bodyClass: bg-purple-50
</tr>
</table>
<x-button align="center"
class="hover:opacity-90 cursor-pointer h-[34px] !text-xl !leading-[34px] !bg-[#9327ff] !font-normal w-[60%] my-8 rounded-2xl"
class="hover:opacity-90 cursor-pointer !text-xl !leading-[20px] !bg-[#9327ff] !font-normal w-[60%] my-8 rounded-2xl"
href="{{ acceptUrl }}">
Join workspace
<div class="font-medium text-[24px]">
Join workspace
<div class="text-xs">require v0.5.6+ to continue</div>
</div>
</x-button>
<p class="m-0 leading-4.5 text-sm text-slate-500 text-center">
By clicking "Join workspace"
<br/>
you acknowledge that you have read and understood,
<br/>
and agree to AppFlowy's <a
href="https://appflowy.io/terms" class="text-slate-500">Terms & Conditions</a> and <a
class="text-slate-500"
href="https://appflowy.io/privacy">Privacy
<div class="mx-auto leading-4.5 text-sm text-slate-500 text-center w-[70%]">
By clicking "Join workspace" above, you confirm that you have read, understood, and agreed to
AppFlowy's <a href="https://appflowy.io/terms/app" class="text-slate-500">Terms &
Conditions</a>
and <a class="text-slate-500" href="https://appflowy.io/privacy/app">Privacy
Policy</a>.
</p>
</div>
<x-divider space-x="20%"/>
</td>
</tr>
<tr role="separator">
<td class="leading-24">&zwj;</td>
</tr>
<tr>
<td class="text-center text-slate-600 text-xs px-6">
<p class="m-0 mb-4 uppercase cursor-pointer">
@ -71,40 +67,10 @@ bodyClass: bg-purple-50
<img src="{{ cdnBaseUrl }}images/appflowy-logo.png" width="150px">
</a>
</p>
<p class="m-0 text-sm">
Try the AppFlowy mobile app to stay on top of activity like comments, replies, and @mentions
when you're on
the go.
<p class="m-0 text-sm text-black font-medium">
Bring projects, knowledge, and teams together with the power of AI.
</p>
<table class="w-full my-4">
<tr>
<td>
<x-button align="right"
class="hover:opacity-90 mr-2 relative !bg-[#9327ff] !font-normal rounded-2xl"
href="https://testflight.apple.com/join/6CexvkDz">
<img class="absolute top-4" src="{{ cdnBaseUrl }}images/appstore-badge.png"
width="16px"
alt="Download on the App Store">
<span class="text-sm ml-6">Test Flight</span>
</x-button>
</td>
<td>
<x-button align="left"
class="hover:opacity-90 ml-2 relative !bg-[#9327ff] !font-normal rounded-2xl"
href="https://play.google.com/store/apps/details?id=io.appflowy.appflowy">
<img class="absolute top-4" src="{{ cdnBaseUrl }}images/google-play-badge.png"
width="16px"
alt="Get it on Google Play">
<span class="text-sm ml-6">Google Play</span>
</x-button>
</td>
</tr>
</table>
<p class="cursor-default">
<a href="https://twitter.com/appflowy"
class="text-indigo-700 [text-decoration:none] mr-4">
@ -122,15 +88,6 @@ bodyClass: bg-purple-50
class="text-indigo-700 [text-decoration:none] mr-4">
<img src="{{ cdnBaseUrl }}images/discord.png" width="20" alt="Maizzle">
</a>
<a href="https://forum.appflowy.io/"
class="text-indigo-700 [text-decoration:none]">
<img src="{{ cdnBaseUrl }}images/forum.png" width="20" alt="Maizzle">
</a>
</p>
<p class="text-xs leading-4.5">
<span>Cupyright © 2024, AppFlowy Inc.</span>
<br>
<span>Need Help? support@appflowy.io</span>
</p>
</td>
</tr>

View File

@ -2,8 +2,8 @@
module.exports = {
theme: {
screens: {
sm: {max: '600px'},
xs: {max: '425px'},
sm: { max: '600px' },
xs: { max: '425px' },
},
extend: {
spacing: {
@ -73,6 +73,7 @@ module.exports = {
sans: ['ui-sans-serif', 'system-ui', '-apple-system', '"Segoe UI"', 'sans-serif'],
serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
mono: ['ui-monospace', 'Menlo', 'Consolas', 'monospace'],
helvetica: ['Helvetica', 'ui-sans-serif', 'system-ui', '-apple-system', '"Segoe UI"', 'sans-serif'],
},
fontSize: {
0: '0',
@ -134,4 +135,4 @@ module.exports = {
require('tailwindcss-box-shadow'),
require('tailwindcss-email-variants'),
],
}
};