backend/src/api/email/utils/layout.ts (view raw)
1export const getHTML = ({ htmlContent, htmlFooter, carosterLink }) => `
2<!doctype html>
3<html>
4 <body>
5 <div
6 style='background-color:#F5F5F5;color:#262626;font-family:"Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;font-size:16px;font-weight:400;letter-spacing:0.15008px;line-height:1.5;margin:0;padding:32px 0;min-height:100%;width:100%'
7 >
8 <table
9 align="center"
10 width="100%"
11 style="margin:0 auto;max-width:600px;background-color:#FFFFFF"
12 role="presentation"
13 cellspacing="0"
14 cellpadding="0"
15 border="0"
16 >
17 <tbody>
18 <tr style="width:100%">
19 <td>
20 <div
21 style="padding:16px 24px 16px 24px;background-color:#FFEB3B;text-align:center"
22 >
23 <a
24 href="${carosterLink}"
25 style="text-decoration:none"
26 target="_blank"
27 ><img
28 alt="Caroster link"
29 src="https://app.caroster.io/uploads/Caroster_logo1_cddd3057fc.png?updated_at=2022-09-12T08:11:11.735Z"
30 height="32"
31 style="height:32px;outline:none;border:none;text-decoration:none;vertical-align:middle;display:inline-block;max-width:100%"
32 /></a>
33 </div>
34 <div style="font-weight:normal;padding:16px 24px 16px 24px">
35 ${htmlContent}
36 </div>
37 <div style="background-color:#E5E5E5;padding:16px 8px 16px 8px">
38 <div
39 style="font-size:14px;font-weight:normal;padding:16px 24px 16px 24px"
40 >
41 ${htmlFooter}
42 </div>
43 <div style="padding:0px 0px 0px 12px">
44 <a
45 href="https://opencollective.com/caroster"
46 style="color:#171717;font-size:14px;font-weight:normal;background-color:#E5E5E5;border-radius:64px;display:inline-block;padding:8px 12px;text-decoration:none"
47 target="_blank"
48 ><span
49 ><!--[if mso
50 ]><i
51 style="letter-spacing: 12px;mso-font-width:-100%;mso-text-raise:18"
52 hidden
53 > </i
54 ><!
55 [endif]--></span
56 ><span>👉 Open collective</span
57 ><span
58 ><!--[if mso
59 ]><i
60 style="letter-spacing: 12px;mso-font-width:-100%"
61 hidden
62 > </i
63 ><!
64 [endif]--></span
65 ></a
66 >
67 </div>
68 </div>
69 </td>
70 </tr>
71 </tbody>
72 </table>
73 </div>
74 </body>
75</html>
76`;