Skip to content

Commit 17b294e

Browse files
limesdotpinklimesdotpink
committed
feat(mailer): improve layout on gmail mobile
1 parent a0bde95 commit 17b294e

File tree

2 files changed

+30
-30
lines changed

2 files changed

+30
-30
lines changed

‎src/assets/emails/genericTemplate.html‎

Lines changed: 19 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -46,21 +46,14 @@
4646
background-color: #D9C6FA !important;
4747
color: #45297A !important;
4848
}
49-
td.primary a,
50-
td.secondary a,
51-
td.primary span,
52-
td.secondary span {
53-
text-decoration: none !important;
54-
}
5549
td.notice {
5650
color: #c5adf2 !important;
5751
}
5852
td.notice a {
5953
color: #fff !important;
6054
font-weight: 700 !important;
6155
}
62-
strong,
63-
b {
56+
td strong {
6457
font-weight: 700 !important;
6558
color: #9D6FF3 !important;
6659
}
@@ -100,12 +93,6 @@
10093
background-color: #373C65 !important;
10194
color: #fff !important;
10295
}
103-
td.primary a,
104-
td.secondary a,
105-
td.primary span,
106-
td.secondary span {
107-
text-decoration: none !important;
108-
}
10996
td.signature {
11097
color: #A1A8D9 !important;
11198
}
@@ -126,6 +113,17 @@
126113
}
127114
}
128115

116+
td.primary a,
117+
td.secondary a,
118+
td.primary span,
119+
td.secondary span,
120+
u+.email-body td.primary a,
121+
u+.email-body td.secondary a,
122+
u+.email-body td.primary span,
123+
u+.email-body td.secondary span {
124+
text-decoration: none !important;
125+
}
126+
129127
/* the following specifically targets gmail, because it doesn't support media queries and automatically inverts colors */
130128
u+.email-body,
131129
u+.email-body table.centerer,
@@ -145,7 +143,7 @@
145143
color: #fff !important;
146144
}
147145
u+.email-body td a {
148-
color: #673DB6 !important;
146+
color: #fff !important;
149147
font-weight: 700 !important;
150148
text-decoration: underline !important;
151149
}
@@ -163,12 +161,6 @@
163161
background-image: linear-gradient(#373C65, #373C65) !important;
164162
color: #fff !important;
165163
}
166-
u+.email-body td.primary a,
167-
u+.email-body td.secondary a,
168-
u+.email-body td.primary span,
169-
u+.email-body td.secondary span {
170-
text-decoration: none !important;
171-
}
172164
u+.email-body td.notice {
173165
color: #fff !important;
174166
}
@@ -192,8 +184,9 @@
192184
</style>
193185
</head>
194186

195-
<body class="email-body" bgcolor="#1B1F3B"
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;">
187+
<body class="email-body" bgcolor="#1B1F3B" color="#A1A8D9"
188+
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">
189+
197190
<div style="display:none;"><!--plainText--></div>
198191

199192
<table class="centerer" bgcolor="#1B1F3B" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%"
@@ -206,7 +199,7 @@
206199
<td>
207200
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
208201
<tr>
209-
<td width="32px">&nbsp;</td>
202+
<td width="16px">&nbsp;</td>
210203
<td>
211204
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
212205
<tr>
@@ -264,7 +257,7 @@
264257
<td width="100%" style="line-height:1.5em;">&nbsp;</td>
265258
</tr>
266259
<tr>
267-
<td class="notice" style="color:#8990c1;font-size:13px;text-align:center;">
260+
<td class="notice" style="color:#8990c1;text-align:center;font-size:14px;">
268261
<div class="gmail-s">
269262
<div class="gmail-d">
270263
Note: this email message was auto-generated, please do not respond. For further
@@ -284,7 +277,7 @@
284277
</tr>
285278
</table>
286279
</td>
287-
<td width="32px">&nbsp;</td>
280+
<td width="16px">&nbsp;</td>
288281
</tr>
289282
</table>
290283
</td>

‎src/mailer.ts‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -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(0.5));
78+
this.componentArray.push(component, this.addPadding(1));
7979

8080
return this;
8181
}
@@ -118,9 +118,9 @@ export class CreateEmail {
118118

119119
if (linkRegex.test(c.text)) {
120120
if (plainText) {
121-
c.text = c.text.replace(linkRegex, `$<linkText> ($<linkAddress>)`);
121+
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:#fff;"><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
}
@@ -129,8 +129,15 @@ export class CreateEmail {
129129
public toHTML(): string {
130130
let innerHTML = '';
131131

132-
this.componentArray.forEach((c) => {
132+
this.componentArray.map((c, i) => {
133133
let el = '&nbsp;';
134+
135+
/* double padding causes issues, and the signature already has padding, so if the last element
136+
* is padding we just yeet it
137+
*/
138+
if (i === this.componentArray.length - 1 && c.type === 'padding') {
139+
return;
140+
}
134141
if (c.type !== 'padding') {
135142
el = this.addGmailDarkModeFix(c.text);
136143
}

0 commit comments

Comments
 (0)