fleet/server/mail/templates/change_email_confirmation.html
jacobshandling 98b839c616
Replace email logo with one that looks good in both light and dark mode (#25192)
## For #24618

**Change email:**
<img width="1012" alt="Screenshot 2025-01-06 at 3 50 27 PM"
src="https://github.com/user-attachments/assets/1a6ec908-0720-4794-a628-46137d1070b8"
/>

**Invite user:**
<img width="1012" alt="Screenshot 2025-01-06 at 4 15 05 PM"
src="https://github.com/user-attachments/assets/b8edf904-f704-45c4-97bf-2d1e6e7daf0b"
/>

**Enable MFA:**
<img width="1012" alt="Screenshot 2025-01-06 at 4 21 46 PM"
src="https://github.com/user-attachments/assets/a7507fa4-637c-4934-8c60-ec0e8c4fa60d"
/>

**Reset password:**
<img width="1012" alt="Screenshot 2025-01-06 at 4 25 54 PM"
src="https://github.com/user-attachments/assets/74bf4ca1-1960-4923-b8a3-b42ea7ff78ba"
/>


**Setup smtp:**
<img width="1012" alt="Screenshot 2025-01-06 at 4 28 29 PM"
src="https://github.com/user-attachments/assets/53993a5c-697c-4dc5-8005-ad286bf7a55e"
/>



- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2025-01-10 10:42:44 -08:00

184 lines
5.7 KiB
HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
rel="stylesheet"
/>
<style>
body {
font-family: "Inter", sans-serif;
margin: 0;
}
h1 {
font-weight: 700;
font-size: 24px;
line-height: 32px;
margin: 0;
padding-bottom: 32px;
}
p {
font-size: 16px;
line-height: 22px;
margin: 0;
padding-bottom: 32px;
}
a {
text-decoration: none;
color: #6a67fe;
}
a:hover {
text-decoration: none;
}
@media only screen and (max-device-width: 480px) {
table {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
td {
width: 100% !important;
padding: 20px !important;
}
}
</style>
</head>
<body style="color: #192147">
<table
align="center"
border="0"
cellpadding="0"
cellspacing="0"
height="100%"
width="100%"
bgcolor="#F9FAFC"
style="
background: #f9fafc;
font-family: 'Nunito Sans', sans-serif;
border-collapse: collapse;
"
>
<tr>
<td valign="top" align="center">
<table
width="580"
align="center"
cellpadding="0"
cellspacing="0"
bgcolor="#ffffff"
style="
margin: 20px 20px;
border: 1px solid #e2e4ea;
border-radius: 8px;
"
>
<tr>
<td
colspan="2"
bgcolor="#ffffff"
style="
padding-top: 40px;
padding-left: 48px;
font-family: 'Nunito Sans', sans-serif;
border-radius: 8px 8px 0px 0px;
"
>
<a href="https://fleetdm.com" target="_blank">
<img
alt="Fleet logo"
src="{{.AssetURL}}/fleet-logo-email-dark-friendly-162x92@2x.png"
style="width: 162px; height: 92px"
/>
</a>
</td>
</tr>
<tr>
<td
colspan="2"
style="
padding-top: 48px;
padding-bottom: 48px;
padding-left: 48px;
padding-right: 48px;
font-family: 'Nunito Sans', sans-serif;
"
>
<h1>Confirm your updated email address</h1>
<p>Please click below to confirm your updated email address.</p>
<a
href="{{.BaseURL}}/email/change/{{.Token}}"
target="_blank"
style="
font-weight: 700;
color: #fff;
text-decoration: none;
border-radius: 4px;
-webkit-border-radius: 4px;
background-color: #6a67fe;
border-top: 8px solid #6a67fe;
border-bottom: 8px solid #6a67fe;
border-right: 16px solid #6a67fe;
border-left: 16px solid #6a67fe;
display: inline-block;
"
>
Confirm email
</a>
<p style="font-size: 14px; color: #515774; padding-top: 32px">
Please do not reply to this automated message.
</p>
<div
style="border-bottom: 1px solid #e2e4ea; padding-top: 32px"
></div>
<div style="padding-top: 32px; padding-bottom: 32px">
<a href="https://github.com/fleetdm/fleet" target="_blank">
<img
alt="Fleet logo"
style="height: 20px; width: 20px; padding-right: 20px"
src="{{.AssetURL}}/fleet-mark-color-40x40@2x.png"
/>
</a>
<a href="https://discuss.systems/@Fleet" target="_blank">
<img
alt="Mastodon logo"
style="height: 20px; width: 20px; padding-right: 20px"
src="{{.AssetURL}}/mastodon-logo-50x40@2x.png"
/>
</a>
<a href="https://twitter.com/fleetctl" target="_blank">
<img
alt="X logo"
style="height: 20px; width: 20px; padding-right: 20px"
src="{{.AssetURL}}/x-logo-24x24@2x.png"
/>
</a>
<a href="https://fleetdm.com/support" target="_blank">
<img
alt="Slack logo"
style="height: 20px; width: 20.5px; padding-right: 20px"
src="{{.AssetURL}}/slack-logo-41x40@2x.png"
/>
</a>
</div>
<p style="font-size: 12px; line-height: 16px; padding: 0">
© {{.CurrentYear}} Fleet Device Management Inc. <br />
All trademarks, service marks, and company names are the
property of their respective owners.
</p>
</td>
</tr>
</table>
<br />
</td>
</tr>
</table>
</body>
</html>