Update Email Templates to new White Label Style

[AlexGaillard]

Scope

What's changed:

• The existing email templates in ./api/src/services/mail/templates have been replaced with new html and css to update them to the same look used on Directus Cloud.
• The default projectColor passed to the liquid parser has been changed from #546e7a to #171717 to match the Cloud email branding
• The only content that has been changed is the footer conditional in base.liquid that renders the link Manage Your Account which has been changed to instead render a link to the projectUrl prop rather than the 'url' prop.

Potential Risks / Drawbacks

• I've tested the template across Gmail, Thunderbird, Outlook, and Apple Mail and it looks good throughout, with the exception of Gmail on mobile in dark mode where we get the following issue with the png logo being reversed out in color. This issue does not exist with the Cloud email template as the entire square is a png, whereas here just the rabbit is a png and the square is a styled img. The reason it has to be this way is so that the logo can be easily replaced inside that same shape and the color behind the rabbit/logo changed based on the projectColor.

Review Notes / Questions

• NA

---

Fixes #20389

[changeset-bot]

🦋 Changeset detected

Latest commit: 320e8c0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@directus/api	Minor
directus	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[AlexGaillard]

For reference here is an image of the email template

[paescuj]

LGTM ❤️

• I've tested the template across Gmail, Thunderbird, Outlook, and Apple Mail and it looks good throughout, with the exception of Gmail on mobile in dark mode where we get the following issue with the png logo being reversed out in color. This issue does not exist with the Cloud email template as the entire square is a png, whereas here just the rabbit is a png and the square is a styled img. The reason it has to be this way is so that the logo can be easily replaced inside that same shape and the color behind the rabbit/logo changed based on the projectColor.

I think this is an acceptable trade-off, the logo is still visible to some extend. Others seem to struggle with this problem too ¹ and I'm not really sure if there's a good solution so far.

Footnotes

1. https://github.com/hteumeuleu/email-bugs/issues/68 ↩

[paescuj]

Thank you @AlexGaillard ❣️❣️❣️