Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement designs for email template #1828

Closed
6 tasks done
ryanfchase opened this issue Sep 21, 2024 · 20 comments · Fixed by #1832
Closed
6 tasks done

Implement designs for email template #1828

ryanfchase opened this issue Sep 21, 2024 · 20 comments · Fixed by #1832
Assignees
Labels
Feature: automations Tickets relating to the set up or implementation of repository automations P-feature: Contact Us ready for dev lead ready for developer lead to review the issue Role: Frontend React front end work size: 0.50pt Can be done in 3 hours

Comments

@ryanfchase
Copy link
Member

ryanfchase commented Sep 21, 2024

Overview

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

Action Items

  • In the 311-Data repo, create a new directory: 311-data/templates
  • Create a new file: 311-data/templates/contact-us.html
  • Implement the referenced design
    • contain the work within contact-us.html, do not use external style sheets (see R1)
  • Send a test email with using the Send HTML In Gmail plugin (see R2)
  • Upload a screenshot into the Screenshot after proposed changes section of this post

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
Copy link
Member Author

Ready to be picked up

@Brandoncyu
Copy link
Member

Pull request has been opened: #1832

@ryanfchase
Copy link
Member Author

@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
Copy link
Member Author

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

Details

image

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
Copy link
Member Author

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

@ryanfchase ryanfchase added the ready for design lead ready for design lead to review the issue label Sep 30, 2024
@Joy-Truex
Copy link
Member

Here are my notes:

  • Please ensure the text has these specifications:
Screenshot

Screenshot 2024-09-29 at 10 32 02 PM

  • please ensure the linkedin is hyperlinked to: https://www.linkedin.com/company/hack-for-la/
  • perhaps i can't tell from the screenshot but please if possible confirm the three dots above the logo are vector images with the following specifications
Screenshot

Screenshot 2024-09-29 at 10 35 42 PM

TY!

@Joy-Truex Joy-Truex added ready for dev lead ready for developer lead to review the issue and removed ready for design lead ready for design lead to review the issue labels Sep 30, 2024
@Brandoncyu
Copy link
Member

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

@Joy-Truex
Copy link
Member

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

@Brandoncyu
Copy link
Member

I have added the new dots:

image

@Joy-Truex
Copy link
Member

Great! are you able to update the font to the specifications here?
371957866-a63a0fe6-0c74-4313-bcd5-04f1220fa17b

@Brandoncyu
Copy link
Member

just did:
image

@ryanfchase
Copy link
Member Author

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

@Joy-Truex
Copy link
Member

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

@Brandoncyu
Copy link
Member

It is Roboto:
image

@Joy-Truex
Copy link
Member

Joy-Truex commented Oct 2, 2024

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
Copy link
Member

@ryanfchase can you confirm?

@ryanfchase
Copy link
Member Author

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

@ryanfchase ryanfchase added ready for design lead ready for design lead to review the issue and removed ready for dev lead ready for developer lead to review the issue labels Oct 2, 2024
@Joy-Truex
Copy link
Member

Joy-Truex commented Oct 9, 2024

Ahhh okay that explains it.

Please proceed with Sans Serif (Arial)

(updated with a comment in the original ticket)

thank you both!

@Joy-Truex Joy-Truex added ready for dev lead ready for developer lead to review the issue and removed ready for design lead ready for design lead to review the issue labels Oct 9, 2024
@Brandoncyu
Copy link
Member

Changed has been made.

@Brandoncyu
Copy link
Member

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature: automations Tickets relating to the set up or implementation of repository automations P-feature: Contact Us ready for dev lead ready for developer lead to review the issue Role: Frontend React front end work size: 0.50pt Can be done in 3 hours
Projects
Status: Done (without merge)
Development

Successfully merging a pull request may close this issue.

3 participants