ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: updated the email template (#353)

Browse Source
This commit is contained in:
Em_Dev
2024-06-08 05:01:21 +01:00
committed by GitHub
parent 1591b5be2c
commit a401f8a5d3
2 changed files with 135 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/backend/src/utils/withEmailTemplate.js
+135 -111
View File
@@ -1,24 +1,25 @@
const withEmailTemplate = (content) => const withEmailTemplate = (content) =>
`<!DOCTYPE html> `<!doctype html>
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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" /> <base target="_blank" />
<style> <style>
body { body {
background-color: #fff; background-color: #f1f5f9;
font-family: "Poppins", "Helvetica Neue", "Segoe UI", Helvetica, font-family: 'Poppins', 'Helvetica Neue', 'Segoe UI', Helvetica, sans-serif;
sans-serif;
font-size: 15px; font-size: 15px;
font-weight: 300; font-weight: 300;
line-height: 26px; line-height: 26px;
margin: 0; margin: 0;
color: #1e293b; color: black;
padding: 4px 0px;
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
} }
pre { pre {
@@ -33,26 +34,41 @@ const withEmailTemplate = (content) =>
} }
table { table {
background-color: white;
border-radius: 4px;
padding: 2px 10px;
width: 100%; width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
} }
table td { table td {
padding: 5px; padding: 5px;
} }
table tr {
display: flex;
align-items: center;
flex-direction: row;
}
table td a {
display: flex;
align-items: center;
justify-content: center;
}
.socialicons { .socialicons {
max-width: 200px; max-width: 200px;
margin-left: auto;
margin-right: auto;
margin-top: 27px;
} }
.wrap { .wrap {
background-color: #f1f5f9;
padding: 30px; padding: 30px;
max-width: 525px; max-width: 525px;
margin: 0 auto; margin: 0 auto;
border-radius: 12px; border-radius: 12px;
font-weight: normal;
text-align: justify;
} }
.brandcolor { .brandcolor {
color: #00c4b8; color: #00c4b8;
} }
@@ -71,33 +87,37 @@ const withEmailTemplate = (content) =>
} }
.button { .button {
margin-top:12px; background-color: #0233bd;
background: #0233BD; color: white;
border-radius: 8px; width: 100%;
text-decoration: none !important; border-radius: 6px;
color: #fff !important; border: none;
font-weight: 500; font-weight: 600;
padding: 10px 30px; font-size: medium;
display: inline-block; padding: 16px 0;
font-size: 0.9em; margin: 20px 0;
}
.button:hover {
background: #0233BD;
} }
.footer { footer {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center; text-align: center;
font-size: 12px; font-size: 16px;
color: #cbd5e1; font-weight: 600;
color: white;
background-color: #0542cc;
} }
.footer a { footer a {
color: #cbd5e1; color: white;
margin-right: 5px; margin-right: 5px;
} }
.gutter { .gutter {
padding: 30px;
text-align: center; text-align: center;
padding: 5px;
border-bottom: 1px solid rgb(221, 208, 208);
} }
img { img {
@@ -110,10 +130,10 @@ const withEmailTemplate = (content) =>
} }
a { a {
color: #0233BD; color: #0233bd;
} }
a:hover { a:hover {
color: #0233BD; color: #0233bd;
} }
h1, h1,
h2, h2,
@@ -122,6 +142,9 @@ const withEmailTemplate = (content) =>
font-weight: 600; font-weight: 600;
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
body {
background-color: white;
}
.wrap { .wrap {
max-width: auto; max-width: auto;
} }
@@ -131,88 +154,89 @@ const withEmailTemplate = (content) =>
} }
</style> </style>
</head> </head>
<body <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 <div
class="wrap"
style=" style="
background-color: #f1f5f9; background-color: #fff;
padding: 30px; flex-direction: column;
justify-content: center;
align-items: center;
max-width: 525px; max-width: 525px;
margin: 0 auto;
border-radius: 12px;
" "
> >
${content} <div class="gutter">
</div> <a href="https://classroomio.com" target="_blank">
<img
<div src="https://tapaozmyjsuykgerrfkt.supabase.co/storage/v1/object/public/avatars/cio-logo-full.png"
class="footer" alt="ClassroomIO Logo"
style="text-align: center; font-size: 12px; color: #cbd5e1" /></a>
> </div>
<table class="socialicons"> <div class="wrap">
<tr> ${content}
<td> </div>
<a target="_blank" href="https://twitter.com/classroomio" <footer>
><img <p>Find us on</p>
title="X" <table class="socialicons">
src="https://tapaozmyjsuykgerrfkt.supabase.co/storage/v1/object/public/avatars/classroomio-x.png" <tr>
alt="X" <td>
width="32" <a target="_blank" href="https://www.facebook.com/classroomiohq"
/></a> ><img
</td> title="Facebook"
<td> src="https://brand.cdn.clsrio.com/socials/facebook.svg"
<a target="_blank" href="https://www.youtube.com/@ClassroomIO" alt="Facebook"
><img width="24"
title="Youtube" height="24"
src="https://tapaozmyjsuykgerrfkt.supabase.co/storage/v1/object/public/avatars/classroomio-youtube.png" /></a>
alt="Youtube" </td>
width="32" <td>
/></a> <a target="_blank" href="https://www.linkedin.com/company/classroomio/"
</td> ><img
<td> title="linkedin"
<a target="_blank" href="https://www.facebook.com/classroomiohq" src="https://brand.cdn.clsrio.com/socials/linkedin.svg"
><img alt="X"
title="Facebook" width="24"
src="https://tapaozmyjsuykgerrfkt.supabase.co/storage/v1/object/public/avatars/classroomio-facebook.png" height="24"
alt="Facebook" /></a>
width="32" </td>
/></a> <td>
</td> <a target="_blank" href="https://www.youtube.com/@ClassroomIO"
</tr> ><img
</table> title="Youtube"
<p style="padding-top: 8px; line-height: initial"> src="https://brand.cdn.clsrio.com/socials/youtube.svg"
ClassroomIO ${new Date().getFullYear()}. All rights reserved.<br /> alt="Youtube"
<a width="24"
style="text-decoration: none" height="24"
href="https://app.enzuzo.com/policies/tos/958fc978-5477-11ee-a03b-7b111830c594" /></a>
target="_blank" </td>
>Terms</a <td>
> <a target="_blank" href="https://twitter.com/classroomio"
| ><img
<a title="X"
style="text-decoration: none" src="https://brand.cdn.clsrio.com/socials/twitter.svg"
href="https://app.enzuzo.com/policies/privacy/958fc978-5477-11ee-a03b-7b111830c594" alt="X"
target="_blank" width="24"
>Privacy Policy</a height="24"
> /></a>
</p> </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> </div>
</body> </body>
</html> </html>
apps/dashboard/src/lib/components/Email/EmailTemplate.svelte
-47
View File
@@ -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>