Even better HTML emails

[jdabtieu]

Related to #94 and #132, this issue serves as a discussion for improving the HTML emails further.

Useful resource that I found: https://www.campaignmonitor.com/css/

[jdabtieu]

What do you think of something like this?

I like the slightly darkened background...not sure about the banner though.

Here's another design I came up with that strips the banner for some smaller text...I didn't really like the banner too much either. What do you think?

[slightlyskepticalpotat]

I like this better. We could also do what many companies do and have something like:

If you would like to reset your password please click here http://www.google.com.

If you are unable to click the link, you can copy and paste the following link into your browser:

https://www.superlongpasswordresetlink.com/ewr38r23dsf9ewhfewfjew9f38jefewfewnnoiewvew820932ifjewifew8fuew8uf8ew/auth

On Thu, Dec 30, 2021 at 11:49 PM Jonathan Wu @.***> wrote:

What do you think of something like this? [image: image] https://user-images.githubusercontent.com/62577178/147795171-e3cde10e-d2a4-47fa-a8c0-9a061cf262b4.png

I like the slightly darkened background...not sure about the banner though.

Here's another design I came up with that strips the banner for some smaller text...I didn't really like the banner too much either. What do you think?

[image: image] https://user-images.githubusercontent.com/62577178/147803935-16abd2ee-38e9-4a12-92d7-8dbe1381468f.png

— Reply to this email directly, view it on GitHub https://github.com/jdabtieu/CTFOJ/issues/134#issuecomment-1003268153, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHOXLYGUANKBJEQZY7CC2D3UTUY6FANCNFSM5LAYFJ3Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were assigned.Message ID: @.***>

[jdabtieu]

Here's the next iteration. While I quite like the button, something seems a bit off to me, but I can't say exactly what it is.

[slightlyskepticalpotat]

Perhaps it's the spacing above and below the blue button?

On Sat, Jan 1, 2022 at 10:30 AM Jonathan Wu @.***> wrote:

Here's the next iteration. While I quite like the button, something seems a bit off to me, but I can't say exactly what it is.

[image: image] https://user-images.githubusercontent.com/62577178/147854024-08a79680-95e6-4e87-90f3-ff41a9eaea2e.png

— Reply to this email directly, view it on GitHub https://github.com/jdabtieu/CTFOJ/issues/134#issuecomment-1003574283, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHOXLYAWNNLWLJ3KYQMLKNLUT4MZ7ANCNFSM5LAYFJ3Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were assigned.Message ID: @.***>

[jdabtieu]

I came up with this earlier. I think the horizontal line right after the signature really helped, as well as adjusting the spacing a bit. Let me know what you think, and if it's good I'll start converting it into acceptable email HTML.

[slightlyskepticalpotat]

LGTM

On Sun, Jan 2, 2022 at 11:09 PM Jonathan Wu @.***> wrote:

[image: image] https://user-images.githubusercontent.com/62577178/147899060-0ebcfe33-aa73-4ccf-a5ba-136f4d207712.png

I came up with this earlier. I think the horizontal line right after the signature really helped, as well as adjusting the spacing a bit. Let me know what you think, and if it's good I'll start converting it into acceptable email HTML.

— Reply to this email directly, view it on GitHub https://github.com/jdabtieu/CTFOJ/issues/134#issuecomment-1003859515, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHOXLYDXB4KCBH4EJHRH6WDUUEOQPANCNFSM5LAYFJ3Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were assigned.Message ID: @.***>

[slightlyskepticalpotat]

Want to dig out the code for this and implement? I think we could do it.