Drillster / drone-email

Drone plugin for sending email notifications
Apache License 2.0
44 stars 43 forks source link

New theme with dark mode #71

Open JonasBernard opened 1 year ago

JonasBernard commented 1 year ago

I changed the mail template. In my opinion, it is much more beautiful and has some advanced properties:

Maybe, you find this template more suitable as well.

An argument against it would be the overhead to maintain it and especially to test it on different mail clients. I already figured out, that the confetti animation does not work in my web mail inbox at web.de as they prohibit HTML mails to set the css-position property on elements - I guess for security reasons.

You can look at a screenshot of the mail at https://github.com/JonasBernard/drone-email

mjwwit commented 1 year ago

Wow! That's probably the nicest build notification mail I've seen! Thanks for this ❤️ !

Some thoughts:

JonasBernard commented 1 year ago

I have tested this (also dark mode) on Thunderbird for Linux Works perfectly fine. It is hard to test the dark mode on my linux browsers, as Google Chrome for example does not recognize that I have dark mode enabled on OS level.

Moreover on Gmail (I just tested it a quickly) the flex-direction and justify-content seem not to work...

For the confetti... Yes, it is probably a bit too much, I also noticed, that you cannot click trough it and therefore cannot access the links. So maybe we should remove it.

JonasBernard commented 1 year ago

Alright, I removed the confetti completely. However, I added two screenshots from Thunderbird for Linux to demonstrate the theme there.

Could you add the "Hacktoberfest" topic to your repository before merging the pull request? Would be nice, even though I am unsure whether I will get three more contributions to any other projects in October.

mjwwit commented 1 year ago

How does that work, does this PR need to be merged before October ends?

We still need to work on Gmail support, and test it in Outlook.

JonasBernard commented 1 year ago

Yes that would be the idea. But nvm. I cannot test on Outlook as I do not have it installed. However I will see, what I can do with gmail.

JonasBernard commented 1 year ago

Gmail strips away certain CSS Properties. The ones, that are supported are listed here: https://developers.google.com/gmail/design/reference/supported_css I do not know if they stick to some standard with this, or if they set the standard this way. Neither seems true to me, as for example "flex-direction" works on Thunderbird.

If I have the time, I will try to rewrite this template only using these CSS properties.

mjwwit commented 1 year ago

I will test the template on Outlook when I find some time. If there's still issues in Outlook after you fix everything for Gmail I'll attempt to fix Outlook myself.

JonasBernard commented 1 year ago

I changed the template to use tables now. The "width" property on td elements is ignored by Thunderbird and Gmail, so the space between the avatar and the commit details is a bit weird. In the browser, it worked... Also, I noticed that neither Gmail nor Thunderbird fully support the dark mode media queries. Styles in the media query have a priority always less than the ones of any style not in a media query, NO MATTER the position in the