Skip to content

Commit 68381ef

Browse files
author
Mateus Medeiros
committed
fix(users): improve email template compatibility for Outlook light theme
1 parent a9140ec commit 68381ef

1 file changed

Lines changed: 23 additions & 14 deletions

File tree

‎src/users-service/WriteFluency.Users.WebApi/Email/EmailTemplateBuilder.cs‎

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,7 @@ public static string BuildConfirmationEmail(string confirmationLink)
66
{
77
var content = $"""
88
<p style="margin:0 0 16px 0;">Please confirm your WriteFluency account to start tracking your progress and keep your learning data safe.</p>
9-
<p style="margin:0 0 24px 0;">
10-
<a href="{confirmationLink}" style="display:inline-block;background:linear-gradient(135deg,#3A7DFF 0%,#4A8FFF 100%);color:#ffffff;text-decoration:none;font-weight:700;border-radius:10px;padding:12px 20px;">Confirm my email</a>
11-
</p>
9+
{BuildPrimaryButton(confirmationLink, "Confirm my email")}
1210
<p style="margin:0;color:#4B5563;font-size:14px;line-height:1.5;">
1311
If the button does not work, copy and paste this link in your browser:<br />
1412
<a href="{confirmationLink}" style="color:#3A7DFF;word-break:break-all;">{confirmationLink}</a>
@@ -25,9 +23,7 @@ public static string BuildPasswordResetLinkEmail(string resetLink)
2523
{
2624
var content = $"""
2725
<p style="margin:0 0 16px 0;">We received a request to reset your WriteFluency password.</p>
28-
<p style="margin:0 0 24px 0;">
29-
<a href="{resetLink}" style="display:inline-block;background:linear-gradient(135deg,#3A7DFF 0%,#4A8FFF 100%);color:#ffffff;text-decoration:none;font-weight:700;border-radius:10px;padding:12px 20px;">Reset password</a>
30-
</p>
26+
{BuildPrimaryButton(resetLink, "Reset password")}
3127
<p style="margin:0;color:#4B5563;font-size:14px;line-height:1.5;">
3228
If you did not request this, you can ignore this email.
3329
</p>
@@ -82,27 +78,27 @@ private static string BuildLayout(string title, string subtitle, string contentH
8278
<meta name="viewport" content="width=device-width, initial-scale=1" />
8379
<title>{{title}}</title>
8480
</head>
85-
<body style="margin:0;padding:0;background:#F7FAFC;font-family:'Source Sans 3','Segoe UI',Arial,sans-serif;color:#1A1A1A;">
86-
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background:#F7FAFC;padding:28px 12px;">
81+
<body style="margin:0;padding:0;background-color:#F7FAFC;font-family:'Segoe UI',Arial,sans-serif;color:#1A1A1A;">
82+
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#F7FAFC" style="background-color:#F7FAFC;padding:28px 12px;">
8783
<tr>
8884
<td align="center">
8985
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:620px;">
9086
<tr>
9187
<td style="padding:0 0 14px 0;font-size:13px;color:#6B7280;text-align:left;">WriteFluency</td>
9288
</tr>
9389
<tr>
94-
<td style="background:#ffffff;border:1px solid #E5E7EB;border-radius:16px;overflow:hidden;">
90+
<td bgcolor="#ffffff" style="background-color:#ffffff;border:1px solid #E5E7EB;border-radius:16px;overflow:hidden;">
9591
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
9692
<tr>
97-
<td style="padding:18px 22px;background:linear-gradient(135deg,#3A7DFF 0%,#4A8FFF 100%);">
98-
<p style="margin:0;font-size:13px;color:#DDEAFF;letter-spacing:.4px;text-transform:uppercase;">WriteFluency</p>
93+
<td bgcolor="#3A7DFF" style="padding:18px 22px;background-color:#3A7DFF;">
94+
<p style="margin:0;font-size:13px;color:#DDEAFF;letter-spacing:.4px;text-transform:uppercase;font-weight:700;">WriteFluency</p>
9995
<h1 style="margin:6px 0 0 0;font-size:28px;line-height:1.2;color:#ffffff;">{{title}}</h1>
100-
<p style="margin:8px 0 0 0;font-size:16px;line-height:1.4;color:#F2F7FF;">{{subtitle}}</p>
96+
<p style="margin:8px 0 0 0;font-size:16px;line-height:1.4;color:#EAF2FF;">{{subtitle}}</p>
10197
</td>
10298
</tr>
10399
<tr>
104-
<td style="padding:24px 22px;font-size:16px;line-height:1.55;">
105-
<p style="margin:0 0 16px 0;">Hi,</p>
100+
<td style="padding:24px 22px;font-size:16px;line-height:1.55;color:#1A1A1A;">
101+
<p style="margin:0 0 16px 0;color:#1A1A1A;">Hi,</p>
106102
{{contentHtml}}
107103
</td>
108104
</tr>
@@ -122,4 +118,17 @@ private static string BuildLayout(string title, string subtitle, string contentH
122118
</html>
123119
""";
124120
}
121+
122+
private static string BuildPrimaryButton(string url, string label)
123+
{
124+
return $"""
125+
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin:0 0 24px 0;">
126+
<tr>
127+
<td bgcolor="#3A7DFF" style="background-color:#3A7DFF;border-radius:10px;">
128+
<a href="{url}" style="display:inline-block;padding:12px 20px;font-size:15px;font-weight:700;color:#ffffff;text-decoration:none;">{label}</a>
129+
</td>
130+
</tr>
131+
</table>
132+
""";
133+
}
125134
}

0 commit comments

Comments
 (0)