From 31a439691cdfd2fcf614dcf84d89190a09a7128a Mon Sep 17 00:00:00 2001
From: "Lucas.Xu" <lucas.xu@appflowy.io>
Date: Mon, 6 May 2024 10:51:31 +0800
Subject: [PATCH] chore: update invitation email template

---
 .../workspace_invitation.html                 | 63 ++-----------------
 .../src/templates/workspace_invitation.html   | 63 +++----------------
 2 files changed, 11 insertions(+), 115 deletions(-)

diff --git a/assets/mailer_templates/build_production/workspace_invitation.html b/assets/mailer_templates/build_production/workspace_invitation.html
index 6c146501..673f68b2 100644
--- a/assets/mailer_templates/build_production/workspace_invitation.html
+++ b/assets/mailer_templates/build_production/workspace_invitation.html
@@ -53,7 +53,6 @@
               <span style="font-size: 30px; font-weight: 700">{{ username }}</span>
               <span>invited you to Join</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">
@@ -84,20 +83,12 @@
     <![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
-                Policy</a>.
+            <p style="margin: 0; width: 60%; text-align: center; font-size: 14px; line-height: 18px; color: #64748b">
+              By clicking "Join workspace" above, you confirm that you have read, understood, 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 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 +96,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">
+              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 +112,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>
diff --git a/email_template/src/templates/workspace_invitation.html b/email_template/src/templates/workspace_invitation.html
index fe68baa9..8f35c436 100644
--- a/email_template/src/templates/workspace_invitation.html
+++ b/email_template/src/templates/workspace_invitation.html
@@ -18,7 +18,6 @@ bodyClass: bg-purple-50
                         <span class="text-3xl font-bold">{{ userName }}</span>
                         <span class="mx-2=1">invited you to Join</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">
@@ -47,23 +46,14 @@ bodyClass: bg-purple-50
                               href="{{ acceptUrl }}">
                         Join workspace
                     </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
-                        Policy</a>.
-                    </p>
+                    <div class="m-0 leading-4.5 text-sm text-slate-500 text-center w-[100%]">
+                        <div class="w-[60%]">
+                            By clicking "Join workspace" above, you confirm that you have read, understood, 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>.
+                        </div>
+                    </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 +61,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 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 +82,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>