Address Public Sans visual QA feedback (#5937)

* Match font size between password strength meter label and strength https://docs.google.com/document/d/1H2sGTfajE_vFywuS-dErrveE3HYeraOpKqBZoU7zW40/edit#bookmark=id.ij7e80fv4x9p * Fix line-height to match body content for heading override classes https://docs.google.com/document/d/1H2sGTfajE_vFywuS-dErrveE3HYeraOpKqBZoU7zW40/edit#bookmark=id.cjccn2jqw5or * Improve account history text wrapping https://docs.google.com/document/d/1H2sGTfajE_vFywuS-dErrveE3HYeraOpKqBZoU7zW40/edit#bookmark=id.s69rw07kvjb8 * Inherit h3 styles for Troubleshooting Options heading https://docs.google.com/document/d/1H2sGTfajE_vFywuS-dErrveE3HYeraOpKqBZoU7zW40/edit#bookmark=id.ar9ig16cx9yv * Reduce padding on IAL2 verify accordion content https://docs.google.com/document/d/1H2sGTfajE_vFywuS-dErrveE3HYeraOpKqBZoU7zW40/edit#bookmark=id.97mep966gkz4 * Add grid gap for IAL2 verify details https://docs.google.com/document/d/1H2sGTfajE_vFywuS-dErrveE3HYeraOpKqBZoU7zW40/edit#bookmark=id.1s7zqgip92ek * Fix footer wrap at small viewports https://docs.google.com/document/d/1H2sGTfajE_vFywuS-dErrveE3HYeraOpKqBZoU7zW40/edit#bookmark=id.ae3a6eue3vf2 * Fix account mobile header wrapping https://docs.google.com/document/d/1H2sGTfajE_vFywuS-dErrveE3HYeraOpKqBZoU7zW40/edit#bookmark=id.s0lnbwisvwow * Fix email wrapping on account page * Wrap phone number default on mobile https://docs.google.com/document/d/1H2sGTfajE_vFywuS-dErrveE3HYeraOpKqBZoU7zW40/edit#bookmark=id.st157qhckyoi * Move IAL2 sign-in PII accordion content up https://docs.google.com/document/d/1H2sGTfajE_vFywuS-dErrveE3HYeraOpKqBZoU7zW40/edit#bookmark=id.yariyhzc6hsn * Fix typo on MFA select screen https://docs.google.com/document/d/1H2sGTfajE_vFywuS-dErrveE3HYeraOpKqBZoU7zW40/edit#bookmark=id.jj68sbwse7pe * Collapse excess whitespace on webauthn setup https://docs.google.com/document/d/1H2sGTfajE_vFywuS-dErrveE3HYeraOpKqBZoU7zW40/edit#bookmark=id.hgc1uwxpfono * Adjust vertical spacing for reauthn password https://docs.google.com/document/d/1H2sGTfajE_vFywuS-dErrveE3HYeraOpKqBZoU7zW40/edit#bookmark=id.mveu2u207pjz * Replace b with span.text-bold See: #5937 (comment) * Update specs * Fix positioning of success icon in review accordion * Increase margin above IAL2 review password field * Move IAL2 sign-in description outside footer
18F · Feb 15, 2022 · c3cd821 · c3cd821
1 parent c7bd4b7
commit c3cd821
Show file tree

Hide file tree

Showing 23 changed files with 171 additions and 160 deletions.
diff --git a/app/assets/stylesheets/components/_icon.scss b/app/assets/stylesheets/components/_icon.scss
@@ -31,7 +31,7 @@ $icon-min-padding: 2px;
       height: $h4;
       left: -$space-3;
       position: absolute;
-      top: $space-1;
+      top: (lh('body', $theme-body-line-height) - $h4) * 0.5;
       width: $h4;
     }
   }

diff --git a/app/assets/stylesheets/components/_troubleshooting-options.scss b/app/assets/stylesheets/components/_troubleshooting-options.scss
@@ -17,7 +17,7 @@
 
 .troubleshooting-options__heading {
   @include u-margin-y(1.5);
-  font-size: units(2);
+  @extend %h3;
 }
 
 .troubleshooting-options__options {

diff --git a/app/assets/stylesheets/utilities/_typography.scss b/app/assets/stylesheets/utilities/_typography.scss
@@ -35,61 +35,86 @@ body {
   line-height: $line-height-4;
 }
 
-// given how similar & coupled these are, single line preferred
-h1,
-.h1,
-h2,
-.h2 {
+%h1 {
+  line-height: 1.35;
+  font-size: $h1;
+
+  @include at-media('tablet') {
+    font-size: $sm-h1;
+  }
+}
+
+%h2 {
   line-height: 1.35;
+  font-size: $h2;
+
+  @include at-media('tablet') {
+    font-size: $sm-h2;
+  }
+}
+
+%h3 {
+  line-height: $line-height;
+  font-size: $h3;
+
+  @include at-media('tablet') {
+    font-size: $sm-h3;
+  }
+}
+
+%h4 {
+  line-height: $line-height;
+  font-size: $h4;
+
+  @include at-media('tablet') {
+    font-size: $sm-h4;
+  }
+}
+
+%h5 {
+  line-height: $line-height;
+  font-size: $h5;
+
+  @include at-media('tablet') {
+    font-size: $sm-h5;
+  }
+}
+
+%h6 {
+  line-height: $line-height;
+  font-size: $h6;
+
+  @include at-media('tablet') {
+    font-size: $sm-h6;
+  }
 }
 
 h1,
 .h1 {
-  font-size: $h1;
+  @extend %h1;
 }
+
 h2,
 .h2 {
-  font-size: $h2;
+  @extend %h2;
 }
+
 h3,
 .h3 {
-  font-size: $h3;
+  @extend %h3;
 }
+
 h4,
 .h4 {
-  font-size: $h4;
+  @extend %h4;
 }
+
 h5,
 .h5 {
-  font-size: $h5;
+  @extend %h5;
 }
+
 h6,
 .h6 {
-  font-size: $h6;
-}
-
-@media #{$breakpoint-sm} {
-  h1,
-  .h1 {
-    font-size: $sm-h1;
-  }
-  h2,
-  .h2 {
-    font-size: $sm-h2;
-  }
-  h3 {
-    font-size: $sm-h3;
-  }
-  h4,
-  .h4 {
-    font-size: $sm-h4;
-  }
-  h5,
-  .h5 {
-    font-size: $sm-h5;
-  }
-  h6,
-  .h6 {
-    font-size: $sm-h6;
-  }
+  @extend %h6;
 }
diff --git a/app/javascript/packs/webauthn-setup.js b/app/javascript/packs/webauthn-setup.js
@@ -22,7 +22,7 @@ function webauthn() {
   }
   const continueButton = document.getElementById('continue-button');
   continueButton.addEventListener('click', () => {
-    document.getElementById('spinner').className = '';
+    document.getElementById('spinner').classList.remove('hidden');
     document.getElementById('continue-button').className = 'hidden';
 
     const platformAuthenticator =

diff --git a/app/views/accounts/_device_item.html.erb b/app/views/accounts/_device_item.html.erb
@@ -1,15 +1,12 @@
-<div class="padding-1 clearfix border-top border-left border-right border-primary-light">
-  <div class="clearfix margin-x-neg-1">
-    <div class="sm-col sm-col-6 padding-x-1">
-      <div class="bold truncate">
-        <%= device.nice_name %>
-      </div>
-      <%= device.last_sign_in_location_and_ip %>
+<div class="padding-1 border-top border-left border-right border-primary-light">
+  <div class="grid-row grid-gap-2">
+    <div class="grid-col-fill">
+      <strong><%= device.nice_name %></strong>
     </div>
-    <div class="sm-col sm-col-6 padding-x-1 sm-right-align">
-      <%= local_time(device.happened_at, t('time.formats.event_timestamp')) %>
-      <br />
+    <div class="grid-col-auto">
       <%= link_to t('headings.account.events'), account_events_path(id: device.id) %>
     </div>
   </div>
+  <%= local_time(device.happened_at, t('time.formats.event_timestamp')) %><br>
+  <%= device.last_sign_in_location_and_ip %>
 </div>
diff --git a/app/views/accounts/_emails.html.erb b/app/views/accounts/_emails.html.erb
@@ -1,5 +1,5 @@
-<div class="clearfix border-bottom border-primary-light">
-  <div class="col col-12 margin-bottom-1 margin-top-0">
+<div class="border-bottom border-primary-light">
+  <div class="margin-bottom-1 margin-top-0">
     <h3 class="margin-0">
       <%= t('account.index.email_addresses') %>
     </h3>
@@ -8,23 +8,23 @@
     <% end %>
   </div>
   <% @presenter.decorated_user.visible_email_addresses.each do |email| %>
-    <div class="padding-1 col col-12 border-top border-left border-right border-primary-light">
-      <div class="col col-8 sm-6">
-        <span class="break-word">
-          <%= email.email %>
-          &nbsp;
-        </span>
-        <span>
-          <%= t('email_addresses.unconfirmed') unless email.confirmed_at %>
-        </span>
-      </div>
-      <div class="col col-4 sm-6 right-align">
+    <div class="padding-1 border-top border-left border-right border-primary-light">
+      <div class="grid-row grid-gap-2">
+        <div class="grid-col-fill">
+          <span class="break-word">
+            <%= email.email %>
+          </span>
+          <% unless email.confirmed_at %>
+            &nbsp;<%= t('email_addresses.unconfirmed') %>
+          <% end %>
+        </div>
         <% if EmailPolicy.new(current_user).can_delete_email?(email) %>
-          &nbsp; &nbsp;
-          <%= render(
-                'accounts/actions/delete_action_button',
-                path: manage_email_confirm_delete_url(id: email.id),
-              ) %>
+          <div class="grid-col-auto">
+            <%= render(
+                  'accounts/actions/delete_action_button',
+                  path: manage_email_confirm_delete_url(id: email.id),
+                ) %>
+          </div>
         <% end %>
       </div>
     </div>

diff --git a/app/views/accounts/_event_item.html.erb b/app/views/accounts/_event_item.html.erb
@@ -1,11 +1,5 @@
-<div class="padding-1 grid-row border-top border-left border-right border-primary-light">
-  <div class="mobile-lg:grid-col-6 padding-x-1">
-    <div class="bold truncate">
-      <%= event.event_type %>
-    </div>
-    <%= event.last_sign_in_location_and_ip %>
-  </div>
-  <div class="mobile-lg:grid-col-6 padding-x-1 sm-right-align">
-    <%= local_time(event.happened_at, t('time.formats.event_timestamp')) %>
-  </div>
+<div class="padding-1 border-top border-left border-right border-primary-light">
+  <strong><%= event.event_type %></strong><br>
+  <%= local_time(event.happened_at, t('time.formats.event_timestamp')) %><br>
+  <%= event.last_sign_in_location_and_ip %>
 </div>
diff --git a/app/views/accounts/_header.html.erb b/app/views/accounts/_header.html.erb
@@ -1,9 +1,9 @@
-<div class="grid-row padding-top-2 padding-bottom-4 tablet:padding-y-0 margin-bottom-4 bg-lightest-blue sm-bg-none position-relative">
+<div class="grid-row padding-y-2 tablet:padding-y-0 margin-bottom-4 bg-lightest-blue sm-bg-none position-relative">
   <div class="grid-col-12 tablet:grid-col-fill">
     <h1 class="margin-0 center sm-left-align">
       <span class="regular tablet:display-none">
         <%= t('account.welcome') %>,
-        <span class="bold">
+        <span class="text-bold text-wrap-anywhere">
           <%= presenter.header_personalization %>
         </span>
       </span>

diff --git a/app/views/accounts/_identity_item.html.erb b/app/views/accounts/_identity_item.html.erb
@@ -1,17 +1,13 @@
-<div class="padding-1 grid-row border-top border-left border-right border-primary-light">
-  <div class="mobile-lg:grid-col-6 padding-x-1">
-    <div class="bold">
-      <% if event.return_to_sp_url.present? %>
-        <%= t(
-              'event_types.authenticated_at_html',
-              service_provider_link: link_to(event.display_name, event.return_to_sp_url),
-            ) %>
+<div class="padding-1 border-top border-left border-right border-primary-light">
+  <strong>
+    <% if event.return_to_sp_url.present? %>
+      <%= t(
+            'event_types.authenticated_at_html',
+            service_provider_link: link_to(event.display_name, event.return_to_sp_url),
+          ) %>
     <% else %>
       <%= t('event_types.authenticated_at', service_provider: event.display_name) %>
     <% end %>
-    </div>
-  </div>
-  <div class="mobile-lg:grid-col-6 padding-x-1 sm-right-align">
-    <%= local_time(event.happened_at, t('time.formats.event_timestamp')) %>
-  </div>
+  </strong><br>
+  <%= local_time(event.happened_at, t('time.formats.event_timestamp')) %>
 </div>
diff --git a/app/views/accounts/_phone.html.erb b/app/views/accounts/_phone.html.erb
@@ -6,19 +6,19 @@
 <% end %>
 <div class="border-bottom border-primary-light">
   <% MfaContext.new(current_user).phone_configurations.each do |phone_configuration| %>
-    <div class="grid-row padding-1 border-top border-left border-right border-primary-light">
-      <div class="grid-col-5">
-        <%= PhoneFormatter.format(phone_configuration.phone) %>
-      </div>
-      <div class="grid-col-4 text-center">
-        <% if current_user.default_phone_configuration == phone_configuration %>
-          <%= I18n.t('account.index.default') %>
-        <% end %>
-      </div>
-      <div class="grid-col-3 right-align">
-        <%= render 'accounts/actions/manage_action_button',
-                   path: manage_phone_path(id: phone_configuration.id),
-                   name: t('account.index.phone') %>
+    <div class="padding-1 border-top border-left border-right border-primary-light">
+      <div class="grid-row grid-gap-2">
+        <div class="grid-col-fill">
+          <%= PhoneFormatter.format(phone_configuration.phone) %>
+          <% if current_user.default_phone_configuration == phone_configuration %>
+            (<%= I18n.t('account.index.default') %>)
+          <% end %>
+        </div>
+        <div class="grid-col-auto">
+          <%= render 'accounts/actions/manage_action_button',
+                     path: manage_phone_path(id: phone_configuration.id),
+                     name: t('account.index.phone') %>
+        </div>
       </div>
     </div>
   <% end %>

diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb
@@ -49,35 +49,36 @@
         ) %>
   </div>
 <% end %>
-<% if decorated_session.sp_name %>
-  <div class='clearfix padding-top-1 border-top border-primary-light'>
-    <%= render 'devise/sessions/return_to_service_provider' %>
-  </div>
-<% else %>
-  <div class='border-top border-primary-light'></div>
-<% end %>
-
-<div class='margin-x-neg-1 margin-y-1'>
-  <%= link_to(
-        t('links.passwords.forgot'),
-        new_user_password_url(request_id: @request_id),
-        class: 'padding-x-1',
-      ) %>
-</div>
 
 <% if ial2_requested? %>
   <%= render 'sign_up/registrations/required_pii_accordion' %>
 <% end %>
 
-<p class="margin-y-1">
-  <%= new_window_link_to(
-        t('notices.privacy.security_and_privacy_practices'),
-        MarketingSite.security_and_privacy_practices_url,
-      ) %>
-</p>
-<p class="margin-y-1">
-  <%= new_window_link_to(
-        t('notices.privacy.privacy_act_statement'),
-        MarketingSite.privacy_act_statement_url,
-      ) %>
-</p>
+<%= render PageFooterComponent.new do %>
+  <% if decorated_session.sp_name %>
+    <div class="margin-y-1">
+      <%= render 'devise/sessions/return_to_service_provider' %>
+    </div>
+  <% end %>
+
+  <div class="margin-y-1">
+    <%= link_to(
+          t('links.passwords.forgot'),
+          new_user_password_url(request_id: @request_id),
+        ) %>
+  </div>
+
+  <p class="margin-y-1">
+    <%= new_window_link_to(
+          t('notices.privacy.security_and_privacy_practices'),
+          MarketingSite.security_and_privacy_practices_url,
+        ) %>
+  </p>
+
+  <p class="margin-y-1">
+    <%= new_window_link_to(
+          t('notices.privacy.privacy_act_statement'),
+          MarketingSite.privacy_act_statement_url,
+        ) %>
+  </p>
+<% end %>
diff --git a/app/views/devise/shared/_password_strength.html.erb b/app/views/devise/shared/_password_strength.html.erb
@@ -7,9 +7,7 @@
       <div class='pw-bar'></div>
     </div>
     <div class='h5'>
-      <span class='h6'>
-        <%= t('instructions.password.strength.intro') %>
-      </span>
+      <%= t('instructions.password.strength.intro') %>
       <%= tag.span '...', id: 'pw-strength-txt', class: 'bold', data: {
             forbidden: local_assigns[:forbidden_passwords],
           } %>