Update & Improve Design of Nextcloud Mail Templates

sorbaugh commented 2 days ago

How to use GitHub

Please use the 👍 reaction to show that you are interested into the same feature.
Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
Subscribe to receive notifications on status change and new comments.

Currently there has been nice design updates on Nextcloud as a whole, but it seems that the mail templates have been straggling a lot. There are some style aspects that could be improved, such as the spacing and font, and maybe there are other creative aspects that could be included which I'd leave to Nextcloud's awesome design team.

Technical aspects:

The code/approach for the mail template structure has grown quite outdated, hard to read and maintain. See here.
We should use a currently maintained mail-templating library to support as many mail-clients as possible. Just one example: https://documentation.mjml.io/

One example (Password-forgotten email):

I feel like the logo takes a bit too much space.
The font on the link is different than the one used otherwise in Nextcloud (although admittedly I'm uncertain if we can have Nextcloud Font supported accross multiple mail clients).
The Footer text is hard to read on white background.

Bildschirmfoto 2024-09-16 um 16 25 54

Anyway, maybe something that could be improved overall to make the NC mail templates feel nice and professional :) What do you think!

skjnldsv commented 2 days ago

We could list all the various emails we have, so it's easier to know what the design team is working with :)

EDIT: or even better, the way our template work. So you know what our backend supports and what we're epected to be able to adjust Goal is to do a design change, not a backend API change :warning:

The API is here, it's easy to understand what we support: https://github.com/nextcloud/server/blob/af6de04e9e141466dc229e444ff3f146f4a34765/lib/public/Mail/IEMailTemplate.php

skjnldsv commented 2 days ago

Example pictures: image and image

We support: