chore: redesign email template (#358)

* updated the email template

* impelement design that works on email

---------

Co-authored-by: emmanuel <chifez1@gmail.com>

apps/backend/src/routes/sendEmail.js

@@ -63,7 +63,7 @@ router.post('/', async (req, res) => {
     return res.json({ success: true });
   } catch (error) {
     console.error('Error sending emails:', error);
-    return res.status(500).json({ error: 'Internal Server Error' });
+    return res.status(400).json({ error: `Bad request - ${error.message}` });
   }
 });
 

apps/backend/src/utils/withEmailTemplate.js

@@ -1,24 +1,21 @@
 const withEmailTemplate = (content) =>
   `<!DOCTYPE html>
 <html>
+
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <meta
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
-      name="viewport"
-      content="width=device-width, initial-scale=1, minimum-scale=1"
-    />
   <base target="_blank" />
 
   <style>
     body {
-        background-color: #fff;
+      background-color: #F6F9FF;
       font-family: "Poppins", "Helvetica Neue", "Segoe UI", Helvetica,
         sans-serif;
       font-size: 15px;
-        font-weight: 300;
+      font-weight: 500;
       line-height: 26px;
       margin: 0;
-        color: #1e293b;
     }
 
     pre {
@@ -35,22 +32,18 @@ const withEmailTemplate = (content) =>
     table {
       width: 100%;
     }
+
     table td {
-        padding: 5px;
+      padding: 5px 10px 0px;
-      }
+      vertical-align: middle;
-      .socialicons {
-        max-width: 200px;
-        margin-left: auto;
-        margin-right: auto;
-        margin-top: 27px;
     }
 
-      .wrap {
+    .socialicons {
-        background-color: #f1f5f9;
+      background-color: #fff;
-        padding: 30px;
+      border-radius: 5px;
-        max-width: 525px;
+      padding: 5px;
+      width: initial;
       margin: 0 auto;
-        border-radius: 12px;
     }
 
     .brandcolor {
@@ -81,6 +74,7 @@ const withEmailTemplate = (content) =>
       display: inline-block;
       font-size: 0.9em;
     }
+
     .button:hover {
       background: #0233BD;
     }
@@ -90,14 +84,18 @@ const withEmailTemplate = (content) =>
       font-size: 12px;
       color: #cbd5e1;
     }
+
     .footer a {
       color: #cbd5e1;
-        margin-right: 5px;
     }
 
     .gutter {
-        padding: 30px;
+      padding: 5px 30px;
       text-align: center;
+      background-color: #fff;
+      border-bottom: 1px solid rgb(221, 208, 208);
+      max-width: 525px;
+      margin: 0 auto;
     }
 
     img {
@@ -109,112 +107,85 @@ const withEmailTemplate = (content) =>
       max-width: 280px;
     }
 
-      a {
-        color: #0233BD;
-      }
-      a:hover {
-        color: #0233BD;
-      }
     h1,
     h2,
     h3,
     h4 {
       font-weight: 600;
     }
+
     @media screen and (max-width: 600px) {
       .wrap {
         max-width: auto;
       }
+
       .gutter {
         padding: 10px;
       }
     }
   </style>
 </head>
-  <body
+
-    style="
+<body style="
-      background-color: #fff;
+      background-color: #F6F9FF;
       font-family: 'Poppins', 'Helvetica Neue', 'Segoe UI', Helvetica,
         sans-serif;
       font-size: 15px;
       line-height: 26px;
+      padding: 20px 0;
       margin: 0;
       color: #1e293b;
-    "
+    ">
-  >
+  <div class="gutter">
-    <div class="gutter" style="padding: 30px">
     <a href="https://classroomio.com" target="_blank">
-        <img
+      <img src="https://brand.cdn.clsrio.com/cio-bg-transparent.png" alt="ClassroomIO Logo" /></a>
-          src="https://tapaozmyjsuykgerrfkt.supabase.co/storage/v1/object/public/avatars/cio-logo-full.png"
-          alt="ClassroomIO Logo"
-      /></a>
   </div>
-    <div
+  <div class="wrap" style="
-      class="wrap"
+        background-color: #fff;
-      style="
+        padding: 40px 30px;
-        background-color: #f1f5f9;
-        padding: 30px;
         max-width: 525px;
         margin: 0 auto;
-        border-radius: 12px;
+      ">
-      "
-    >
     ${content}
   </div>
 
-    <div
+  <div class="footer" style="
-      class="footer"
+    text-align: center;
-      style="text-align: center; font-size: 12px; color: #cbd5e1"
+    font-size: 12px;
-    >
+    color: #fff;
+    padding: 30px;
+    background-color: #0542CC;
+    max-width: 525px;
+    margin: 0 auto;">
+    <p>Find us on</p>
     <table class="socialicons">
       <tr>
         <td>
-            <a target="_blank" href="https://twitter.com/classroomio"
+          <a target="_blank" href="https://twitter.com/classroomio"><img title="X"
-              ><img
+              src="https://brand.cdn.clsrio.com/socials/twitter.png" alt="X" width="19" /></a>
-                title="X"
-                src="https://tapaozmyjsuykgerrfkt.supabase.co/storage/v1/object/public/avatars/classroomio-x.png"
-                alt="X"
-                width="32"
-            /></a>
         </td>
         <td>
-            <a target="_blank" href="https://www.youtube.com/@ClassroomIO"
+          <a target="_blank" href="https://www.youtube.com/@ClassroomIO"><img title="Youtube"
-              ><img
+              src="https://brand.cdn.clsrio.com/socials/youtube.png" alt="Youtube" width="24" /></a>
-                title="Youtube"
-                src="https://tapaozmyjsuykgerrfkt.supabase.co/storage/v1/object/public/avatars/classroomio-youtube.png"
-                alt="Youtube"
-                width="32"
-            /></a>
         </td>
         <td>
-            <a target="_blank" href="https://www.facebook.com/classroomiohq"
+          <a target="_blank" href="https://www.facebook.com/classroomiohq"><img title="Facebook"
-              ><img
+              src="https://brand.cdn.clsrio.com/socials/facebook.png" alt="Facebook" width="24" /></a>
-                title="Facebook"
-                src="https://tapaozmyjsuykgerrfkt.supabase.co/storage/v1/object/public/avatars/classroomio-facebook.png"
-                alt="Facebook"
-                width="32"
-            /></a>
         </td>
       </tr>
     </table>
     <p style="padding-top: 8px; line-height: initial">
       ClassroomIO ${new Date().getFullYear()}. All rights reserved.<br />
-        <a
+      <a style="text-decoration: none" href="https://app.enzuzo.com/policies/tos/958fc978-5477-11ee-a03b-7b111830c594"
-          style="text-decoration: none"
+        target="_blank">Terms</a>
-          href="https://app.enzuzo.com/policies/tos/958fc978-5477-11ee-a03b-7b111830c594"
-          target="_blank"
-          >Terms</a
-        >
       |
-        <a
+      <a style="text-decoration: none"
-          style="text-decoration: none"
+        href="https://app.enzuzo.com/policies/privacy/958fc978-5477-11ee-a03b-7b111830c594" target="_blank">Privacy
-          href="https://app.enzuzo.com/policies/privacy/958fc978-5477-11ee-a03b-7b111830c594"
+        Policy</a>
-          target="_blank"
-          >Privacy Policy</a
-        >
     </p>
   </div>
 </body>
+
 </html>
 `;
 module.exports = { withEmailTemplate };

apps/dashboard/src/lib/components/Email/EmailTemplate.svelte

@@ -1,47 +0,0 @@
-<script lang="ts">
-  import { Container, Head, Html, Img, Preview, Section, Text } from 'svelte-email';
-
-  export let children: ConstructorOfATypedSvelteComponent;
-  export let props = {};
-
-  const main = {
-    background: '#fff'
-  };
-
-  const container = {
-    margin: '20px auto 100px',
-    padding: '0 40px',
-    backgroundColor: '#fff',
-    width: '80%',
-    maxWidth: '600px'
-  };
-
-  const logo = {
-    margin: '0 auto'
-  };
-</script>
-
-<Html lang="en">
-  <Head />
-  <Preview preview="Welcome to ClassroomIO" />
-  <Section style={main}>
-    <Container style={container}>
-      <Img
-        src="https://app.classroomio.com/logo-512.png"
-        alt="ClassroomIO logo"
-        style={logo}
-        width="50"
-        height="50"
-      />
-      <Text
-        style={{
-          textAlign: 'center',
-          color: '#1d4ee2',
-          fontWeight: 'bold',
-          fontSize: '20px'
-        }}>ClassroomIO</Text
-      >
-      <svelte:component this={children} {...props} />
-    </Container>
-  </Section>
-</Html>

apps/dashboard/src/lib/utils/services/notification/template.ts

@@ -1,219 +0,0 @@
-export const withEmailTemplate = (content: string) =>
-  `<!DOCTYPE html>
-<html>
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, minimum-scale=1"
-    />
-    <base target="_blank" />
-
-    <style>
-      body {
-        background-color: #fff;
-        font-family: "Poppins", "Helvetica Neue", "Segoe UI", Helvetica,
-          sans-serif;
-        font-size: 15px;
-        font-weight: 300;
-        line-height: 26px;
-        margin: 0;
-        color: #1e293b;
-      }
-
-      pre {
-        background: #f4f4f4;
-        padding: 2px;
-      }
-
-      hr {
-        border-top: 1px dashed #94a3b8;
-        margin-top: 1rem;
-        margin-bottom: 1rem;
-      }
-
-      table {
-        width: 100%;
-      }
-      table td {
-        padding: 5px;
-      }
-      .socialicons {
-        max-width: 200px;
-        margin-left: auto;
-        margin-right: auto;
-        margin-top: 27px;
-      }
-
-      .wrap {
-        background-color: #f1f5f9;
-        padding: 30px;
-        max-width: 525px;
-        margin: 0 auto;
-        border-radius: 12px;
-      }
-      
-      .brandcolor {
-        color: #00c4b8;
-      }
-
-      .tooltip {
-        background-color: #f1f5f9;
-        padding: 1rem;
-        border-radius: 1rem;
-        color: #475569;
-        margin-top: 15px;
-        margin-bottom: 15px;
-      }
-
-      .tooltip a {
-        color: #1e293b;
-      }
-
-      .button {
-        margin-top:12px;
-        background: #0233BD;
-        border-radius: 8px;
-        text-decoration: none !important;
-        color: #fff !important;
-        font-weight: 500;
-        padding: 10px 30px;
-        display: inline-block;
-        font-size: 0.9em;
-      }
-      .button:hover {
-        background: #0233BD;
-      }
-
-      .footer {
-        text-align: center;
-        font-size: 12px;
-        color: #cbd5e1;
-      }
-      .footer a {
-        color: #cbd5e1;
-        margin-right: 5px;
-      }
-
-      .gutter {
-        padding: 30px;
-        text-align: center;
-      }
-
-      img {
-        max-width: 100%;
-        height: auto;
-      }
-
-      .gutter img {
-        max-width: 280px;
-      }
-
-      a {
-        color: #0233BD;
-      }
-      a:hover {
-        color: #0233BD;
-      }
-      h1,
-      h2,
-      h3,
-      h4 {
-        font-weight: 600;
-      }
-      @media screen and (max-width: 600px) {
-        .wrap {
-          max-width: auto;
-        }
-        .gutter {
-          padding: 10px;
-        }
-      }
-    </style>
-  </head>
-  <body
-    style="
-      background-color: #fff;
-      font-family: 'Poppins', 'Helvetica Neue', 'Segoe UI', Helvetica,
-        sans-serif;
-      font-size: 15px;
-      line-height: 26px;
-      margin: 0;
-      color: #1e293b;
-    "
-  >
-    <div class="gutter" style="padding: 30px">
-      <a href="https://classroomio.com" target="_blank">
-        <img
-          src="https://tapaozmyjsuykgerrfkt.supabase.co/storage/v1/object/public/avatars/cio-logo-full.png"
-          alt="ClassroomIO Logo"
-      /></a>
-    </div>
-    <div
-      class="wrap"
-      style="
-        background-color: #f1f5f9;
-        padding: 30px;
-        max-width: 525px;
-        margin: 0 auto;
-        border-radius: 12px;
-      "
-    >
-      ${content}
-    </div>
-
-    <div
-      class="footer"
-      style="text-align: center; font-size: 12px; color: #cbd5e1"
-    >
-      <table class="socialicons">
-        <tr>
-          <td>
-            <a target="_blank" href="https://twitter.com/classroomio"
-              ><img
-                title="X"
-                src="https://tapaozmyjsuykgerrfkt.supabase.co/storage/v1/object/public/avatars/classroomio-x.png"
-                alt="X"
-                width="32"
-            /></a>
-          </td>
-          <td>
-            <a target="_blank" href="https://www.youtube.com/@ClassroomIO"
-              ><img
-                title="Youtube"
-                src="https://tapaozmyjsuykgerrfkt.supabase.co/storage/v1/object/public/avatars/classroomio-youtube.png"
-                alt="Youtube"
-                width="32"
-            /></a>
-          </td>
-          <td>
-            <a target="_blank" href="https://www.facebook.com/classroomiohq"
-              ><img
-                title="Facebook"
-                src="https://tapaozmyjsuykgerrfkt.supabase.co/storage/v1/object/public/avatars/classroomio-facebook.png"
-                alt="Facebook"
-                width="32"
-            /></a>
-          </td>
-        </tr>
-      </table>
-      <p style="padding-top: 8px; line-height: initial">
-        ClassroomIO ${new Date().getFullYear()}. All rights reserved.<br />
-        <a
-          style="text-decoration: none"
-          href="https://app.enzuzo.com/policies/tos/958fc978-5477-11ee-a03b-7b111830c594"
-          target="_blank"
-          >Terms</a
-        >
-        |
-        <a
-          style="text-decoration: none"
-          href="https://app.enzuzo.com/policies/privacy/958fc978-5477-11ee-a03b-7b111830c594"
-          target="_blank"
-          >Privacy Policy</a
-        >
-      </p>
-    </div>
-  </body>
-</html>
-`;