chore: updated the email template (#353)
This commit is contained in:
Em_Dev
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user