Skip to content

LG-8681: Replace h4 with h1 in emails #9167

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.

Sign up for GitHub

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

Merged
NavaTim merged 8 commits into from
Sep 13, 2023
Merged

LG-8681: Replace h4 with h1 in emails #9167

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
30cc82f
Add preview for password reset email with outstanding GPO letter
NavaTim Sep 12, 2023
4c1d1da
LG-8681: Replace h4 with h2 in emails per VPAT findings
NavaTim Sep 7, 2023
d5e57b2
LG-8681: Use H1 tag per design and content guidance
NavaTim Sep 11, 2023
c187b03
LG-8681: Update email heading styles to better meet desktop LGDS stan…
NavaTim Sep 12, 2023
7b48b88
Merge branch 'tbradley/add-gpo-email-preview' into tbradley/lg-8681-e…
NavaTim Sep 12, 2023
9909fac
LG-8681: Format CSS
NavaTim Sep 12, 2023
48ddb3e
LG-8681: Minor HTML/ERB formatting cleanup
NavaTim Sep 12, 2023
a04aeb9
Merge branch 'main' of https://github.com/18F/identity-idp into tbrad…
NavaTim Sep 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions app/assets/stylesheets/email.css.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,13 @@
line-height: 60px;
}

h4 {
font-weight: bold;
margin-bottom: 16px;
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.4;
Copy link
Copy Markdown
Contributor

@aduth aduth Sep 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Noting that this moves us to consistency with the design system and not the IdP's current typography, since in the IdP we currently use 1.35 for H1 and H2, and 1.5 for every other heading level.

I don't feel too strongly about this and I think we'll want to eventually converge on a standard specification, but my understanding from the discussion yesterday was that we were going to be aligning to the IdP's current typography for now.

Copy link
Copy Markdown
Contributor Author

@NavaTim NavaTim Sep 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewing the conversation, I never saw a reference to current desktop headings/typography from Nick nor Allison. Therefore I went with the design system. I expect this will also help reduce rework when the changes are finalized.

}

.button.large.expanded table a {
Expand Down
16 changes: 8 additions & 8 deletions app/assets/stylesheets/variables/_email.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,14 +66,14 @@ $global-line-height: 1.5;
$global-font-size: 16px;
$body-line-height: $global-line-height;
$header-font-family: $body-font-family;
$header-font-weight: $global-font-weight;
$h1-font-size: 34px;
$h2-font-size: 30px;
$h3-font-size: 28px;
$h4-font-size: 24px;
$h5-font-size: 20px;
$h6-font-size: 18px;
$header-margin-bottom: 10px;
$header-font-weight: 700;
$h1-font-size: 28px;
Copy link
Copy Markdown

@allis-green allis-green Sep 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@NavaTim, header styles look good to me. Thanks for making these changes.

$h2-font-size: 22px;
$h3-font-size: 18px;
$h4-font-size: 16px;
$h5-font-size: 14px;
$h6-font-size: 12px;
$header-margin-bottom: 16px;
$paragraph-margin-bottom: 10px;
$small-font-size: 80%;
$small-font-color: $medium-gray;
Expand Down
3 changes: 1 addition & 2 deletions app/views/layouts/user_mailer.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,7 @@
</tbody>
</table>
<% unless @hide_title %>
<h4><%= @header || message.subject %>
</h4>
<h1><%= @header || message.subject %></h1>
<% end %>
<%= yield %>
<table class="spacer">
Expand Down
2 changes: 1 addition & 1 deletion app/views/user_mailer/in_person_verified.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
alt: '',
class: 'float-center padding-bottom-4',
) %>
<h4><%= message.subject %></h4>
<h1><%= message.subject %></h1>
<p>
<%= t('user_mailer.in_person_verified.greeting') %><br>
<%= t(
Expand Down
4 changes: 2 additions & 2 deletions app/views/user_mailer/shared/_in_person_ready_to_verify.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@
</td>
</tr>
</table>
<h4>
<h1>
<%= t('in_person_proofing.headings.barcode') %>
</h4>
</h1>
<% end %>
<div class="text-center">
<%= render 'idv/shared/mini_logo', filename: 'logo.png' %>
Expand Down