Skip to content

Commit e69699a

Browse files
author
Lasim
committed
style(all): update email templates for improved layout and styling
1 parent fa5a3ca commit e69699a

File tree

3 files changed

+77
-74
lines changed

3 files changed

+77
-74
lines changed

‎services/backend/src/email/templates/layouts/base.pug‎

Lines changed: 44 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,11 @@ html(lang="en")
3434
body {
3535
margin: 0 !important;
3636
padding: 0 !important;
37-
background-color: #f4f4f4;
38-
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
37+
background-color: #ffffff;
38+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
3939
font-size: 16px;
4040
line-height: 1.6;
41-
color: #333333;
41+
color: #1A1A1A;
4242
}
4343

4444
/* Container */
@@ -48,39 +48,39 @@ html(lang="en")
4848
background-color: #ffffff;
4949
}
5050

51-
/* Header */
52-
.header {
53-
background-color: #2563eb;
54-
padding: 20px;
55-
text-align: center;
56-
}
57-
.header h1 {
58-
color: #ffffff;
59-
margin: 0;
60-
font-size: 24px;
61-
font-weight: 600;
62-
}
51+
/* Header - now table-based */
6352

64-
/* Content */
65-
.content {
66-
padding: 40px 30px;
67-
}
68-
.content h1 {
69-
color: #1f2937;
70-
font-size: 28px;
71-
font-weight: 700;
72-
margin: 0 0 20px 0;
73-
line-height: 1.2;
74-
}
75-
.content h2 {
76-
color: #374151;
77-
font-size: 22px;
53+
/* Content styles matching Neon email */
54+
h2 {
55+
color: #111827;
56+
font-size: 1.5rem;
57+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
7858
font-weight: 600;
79-
margin: 30px 0 15px 0;
59+
padding: 0;
60+
margin-top: 1.8666667em;
61+
line-height: 1.3333333;
8062
}
81-
.content p {
82-
margin: 0 0 20px 0;
83-
color: #4b5563;
63+
p {
64+
margin-bottom: 1em;
65+
font-size: 14px;
66+
line-height: 24px;
67+
margin: 16px 0;
68+
color: #1A1A1A;
69+
margin-top: 1.3333333em;
70+
}
71+
ul {
72+
list-style-type: circle;
73+
padding-left: 1.5rem;
74+
color: #1A1A1A;
75+
font-size: 0.875rem;
76+
line-height: 24px;
77+
}
78+
li {
79+
margin: 0.6666667em 0;
80+
}
81+
a {
82+
color: #2563eb;
83+
text-decoration: underline;
8484
}
8585

8686
/* Buttons */
@@ -105,22 +105,7 @@ html(lang="en")
105105
background-color: #4b5563;
106106
}
107107

108-
/* Footer */
109-
.footer {
110-
background-color: #f9fafb;
111-
padding: 30px;
112-
text-align: center;
113-
border-top: 1px solid #e5e7eb;
114-
}
115-
.footer p {
116-
margin: 0 0 10px 0;
117-
font-size: 14px;
118-
color: #6b7280;
119-
}
120-
.footer a {
121-
color: #2563eb;
122-
text-decoration: none;
123-
}
108+
/* Footer - now table-based */
124109

125110
/* Utility classes */
126111
.text-center { text-align: center; }
@@ -150,13 +135,15 @@ html(lang="en")
150135
if preheader
151136
.preheader= preheader
152137

153-
table(role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%")
138+
table(role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size:16px;background-color:#ffffff")
154139
tr
155140
td
156-
.email-container
157-
include header.pug
158-
159-
.content
160-
block content
161-
162-
include footer.pug
141+
include header.pug
142+
143+
table(align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width:500px;min-width:280px;width:100%;margin-left:auto;margin-right:auto;border-collapse:collapse;border-spacing:0;padding-bottom:48px;padding-top:16px")
144+
tbody
145+
tr(style="width:100%")
146+
td
147+
block content
148+
149+
include footer.pug

‎services/backend/src/email/templates/layouts/footer.pug‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,28 @@
11
//- Email footer component
2-
.footer
3-
p
4-
| © #{currentYear} #{appName || 'DeployStack'}. All rights reserved.
5-
6-
p
7-
| You received this email because you have an account with us.
8-
br
9-
if supportEmail
10-
| If you have any questions, please contact us at
11-
a(href=`mailto:${supportEmail}`)= supportEmail
12-
else
13-
| If you have any questions, please contact our support team.
14-
15-
p.text-muted.mb-0
16-
| This email was sent from an automated system. Please do not reply to this email.
2+
table(align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin:60px 0")
3+
tbody
4+
tr
5+
td
6+
table(align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width:37.5em")
7+
tbody
8+
tr(style="width:100%")
9+
td
10+
table(align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:50%")
11+
tbody(style="width:100%")
12+
tr(style="width:100%")
13+
td(align="center" style="width:25%")
14+
a(href="https://x.com/DeployStack" style="color:#000;text-decoration:underline;text-decoration-color:#00E699;font-size:14px;font-weight:500;margin:0 10px" target="_blank") X
15+
td(align="center" style="width:25%")
16+
a(href="https://www.youtube.com/deploystack" style="color:#000;text-decoration:underline;text-decoration-color:#00E699;font-size:14px;font-weight:500;margin:0 10px" target="_blank") YouTube
17+
td(align="center" style="width:25%")
18+
a(href="https://github.com/deploystackio" style="color:#000;text-decoration:underline;text-decoration-color:#00E699;font-size:14px;font-weight:500;margin:0 10px" target="_blank") GitHub
19+
td(align="center" style="width:25%")
20+
a(href="https://discord.com/invite/42Ce3S7b3b" style="color:#000;text-decoration:underline;text-decoration-color:#00E699;font-size:14px;font-weight:500;margin:0 10px" target="_blank") Discord
21+
22+
p(style="font-size:0.75rem;line-height:1.375rem;margin:16px 0;color:#898989;margin-top:0.75rem;margin-bottom:1.5rem;text-align:center")
23+
span DeployStack.io
24+
br
25+
br
26+
| You received this email because you have an account with us.
27+
br
28+
| This email was sent from an automated system. Please do not reply.

‎services/backend/src/email/templates/layouts/header.pug‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
//- Email header component
2-
.header
3-
h1= appName || 'DeployStack'
2+
table(align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width:500px;min-width:280px;width:100%;margin-left:auto;margin-right:auto;border-collapse:collapse;border-spacing:0;padding-bottom:48px;padding-top:16px")
3+
tbody
4+
tr(style="width:100%")
5+
td
6+
a(href="https://deploystack.io" target="_blank")
7+
img(src="https://deploystack.io/img/deploystack-long-mail.png" alt="DeployStack Logo" height="28" style="display:block;outline:none;border:none;text-decoration:none;margin:26px auto")

0 commit comments

Comments
 (0)