Leahnaya/account
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/account.git synced 2026-03-21 17:44:49 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(mailer): improve support for gmail on mobile, minor fixes
Some checks are pending
Build and Publish Docker Image / Build and Publish Docker Image (amd64) (push) Waiting to run
Details
Build and Publish Docker Image / Build and Publish Docker Image (arm64) (push) Waiting to run
Details

Browse Source
This commit is contained in:
limes 2025-11-11 01:25:55 +01:00
parent 11bc868da3
commit a0bde9538a
2 changed files with 50 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/assets/emails/genericTemplate.html
View File

@ -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 @@
</head>
<body class="email-body" bgcolor="#1B1F3B"
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="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;">
<div style="display:none;"><!--plainText--></div>
<table class="centerer" bgcolor="#1B1F3B" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%"
style="max-width: 100%;">
style="max-width:100%;">
<tr>
<td align="center">
<table class="wrapper" bgcolor="#1B1F3B" style="font-family: Poppins, Arial, Helvetica, sans-serif;" border="0"
<table class="wrapper" bgcolor="#1B1F3B" style="font-family:Poppins, Arial, Helvetica, sans-serif;" border="0"
cellpadding="0" cellspacing="0" height="100%" width="600px">
<tr>
<td>
@ -200,7 +210,7 @@
<td>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr>
<td height="36px" style="line-height: 36px;" width="100%">&nbsp;</td>
<td style="line-height:4em;" width="100%">&nbsp;</td>
</tr>
<tr>
<td>
@ -214,11 +224,11 @@
</td>
</tr>
<tr>
<td width="100%" height="36px" style="line-height: 36px;">&nbsp;</td>
<td width="100%" style="line-height:3em;">&nbsp;</td>
</tr>
<tr>
<td>
<table class="card" bgcolor="#23274a" style="color: #A1A8D9; border-radius: 10px;"
<table class="card" bgcolor="#23274a" style="color:#A1A8D9;border-radius:10px;"
border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr>
<td width="36px" height="100%">&nbsp;</td>
@ -228,7 +238,7 @@
<!--innerHTML-->
<tr>
<td width="100%" height="32px" style="line-height: 32px;">&nbsp;</td>
<td width="100%" style="line-height:2em;">&nbsp;</td>
</tr>
<tr>
@ -241,7 +251,7 @@
</td>
</tr>
<tr>
<td width="100%" height="36px" style="line-height: 36px;">&nbsp;</td>
<td width="100%" style="line-height:3em;">&nbsp;</td>
</tr>
</table>
</td>
@ -251,23 +261,23 @@
</td>
</tr>
<tr>
<td width="100%" height="18px" style="line-height: 18px;">&nbsp;</td>
<td width="100%" style="line-height:1.5em;">&nbsp;</td>
</tr>
<tr>
<td class="notice" style="color: #8990c1; font-size: 13px; text-align: center;">
<td class="notice" style="color:#8990c1;font-size:13px;text-align:center;">
<div class="gmail-s">
<div class="gmail-d">
Note: this email message was auto-generated, please do not respond. For further
assistance, please join our <a href="https://discord.pretendo.network"
style="text-decoration: none; color: #ffffff; ">Discord server</a> or make a
style="text-decoration:none;color:#fff;">Discord server</a> or make a
post on our <a href="https://forum.pretendo.network"
style="text-decoration: none; color: #ffffff; ">Forum</a>.
style="text-decoration:none;color:#fff;">Forum</a>.
</div>
</div>
</td>
</tr>
<tr>
<td width="100%" height="48px" style="line-height: 48px;">&nbsp;</td>
<td width="100%" style="line-height:5em;">&nbsp;</td>
</tr>
</table>
</td>

31
src/mailer.ts
View File

@ -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, `<span class="shoutout" style="color: #cab1fb;">${value}</span>`);
c.text = c.text.replace(/{{pnid}}/g, `<span class="shoutout" style="color:#cab1fb;">${value}</span>`);
}
}
});
@ -120,7 +120,7 @@ export class CreateEmail {
if (plainText) {
c.text = c.text.replace(linkRegex, `$<linkText> ($<linkAddress>)`);
} else {
c.text = c.text.replace(linkRegex, `<a href="$<linkAddress>" style="text-decoration: underline; font-weight: 700; color: #ffffff; "><u>$<linkText></u></a>`);
c.text = c.text.replace(linkRegex, `<a href="$<linkAddress>" style="text-decoration:underline;font-weight:700;color:#fff;"><u>$<linkText></u></a>`);
}
}
}
@ -130,24 +130,29 @@ export class CreateEmail {
let innerHTML = '';
this.componentArray.forEach((c) => {
let el = '';
let el = '&nbsp;';
if (c.type !== 'padding') {
el = this.addGmailDarkModeFix(c.text);
}
switch (c.type) {
case 'padding':
innerHTML += `\n<tr><td width="100%" height="${c.size}px" style="line-height: ${c.size}px;">&nbsp;</td></tr>`;
innerHTML += `\n<tr><td width="100%" style="line-height:${c.size}em;">${el}</td></tr>`;
break;
case 'header':
this.parseReplacements(c);
el = this.addGmailDarkModeFix(c.text);
innerHTML += `\n<tr style="font-size: 24px; font-weight: 700; color: #fff"><td class="header">${el}</td></tr>`;
innerHTML += `\n<tr style="font-size:24px;font-weight:700;color:#fff"><td class="header">${el}</td></tr>`;
break;
case 'paragraph':
this.parseReplacements(c);
el = this.addGmailDarkModeFix(c.text);
innerHTML += `\n<tr><td>${el}</td></tr>`;
break;
case 'button':
el = this.addGmailDarkModeFix(c.text);
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>`;
if (c.link) {
el = `<a href="${c.link}" style="color:#fff;" width="100%">${el}</a>`;
} else {
el = `<span style="color:#fff;" width="100%">${el}</span>`;
}
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>`;
break;
}
});