Skip to content

Commit a0bde95

Browse files
limesdotpinklimesdotpink
committed
feat(mailer): improve support for gmail on mobile, minor fixes
1 parent 11bc868 commit a0bde95

File tree

2 files changed

+50
-35
lines changed

2 files changed

+50
-35
lines changed

‎src/assets/emails/genericTemplate.html‎

Lines changed: 32 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -35,17 +35,21 @@
3535
text-decoration: underline !important;
3636
}
3737
td.primary,
38-
td.primary a {
38+
td.primary a,
39+
td.primary span {
3940
background-color: #9D6FF3 !important;
4041
color: #fff !important;
4142
}
4243
td.secondary,
43-
td.secondary a {
44+
td.secondary a,
45+
td.secondary span {
4446
background-color: #D9C6FA !important;
4547
color: #45297A !important;
4648
}
4749
td.primary a,
48-
td.secondary a {
50+
td.secondary a,
51+
td.primary span,
52+
td.secondary span {
4953
text-decoration: none !important;
5054
}
5155
td.notice {
@@ -97,7 +101,9 @@
97101
color: #fff !important;
98102
}
99103
td.primary a,
100-
td.secondary a {
104+
td.secondary a,
105+
td.primary span,
106+
td.secondary span {
101107
text-decoration: none !important;
102108
}
103109
td.signature {
@@ -109,8 +115,8 @@
109115
td.notice a {
110116
color: #fff !important;
111117
}
112-
strong,
113-
b {
118+
td strong,
119+
td b {
114120
font-weight: 700 !important;
115121
color: #fff !important;
116122
}
@@ -144,19 +150,23 @@
144150
text-decoration: underline !important;
145151
}
146152
u+.email-body td.primary,
147-
u+.email-body td.primary a {
153+
u+.email-body td.primary a,
154+
u+.email-body td.primary span {
148155
background-color: #9D6FF3 !important;
149156
background-image: linear-gradient(#9D6FF3, #9D6FF3) !important;
150157
color: #fff !important;
151158
}
152159
u+.email-body td.secondary,
153-
u+.email-body td.secondary a {
160+
u+.email-body td.secondary a,
161+
u+.email-body td.secondary span {
154162
background-color: #373C65 !important;
155163
background-image: linear-gradient(#373C65, #373C65) !important;
156164
color: #fff !important;
157165
}
158166
u+.email-body td.primary a,
159-
u+.email-body td.secondary a {
167+
u+.email-body td.secondary a,
168+
u+.email-body td.primary span,
169+
u+.email-body td.secondary span {
160170
text-decoration: none !important;
161171
}
162172
u+.email-body td.notice {
@@ -183,14 +193,14 @@
183193
</head>
184194

185195
<body class="email-body" bgcolor="#1B1F3B"
186-
style="margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; font-family: Poppins, Arial, Helvetica, sans-serif;">
196+
style="margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-family:Poppins, Arial, Helvetica, sans-serif;">
187197
<div style="display:none;"><!--plainText--></div>
188198

189199
<table class="centerer" bgcolor="#1B1F3B" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%"
190-
style="max-width: 100%;">
200+
style="max-width:100%;">
191201
<tr>
192202
<td align="center">
193-
<table class="wrapper" bgcolor="#1B1F3B" style="font-family: Poppins, Arial, Helvetica, sans-serif;" border="0"
203+
<table class="wrapper" bgcolor="#1B1F3B" style="font-family:Poppins, Arial, Helvetica, sans-serif;" border="0"
194204
cellpadding="0" cellspacing="0" height="100%" width="600px">
195205
<tr>
196206
<td>
@@ -200,7 +210,7 @@
200210
<td>
201211
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
202212
<tr>
203-
<td height="36px" style="line-height: 36px;" width="100%">&nbsp;</td>
213+
<td style="line-height:4em;" width="100%">&nbsp;</td>
204214
</tr>
205215
<tr>
206216
<td>
@@ -214,11 +224,11 @@
214224
</td>
215225
</tr>
216226
<tr>
217-
<td width="100%" height="36px" style="line-height: 36px;">&nbsp;</td>
227+
<td width="100%" style="line-height:3em;">&nbsp;</td>
218228
</tr>
219229
<tr>
220230
<td>
221-
<table class="card" bgcolor="#23274a" style="color: #A1A8D9; border-radius: 10px;"
231+
<table class="card" bgcolor="#23274a" style="color:#A1A8D9;border-radius:10px;"
222232
border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
223233
<tr>
224234
<td width="36px" height="100%">&nbsp;</td>
@@ -228,7 +238,7 @@
228238
<!--innerHTML-->
229239

230240
<tr>
231-
<td width="100%" height="32px" style="line-height: 32px;">&nbsp;</td>
241+
<td width="100%" style="line-height:2em;">&nbsp;</td>
232242
</tr>
233243

234244
<tr>
@@ -241,7 +251,7 @@
241251
</td>
242252
</tr>
243253
<tr>
244-
<td width="100%" height="36px" style="line-height: 36px;">&nbsp;</td>
254+
<td width="100%" style="line-height:3em;">&nbsp;</td>
245255
</tr>
246256
</table>
247257
</td>
@@ -251,23 +261,23 @@
251261
</td>
252262
</tr>
253263
<tr>
254-
<td width="100%" height="18px" style="line-height: 18px;">&nbsp;</td>
264+
<td width="100%" style="line-height:1.5em;">&nbsp;</td>
255265
</tr>
256266
<tr>
257-
<td class="notice" style="color: #8990c1; font-size: 13px; text-align: center;">
267+
<td class="notice" style="color:#8990c1;font-size:13px;text-align:center;">
258268
<div class="gmail-s">
259269
<div class="gmail-d">
260270
Note: this email message was auto-generated, please do not respond. For further
261271
assistance, please join our <a href="https://discord.pretendo.network"
262-
style="text-decoration: none; color: #ffffff; ">Discord server</a> or make a
272+
style="text-decoration:none;color:#fff;">Discord server</a> or make a
263273
post on our <a href="https://forum.pretendo.network"
264-
style="text-decoration: none; color: #ffffff; ">Forum</a>.
274+
style="text-decoration:none;color:#fff;">Forum</a>.
265275
</div>
266276
</div>
267277
</td>
268278
</tr>
269279
<tr>
270-
<td width="100%" height="48px" style="line-height: 48px;">&nbsp;</td>
280+
<td width="100%" style="line-height:5em;">&nbsp;</td>
271281
</tr>
272282
</table>
273283
</td>

‎src/mailer.ts‎

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export class CreateEmail {
5151
private readonly componentArray: (emailComponent | paddingComponent | buttonComponent)[] = [];
5252

5353
/**
54-
* adds padding of the specified height in px
54+
* adds padding of the specified height in em units
5555
*/
5656
private addPadding(size: number): paddingComponent {
5757
return {
@@ -65,7 +65,7 @@ export class CreateEmail {
6565
*/
6666
public addHeader(text: string, replacements?: emailTextReplacements): this {
6767
const component: emailComponent = { type: 'header', text, replacements };
68-
this.componentArray.push(this.addPadding(36), component, this.addPadding(24));
68+
this.componentArray.push(this.addPadding(3), component, this.addPadding(2));
6969

7070
return this;
7171
}
@@ -75,7 +75,7 @@ export class CreateEmail {
7575
*/
7676
public addParagraph(text: string, replacements?: emailTextReplacements): this {
7777
const component: emailComponent = { type: 'paragraph', text, replacements };
78-
this.componentArray.push(component, this.addPadding(16));
78+
this.componentArray.push(component, this.addPadding(0.5));
7979

8080
return this;
8181
}
@@ -89,7 +89,7 @@ export class CreateEmail {
8989
*/
9090
public addButton(text: string, link?: string, primary: boolean = true): this {
9191
const component: buttonComponent = { type: 'button', text, link, primary };
92-
this.componentArray.push(this.addPadding(4), component, this.addPadding(32));
92+
this.componentArray.push(component, this.addPadding(2));
9393

9494
return this;
9595
}
@@ -107,7 +107,7 @@ export class CreateEmail {
107107
if (plainText) {
108108
c.text = c.text.replace(/{{pnid}}/g, value);
109109
} else {
110-
c.text = c.text.replace(/{{pnid}}/g, `<span class="shoutout" style="color: #cab1fb;">${value}</span>`);
110+
c.text = c.text.replace(/{{pnid}}/g, `<span class="shoutout" style="color:#cab1fb;">${value}</span>`);
111111
}
112112
}
113113
});
@@ -120,7 +120,7 @@ export class CreateEmail {
120120
if (plainText) {
121121
c.text = c.text.replace(linkRegex, `$<linkText> ($<linkAddress>)`);
122122
} else {
123-
c.text = c.text.replace(linkRegex, `<a href="$<linkAddress>" style="text-decoration: underline; font-weight: 700; color: #ffffff; "><u>$<linkText></u></a>`);
123+
c.text = c.text.replace(linkRegex, `<a href="$<linkAddress>" style="text-decoration:underline;font-weight:700;color:#fff;"><u>$<linkText></u></a>`);
124124
}
125125
}
126126
}
@@ -130,24 +130,29 @@ export class CreateEmail {
130130
let innerHTML = '';
131131

132132
this.componentArray.forEach((c) => {
133-
let el = '';
133+
let el = '&nbsp;';
134+
if (c.type !== 'padding') {
135+
el = this.addGmailDarkModeFix(c.text);
136+
}
134137
switch (c.type) {
135138
case 'padding':
136-
innerHTML += `\n<tr><td width="100%" height="${c.size}px" style="line-height: ${c.size}px;">&nbsp;</td></tr>`;
139+
innerHTML += `\n<tr><td width="100%" style="line-height:${c.size}em;">${el}</td></tr>`;
137140
break;
138141
case 'header':
139142
this.parseReplacements(c);
140-
el = this.addGmailDarkModeFix(c.text);
141-
innerHTML += `\n<tr style="font-size: 24px; font-weight: 700; color: #fff"><td class="header">${el}</td></tr>`;
143+
innerHTML += `\n<tr style="font-size:24px;font-weight:700;color:#fff"><td class="header">${el}</td></tr>`;
142144
break;
143145
case 'paragraph':
144146
this.parseReplacements(c);
145-
el = this.addGmailDarkModeFix(c.text);
146147
innerHTML += `\n<tr><td>${el}</td></tr>`;
147148
break;
148149
case 'button':
149-
el = this.addGmailDarkModeFix(c.text);
150-
innerHTML += `\n<tr><td ${c.primary ? 'class="primary" bgcolor="#673db6"' : 'class="secondary" bgcolor="#373C65"'} style="font-weight: 700; border-radius: 10px; padding: 12px" align="center"><a href="${c.link || ''}" style="color: #ffffff; " width="100%">${el}</a></td></tr>`;
150+
if (c.link) {
151+
el = `<a href="${c.link}" style="color:#fff;" width="100%">${el}</a>`;
152+
} else {
153+
el = `<span style="color:#fff;" width="100%">${el}</span>`;
154+
}
155+
innerHTML += `\n<tr><td ${c.primary ? 'class="primary" bgcolor="#673db6"' : 'class="secondary" bgcolor="#373C65"'} style="font-weight:700;border-radius:10px;padding:12px" align="center">${el}</td></tr>`;
151156
break;
152157
}
153158
});

0 commit comments

Comments
 (0)