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>
This commit is contained in:
jacobshandling
2025-01-10 10:42:44 -08:00
committed by GitHub
co-authored by Jacob Shandling
parent b4a2115b2c
commit 98b839c616
7 changed files with 64 additions and 46 deletions
@@ -0,0 +1 @@
* Use an email logo compatible with dark modes
@@ -2,7 +2,10 @@
<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">
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
rel="stylesheet"
/>
<style>
body {
font-family: "Inter", sans-serif;
@@ -90,8 +93,8 @@
<a href="https://fleetdm.com" target="_blank">
<img
alt="Fleet logo"
src="{{.AssetURL}}/fleet-logo-blue-118x41@2x.png"
style="height: 41px; width: 118px"
src="{{.AssetURL}}/fleet-logo-email-dark-friendly-162x92@2x.png"
style="width: 162px; height: 92px"
/>
</a>
</td>
@@ -157,10 +160,7 @@
src="{{.AssetURL}}/x-logo-24x24@2x.png"
/>
</a>
<a
href="https://fleetdm.com/support"
target="_blank"
>
<a href="https://fleetdm.com/support" target="_blank">
<img
alt="Slack logo"
style="height: 20px; width: 20.5px; padding-right: 20px"
+6 -3
View File
@@ -2,7 +2,10 @@
<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">
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
rel="stylesheet"
/>
<style>
body {
font-family: "Inter", sans-serif;
@@ -90,8 +93,8 @@
<a href="https://fleetdm.com" target="_blank">
<img
alt="Fleet logo"
src="{{.AssetURL}}/fleet-logo-blue-118x41@2x.png"
style="height: 41px; width: 118px"
src="{{.AssetURL}}/fleet-logo-email-dark-friendly-162x92@2x.png"
style="width: 162px; height: 92px"
/>
</a>
</td>
+8 -5
View File
@@ -2,7 +2,10 @@
<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">
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
rel="stylesheet"
/>
<style>
body {
font-family: "Inter", sans-serif;
@@ -90,8 +93,8 @@
<a href="https://fleetdm.com" target="_blank">
<img
alt="Fleet logo"
src="{{.AssetURL}}/fleet-logo-blue-118x41@2x.png"
style="height: 41px; width: 118px"
src="{{.AssetURL}}/fleet-logo-email-dark-friendly-162x92@2x.png"
style="width: 162px; height: 92px"
/>
</a>
</td>
@@ -110,8 +113,8 @@
<h1>Log in to Fleet</h1>
<p>Hello <b>{{.FullName}}</b>,</p>
<p>
Please click the link below to log into your account. This link will stay
active for {{.TTLInMinutes}} minutes.
Please click the link below to log into your account. This
link will stay active for {{.TTLInMinutes}} minutes.
</p>
<a
+16 -9
View File
@@ -2,7 +2,10 @@
<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">
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
rel="stylesheet"
/>
<style>
body {
font-family: "Inter", sans-serif;
@@ -90,8 +93,8 @@
<a href="https://fleetdm.com" target="_blank">
<img
alt="Fleet logo"
src="{{.AssetURL}}/fleet-logo-blue-118x41@2x.png"
style="height: 41px; width: 118px"
src="{{.AssetURL}}/fleet-logo-email-dark-friendly-162x92@2x.png"
style="width: 162px; height: 92px"
/>
</a>
</td>
@@ -131,8 +134,15 @@
>
Reset password
</a>
<p style="font-style: italic; padding-top: 32px; padding-bottom: 0;">
If you did not make the request, you may ignore this email as no changes have been made.
<p
style="
font-style: italic;
padding-top: 32px;
padding-bottom: 0;
"
>
If you did not make the request, you may ignore this email as
no changes have been made.
</p>
<p style="font-size: 14px; color: #515774; padding-top: 32px">
Please do not reply to this automated message.
@@ -162,10 +172,7 @@
src="{{.AssetURL}}/x-logo-24x24@2x.png"
/>
</a>
<a
href="https://fleetdm.com/support"
target="_blank"
>
<a href="https://fleetdm.com/support" target="_blank">
<img
alt="Slack logo"
style="height: 20px; width: 20.5px; padding-right: 20px"
+26 -22
View File
@@ -2,7 +2,10 @@
<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">
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
rel="stylesheet"
/>
<style>
body {
font-family: "Inter", sans-serif;
@@ -26,7 +29,7 @@
a {
text-decoration: none;
color: #6A67FE;
color: #6a67fe;
}
a:hover {
@@ -70,7 +73,11 @@
cellpadding="0"
cellspacing="0"
bgcolor="#ffffff"
style="margin: 20px 20px; border: 1px solid #E2E4EA; border-radius: 8px;"
style="
margin: 20px 20px;
border: 1px solid #e2e4ea;
border-radius: 8px;
"
>
<tr>
<td
@@ -80,17 +87,17 @@
padding-top: 40px;
padding-left: 48px;
font-family: 'Nunito Sans', sans-serif;
border-radius: 8px 8px 0px 0px
border-radius: 8px 8px 0px 0px;
"
>
<a href="https://fleetdm.com" target="_blank">
<img
alt="Fleet logo"
src="{{.AssetURL}}/fleet-logo-blue-118x41@2x.png"
style="height: 41px; width: 118px"
/>
</a>
</td>
<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
@@ -104,15 +111,15 @@
"
>
<h1>Fleet SMTP setup confirmed</h1>
<p>This message confirms that SMTP is set up properly <a href="{{.BaseURL}}">on your Fleet instance</a>.</p>
<p>
This message confirms that SMTP is set up properly
<a href="{{.BaseURL}}">on your Fleet instance</a>.
</p>
<p style="font-size: 14px; color: #515774">
Please do not reply to this automated message.
</p>
<div
style="
border-top: 1px solid #e2e4ea;
padding-top: 32px;
"
style="border-top: 1px solid #e2e4ea; padding-top: 32px"
></div>
<div style="padding-top: 32px; padding-bottom: 32px">
<a href="https://github.com/fleetdm/fleet" target="_blank">
@@ -136,10 +143,7 @@
src="{{.AssetURL}}/x-logo-24x24@2x.png"
/>
</a>
<a
href="https://fleetdm.com/support"
target="_blank"
>
<a href="https://fleetdm.com/support" target="_blank">
<img
alt="Slack logo"
style="height: 20px; width: 20.5px; padding-right: 20px"
@@ -147,7 +151,7 @@
/>
</a>
</div>
<p style="font-size: 12px; line-height: 16px; padding: 0;">
<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.
Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB