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 <style type="text/css">
19 a {
20 color: #009688;
21 }
22 </style>
23 <tr style="width:100%">
24 <td>
25 <div
26 style="padding:16px 24px 16px 24px;background-color:#FFEB3B;text-align:center"
27 >
28 <img
29 alt="Caroster"
30 src="https://app.caroster.io/uploads/Caroster_logo1_cddd3057fc.png?updated_at=2022-09-12T08:11:11.735Z"
31 height="32"
32 style="height:32px;outline:none;border:none;text-decoration:none;vertical-align:middle;display:inline-block;max-width:100%"
33 />
34 </div>
35 <div style="font-weight:normal;padding:16px 24px 16px 24px">
36 ${htmlContent}
37 </div>
38 <div style="background-color:#E5E5E5;padding:16px 24px 16px 24px">
39 <div style="font-weight:normal;padding:16px 24px 16px 24px">
40 ${htmlFooter}
41 </div>
42 <div style="padding:0px 0px 0px 12px">
43 <a
44 href="https://opencollective.com/caroster"
45 style="color:#171717;font-size:16px;font-weight:bold;background-color:#E5E5E5;border-radius:64px;display:inline-block;padding:8px 12px;text-decoration:none"
46 target="_blank"
47 ><span
48 ><!--[if mso
49 ]><i
50 style="letter-spacing: 12px;mso-font-width:-100%;mso-text-raise:18"
51 hidden
52 > </i
53 ><!
54 [endif]--></span
55 ><span>👉 Open collective</span
56 ><span
57 ><!--[if mso
58 ]><i
59 style="letter-spacing: 12px;mso-font-width:-100%"
60 hidden
61 > </i
62 ><!
63 [endif]--></span
64 ></a
65 >
66 </div>
67 <div style="text-align:center;padding:16px 24px 16px 24px">
68 <a
69 href="${carosterLink}"
70 style="color:#FFFFFF;font-size:16px;font-weight:bold;background-color:#009688;border-radius:4px;display:block;padding:12px 20px;text-decoration:none"
71 target="_blank"
72 ><span
73 ><!--[if mso
74 ]><i
75 style="letter-spacing: 20px;mso-font-width:-100%;mso-text-raise:30"
76 hidden
77 > </i
78 ><!
79 [endif]--></span
80 ><span>Caroster.io</span
81 ><span
82 ><!--[if mso
83 ]><i
84 style="letter-spacing: 20px;mso-font-width:-100%"
85 hidden
86 > </i
87 ><!
88 [endif]--></span
89 ></a
90 >
91 </div>
92 </div>
93 </td>
94 </tr>
95 </tbody>
96 </table>
97 </div>
98 </body>
99</html>
100`;