Improve the design and layout of email notifications

[mattermod]

Summary:
Update the styling for email notifications to make them more friendly looking, helpful and informative to users.

(Optional) this may a helpful tool to do this: https://mjml.io/

The email template design was updated for the following email types:

1. Receiving a Direct Message
2. Being Mentioned in a channel
3. Receiving a Batched email notification
4. Password Reset Email
5. Verification Email
6. You've Joined a Team email
7. Invitation Email
8. Invitation Email for Guests

Figma Design File: https://www.figma.com/file/xMMUFcqIFlyiJlIhLMlcWX/MM-22844-Email-Notification-Redesign?node-id=0%3A1

Sample Email UI Updates

DM Notification

Mention Notification

Batch Notifications

Proposed Updates as seen above:

• Display previews of posts more like they display in the product
• Include the avatar with post content
• Include attached images with post content
• Update headline and body copy
• Add a more slightly more obvious link to change notification preferences
• Refreshes UI overall
• Uses Open Sans webfont, with Arial fallback

Note: Some of the cloud emails follow similar layout for the top portion of the email. Implementation could benefit from leveraging this previous work.

---

If you're interested please comment here and come join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

New contributors please see our Developer's Guide.

JIRA: https://mattermost.atlassian.net/browse/MM-22844

[jp0707]

I would like to work on this. Are there any docs explaining current email rendering infra? Could someone give me couple of pointers to the appropriate code for rendering emails locally?

[esethna]

Thanks @jp0707!
@hmhealey can you help provide any guidance here or point us to another dev with knowledge in this area?

[esethna]

Or @matthewbirtch do you know what dev worked on the cloud emails that could provide some guidance here?

[matthewbirtch]

Or @matthewbirtch do you know what dev worked on the cloud emails that could provide some guidance here?

@nickmisasi has worked a fair bit on emails for Cloud. Just a note though, the email updates here aren't in cloud yet. The cloud emails might be a good starting point though

[esethna]

Thanks. @nickmisasi would you be able to provide some guidance here for @jp0707 that help get her started implementing these email UI updates as per her comment above?

[nickmisasi]

@esethna Sure, I'll provide some detail below. Love the idea of using the framework for these, as I think it'd be super helpful (emails are annoying to get to look proper in all clients, and then having them be responsive is even harder). However, I think there would need to be some input from core teams into how we implement that framework into our core product.

@jp0707 you can find all of our existing email templates here: https://github.com/mattermost/mattermost-server/tree/master/templates
We use Golang's built-in HTML templating engine, and populate the various values in the app layer here: https://github.com/mattermost/mattermost-server/blob/master/app/email.go. Most emails sent out of mattermost are sent via functions in that file.
Our email notification templates are fairly primitive, they are styled mostly in-line and use table layouts. If you have any other questions feel free to @ me here or shoot me a DM on the Mattermost community server!

[jp0707]

@nickmisasi : Here's a proof of concept with welcome email: jp0707@d372e09 . The email still lacks style polishing, but this is meant to be proof of concept for mjml + Go templating.

Here's how it works:

1. Emails are written in mjml with Go's html/template annotation.
2. At build time, mjml templates are compiled into html templates. Compiled templates are stored inside templates/compiled directory.
3. Mechanism for reading/parsing and rendering the emails support both old and new emails. This allows us to move over emails gradually to mjml.

Please take a look. I'd love to have core team look at this and give their feedback. Who/where should I ask for core team's feedback?

[jp0707]

@agnivade This is not done yet. Only first two emails were done in previous PR.

[loleg]

I'm not sure this deserves a separate issue, but I believe the buttons in Mattermost's emails do not render in GMail until loading images is permitted by the user. This does not seem to be an issue with Thunderbird.

[esethna]

@loleg can you share screenshots and more detailed repro steps for our QA team to dig into? cc// @jgilliam17

[loleg]

Sure, here is what the e-mail content looks like in GMail when the sender is unknown. I would need to click somewhere in the white space below the words Reset your password to go to the password reset page:

To reproduce, just create a user account with an address that you have not already used to interact with Mattermost. Or forward a password reset e-mail to another address. I have verified with another popular webmail, SOGo, where the issue looks identical. I am seeing this on 5.36.0 EE.

[esethna]

cc// @jgilliam17 if you can repro and open a ticket ^ Thanks for the report!