Updated template

src/backend/emails/_button.html.ejs

@@ -5,7 +5,7 @@
         <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
           <tbody>
             <tr>
-              <td style="font-family: Helvetica, sans-serif; font-size: 16px; vertical-align: top; border-radius: 4px; text-align: center; background-color: #0867ec;" valign="top" align="center" bgcolor="#0867ec"> <a href="<%= url %>" target="_blank" style="border: solid 2px #0867ec; border-radius: 4px; box-sizing: border-box; cursor: pointer; display: inline-block; font-size: 16px; font-weight: bold; margin: 0; padding: 12px 24px; text-decoration: none; text-transform: capitalize; background-color: #0867ec; border-color: #0867ec; color: #ffffff;"><%= label %></a> </td>
+              <td style="font-family: Helvetica, sans-serif; font-size: 16px; vertical-align: top; border-radius: 4px; text-align: center; background-color: #20159e;" valign="top" align="center" bgcolor="#20159e"> <a href="<%= url %>" target="_blank" style="border: solid 2px #20159e; border-radius: 4px; box-sizing: border-box; cursor: pointer; display: inline-block; font-size: 16px; font-weight: bold; margin: 0; padding: 12px 24px; text-decoration: none; text-transform: capitalize; background-color: #20159e; border-color: #20159e; color: #ffffff;"><%= label %></a> </td>
             </tr>
           </tbody>
         </table>

src/backend/emails/_footer.html.ejs

@@ -5,7 +5,7 @@
               </table>
 
             <!-- START FOOTER -->
-            <div class="footer" style="clear: both; padding-top: 24px; text-align: center; width: 100%;">
+            <div class="footer" style="clear: both; padding-top: 24px; padding-bottom: 24px; text-align: center; width: 100%;">
               <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
                 <tr>
                   <td class="content-block" style="font-family: Helvetica, sans-serif; vertical-align: top; color: #9a9ea6; font-size: 16px; text-align: center;" valign="top" align="center">

src/backend/emails/_header.html.ejs

@@ -65,9 +65,9 @@
             <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #ffffff; border: 1px solid #eaebed; border-radius: 16px; width: 100%;" width="100%">
               <!-- START BRAND HEADER AREA -->
               <tr>
-                <td style="background-color: rgb(208, 235, 255); height: 80px; display: flex; justify-content: center; align-items: center; border-top-left-radius: 16px; border-top-right-radius: 16px;">
-                  <img src="<%= env.BASE_URL %>" width="34" height="34" alt="Compass logo"/>
-                  <h1 style="margin-left: 4px; position: relative; top: 1px; font-size: 22px; line-height: 1;">
+                <td style="background-color: #20159e; height: 80px; display: flex; justify-content: center; align-items: center; border-top-left-radius: 16px; border-top-right-radius: 16px;">
+                  <img src="<%= env.BASE_URL %>/img/compass-logo-white.svg" width="34" height="34" alt="Compass logo"/>
+                  <h1 style="color: white; margin-left: 4px; position: relative; top: 1px; font-size: 22px; line-height: 1;">
                     Compass
                   </h1>
                 </td>

src/backend/emails/invite_para/html.ejs

@@ -2,17 +2,13 @@
 
 <p>Hi <%= first_name %>!</p>
 
-<p><%= case_manager_name %> has added you as a staff member for their classroom in Compass.<br/>
-Compass is an all in one tool for collecting data for students’ IEP goals and empowering your classroom team to better assist students.</p>
+<p><b><%= case_manager_name %></b> has added you as a staff member for their classroom in Compass. Compass is an all in one tool for collecting data for students’ IEP goals and empowering your classroom team to better assist students.</p>
 
-<p>How does Compass work?<br/>
-Compass will help you organize data collection for the students you work with and securely store the data you collect.<br/>
-<%= case_manager_name %> will add you to data collection tasks for specific student goals. Upon logging in, you’ll see which students you’re expected to collect data for.
-Instructions from <%= case_manager_name %> will be available with each assignment. When you’re ready to begin, you’ll be able to collect and submit data and notes directly in the app.</p>
+<p><b>How does Compass work?</b><br/>
+Compass will help you organize data collection for the students you work with and securely store the data you collect. <%= case_manager_name %> will add you to data collection tasks for specific student goals. Upon logging in, you’ll see which students you’re expected to collect data for. Instructions from <%= case_manager_name %> will be available with each assignment. When you’re ready to begin, you’ll be able to collect and submit data and notes directly in the app.</p>
 
-<p>Getting started<br/>
-To get set up with Compass, use the link below and log in with the email address you received this message at.<br/>
-Thank you for the key role you play in improving student outcomes!</p>
+<p><b>Getting started</b><br/>
+To get set up with Compass, use the link below and log in with the email address you received this message at. Thank you for the key role you play in improving student outcomes!</p>
 
 <%- include('../_button.html.ejs', { label: 'Accept Invite', url: env.BASE_URL }) %>
 

src/backend/lib/nodemailer.ts

@@ -31,5 +31,6 @@ export const getTransporter = (env: Env) => {
       },
     },
     juice: false,
+    preview: false,
   });
 };