From a401f8a5d399caa6385d8ce4785f8b850ba436b6 Mon Sep 17 00:00:00 2001
From: Em_Dev <Chifez1@gmail.com>
Date: Sat, 8 Jun 2024 05:01:21 +0100
Subject: [PATCH] chore: updated the email template (#353)

---
 apps/backend/src/utils/withEmailTemplate.js   | 246 ++++++++++--------
 .../lib/components/Email/EmailTemplate.svelte |  47 ----
 2 files changed, 135 insertions(+), 158 deletions(-)
 delete mode 100644 apps/dashboard/src/lib/components/Email/EmailTemplate.svelte

diff --git a/apps/backend/src/utils/withEmailTemplate.js b/apps/backend/src/utils/withEmailTemplate.js
index 9795deaf..2621329c 100644
--- a/apps/backend/src/utils/withEmailTemplate.js
+++ b/apps/backend/src/utils/withEmailTemplate.js
@@ -1,24 +1,25 @@
 const withEmailTemplate = (content) =>
-  `<!DOCTYPE html>
+  `<!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"
-    />
+    <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;
+        background-color: #f1f5f9;
+        font-family: 'Poppins', 'Helvetica Neue', 'Segoe UI', Helvetica, sans-serif;
         font-size: 15px;
         font-weight: 300;
         line-height: 26px;
         margin: 0;
-        color: #1e293b;
+        color: black;
+        padding: 4px 0px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        max-width: 100%;
       }
 
       pre {
@@ -33,26 +34,41 @@ const withEmailTemplate = (content) =>
       }
 
       table {
+        background-color: white;
+        border-radius: 4px;
+        padding: 2px 10px;
         width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: row;
       }
       table td {
         padding: 5px;
       }
+      table tr {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+      }
+      table td a {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
       .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;
+        font-weight: normal;
+        text-align: justify;
       }
-      
+
       .brandcolor {
         color: #00c4b8;
       }
@@ -71,33 +87,37 @@ const withEmailTemplate = (content) =>
       }
 
       .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;
+        background-color: #0233bd;
+        color: white;
+        width: 100%;
+        border-radius: 6px;
+        border: none;
+        font-weight: 600;
+        font-size: medium;
+        padding: 16px 0;
+        margin: 20px 0;
       }
 
-      .footer {
+      footer {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
         text-align: center;
-        font-size: 12px;
-        color: #cbd5e1;
+        font-size: 16px;
+        font-weight: 600;
+        color: white;
+        background-color: #0542cc;
       }
-      .footer a {
-        color: #cbd5e1;
+      footer a {
+        color: white;
         margin-right: 5px;
       }
 
       .gutter {
-        padding: 30px;
         text-align: center;
+        padding: 5px;
+        border-bottom: 1px solid rgb(221, 208, 208);
       }
 
       img {
@@ -110,10 +130,10 @@ const withEmailTemplate = (content) =>
       }
 
       a {
-        color: #0233BD;
+        color: #0233bd;
       }
       a:hover {
-        color: #0233BD;
+        color: #0233bd;
       }
       h1,
       h2,
@@ -122,6 +142,9 @@ const withEmailTemplate = (content) =>
         font-weight: 600;
       }
       @media screen and (max-width: 600px) {
+        body {
+          background-color: white;
+        }
         .wrap {
           max-width: auto;
         }
@@ -131,88 +154,89 @@ const withEmailTemplate = (content) =>
       }
     </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>
+  <body>
     <div
-      class="wrap"
       style="
-        background-color: #f1f5f9;
-        padding: 30px;
+        background-color: #fff;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
         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 class="gutter">
+        <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">
+        ${content}
+      </div>
+      <footer>
+        <p>Find us on</p>
+        <table class="socialicons">
+          <tr>
+            <td>
+              <a target="_blank" href="https://www.facebook.com/classroomiohq"
+                ><img
+                  title="Facebook"
+                  src="https://brand.cdn.clsrio.com/socials/facebook.svg"
+                  alt="Facebook"
+                  width="24"
+                  height="24"
+              /></a>
+            </td>
+            <td>
+              <a target="_blank" href="https://www.linkedin.com/company/classroomio/"
+                ><img
+                  title="linkedin"
+                  src="https://brand.cdn.clsrio.com/socials/linkedin.svg"
+                  alt="X"
+                  width="24"
+                  height="24"
+              /></a>
+            </td>
+            <td>
+              <a target="_blank" href="https://www.youtube.com/@ClassroomIO"
+                ><img
+                  title="Youtube"
+                  src="https://brand.cdn.clsrio.com/socials/youtube.svg"
+                  alt="Youtube"
+                  width="24"
+                  height="24"
+              /></a>
+            </td>
+            <td>
+              <a target="_blank" href="https://twitter.com/classroomio"
+                ><img
+                  title="X"
+                  src="https://brand.cdn.clsrio.com/socials/twitter.svg"
+                  alt="X"
+                  width="24"
+                  height="24"
+              /></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>
+      </footer>
     </div>
   </body>
 </html>
diff --git a/apps/dashboard/src/lib/components/Email/EmailTemplate.svelte b/apps/dashboard/src/lib/components/Email/EmailTemplate.svelte
deleted file mode 100644
index 5fd3da8f..00000000
--- a/apps/dashboard/src/lib/components/Email/EmailTemplate.svelte
+++ /dev/null
@@ -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>