Revert "chore: updated the email template (#353)" (#357)

This reverts commit a401f8a5d3.

apps/backend/src/utils/withEmailTemplate.js

@@ -1,25 +1,24 @@
 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: #f1f5f9;
+        background-color: #fff;
-        font-family: 'Poppins', 'Helvetica Neue', 'Segoe UI', Helvetica, sans-serif;
+        font-family: "Poppins", "Helvetica Neue", "Segoe UI", Helvetica,
+          sans-serif;
         font-size: 15px;
         font-weight: 300;
         line-height: 26px;
         margin: 0;
-        color: black;
+        color: #1e293b;
-        padding: 4px 0px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        max-width: 100%;
       }
 
       pre {
@@ -34,39 +33,24 @@ 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 {
@@ -87,37 +71,33 @@ const withEmailTemplate = (content) =>
       }
 
       .button {
-        background-color: #0233bd;
+        margin-top:12px;
-        color: white;
+        background: #0233BD;
-        width: 100%;
+        border-radius: 8px;
-        border-radius: 6px;
+        text-decoration: none !important;
-        border: none;
+        color: #fff !important;
-        font-weight: 600;
+        font-weight: 500;
-        font-size: medium;
+        padding: 10px 30px;
-        padding: 16px 0;
+        display: inline-block;
-        margin: 20px 0;
+        font-size: 0.9em;
+      }
+      .button:hover {
+        background: #0233BD;
       }
 
-      footer {
+      .footer {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
         text-align: center;
-        font-size: 16px;
+        font-size: 12px;
-        font-weight: 600;
+        color: #cbd5e1;
-        color: white;
-        background-color: #0542cc;
       }
-      footer a {
+      .footer a {
-        color: white;
+        color: #cbd5e1;
         margin-right: 5px;
       }
 
       .gutter {
+        padding: 30px;
         text-align: center;
-        padding: 5px;
-        border-bottom: 1px solid rgb(221, 208, 208);
       }
 
       img {
@@ -130,10 +110,10 @@ const withEmailTemplate = (content) =>
       }
 
       a {
-        color: #0233bd;
+        color: #0233BD;
       }
       a:hover {
-        color: #0233bd;
+        color: #0233BD;
       }
       h1,
       h2,
@@ -142,9 +122,6 @@ const withEmailTemplate = (content) =>
         font-weight: 600;
       }
       @media screen and (max-width: 600px) {
-        body {
-          background-color: white;
-        }
         .wrap {
           max-width: auto;
         }
@@ -154,68 +131,68 @@ const withEmailTemplate = (content) =>
       }
     </style>
   </head>
-  <body>
+  <body
-    <div
     style="
       background-color: #fff;
-        flex-direction: column;
+      font-family: 'Poppins', 'Helvetica Neue', 'Segoe UI', Helvetica,
-        justify-content: center;
+        sans-serif;
-        align-items: center;
+      font-size: 15px;
-        max-width: 525px;
+      line-height: 26px;
+      margin: 0;
+      color: #1e293b;
     "
   >
-      <div class="gutter">
+    <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">
+    <div
+      class="wrap"
+      style="
+        background-color: #f1f5f9;
+        padding: 30px;
+        max-width: 525px;
+        margin: 0 auto;
+        border-radius: 12px;
+      "
+    >
       ${content}
     </div>
-      <footer>
+
-        <p>Find us on</p>
+    <div
+      class="footer"
+      style="text-align: center; font-size: 12px; color: #cbd5e1"
+    >
       <table class="socialicons">
         <tr>
           <td>
-              <a target="_blank" href="https://www.facebook.com/classroomiohq"
+            <a target="_blank" href="https://twitter.com/classroomio"
               ><img
-                  title="Facebook"
+                title="X"
-                  src="https://brand.cdn.clsrio.com/socials/facebook.svg"
+                src="https://tapaozmyjsuykgerrfkt.supabase.co/storage/v1/object/public/avatars/classroomio-x.png"
-                  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"
+                width="32"
-                  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"
+                src="https://tapaozmyjsuykgerrfkt.supabase.co/storage/v1/object/public/avatars/classroomio-youtube.png"
                 alt="Youtube"
-                  width="24"
+                width="32"
-                  height="24"
             /></a>
           </td>
           <td>
-              <a target="_blank" href="https://twitter.com/classroomio"
+            <a target="_blank" href="https://www.facebook.com/classroomiohq"
               ><img
-                  title="X"
+                title="Facebook"
-                  src="https://brand.cdn.clsrio.com/socials/twitter.svg"
+                src="https://tapaozmyjsuykgerrfkt.supabase.co/storage/v1/object/public/avatars/classroomio-facebook.png"
-                  alt="X"
+                alt="Facebook"
-                  width="24"
+                width="32"
-                  height="24"
             /></a>
           </td>
         </tr>
@@ -236,7 +213,6 @@ const withEmailTemplate = (content) =>
           >Privacy Policy</a
         >
       </p>
-      </footer>
     </div>
   </body>
 </html>

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

@@ -0,0 +1,47 @@
+<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>