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): fix theme on gmail
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-10 21:38:16 +01:00
parent e848cc5f35
commit 11bc868da3
2 changed files with 119 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,7 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" lang="en">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
lang="en">
<html lang="en">
<head>
<meta name="color-scheme" content="light dark">
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
@ -8,7 +10,7 @@
:root {
color-scheme: light dark;
supported-color-schemes:light dark;
supported-color-schemes: light dark;
}
@media (prefers-color-scheme: light) {
@ -32,15 +34,18 @@
font-weight: 700 !important;
text-decoration: underline !important;
}
td.primary, td.primary a {
td.primary,
td.primary a {
background-color: #9D6FF3 !important;
color: #fff !important;
}
td.secondary, td.secondary a {
td.secondary,
td.secondary a {
background-color: #D9C6FA !important;
color: #45297A !important;
}
td.primary a, td.secondary a {
td.primary a,
td.secondary a {
text-decoration: none !important;
}
td.notice {
@ -50,7 +55,8 @@
color: #fff !important;
font-weight: 700 !important;
}
strong, b {
strong,
b {
font-weight: 700 !important;
color: #9D6FF3 !important;
}
@ -90,7 +96,8 @@
background-color: #373C65 !important;
color: #fff !important;
}
td.primary a, td.secondary a {
td.primary a,
td.secondary a {
text-decoration: none !important;
}
td.signature {
@ -102,7 +109,8 @@
td.notice a {
color: #fff !important;
}
strong, b {
strong,
b {
font-weight: 700 !important;
color: #fff !important;
}
@ -111,16 +119,79 @@
content: url("https://assets.pretendo.cc/images/wordmark-purple-white.png") !important;
}
}
/* the following specifically targets gmail, because it doesn't support media queries and automatically inverts colors */
u+.email-body,
u+.email-body table.centerer,
u+.email-body table.wrapper {
background-color: #1B1F3B !important;
background-image: linear-gradient(#1B1F3B, #1B1F3B) !important;
color: #fff !important;
}
u+.email-body table.card {
background-color: #23274A !important;
background-image: linear-gradient(#23274A, #23274A) !important;
}
u+.email-body span.shoutout {
color: #fff !important;
}
u+.email-body td {
color: #fff !important;
}
u+.email-body td a {
color: #673DB6 !important;
font-weight: 700 !important;
text-decoration: underline !important;
}
u+.email-body td.primary,
u+.email-body td.primary a {
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 {
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 {
text-decoration: none !important;
}
u+.email-body td.notice {
color: #fff !important;
}
u+.email-body td.notice a {
color: #fff !important;
font-weight: 700 !important;
}
u+.email-body strong,
u+.email-body b {
font-weight: 700 !important;
color: #fff !important;
}
u+.email-body .gmail-s {
background: #000 !important;
mix-blend-mode: screen !important;
}
u+.email-body .gmail-d {
background: #000 !important;
mix-blend-mode: difference !important;
}
</style>
</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;">
<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;">
<div style="display:none;"><!--plainText--></div>
<table class="centerer" bgcolor="#1B1F3B" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<table class="centerer" bgcolor="#1B1F3B" border="0" cellpadding="0" cellspacing="0" height="100%" 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" cellpadding="0" cellspacing="0" height="100%" width="600px">
<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>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
@ -137,8 +208,9 @@
<tr>
<td>
<a href="https://pretendo.network">
<img class="logo" width="auto" height="48px" src="https://assets.pretendo.cc/images/wordmark-purple-white.png" alt="Pretendo">
</a>
<img class="logo" width="auto" height="48px"
src="https://assets.pretendo.cc/images/wordmark-purple-white.png" alt="Pretendo">
</a>
</td>
</tr>
<tr>
@ -146,7 +218,8 @@
</tr>
<tr>
<td>
<table class="card" bgcolor="#23274a" style="color: #A1A8D9; border-radius: 10px;" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<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>
<td>
@ -154,11 +227,17 @@
<!--innerHTML-->
<tr><td width="100%" height="32px" style="line-height: 32px;">&nbsp;</td></tr>
<tr>
<td width="100%" height="32px" style="line-height: 32px;">&nbsp;</td>
</tr>
<tr>
<td align="right" class="signature">
The Pretendo Network team
<div class="gmail-s">
<div class="gmail-d">
The Pretendo Network team
</div>
</div>
</td>
</tr>
<tr>
@ -176,7 +255,15 @@
</tr>
<tr>
<td class="notice" style="color: #8990c1; font-size: 13px; text-align: center;">
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 post on our <a href="https://forum.pretendo.network" style="text-decoration: none; color: #ffffff; ">Forum</a>.
<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
post on our <a href="https://forum.pretendo.network"
style="text-decoration: none; color: #ffffff; ">Forum</a>.
</div>
</div>
</td>
</tr>
<tr>
@ -196,5 +283,7 @@
</td>
</tr>
</table>
</body>
</html>

14
src/mailer.ts
View File

@ -94,6 +94,10 @@ export class CreateEmail {
return this;
}
private addGmailDarkModeFix(el: string): string {
return `<div class="gmail-s"><div class="gmail-d">${el}</div></div>`;
}
// parses pnid name and links. set the plaintext bool (false by default) to use no html
private parseReplacements(c: emailComponent, plainText: boolean = false): void {
// for now only replaces the pnid for shoutouts. could easily be expanded to add more.
@ -126,20 +130,24 @@ export class CreateEmail {
let innerHTML = '';
this.componentArray.forEach((c) => {
let el = '';
switch (c.type) {
case 'padding':
innerHTML += `\n<tr><td width="100%" height="${c.size}px" style="line-height: ${c.size}px;">&nbsp;</td></tr>`;
break;
case 'header':
this.parseReplacements(c);
innerHTML += `\n<tr style="font-size: 24px; font-weight: 700; color: #fff"><td class="header">${c.text}</td></tr>`;
el = this.addGmailDarkModeFix(c.text);
innerHTML += `\n<tr style="font-size: 24px; font-weight: 700; color: #fff"><td class="header">${el}</td></tr>`;
break;
case 'paragraph':
this.parseReplacements(c);
innerHTML += `\n<tr><td>${c.text}</td></tr>`;
el = this.addGmailDarkModeFix(c.text);
innerHTML += `\n<tr><td>${el}</td></tr>`;
break;
case 'button':
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%">${c.text}</a></td></tr>`;
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>`;
break;
}
});