redesign transactional emails

[chibie]

Description

workflow checklist:

• create test folder
• redesign header + footer in base template for emails
• complete the checklist below
• revisit on responsivity
• add UTMs to links
• add product logos to email types - hackathons, bounties, grants, kudos, quests
• replace svgs with pngs
• implement F pattern on all emails
• fix broken trans tags in emails

email checklist:

• /new_bounty_daily
• /new_bounty
• /tribe_hackathon_prizes
• /featured_funded_bounty
• /new_work_submission
• /new_bounty_rejection
• /new_bounty_acceptance
• /bounty_expire_warning
• /bounty_feedback [NOT APPLICABLE - txt only]
• /funder_stale [NOT APPLICABLE - txt only]
• /start_work_expire_warning
• /start_work_expired
• /share_bounty
• /start_work_approved
• /start_work_rejected
• /start_work_new_applicant
• /start_work_applicant_about_to_expire
• /start_work_applicant_expired
• /funder_payout_reminder
• /no_applicant_reminder
• /faucet
• /faucet_rejected
• /request_amount_email
• /comment
• /mention
• /wallpost
• /grant_cancellation
• /new_grant
• /new_grant_approved
• /new_supporter
• /thank_you_for_supporting
• /successful_contribution
• /pending_contributions
• /grant_update
• /grant_recontribute
• /grant_txn_failed
• /match_distribution
• /new_kudos
• /kudos_mint
• /kudos_mkt
• /new_tip

Refers/Fixes

closes #8218
closes #8355

Testing

https://www.loom.com/share/4681d22aa6d344979290076366598e9d

https://www.loom.com/share/3d66f3f1450a47049ff8d6be9d09958a

nb: observe the hitherto broken emails now work

[PixelantDesign]

Thanks for the video @chibie! Emails are looking great!

One thing I noticed is that we are using our progress indicator in place of the logo. Since the indicator is animated, it might be confusing for users to constantly see the loader refreshing. They may think more information is being refreshed in the email. Is it possible to switch it out for the normal Gitcoin logo?

The other thing I noticed is that the font hierarchy in the transactional emails are different than the design. The fonts and alignment should follow the F pattern established in the hackathon template.

Please check these emails:

• Your Bounty is Now Live
• New mention email
• New comment email
• Faucet processed
• Canceled grant
• You've been removed from a task
• Are you still working on this?
• Your funded bounty is expiring

The last thing is could you include a video of the responsive views?

Otherwise, looking great! Let me know if you have questions @chibie!

[chibie]

screen recording update featuring, responsive design and F patterned alignment + font hierarchy fixes:

https://www.loom.com/share/3d66f3f1450a47049ff8d6be9d09958a

@PixelantDesign

[gdixon]

All looks good to me!! Good job Chibie!! 😄

[gdixon]

Could you double check that the changes you've made mean that we don't need those 3 css documents. I checked new_bounty_daily and we are using the .css to style the activity feed.

[frankchen07]

sorry I said EOD on Friday but failed. here's my review:

stage.gitcoin.co/_administration/email/new_bounty_daily
    left indent issue for the content else lgtm
stage.gitcoin.co/_administration/email/new_bounty
    left indent issue for the content else lgtm
stage.gitcoin.co/_administration/email/tribe_hackathon_prizes
    error nothing shows up
stage.gitcoin.co/_administration/email/featured_funded_bounty
    left indented, is this intended? else lgtm
stage.gitcoin.co/_administration/email/new_work_submission
    left indented, is this intended? else lgtm
stage.gitcoin.co/_administration/email/new_bounty_rejection
    left indented, is this intended? else lgtm
stage.gitcoin.co/_administration/email/new_bounty_acceptance
    left indented, is this intended? else lgtm
stage.gitcoin.co/_administration/email/bounty_expire_warning
    left indented, is this intended?
    capitalize github
    replace slack with discord & correct link?
stage.gitcoin.co/_administration/email/bounty_feedback [NOT APPLICABLE - txt only]
    error nothing shows up
stage.gitcoin.co/_administration/email/funder_stale [NOT APPLICABLE - txt only]
    lgtm
stage.gitcoin.co/_administration/email/start_work_expire_warning
    left indented, is this intended?
    replace slack with discord & correct link?
stage.gitcoin.co/_administration/email/start_work_expired
    left indented, is this intended?
    replace slack with discord & correct link?
stage.gitcoin.co/_administration/email/share_bounty
    broken image but because it's testing? else lgtm
stage.gitcoin.co/_administration/email/start_work_approved
    left indented, is this intended? else lgtm
stage.gitcoin.co/_administration/email/start_work_rejected
    left indented, is this intended? else lgtm
stage.gitcoin.co/_administration/email/start_work_new_applicant
    left indented, is this intended? else lgtm
stage.gitcoin.co/_administration/email/start_work_applicant_about_to_expire
    left indented, is this intended? else lgtm
stage.gitcoin.co/_administration/email/start_work_applicant_expired
    left indented, is this intended? else lgtm
stage.gitcoin.co/_administration/email/funder_payout_reminder
    error nothing shows up
stage.gitcoin.co/_administration/email/no_applicant_reminder
    left indented, is this intended?
    at some point we'll want to revisit this, user directory is dead
stage.gitcoin.co/_administration/email/faucet
    error nothing shows up
stage.gitcoin.co/_administration/email/faucet_rejected
    error nothing shows up
stage.gitcoin.co/_administration/email/request_amount_email
    error nothing shows up
stage.gitcoin.co/_administration/email/comment
    left indented, is this intended? else lgtm
stage.gitcoin.co/_administration/email/mention
    left indented, is this intended? else lgtm
stage.gitcoin.co/_administration/email/wallpost
    left indented, is this intended? else lgtm
stage.gitcoin.co/_administration/email/grant_cancellation
    left indented, is this intended? else LGTM
stage.gitcoin.co/_administration/email/new_grant
    left indented, is this intended? else lgtm
stage.gitcoin.co/_administration/email/new_grant_approved
    left indented, is this intended?
    same as /new_grant, intended? else lgtm
stage.gitcoin.co/_administration/email/new_supporter
    left indented, is this intended? else lgtm
stage.gitcoin.co/_administration/email/thank_you_for_supporting
    left indented, is this intended? else lgtm
stage.gitcoin.co/_administration/email/successful_contribution
    left indented, is this intended? else lgtm
stage.gitcoin.co/_administration/email/pending_contributions
    left indented, is this intended? else lgtm
stage.gitcoin.co/_administration/email/grant_update
    left indented, is this intended? 
    unsubscribes are quite large, else lgtm
stage.gitcoin.co/_administration/email/grant_recontribute
    error nothing shows up
stage.gitcoin.co/_administration/email/grant_txn_failed
    error nothing shows up
stage.gitcoin.co/_administration/email/match_distribution
    looks incomplete
stage.gitcoin.co/_administration/email/new_kudos
    no image link, but I think it's b/c it's testing, lgtm
stage.gitcoin.co/_administration/email/kudos_mint
    lgtm
stage.gitcoin.co/_administration/email/kudos_mkt
    left indented, is this intended? else lgtm
stage.gitcoin.co/_administration/email/new_tip
    left indented, is this intended? else lgtm

[PixelantDesign]

Looks good overall! Daily digest looks really good! Is it possible to have all of the templates follow the way the daily digest changes between web and responsive views as well as treatment of headers?

On this email
https://stage.gitcoin.co/_administration/email/featured_funded_bounty
Could we center the gitcoin bot illustration? See daily digest email
Could we remove this text: (& Being Sent To Gitcoin's Worldwide Community Of Developers)

[chibie]

@PixelantDesign

On this email
https://stage.gitcoin.co/_administration/email/featured_funded_bounty
Could we center the gitcoin bot illustration? See daily digest email
Could we remove this text: (& Being Sent To Gitcoin's Worldwide Community Of Developers)

done.

Is it possible to have all of the templates follow the way the daily digest changes between web and responsive views as well as treatment of headers?

can you explain a bit more?