Leahnaya/account
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/account.git synced 2026-04-26 08:16:15 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat(mailer): improve layout on gmail mobile

Browse Source
This commit is contained in:
limes 2025-11-12 05:15:14 +01:00
parent a0bde9538a
commit 17b294e20f
2 changed files with 30 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,12 +46,6 @@
background-color: #D9C6FA !important; background-color: #D9C6FA !important;
color: #45297A !important; color: #45297A !important;
} }
td.primary a,
td.secondary a,
td.primary span,
td.secondary span {
text-decoration: none !important;
}
td.notice { td.notice {
color: #c5adf2 !important; color: #c5adf2 !important;
} }
@ -59,8 +53,7 @@
color: #fff !important; color: #fff !important;
font-weight: 700 !important; font-weight: 700 !important;
} }
strong, td strong {
b {
font-weight: 700 !important; font-weight: 700 !important;
color: #9D6FF3 !important; color: #9D6FF3 !important;
} }
@ -100,12 +93,6 @@
background-color: #373C65 !important; background-color: #373C65 !important;
color: #fff !important; color: #fff !important;
} }
td.primary a,
td.secondary a,
td.primary span,
td.secondary span {
text-decoration: none !important;
}
td.signature { td.signature {
color: #A1A8D9 !important; color: #A1A8D9 !important;
} }
@ -126,6 +113,17 @@
} }
} }
td.primary a,
td.secondary a,
td.primary span,
td.secondary span,
u+.email-body td.primary a,
u+.email-body td.secondary a,
u+.email-body td.primary span,
u+.email-body td.secondary span {
text-decoration: none !important;
}
/* the following specifically targets gmail, because it doesn't support media queries and automatically inverts colors */ /* the following specifically targets gmail, because it doesn't support media queries and automatically inverts colors */
u+.email-body, u+.email-body,
u+.email-body table.centerer, u+.email-body table.centerer,
@ -145,7 +143,7 @@
color: #fff !important; color: #fff !important;
} }
u+.email-body td a { u+.email-body td a {
color: #673DB6 !important; color: #fff !important;
font-weight: 700 !important; font-weight: 700 !important;
text-decoration: underline !important; text-decoration: underline !important;
} }
@ -163,12 +161,6 @@
background-image: linear-gradient(#373C65, #373C65) !important; background-image: linear-gradient(#373C65, #373C65) !important;
color: #fff !important; color: #fff !important;
} }
u+.email-body td.primary 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 { u+.email-body td.notice {
color: #fff !important; color: #fff !important;
} }
@ -192,8 +184,9 @@
</style> </style>
</head> </head>
<body class="email-body" bgcolor="#1B1F3B" <body class="email-body" bgcolor="#1B1F3B" color="#A1A8D9"
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;color:#A1A8D9">
<div style="display:none;"><!--plainText--></div> <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%"
@ -206,7 +199,7 @@
<td> <td>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%"> <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr> <tr>
<td width="32px">&nbsp;</td> <td width="16px">&nbsp;</td>
<td> <td>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%"> <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr> <tr>
@ -264,7 +257,7 @@
<td width="100%" style="line-height:1.5em;">&nbsp;</td> <td width="100%" style="line-height:1.5em;">&nbsp;</td>
</tr> </tr>
<tr> <tr>
<td class="notice" style="color:#8990c1;font-size:13px;text-align:center;"> <td class="notice" style="color:#8990c1;text-align:center;font-size:14px;">
<div class="gmail-s"> <div class="gmail-s">
<div class="gmail-d"> <div class="gmail-d">
Note: this email message was auto-generated, please do not respond. For further Note: this email message was auto-generated, please do not respond. For further
@ -284,7 +277,7 @@
</tr> </tr>
</table> </table>
</td> </td>
<td width="32px">&nbsp;</td> <td width="16px">&nbsp;</td>
</tr> </tr>
</table> </table>
</td> </td>

15
src/mailer.ts
View File

@ -75,7 +75,7 @@ export class CreateEmail {
*/ */
public addParagraph(text: string, replacements?: emailTextReplacements): this { public addParagraph(text: string, replacements?: emailTextReplacements): this {
const component: emailComponent = { type: 'paragraph', text, replacements }; const component: emailComponent = { type: 'paragraph', text, replacements };
this.componentArray.push(component, this.addPadding(0.5)); this.componentArray.push(component, this.addPadding(1));
return this; return this;
} }
@ -118,9 +118,9 @@ export class CreateEmail {
if (linkRegex.test(c.text)) { if (linkRegex.test(c.text)) {
if (plainText) { if (plainText) {
c.text = c.text.replace(linkRegex, `$<linkText> ($<linkAddress>)`); c.text = c.text.replace(linkRegex, '$<linkText> ($<linkAddress>)');
} else { } else {
c.text = c.text.replace(linkRegex, `<a href="$<linkAddress>" style="text-decoration:underline;font-weight:700;color:#fff;"><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>');
} }
} }
} }
@ -129,8 +129,15 @@ export class CreateEmail {
public toHTML(): string { public toHTML(): string {
let innerHTML = ''; let innerHTML = '';
this.componentArray.forEach((c) => { this.componentArray.map((c, i) => {
let el = '&nbsp;'; let el = '&nbsp;';
/* double padding causes issues, and the signature already has padding, so if the last element
* is padding we just yeet it
*/
if (i === this.componentArray.length - 1 && c.type === 'padding') {
return;
}
if (c.type !== 'padding') { if (c.type !== 'padding') {
el = this.addGmailDarkModeFix(c.text); el = this.addGmailDarkModeFix(c.text);
} }