CLASSROOMIO-T-133: Send welcome email after onboarding

Co-authored-by: Rotimi Best <[email protected]> Merge-request: CLASSROOMIO-MR-55 Merged-by: Best Admin <[email protected]>
2023-08-26 11:58:57 +00:00
parent b979da3db1
commit 7a5d341865
11 changed files with 352 additions and 45 deletions
@@ -1,47 +1,47 @@
-<script>
-  import Avatar from '$lib/components/Avatar/index.svelte';
+<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>

-<main>
-  <div class="w-full min-h-screen flex items-center justify-center">
-    <div class="container border border-gray bg-white">
-      <div class="flex items-center flex-col p-2 lg:px-8 lg:py-3">
-        <div class="flex items-center justify-center w-full pt-2">
-          <Avatar
-            src={'/logo-192.png'}
-            name={'ClassroomIO'}
-            shape="rounded-md"
-            width="w-10"
-            height="h-10"
-            className="mr-2"
-          />
-          <h4 class="text-xl">ClassroomIO</h4>
-        </div>
-        <div class="flex items-center flex-col w-10/12">
-          <h3>Welcome to ClassroomIO.</h3>
-        </div>
-      </div>
-
-      <!-- Footer -->
-      <div class="w-full p-6 border-t border-grey text-center">
-        Already have an account? <a class="hover:underline text-primary-700" href="/login">Log In</a
-        >
-      </div>
-    </div>
-  </div>
-</main>
-
-<style>
-  .container {
-    width: 450px;
-  }
-  main {
-    background: linear-gradient(
-      138deg,
-      rgb(32, 201, 255) 36.7%,
-      rgb(0, 8, 187) 84.4%,
-      rgb(255, 255, 255) 119.7%
-    );
-    box-sizing: border-box;
-  }
-</style>
+<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>