Merge pull request #527 from LucasXu0/update_invitation_email

chore: update invitation email template

assets/mailer_templates/build_production/images/appstore-badge.svg

@@ -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>

assets/mailer_templates/build_production/images/google-play-badge.svg

@@ -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>

assets/mailer_templates/build_production/workspace_invitation.html

@@ -42,7 +42,7 @@
      ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏
   </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">
+            <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"
+              By clicking "Join workspace" above, you confirm that you have read, understood, and agreed to
-              <br>
+              AppFlowy's <a href="https://appflowy.io/terms/app" style="color: #64748b;">Terms &
-              you acknowledge that you have read and understood,
+                Conditions</a>
-              <br>
+              and <a href="https://appflowy.io/privacy/app" style="color: #64748b;">Privacy
-              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
                 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;">
+            <p style="margin: 0; font-size: 14px; font-weight: 500; color: #000;">
-              Try the AppFlowy mobile app to stay on top of activity like comments, replies, and @mentions
+              Bring projects, knowledge, and teams together with the power of AI.
-              when you're on
-              the go.
             </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>

email_template/src/templates/workspace_invitation.html

@@ -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">
+                    <div class="mx-auto  leading-4.5 text-sm text-slate-500 text-center w-[70%]">
-                        By clicking "Join workspace"
+                        By clicking "Join workspace" above, you confirm that you have read, understood, and agreed to
-                        <br/>
+                        AppFlowy's <a href="https://appflowy.io/terms/app" class="text-slate-500">Terms &
-                        you acknowledge that you have read and understood,
+                        Conditions</a>
-                        <br/>
+                        and <a class="text-slate-500" href="https://appflowy.io/privacy/app">Privacy
-                        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
                         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">
+                    <p class="m-0 text-sm text-black font-medium">
-                        Try the AppFlowy mobile app to stay on top of activity like comments, replies, and @mentions
+                        Bring projects, knowledge, and teams together with the power of AI.
-                        when you're on
-                        the go.
                     </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>

email_template/tailwind.config.js

@@ -2,8 +2,8 @@
 module.exports = {
   theme: {
     screens: {
-      sm: {max: '600px'},
+      sm: { max: '600px' },
-      xs: {max: '425px'},
+      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'),
   ],
-}
+};