Skip to content

Update alerts in mailers to align to match design system#11039

Merged
aduth merged 2 commits intomainfrom
aduth-mailer-alert-design-system
Aug 6, 2024
Merged

Update alerts in mailers to align to match design system#11039
aduth merged 2 commits intomainfrom
aduth-mailer-alert-design-system

Conversation

@aduth
Copy link
Contributor

@aduth aduth commented Aug 6, 2024

🛠 Summary of changes

Updates alert content in mailers to align to the new design system styling introduced in 18F/identity-design-system#439 .

📜 Testing Plan

  1. Go to http://localhost:3000/rails/mailers/user_mailer/in_person_ready_to_verify
  2. Observe alert appears visually consistent with other alerts in application (example)

Extra:

  • To simulate outage alert visible, you can change condition on this line to always be true (e.g. || true)

👀 Screenshots

Before After
image image

aduth added 2 commits August 6, 2024 14:14
changelog: User-Facing Improvements, Mailers, Update alerts in mailers to align to match design system
@aduth aduth requested review from a team, WheresHJ and gina-yamada and removed request for a team August 6, 2024 18:18
@aduth
Copy link
Contributor Author

aduth commented Aug 6, 2024

One thing I noticed is that we use mostly default alert markup in report mailers (example, only overriding image to avoid unsupported SVG). That might make things a little simpler to maintain, at the cost of including more styles in every email that we send.

@aduth
Copy link
Contributor Author

aduth commented Aug 6, 2024

A couple other notes:

  • This also fixes an issue where the fraud reports were using the old icon, but otherwise new styles (before, after)
  • This isn't fully consistent with design system alerts (particularly border radius), but (a) it's close enough without having to delve into complex styling and (b) those inconsistencies existed previously anyways

@aduth aduth merged commit cc76797 into main Aug 6, 2024
@aduth aduth deleted the aduth-mailer-alert-design-system branch August 6, 2024 20:32
@eileen-nava
Copy link
Contributor

Thanks for doing this, it looks good! I'm including a screenshot of the enhanced ipp reminder email for posterity.

Enhanced IPP Reminder Email:

EIPPReminderEmailUpdatedAlerts

@gina-yamada
Copy link
Contributor

gina-yamada commented Aug 7, 2024

I also let @rutvigupta-design know about the change so that our mocks can be updated to match this change.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants