Replace email logo with one that looks good in both light and dark mo…

…de (#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 <[email protected]>
fleetdm · Jan 10, 2025 · 98b839c · 98b839c
1 parent b4a2115
commit 98b839c
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 46 deletions.
diff --git a/changes/24618-make-email-logo-dark-mode-compatible b/changes/24618-make-email-logo-dark-mode-compatible
@@ -0,0 +1 @@
+* Use an email logo compatible with dark modes
diff --git a/server/mail/templates/change_email_confirmation.html b/server/mail/templates/change_email_confirmation.html
@@ -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 @@ <h1>Confirm your updated email address</h1>
                       src="{{.AssetURL}}/[email protected]"
                     />
                   </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"

diff --git a/server/mail/templates/invite_token.html b/server/mail/templates/invite_token.html
@@ -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>

diff --git a/server/mail/templates/mfa.html b/server/mail/templates/mfa.html
@@ -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

diff --git a/server/mail/templates/password_reset.html b/server/mail/templates/password_reset.html
@@ -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 @@ <h1>Reset your Fleet password</h1>
                 >
                   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 @@ <h1>Reset your Fleet password</h1>
                       src="{{.AssetURL}}/[email protected]"
                     />
                   </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"

diff --git a/server/mail/templates/smtp_setup.html b/server/mail/templates/smtp_setup.html
@@ -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,18 +143,15 @@ <h1>Fleet SMTP setup confirmed</h1>
                       src="{{.AssetURL}}/[email protected]"
                     />
                   </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"
                       src="{{.AssetURL}}/[email protected]"
                     />
                   </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.

diff --git a/website/assets/images/permanent/[email protected] b/website/assets/images/permanent/[email protected]