SendGrid: HTML emails

[joshuajames-smith]

Task

Issue spilt from #47.

SendGrid - The majority of the HTML base needed for the intended emails is complete (I believe). There are a few other issues (missed design elements or identified via SendGrid test email feature (actually send a copy of an email than view in browser as this doesn't reflect the actual view in an email client)) I am not sure how to tackle within the code before we can change content for the other emails.

• [x] 1. Can left and right margins prevent white container box from reaching the edge, aka. leave a grey side margin?
• [x] 2. Can we prevent gliff.ai in body text becoming it’s own hyperlink? Or at least style it link other hyperlinks (purple, no underline)?
• [x] 3. How to remove underline from hyperlinks at the bottom of the email content?
• [x] 4. How to keep text where it should within the white box? Noticed it can jump about a little between email clients, i.e. gmail drops it so top and bottom margins are not even.
• [x] 5. How to add extra space between the hyperlink words when they are on one line? Needs enough space to press with finger on phone.
• [x] 6. How to keep social media icons the right space? The columns width or spacing changes between gmail desktop and app, i.e. far too extended or squished.
• [ ] 7. Could media queries work to solve any issues? Such as wanting grey margins always on the side of the white content containers?
• [ ] 8. What about dark mode? (logo doesn’t convert colour and gets hidden in the grey?)
• [x] 9. Can we add gliff branding squiggles? (left and right unless width is then too small, then maybe (top and) bottom?)

Email Design

Email Types & Content [left to right]

• Sign Up - Email Verification
• Sign Up - Welcome Post-Verification
• Recover Account
• Collaborator Invite
• Team User Invite

[joshuajames-smith]

Desktop - Gmail

• [x] Content seems okay at full scale, however is the size of screen is reduce the content shrinks down and stops at the white box? - ideally there should be a grey border.
• [x] Also weird hyperlink issue? Understandable that gliff.ai might flag itself as a hyperlink, could they atleast be purple? The hyperlinks at the bottom, it underlines a space between text and line marker - could this be removed? / more space between text and line marker to give space to tap on screen?

Phone - Apple Email App

• [x] All edges seem to cut off when ideally there should be a grey border? Content not scaling?

Phone - Gmail App

• [ ] Dark mode has a funny time with the design?

• [x] Icon spacing seems to also be ignored?