From a0bde9538a4aa36ef1374f1142003e3ba56ff445 Mon Sep 17 00:00:00 2001 From: limes Date: Tue, 11 Nov 2025 01:25:55 +0100 Subject: [PATCH] feat(mailer): improve support for gmail on mobile, minor fixes --- src/assets/emails/genericTemplate.html | 54 +++++++++++++++----------- src/mailer.ts | 31 ++++++++------- 2 files changed, 50 insertions(+), 35 deletions(-) diff --git a/src/assets/emails/genericTemplate.html b/src/assets/emails/genericTemplate.html index c0539ea..4c28493 100644 --- a/src/assets/emails/genericTemplate.html +++ b/src/assets/emails/genericTemplate.html @@ -35,17 +35,21 @@ text-decoration: underline !important; } td.primary, - td.primary a { + td.primary a, + td.primary span { background-color: #9D6FF3 !important; color: #fff !important; } td.secondary, - td.secondary a { + td.secondary a, + td.secondary span { background-color: #D9C6FA !important; color: #45297A !important; } td.primary a, - td.secondary a { + td.secondary a, + td.primary span, + td.secondary span { text-decoration: none !important; } td.notice { @@ -97,7 +101,9 @@ color: #fff !important; } td.primary a, - td.secondary a { + td.secondary a, + td.primary span, + td.secondary span { text-decoration: none !important; } td.signature { @@ -109,8 +115,8 @@ td.notice a { color: #fff !important; } - strong, - b { + td strong, + td b { font-weight: 700 !important; color: #fff !important; } @@ -144,19 +150,23 @@ text-decoration: underline !important; } u+.email-body td.primary, - u+.email-body td.primary a { + u+.email-body td.primary a, + u+.email-body td.primary span { background-color: #9D6FF3 !important; background-image: linear-gradient(#9D6FF3, #9D6FF3) !important; color: #fff !important; } u+.email-body td.secondary, - u+.email-body td.secondary a { + u+.email-body td.secondary a, + u+.email-body td.secondary span { background-color: #373C65 !important; background-image: linear-gradient(#373C65, #373C65) !important; color: #fff !important; } u+.email-body td.primary a, - u+.email-body td.secondary a { + u+.email-body td.secondary a, + u+.email-body td.primary span, + u+.email-body td.secondary span { text-decoration: none !important; } u+.email-body td.notice { @@ -183,14 +193,14 @@ + 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;">
+ style="max-width:100%;">
- diff --git a/src/mailer.ts b/src/mailer.ts index 6f46b7b..e28b4d4 100644 --- a/src/mailer.ts +++ b/src/mailer.ts @@ -51,7 +51,7 @@ export class CreateEmail { private readonly componentArray: (emailComponent | paddingComponent | buttonComponent)[] = []; /** - * adds padding of the specified height in px + * adds padding of the specified height in em units */ private addPadding(size: number): paddingComponent { return { @@ -65,7 +65,7 @@ export class CreateEmail { */ public addHeader(text: string, replacements?: emailTextReplacements): this { const component: emailComponent = { type: 'header', text, replacements }; - this.componentArray.push(this.addPadding(36), component, this.addPadding(24)); + this.componentArray.push(this.addPadding(3), component, this.addPadding(2)); return this; } @@ -75,7 +75,7 @@ export class CreateEmail { */ public addParagraph(text: string, replacements?: emailTextReplacements): this { const component: emailComponent = { type: 'paragraph', text, replacements }; - this.componentArray.push(component, this.addPadding(16)); + this.componentArray.push(component, this.addPadding(0.5)); return this; } @@ -89,7 +89,7 @@ export class CreateEmail { */ public addButton(text: string, link?: string, primary: boolean = true): this { const component: buttonComponent = { type: 'button', text, link, primary }; - this.componentArray.push(this.addPadding(4), component, this.addPadding(32)); + this.componentArray.push(component, this.addPadding(2)); return this; } @@ -107,7 +107,7 @@ export class CreateEmail { if (plainText) { c.text = c.text.replace(/{{pnid}}/g, value); } else { - c.text = c.text.replace(/{{pnid}}/g, `${value}`); + c.text = c.text.replace(/{{pnid}}/g, `${value}`); } } }); @@ -120,7 +120,7 @@ export class CreateEmail { if (plainText) { c.text = c.text.replace(linkRegex, `$ ($)`); } else { - c.text = c.text.replace(linkRegex, `$`); + c.text = c.text.replace(linkRegex, `$`); } } } @@ -130,24 +130,29 @@ export class CreateEmail { let innerHTML = ''; this.componentArray.forEach((c) => { - let el = ''; + let el = ' '; + if (c.type !== 'padding') { + el = this.addGmailDarkModeFix(c.text); + } switch (c.type) { case 'padding': - innerHTML += `\n`; + innerHTML += `\n`; break; case 'header': this.parseReplacements(c); - el = this.addGmailDarkModeFix(c.text); - innerHTML += `\n`; + innerHTML += `\n`; break; case 'paragraph': this.parseReplacements(c); - el = this.addGmailDarkModeFix(c.text); innerHTML += `\n`; break; case 'button': - el = this.addGmailDarkModeFix(c.text); - innerHTML += `\n`; + if (c.link) { + el = `${el}`; + } else { + el = `${el}`; + } + innerHTML += `\n`; break; } });
@@ -200,7 +210,7 @@ - + - + @@ -251,23 +261,23 @@ - + - - +
  
@@ -214,11 +224,11 @@
  
- @@ -228,7 +238,7 @@ - + @@ -241,7 +251,7 @@ - +
 
  
  
  
+
Note: this email message was auto-generated, please do not respond. For further assistance, please join our Discord server or make a + style="text-decoration:none;color:#fff;">Discord server or make a post on our Forum. + style="text-decoration:none;color:#fff;">Forum.
  
 
${el}
${el}
${el}
${el}
${el}
${el}