1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +02:00

chore: new invite email template improvements (#9997)

https://linear.app/unleash/issue/2-3567/improve-the-look-of-the-unleash-instance-getting-started-email

Follow-up to: https://github.com/Unleash/unleash/pull/9980

Refactored the new email template to use a table-based layout with
inline styles for maximum compatibility across email clients, while
preserving the original design.
This commit is contained in:
Nuno Góis 2025-05-14 17:26:56 +01:00 committed by GitHub
parent 0e8f187948
commit e9768f7363
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,165 +1,78 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Welcome to Unleash</title>
<style>
/* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
body {
margin: 0;
padding: 0;
background-color: #EAEAED;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
color: #000;
}
table {
border-collapse: collapse;
width: 100%;
}
.preheader {
display: none;
font-size: 1px;
color: #fff;
line-height: 1px;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
}
.logo-bar {
max-width: 600px;
margin: 0 auto;
padding: 24px;
}
.logo-bar > img {
max-height: 36px;
display: block;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: #ffffff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.header {
text-align: center;
}
.header img {
width: 100%;
max-width: 100%;
height: auto;
border: 0;
}
.content {
padding: 32px 24px 24px;
}
.content h1 {
font-size: 24px;
font-weight: bold;
margin-bottom: 16px;
}
.content p {
font-size: 16px;
line-height: 1.6;
margin-bottom: 16px;
}
.resources {
padding: 0 24px 24px;
}
.resources h2 {
font-size: 18px;
margin-bottom: 12px;
}
.resources ul {
padding-left: 24px;
margin: 0;
}
.resources ul li {
margin-bottom: 8px;
}
.resources ul li a {
color: #615BC2;
text-decoration: underline;
}
.signature {
padding: 0px 24px;
}
.footer {
font-size: 12px;
color: #3b3f44;
text-align: center;
padding: 24px;
}
.footer a {
color: #615BC2;
text-decoration: underline;
}
</style>
</head>
<body>
<span class="preheader">
Welcome to Unleash! Youve been invited to your organizations Unleash account start experimenting with features today.
</span>
<div class="logo-bar">
<img src="https://cdn.getunleash.io/unleash_logo_600.png" alt="Unleash logo" />
</div>
<div class="container">
<div class="header">
<img src="https://cdn.getunleash.io/email-assets/email_header_welcome.png" alt="Welcome to Unleash" />
</div>
<div class="content">
<h1>Welcome to Unleash {{ name }}!</h1>
<p>
You have been invited to your organizations Unleash account.
</p>
{{# passwordLink }}
<p>
Start using Unleash by clicking the sign-up link below. Follow the
steps provided to set your password and get started.
</p>
<p>
<a href="{{{ passwordLink }}}" target="_blank" rel="noopener noreferrer" style="display:inline-block; padding:6px 20px; margin-top:8px; background-color:#6C65E5; color:#ffffff !important; text-decoration:none; border-radius:6px; font-weight:bold; font-size:14px;">Set up account</a>
</p>
{{/ passwordLink }}
{{^ passwordLink }}
<p>
Start using Unleash by clicking the log in link below.
</p>
<p>
<a href="{{{ unleashUrl }}}" target="_blank" rel="noopener noreferrer" style="display:inline-block; padding:6px 20px; margin-top:8px; background-color:#6C65E5; color:#ffffff !important; text-decoration:none; border-radius:6px; font-weight:bold; font-size:14px;">Log in</a>
</p>
{{/ passwordLink }}
</div>
<div class="resources">
<h2>Useful resources</h2>
<p>Once you are up and running, you might want to take a look at the following resources:</p>
<ul>
<li><a href="https://docs.getunleash.io" target="_blank" rel="noopener noreferrer">Documentation</a></li>
<li><a href="https://github.com/unleash" target="_blank" rel="noopener noreferrer">Code examples</a></li>
<li><a href="https://docs.getunleash.io/reference/sdks" target="_blank" rel="noopener noreferrer">SDKs</a></li>
</ul>
</div>
<div class="signature">
<p>Best,<br/>Your Unleash team</p>
</div>
<div class="footer">
<p>
By starting to use Unleash, you are agreeing to our <a href="https://www.getunleash.io/terms-of-service" target="_blank" rel="noopener noreferrer">Terms of Service</a>
<br />
This email was sent to {{ recipient }}
</p>
</div>
<body style="margin:0; padding:0; background-color:#eaeaed; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color:#000;">
<div style="display:none !important; font-size:1px; color:#ffffff; line-height:1px; max-height:0px; max-width:0px; opacity:0; overflow:hidden;">
Welcome to Unleash! Youve been invited to your organizations Unleash account start experimenting with features today.
</div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#eaeaed">
<tr>
<td align="center">
<table width="600" cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
<tr>
<td align="left" style="padding:24px;">
<img src="https://cdn.getunleash.io/unleash_logo_600.png" alt="Unleash logo" style="max-height:36px; height:auto; width:auto; display:block;" />
</td>
</tr>
</table>
<table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color:#ffffff; border-radius:8px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.05);">
<tr>
<td align="center">
<img src="https://cdn.getunleash.io/email-assets/email_header_welcome.png" alt="Welcome to Unleash" style="width:100%; max-width:100%; height:auto; border:0; display:block;" />
</td>
</tr>
<tr>
<td style="padding:32px 24px 24px; text-align:left;">
<h1 style="font-size:24px; font-weight:bold; margin:16px 0;">Welcome to Unleash {{ name }}!</h1>
<p style="font-size:16px; line-height:1.6; margin:16px 0;">You have been invited to your organizations Unleash account.</p>
{{# passwordLink }}
<p style="font-size:16px; line-height:1.6; margin:16px 0;">Start using Unleash by clicking the sign-up link below. Follow the steps provided to set your password and get started.</p>
<p style="margin:16px 0;">
<a href="{{{ passwordLink }}}" target="_blank" style="display:inline-block; padding:10px 20px; background-color:#6c65e5; color:#ffffff; text-decoration:none; border-radius:6px; font-weight:bold; font-size:14px;">Set up account</a>
</p>
{{/ passwordLink }}
{{^ passwordLink }}
<p style="font-size:16px; line-height:1.6; margin:16px 0;">Start using Unleash by clicking the log in link below.</p>
<p style="margin:16px 0;">
<a href="{{{ unleashUrl }}}" target="_blank" style="display:inline-block; padding:10px 20px; background-color:#6c65e5; color:#ffffff; text-decoration:none; border-radius:6px; font-weight:bold; font-size:14px;">Log in</a>
</p>
{{/ passwordLink }}
</td>
</tr>
<tr>
<td style="padding:0 24px 24px; text-align:left;">
<h2 style="font-size:18px; margin:12px 0;">Useful resources</h2>
<p style="font-size:16px; line-height:1.6; margin:16px 0;">Once you are up and running, you might want to take a look at the following resources:</p>
<ul style="padding-left:24px; margin:0;">
<li style="margin-bottom:8px;"><a href="https://docs.getunleash.io" target="_blank" style="color:#615bc2; text-decoration:underline;">Documentation</a></li>
<li style="margin-bottom:8px;"><a href="https://github.com/unleash" target="_blank" style="color:#615bc2; text-decoration:underline;">Code examples</a></li>
<li style="margin-bottom:8px;"><a href="https://docs.getunleash.io/reference/sdks" target="_blank" style="color:#615bc2; text-decoration:underline;">SDKs</a></li>
</ul>
</td>
</tr>
<tr>
<td style="padding:0 24px; text-align:left;">
<p style="font-size:16px; line-height:1.6; margin:16px 0;">Best,<br />Your Unleash team</p>
</td>
</tr>
<tr>
<td style="font-size:12px; color:#3b3f44; text-align:center; padding:24px;">
<p style="margin:0;">
By starting to use Unleash, you are agreeing to our
<a href="https://www.getunleash.io/terms-of-service" target="_blank" style="color:#615bc2; text-decoration:underline;">Terms of Service</a><br />
This email was sent to {{ recipient }}
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>