hackforla / 311-data

Empowering Neighborhood Associations to improve the analysis of their initiatives using 311 data
https://hackforla.github.io/311-data/
GNU General Public License v3.0
62 stars 63 forks source link

Implement designs for email template #1828

Closed ryanfchase closed 1 month ago

ryanfchase commented 1 month ago

Overview

Design team has created an email template design and now we need to implement it for our Contact Page emails.

Action Items

Resources/Instructions

Figma Info
Screenshot before proposed changes

n/a

Screenshot after proposed changes

![image](https://github.com/user-attachments/assets/80f83227-d892-40bc-980f-f05f48b2edab)

ryanfchase commented 1 month ago

Ready to be picked up

Brandoncyu commented 1 month ago

Pull request has been opened: https://github.com/hackforla/311-data/pull/1832

ryanfchase commented 1 month ago

@Brandoncyu I've provided a review with request for a small change to the asset URLs.

Also, notes on ticket management:

  1. When beginning work on the ticket, please move from Prioritized Backlog to In Progress.
  2. After completing your work, while you're waiting for review, move the ticket to In Review.

Thanks Brandon!

ryanfchase commented 1 month ago

@Joy-Truex @allisonjeon can we get a review on the dev's implementation? A screenshot is available here:

Details

![image](https://github.com/user-attachments/assets/50d29ef1-fd67-4b4e-a160-08c2223b18da)

I'm wondering if its worth coming up with a system for design leads to review dev's implementations before it gets merged. Perhaps we can talk about this tonight. Maybe a process for dropping screenshots into the Figma so design lead can quickly inspect and compare it to the original designs.

ryanfchase commented 1 month ago

Moving to In Review while waiting for design lead to have a look.

Joy-Truex commented 1 month ago

Here are my notes:

Screenshot

Screenshot 2024-09-29 at 10 32 02 PM

Screenshot

Screenshot 2024-09-29 at 10 35 42 PM

TY!

Brandoncyu commented 1 month ago

@Joy-Truex wanted to ask what a "hug" is? And if you have any instruction for inserting this into HTML?

Joy-Truex commented 1 month ago

@Brandoncyu basically it means the object should resize on a larger/smaller device size not just stay static.

Brandoncyu commented 1 month ago

I have added the new dots:

image

Joy-Truex commented 1 month ago

Great! are you able to update the font to the specifications here?

371957866-a63a0fe6-0c74-4313-bcd5-04f1220fa17b
Brandoncyu commented 1 month ago

just did: image

ryanfchase commented 1 month ago

Thanks all. I've approved the PR, I believe it satisfies requests made during QA.

Joy-Truex commented 1 month ago

Can you ensure the font is Roboto? It looks like it may be times new roman?

Brandoncyu commented 1 month ago

It is Roboto: image

Joy-Truex commented 1 month ago

Will it show up differently in the email than it does in this screenshot? Roboto is a sans serif font and the font in the screenshot is serif. Sorry if I'm missing something, ty!

Brandoncyu commented 1 month ago

@ryanfchase can you confirm?

ryanfchase commented 1 month ago

Good catch @Joy-Truex, and indeed @Brandoncyu is specifying it correctly in the code. However, it seems that we cannot use web fonts in our emails. At least, according to the guide I attached. I think we'll need to pick from the list that the Gmail text editor allows.

List of available fonts

- Sans Serif (Arial) - Serif (Times New Roman) - Fixed Width (monospace) - Wide (Arial Black) - Narrow (Arial Narrow) - Comic Sans MS - Garamond - Tahoma - Trebuchet MS - Verdana

Screenshot of "No Web Fonts"

![image](https://github.com/user-attachments/assets/c9caf9e8-33da-49e4-9413-b86175b042c1)

Joy-Truex commented 1 month ago

Ahhh okay that explains it.

Please proceed with Sans Serif (Arial)

(updated with a comment in the original ticket)

thank you both!

Brandoncyu commented 1 month ago

Changed has been made.

Brandoncyu commented 1 month ago

image