Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 290b7d8

Browse files
LasimLasim
committed
style(backend): improve email template styles and layout
1 parent bd3f8cd commit 290b7d8

File tree

3 files changed

+139
-120
lines changed

3 files changed

+139
-120
lines changed

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

Lines changed: 109 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,16 @@ html(lang="en")
1313
.preheader { display: none !important; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0; }
1414
style.
1515
/* Reset styles */
16+
*, *::after, *::before {
17+
box-sizing: border-box;
18+
}
1619
body, table, td, p, a, li, blockquote {
1720
-webkit-text-size-adjust: 100%;
1821
-ms-text-size-adjust: 100%;
1922
}
23+
table {
24+
border-spacing: 0;
25+
}
2026
table, td {
2127
mso-table-lspace: 0pt;
2228
mso-table-rspace: 0pt;
@@ -29,130 +35,147 @@ html(lang="en")
2935
outline: none;
3036
text-decoration: none;
3137
}
32-
38+
3339
/* Base styles */
3440
body {
3541
margin: 0 !important;
3642
padding: 0 !important;
37-
background-color: #ffffff;
38-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
39-
font-size: 16px;
40-
line-height: 1.6;
41-
color: #1A1A1A;
42-
}
43-
44-
/* Container */
45-
.email-container {
46-
max-width: 600px;
47-
margin: 0 auto;
48-
background-color: #ffffff;
49-
}
50-
51-
/* Header - now table-based */
52-
53-
/* Content styles matching Neon email */
43+
width: 100% !important;
44+
background: #F9F8F9;
45+
font-family: Inter, "SF Pro", -apple-system, BlinkMacSystemFont, ui-sans-serif, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
46+
font-size: 15px;
47+
line-height: 1.4;
48+
color: #3C4149;
49+
min-width: 100%;
50+
}
51+
52+
/* Typography */
53+
h1, h2, h3, h4, h5, h6 {
54+
font-family: "Inter Display", Inter, "SF Pro", -apple-system, BlinkMacSystemFont, ui-sans-serif, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
55+
}
56+
h1 {
57+
font-size: 24px;
58+
line-height: 1.2;
59+
font-weight: 700;
60+
margin-top: 0;
61+
margin-bottom: 24px;
62+
color: #282A30;
63+
}
5464
h2 {
55-
color: #111827;
56-
font-size: 1.5rem;
57-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
65+
font-size: 20px;
66+
line-height: 1.3;
5867
font-weight: 600;
59-
padding: 0;
60-
margin-top: 1.8666667em;
61-
line-height: 1.3333333;
68+
margin-top: 24px;
69+
margin-bottom: 16px;
70+
color: #282A30;
6271
}
6372
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;
73+
margin-top: 0;
74+
margin-bottom: 16px;
75+
font-size: 15px;
76+
line-height: 1.4;
77+
color: #3C4149;
78+
}
79+
p > strong {
80+
color: #282A30;
81+
}
82+
p:last-child {
83+
margin-bottom: 0;
84+
}
85+
ul, ol {
86+
margin-top: 16px;
87+
margin-bottom: 16px;
88+
padding-left: 16px;
7789
}
78-
li {
79-
margin: 0.6666667em 0;
90+
ul li, ol li {
91+
margin-top: 6px;
92+
margin-left: 0;
8093
}
8194
a {
82-
color: #0f766e;
83-
text-decoration: underline;
95+
color: #6666FF;
96+
text-decoration: none;
8497
}
85-
a:hover {
86-
color: #115e59;
98+
99+
/* Section dividers */
100+
hr {
101+
display: inline-block;
102+
background: #EFF1F4;
103+
margin-top: 24px;
104+
width: 42px;
105+
min-height: 1px;
106+
border: none;
87107
}
88-
108+
89109
/* Buttons */
90110
.button {
91111
display: inline-block;
92-
padding: 14px 28px;
93-
background-color: #0f766e;
112+
padding: 12px 16px;
94113
color: #ffffff !important;
114+
background: #5E6AD2;
115+
border-radius: 5px;
116+
font-size: 13px;
117+
line-height: 1.2;
118+
font-weight: 500;
95119
text-decoration: none;
96-
border-radius: 6px;
97-
font-weight: 600;
98-
margin: 20px 0;
99-
text-align: center;
120+
cursor: pointer;
121+
margin-top: 8px;
122+
margin-bottom: 24px;
100123
}
101124
.button:hover {
102-
background-color: #115e59;
103-
}
104-
.button-secondary {
105-
background-color: #6b7280;
106-
}
107-
.button-secondary:hover {
108-
background-color: #4b5563;
125+
background: #4E5AC2;
109126
}
110-
.button-destructive {
111-
background-color: #dc2626;
127+
128+
/* Content card */
129+
.content-card {
130+
border: 1px solid #EFF1F4;
131+
border-radius: 5px;
132+
padding: 32px 28px 24px 28px;
133+
background: #ffffff;
134+
color: #3C4149;
112135
}
113-
.button-destructive:hover {
114-
background-color: #b91c1c;
136+
137+
/* Link styling */
138+
.section-link {
139+
font-size: 15px;
140+
font-weight: 500;
141+
line-height: 24px;
142+
padding: 0px 16px 20px 0px;
115143
}
116-
117-
/* Footer - now table-based */
118-
144+
119145
/* Utility classes */
120146
.text-center { text-align: center; }
121147
.text-muted { color: #6b7280; }
122-
.mb-0 { margin-bottom: 0 !important; }
123-
.mt-0 { margin-top: 0 !important; }
124-
148+
125149
/* Responsive */
126150
@media only screen and (max-width: 600px) {
127-
.email-container {
128-
width: 100% !important;
129-
}
130-
.content {
131-
padding: 30px 20px !important;
151+
.content-card {
152+
padding: 24px 20px !important;
132153
}
133-
.content h1 {
134-
font-size: 24px !important;
154+
h1 {
155+
font-size: 20px !important;
135156
}
136157
.button {
137158
display: block !important;
138159
width: 100% !important;
139-
box-sizing: border-box;
160+
text-align: center !important;
140161
}
141162
}
142163

143164
body
144165
if preheader
145-
.preheader= preheader
146-
147-
table(role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size:16px;background-color:#ffffff")
166+
span(style="display: none !important; color: #F9F8F9; margin: 0; padding: 0; font-size: 1px; line-height: 1px")= preheader
167+
168+
table(bgcolor="#F9F8F9" width="100%" style="width: 100% !important; background: #F9F8F9; margin: 0; padding: 0; min-width: 100%")
148169
tr
149-
td
170+
td(align="center")
150171
include header.pug
151-
152-
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")
153-
tbody
154-
tr(style="width:100%")
155-
td
156-
block content
157-
172+
173+
table(width="602" style="width: 602px; margin: 24px" border="0" cellspacing="0" cellpadding="0")
174+
tr
175+
td(align="left")
176+
table(width="100%" class="content-card" border="0" cellspacing="0" cellpadding="0")
177+
tr
178+
td
179+
block content
180+
158181
include footer.pug

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

Lines changed: 25 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,25 @@
1-
//- Email footer component
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.
1+
//- Email footer component (outside content box)
2+
table(align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin-top: 32px")
3+
tr
4+
td
5+
table(align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 602px")
6+
tr
7+
td
8+
table(align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 50%; margin: 0 auto")
9+
tr(style="width:100%")
10+
td(align="center" style="width:25%")
11+
a(href="https://x.com/DeployStack" style="color: #3C4149; text-decoration: none; font-size: 14px; font-weight: 500; margin: 0 10px" target="_blank") X
12+
td(align="center" style="width:25%")
13+
a(href="https://www.youtube.com/deploystack" style="color: #3C4149; text-decoration: none; font-size: 14px; font-weight: 500; margin: 0 10px" target="_blank") YouTube
14+
td(align="center" style="width:25%")
15+
a(href="https://github.com/deploystackio" style="color: #3C4149; text-decoration: none; font-size: 14px; font-weight: 500; margin: 0 10px" target="_blank") GitHub
16+
td(align="center" style="width:25%")
17+
a(href="https://discord.com/invite/42Ce3S7b3b" style="color: #3C4149; text-decoration: none; font-size: 14px; font-weight: 500; margin: 0 10px" target="_blank") Discord
18+
19+
p(style="font-size: 14px; line-height: 1.5; margin: 16px 0; color: #898989; text-align: center")
20+
a(href="https://deploystack.io" style="color: #3C4149; text-decoration: none" target="_blank") DeployStack.io
21+
br
22+
br
23+
| You received this email because you have an account with us.
24+
br
25+
| This email was sent from an automated system. Please do not reply.

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
//- Email header component
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")
2+
table(width="100%" style="margin-top: 32px; margin-bottom: 48px" border="0" cellspacing="0" cellpadding="0")
3+
tr
4+
td(align="center")
5+
a(href="https://deploystack.io" target="_blank")
6+
img(src="https://deploystack.io/img/deploystack-long-mail.png" alt="DeployStack" height="45" width="180" style="display: block")

0 commit comments

Comments
 (0)