Skip to content
This repository was archived by the owner on Jun 15, 2026. It is now read-only.

Commit 0471310

Browse files
RMCamposRMCampos
committed
feat: update mailgun templates to match the app ui
1 parent 7ffbb4c commit 0471310

4 files changed

Lines changed: 651 additions & 416 deletions

File tree

‎mailgun-templates/email_changed.html‎

Lines changed: 171 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,175 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Email Changed</title>
7-
<style>
8-
body {
9-
margin: 0;
10-
padding: 0;
11-
background-color: #f4f6f8;
12-
font-family: Arial, Helvetica, sans-serif;
13-
color: #1f2937;
14-
}
15-
16-
.wrapper {
17-
width: 100%;
18-
table-layout: fixed;
19-
background-color: #f4f6f8;
20-
padding: 24px 12px;
21-
}
22-
23-
.card {
24-
width: 100%;
25-
max-width: 600px;
26-
margin: 0 auto;
27-
background: #ffffff;
28-
border: 1px solid #e5e7eb;
29-
border-radius: 10px;
30-
overflow: hidden;
31-
}
32-
33-
.header {
34-
padding: 20px 24px;
35-
background: #111827;
36-
color: #ffffff;
37-
font-size: 20px;
38-
font-weight: 700;
39-
}
40-
41-
.content {
42-
padding: 24px;
43-
font-size: 16px;
44-
line-height: 1.5;
45-
}
46-
47-
.change-box {
48-
margin: 16px 0;
49-
padding: 14px;
50-
border: 1px solid #d1d5db;
51-
border-radius: 8px;
52-
background: #f9fafb;
53-
font-size: 14px;
54-
line-height: 1.6;
55-
}
56-
57-
.label {
58-
color: #4b5563;
59-
font-weight: 700;
60-
}
61-
62-
.value {
63-
color: #111827;
64-
word-break: break-word;
65-
}
66-
67-
.footer {
68-
padding: 18px 24px 24px;
69-
font-size: 13px;
70-
line-height: 1.5;
71-
color: #6b7280;
72-
}
73-
74-
@media only screen and (max-width: 600px) {
75-
.wrapper {
76-
padding: 16px 8px;
77-
}
78-
79-
.header,
80-
.content,
81-
.footer {
82-
padding-left: 16px;
83-
padding-right: 16px;
84-
}
85-
}
86-
</style>
87-
</head>
88-
<body>
89-
<div class="wrapper">
90-
<div class="card">
91-
<div class="header">Your email was changed</div>
92-
<div class="content">
93-
<p>Hello,</p>
94-
<p>We are confirming that the email address on your account was updated.</p>
95-
96-
<div class="change-box">
97-
<div><span class="label">Old email:</span> <span class="value">{{ EMAIL_FROM }}</span></div>
98-
<div><span class="label">New email:</span> <span class="value">{{ EMAIL_TO }}</span></div>
99-
</div>
100-
101-
<p>If you made this change, no further action is needed.</p>
102-
<p>If you did not make this change, please secure your account immediately and contact support at <a href="mailto:ricardompcampos@gmail.com">ricardompcampos@gmail.com</a>.</p>
103-
</div>
104-
<div class="footer">
105-
This is an automatic notification, please do not reply.
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Email Changed</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
padding: 0;
11+
background-color: #e6f5e9;
12+
font-family: 'Poppins', 'Segoe UI', Arial, Helvetica, sans-serif;
13+
color: #233c46;
14+
}
15+
16+
table {
17+
border-spacing: 0;
18+
border-collapse: collapse;
19+
}
20+
21+
.wrapper {
22+
width: 100%;
23+
background-color: #e6f5e9;
24+
padding: 24px 12px;
25+
}
26+
27+
.card {
28+
width: 100%;
29+
max-width: 620px;
30+
margin: 0 auto;
31+
background-color: #ffffff;
32+
border: 1px solid #d9eadf;
33+
border-radius: 8px;
34+
overflow: hidden;
35+
box-shadow: 0 8px 24px rgba(35, 60, 70, 0.08);
36+
}
37+
38+
.header {
39+
padding: 18px 24px;
40+
background-color: #233c46;
41+
border-top: 4px solid #2eb745;
42+
color: #ffffff;
43+
}
44+
45+
.brand {
46+
margin: 0;
47+
font-size: 12px;
48+
letter-spacing: 1px;
49+
font-weight: 600;
50+
opacity: 0.9;
51+
}
52+
53+
.title {
54+
margin: 8px 0 0;
55+
font-size: 22px;
56+
font-weight: 700;
57+
line-height: 1.3;
58+
}
59+
60+
.content {
61+
padding: 24px;
62+
font-size: 16px;
63+
line-height: 1.6;
64+
}
65+
66+
.content p {
67+
margin: 0 0 16px;
68+
}
69+
70+
.change-box {
71+
margin: 0 0 20px;
72+
padding: 14px;
73+
background-color: #f7fbf8;
74+
border: 1px solid #d9eadf;
75+
border-radius: 4px;
76+
}
77+
78+
.change-row {
79+
margin: 0 0 8px;
80+
font-size: 14px;
81+
color: #4c6169;
82+
}
83+
84+
.change-row:last-child {
85+
margin-bottom: 0;
86+
}
87+
88+
.label {
89+
display: inline-block;
90+
min-width: 78px;
91+
font-weight: 700;
92+
}
93+
94+
.value {
95+
color: #233c46;
96+
word-break: break-word;
97+
}
98+
99+
.link {
100+
color: #2eb745;
101+
}
102+
103+
.footer {
104+
padding: 18px 24px 24px;
105+
font-size: 13px;
106+
line-height: 1.6;
107+
color: #5f7178;
108+
}
109+
110+
@media only screen and (max-width: 600px) {
111+
.wrapper {
112+
padding: 16px 8px;
113+
}
114+
115+
.header,
116+
.content,
117+
.footer {
118+
padding-left: 16px;
119+
padding-right: 16px;
120+
}
121+
122+
.title {
123+
font-size: 20px;
124+
}
125+
126+
.label {
127+
min-width: 72px;
128+
}
129+
}
130+
</style>
131+
</head>
132+
<body>
133+
<table role="presentation" class="wrapper" width="100%">
134+
<tr>
135+
<td align="center">
136+
<table role="presentation" class="card" width="100%">
137+
<tr>
138+
<td class="header">
139+
<p class="brand">TASKNOTE</p>
140+
<p class="title">Your email was changed</p>
141+
</td>
142+
</tr>
143+
<tr>
144+
<td class="content">
145+
<p>Hello,</p>
146+
<p>We are confirming that the email address on your Tasknote account was updated.</p>
147+
148+
<div class="change-box">
149+
<p class="change-row">
150+
<span class="label">Old email:</span> <span class="value">{{ EMAIL_FROM }}</span>
151+
</p>
152+
<p class="change-row">
153+
<span class="label">New email:</span> <span class="value">{{ EMAIL_TO }}</span>
154+
</p>
106155
</div>
107-
</div>
108-
</div>
109-
</body>
156+
157+
<p>If you made this change, no further action is needed.</p>
158+
<p>
159+
If you did not make this change, secure your account immediately and contact
160+
<a class="link" href="mailto:ricardompcampos@gmail.com">ricardompcampos@gmail.com</a>.
161+
</p>
162+
</td>
163+
</tr>
164+
<tr>
165+
<td class="footer">
166+
This is an automatic message from Tasknote, please do not reply.<br />
167+
Need help? Contact <a class="link" href="mailto:ricardompcampos@gmail.com">ricardompcampos@gmail.com</a>.
168+
</td>
169+
</tr>
170+
</table>
171+
</td>
172+
</tr>
173+
</table>
174+
</body>
110175
</html>

0 commit comments

Comments
 (0)