18F · aduth · May 6, 2021 · May 3, 2021 · May 3, 2021 · May 3, 2021
diff --git a/app/assets/stylesheets/components/_form.scss b/app/assets/stylesheets/components/_form.scss
@@ -9,8 +9,6 @@ $radio-checkbox-space: 1.5rem;
 }
 
 legend {
-  // short-circuits line-height to stop inheritance
-  font: $small-font-size $serif-font-family;
   font-weight: $heading-font-weight;
 }
 
@@ -179,7 +177,7 @@ input::-webkit-inner-spin-button {
 
 .usa-form-group--error {
   border-left-style: none;
-  margin-top: 0;
+  margin-top: units(3); // Remove after: https://github.com/uswds/uswds/issues/4189
   padding-left: 0;
 
   @include at-media('desktop') {

diff --git a/app/assets/stylesheets/components/_modal.scss b/app/assets/stylesheets/components/_modal.scss
@@ -75,7 +75,7 @@
     }
 
     hr {
-      width: 7.5rem;
+      width: 5rem;
     }
 
   }

diff --git a/app/assets/stylesheets/components/_nav.scss b/app/assets/stylesheets/components/_nav.scss
@@ -43,14 +43,6 @@
   }
 }
 
-.authnav-greeting {
-  display: none;
-
-  @include at-media('desktop') {
-    display: block;
-  }
-}
-
 .top-banner {
   display: none;
 

diff --git a/app/assets/stylesheets/components/_troubleshooting-options.scss b/app/assets/stylesheets/components/_troubleshooting-options.scss
@@ -11,7 +11,7 @@
     content: '';
     display: block;
     height: 4px;
-    width: 5.5rem;
+    width: 5rem;
   }
 }
 

diff --git a/app/assets/stylesheets/utilities/_border.scss b/app/assets/stylesheets/utilities/_border.scss
@@ -1,8 +1,3 @@
-.bw1 { border-width: 1px; }
-.bw2 { border-width: 2px; }
-.bw3 { border-width: 3px; }
-.bw4 { border-width: 4px; }
-
 .border-dashed { border-style: dashed; }
 
 .rounded-md { border-radius: $border-radius-md; }

diff --git a/app/assets/stylesheets/utilities/_space-misc.scss b/app/assets/stylesheets/utilities/_space-misc.scss
@@ -30,6 +30,10 @@
   .sm-mtn3 { margin-top: -$space-3; }
 }
 
+.margin-top-neg-4 {
+  margin-top: units(-4);
+}
+
 @include at-media('tablet') {
   .tablet\:margin-x-neg-6 {
     margin-left: units(-6);

diff --git a/app/javascript/packages/document-capture/components/document-capture.jsx b/app/javascript/packages/document-capture/components/document-capture.jsx
@@ -137,7 +137,7 @@ function DocumentCapture({ isAsyncForm = false, onStepChange }) {
   ) : (
     <>
       {submissionError && !(submissionError instanceof UploadFormEntriesError) && (
-        <Alert type="error" className="margin-bottom-4 margin-top-2 tablet:margin-top-0">
+        <Alert type="error" className="margin-bottom-4">
           {t('doc_auth.errors.general.network_error')}
         </Alert>
       )}

diff --git a/app/javascript/packages/document-capture/components/form-steps.jsx b/app/javascript/packages/document-capture/components/form-steps.jsx
@@ -213,11 +213,7 @@ function FormSteps({
     <form ref={formRef} onSubmit={toNextStep}>
       {Object.keys(values).length > 0 && <PromptOnNavigate />}
       {unknownFieldErrors.map(({ field, error }) => (
-        <Alert
-          key={[field, error.message].join()}
-          type="error"
-          className="margin-bottom-4 margin-top-2 tablet:margin-top-0"
-        >
+        <Alert key={[field, error.message].join()} type="error" className="margin-bottom-4">
           <FormErrorMessage error={error} />
         </Alert>
       ))}

diff --git a/app/presenters/backup_code_create_presenter.rb b/app/presenters/backup_code_create_presenter.rb
@@ -14,7 +14,7 @@ def other_option_display
   end
 
   def other_option_title
-    t('forms.backup_code.are_you_sure_other_option')
+    t('two_factor_authentication.choose_another_option')
   end
 
   def continue_bttn_prologue

diff --git a/app/views/account_reset/confirm_request/show.html.erb b/app/views/account_reset/confirm_request/show.html.erb
@@ -10,8 +10,8 @@
   <%= t('account_reset.confirm_request.instructions_end') %>
 </p>
 
-<div class="col-3">
-  <hr class="margin-y-4 bw3 border-teal rounded"/>
+<div class="width-10">
+  <hr class="margin-y-4 border-width-05 border-teal">
 </div>
 
 <% if sms_phone %>

diff --git a/app/views/accounts/_nav_auth.html.erb b/app/views/accounts/_nav_auth.html.erb
@@ -1,28 +1,28 @@
 <div class="bg-white">
   <div class="container tablet:padding-x-2 tablet:padding-y-4">
     <div class="clearfix">
-      <div class="margin-y-1 margin-left-2 tablet:margin-0 col col-4">
+      <div class="margin-y-105 margin-left-2 tablet:margin-0 col col-4">
         <%= link_to image_tag(asset_url('logo.svg'),
                               alt: APP_NAME,
                               class: 'text-bottom',
                               width: 170), root_path %>
       </div>
-      <div class="right-align col col-8 padding-right-1 authnav-greeting">
-        <div class="inline-block margin-right-1 truncate-inline">
-          <p class="inline-block truncate margin-0">
+      <div class="col col-8 padding-right-1 display-none desktop:display-flex flex-justify-end">
+        <div class="margin-right-1 truncate-inline">
+          <p class="truncate margin-0">
             <%= t('account.welcome') %>
             <strong><%= greeting %></strong>
           </p>
         </div>
-        <div class="inline-block right border-silver border-left">
+        <div class="border-silver border-left">
           <p class="margin-0">
             <%= link_to t('links.sign_out'), destroy_user_session_path,
                         class: 'padding-left-1' %>
           </p>
         </div>
       </div>
       <div class="desktop:display-none display-flex flex-row flex-justify-end">
-        <%= link_to t('links.sign_out'), destroy_user_session_path, class: 'margin-top-1 margin-right-2'%>
+        <%= link_to t('links.sign_out'), destroy_user_session_path, class: 'margin-top-105 margin-right-2'%>
         <% if enable_mobile_nav %>
           <button class="usa-menu-btn"><%= t('account.navigation.menu') %></button>
         <% end %>

diff --git a/app/views/devise/passwords/new.html.erb b/app/views/devise/passwords/new.html.erb
@@ -23,5 +23,5 @@
 <% end %>
 
 <div class="margin-top-2 padding-top-1 border-top border-primary-light">
-  <%= link_to t('links.cancel'), decorated_session.cancel_link_url, class: 'h5' %>
+  <%= link_to t('links.cancel'), decorated_session.cancel_link_url %>
 </div>
diff --git a/app/views/forgot_password/show.html.erb b/app/views/forgot_password/show.html.erb
@@ -17,8 +17,8 @@
    <%= t('notices.forgot_password.first_paragraph_end') %>
 </p>
 
-<div class="col-3">
-  <hr class="margin-y-4 bw3 border-teal rounded"/>
+<div class="width-10">
+  <hr class="margin-y-4 border-width-05 border-teal">
 </div>
 
 <%= validated_form_for @view_model.password_reset_email_form,

diff --git a/app/views/idv/address/new.html.erb b/app/views/idv/address/new.html.erb
@@ -4,7 +4,7 @@
       steps: Idv::Flows::DocAuthFlow::STEP_INDICATOR_STEPS,
       current_step: :verify_info,
       locale_scope: 'idv',
-      class: 'margin-x-neg-2 margin-top-neg-2 tablet:margin-x-neg-6 tablet:margin-top-neg-4',
+      class: 'margin-x-neg-2 margin-top-neg-4 tablet:margin-x-neg-6 tablet:margin-top-neg-4',
     } %>
   <% end %>
 <% end %>

diff --git a/app/views/idv/cancellations/destroy.html.erb b/app/views/idv/cancellations/destroy.html.erb
@@ -1,13 +1,11 @@
 <% title t('headings.cancellations.confirmation') %>
 
-<%= image_tag(asset_url('alert/fail-x.svg'), width: 54) %>
+<%= image_tag(asset_url('alert/fail-x.svg'), alt: '', width: 54) %>
 
-<h1 class="margin-bottom-1 margin-top-4 margin-y-0">
+<h1 class="margin-top-4 margin-bottom-2">
   <%= t('headings.cancellations.confirmation') %>
 </h1>
 
-<hr>
-
 <ul class='list-reset red-dots'>
   <li><%= t('idv.cancel.warnings.warning_2') %></li>
   <li><%= t('idv.cancel.warnings.warning_3', app: APP_NAME) %></li>

diff --git a/app/views/idv/cancellations/new.html.erb b/app/views/idv/cancellations/new.html.erb
@@ -2,12 +2,10 @@
 
 <%= image_tag(asset_url('alert/warning-lg.svg'), alt: '', width: 54) %>
 
-<h1 class="margin-bottom-1 margin-top-4 margin-y-0">
+<h1 class="margin-top-4 margin-bottom-2">
   <%= t('headings.cancellations.prompt') %>
 </h1>
 
-<hr>
-
 <p class='margin-bottom-1 bold'><%= t('sign_up.cancel.warning_header') %></p>
 
 <ul class="list-reset yellow-dots">

diff --git a/app/views/idv/capture_doc/capture_complete.html.erb b/app/views/idv/capture_doc/capture_complete.html.erb
@@ -1,6 +1,6 @@
 <% title t('titles.doc_auth.verify') %>
 
-<%= render 'shared/alert', { type: 'success', class: 'margin-bottom-4 margin-top-2' } do %>
+<%= render 'shared/alert', { type: 'success', class: 'margin-bottom-4' } do %>
   <%= t('doc_auth.headings.capture_complete') %>
 <% end %>
 

diff --git a/app/views/idv/come_back_later/show.html.erb b/app/views/idv/come_back_later/show.html.erb
@@ -6,7 +6,7 @@
       end,
       current_step: :verify_phone_or_address,
       locale_scope: 'idv',
-      class: 'margin-x-neg-2 margin-top-neg-2 tablet:margin-x-neg-6 tablet:margin-top-neg-4',
+      class: 'margin-x-neg-2 margin-top-neg-4 tablet:margin-x-neg-6 tablet:margin-top-neg-4',
     } %>
   <% end %>
 <% end %>

diff --git a/app/views/idv/confirmations/show.html.erb b/app/views/idv/confirmations/show.html.erb
@@ -4,7 +4,7 @@
       steps: @step_indicator_steps,
       current_step: :secure_account,
       locale_scope: 'idv',
-      class: 'margin-x-neg-2 margin-top-neg-2 tablet:margin-x-neg-6 tablet:margin-top-neg-4',
+      class: 'margin-x-neg-2 margin-top-neg-4 tablet:margin-x-neg-6 tablet:margin-top-neg-4',
     } %>
   <% end %>
 <% end %>

diff --git a/app/views/idv/doc_auth/ssn.html.erb b/app/views/idv/doc_auth/ssn.html.erb
@@ -2,7 +2,7 @@
 
 <%= render 'shared/alert', {
   type: 'success',
-  class: 'margin-bottom-4 margin-top-2 tablet:margin-top-0'
+  class: 'margin-bottom-4'
 } do %>
   <%= t('doc_auth.headings.capture_complete') %>
 <% end %>

diff --git a/app/views/idv/gpo/index.html.erb b/app/views/idv/gpo/index.html.erb
@@ -4,7 +4,7 @@
       steps: Idv::Flows::DocAuthFlow::STEP_INDICATOR_STEPS,
       current_step: :verify_phone_or_address,
       locale_scope: 'idv',
-      class: 'margin-x-neg-2 margin-top-neg-2 tablet:margin-x-neg-6 tablet:margin-top-neg-4',
+      class: 'margin-x-neg-2 margin-top-neg-4 tablet:margin-x-neg-6 tablet:margin-top-neg-4',
     } %>
   <% end %>
 <% end %>

diff --git a/app/views/idv/otp_delivery_method/new.html.erb b/app/views/idv/otp_delivery_method/new.html.erb
@@ -4,7 +4,7 @@
       steps: Idv::Flows::DocAuthFlow::STEP_INDICATOR_STEPS,
       current_step: :verify_phone_or_address,
       locale_scope: 'idv',
-      class: 'margin-x-neg-2 margin-top-neg-2 tablet:margin-x-neg-6 tablet:margin-top-neg-4',
+      class: 'margin-x-neg-2 margin-top-neg-4 tablet:margin-x-neg-6 tablet:margin-top-neg-4',
     } %>
   <% end %>
 <% end %>

diff --git a/app/views/idv/otp_verification/show.html.erb b/app/views/idv/otp_verification/show.html.erb
@@ -4,7 +4,7 @@
       steps: Idv::Flows::DocAuthFlow::STEP_INDICATOR_STEPS,
       current_step: :verify_phone_or_address,
       locale_scope: 'idv',
-      class: 'margin-x-neg-2 margin-top-neg-2 tablet:margin-x-neg-6 tablet:margin-top-neg-4',
+      class: 'margin-x-neg-2 margin-top-neg-4 tablet:margin-x-neg-6 tablet:margin-top-neg-4',
     } %>
   <% end %>
 <% end %>

diff --git a/app/views/idv/phone/new.html.erb b/app/views/idv/phone/new.html.erb
@@ -4,7 +4,7 @@
       steps: Idv::Flows::DocAuthFlow::STEP_INDICATOR_STEPS,
       current_step: :verify_phone_or_address,
       locale_scope: 'idv',
-      class: 'margin-x-neg-2 margin-top-neg-2 tablet:margin-x-neg-6 tablet:margin-top-neg-4',
+      class: 'margin-x-neg-2 margin-top-neg-4 tablet:margin-x-neg-6 tablet:margin-top-neg-4',
     } %>
   <% end %>
 <% end %>
@@ -76,7 +76,7 @@
 <% end %>
 
 <div class="margin-top-2 padding-top-1 border-top border-primary-light">
-  <%= link_to t('links.cancel'), idv_cancel_path, class: 'h5' %>
+  <%= link_to t('links.cancel'), idv_cancel_path %>
 </div>
 
 <% javascript_packs_tag_once 'form-steps-wait' %>
diff --git a/app/views/idv/review/new.html.erb b/app/views/idv/review/new.html.erb
@@ -4,7 +4,7 @@
       steps: @step_indicator_steps,
       current_step: :secure_account,
       locale_scope: 'idv',
-      class: 'margin-x-neg-2 margin-top-neg-2 tablet:margin-x-neg-6 tablet:margin-top-neg-4',
+      class: 'margin-x-neg-2 margin-top-neg-4 tablet:margin-x-neg-6 tablet:margin-top-neg-4',
     } %>
   <% end %>
 <% end %>
@@ -36,9 +36,13 @@
                phone: PhoneFormatter.format(@applicant[:phone]) %>
   <% end %>
 
-  <%= f.button :submit, t('forms.buttons.continue'), class: 'usa-button--big usa-button--wide' %>
+  <%= f.button(
+        :submit,
+        t('forms.buttons.continue'),
+        class: 'usa-button--big usa-button--wide margin-top-4',
+      ) %>
 <% end %>
 
 <div class="margin-top-6 margin-top-2 padding-top-1 border-top border-primary-light">
-  <%= link_to t('links.cancel'), idv_cancel_path, class: 'h5' %>
+  <%= link_to t('links.cancel'), idv_cancel_path %>
 </div>
diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
@@ -67,7 +67,7 @@
       <% end %>
     </div>
     <div class="container">
-      <div class="padding-x-2 padding-y-2 tablet:padding-y-8 tablet:padding-x-10 margin-x-auto tablet:margin-bottom-8 border-box <%= local_assigns[:disable_card].present? ? '' : 'card' %>" role="main">
+      <div class="padding-x-2 padding-y-4 tablet:padding-y-8 tablet:padding-x-10 margin-x-auto tablet:margin-bottom-8 border-box <%= local_assigns[:disable_card].present? ? '' : 'card' %>" role="main">
         <%= yield(:pre_flash_content) if content_for?(:pre_flash_content) %>
         <%= render 'shared/flashes' %>
         <%= content_for?(:content) ? yield(:content) : yield %>

diff --git a/app/views/layouts/flow_step.html.erb b/app/views/layouts/flow_step.html.erb
@@ -5,7 +5,7 @@
       locale_scope: flow_namespace,
       steps: step_indicator[:steps],
       current_step: step_indicator[:current_step],
-      class: 'margin-x-neg-2 margin-top-neg-2 tablet:margin-x-neg-6 tablet:margin-top-neg-4'
+      class: 'margin-x-neg-2 margin-top-neg-4 tablet:margin-x-neg-6 tablet:margin-top-neg-4'
     ) %>
   <% end %>
 <% end %>

diff --git a/app/views/partials/personal_key/_key.html.erb b/app/views/partials/personal_key/_key.html.erb
@@ -2,7 +2,7 @@
   <p class="bold center margin-top-1 padding-top-1 fs-20p">
     <%= t('users.personal_key.header') %>
   </p>
-  <div class="margin-top-6 margin-bottom-6 padding-x-0 tablet:padding-x-1 padding-y-2 center bg-white bw2 separator-text bg-pk-box">
+  <div class="margin-top-6 margin-bottom-6 padding-x-0 tablet:padding-x-1 padding-y-2 center bg-white border-width-2px separator-text bg-pk-box">
     <%- code.split('-').each do |word|
       -%><div class="inline fs-20p bold navy"
         ><code class="monospace" data-personal-key="word"

diff --git a/app/views/reactivate_account/_modal.html.erb b/app/views/reactivate_account/_modal.html.erb
@@ -4,7 +4,7 @@
       <h2 class="margin-y-2 fs-20p sans-serif regular center">
         <%= t('instructions.account.reactivate.modal.heading') %>
       </h2>
-      <hr class="margin-bottom-4 bw4 rounded" />
+      <hr class="margin-bottom-4 border-width-05" />
       <div class="margin-bottom-8">
         <%= t('instructions.account.reactivate.modal.copy') %>
       </div>

diff --git a/app/views/service_provider_mfa/new.html.erb b/app/views/service_provider_mfa/new.html.erb
@@ -14,7 +14,7 @@
                        url: two_factor_options_path do |f| %>
   <div class="margin-bottom-4">
     <fieldset class="margin-0 padding-0 border-none">
-      <legend class="margin-bottom-2 serif bold"><%= t('forms.two_factor_choice.legend') %>:</legend>
+      <legend class="margin-bottom-2"><%= t('forms.two_factor_choice.legend') %>:</legend>
       <% @presenter.options.each do |option| %>
         <%= label_tag "two_factor_options_form_selection_#{option.type}",
                       class: "btn-border col-12 margin-bottom-2 #{option.html_class}",

diff --git a/app/views/session_timeout/_warning.html.erb b/app/views/session_timeout/_warning.html.erb
@@ -4,7 +4,7 @@
       <h2 class='margin-y-2 fs-20p sans-serif regular center'>
         <%= t('headings.session_timeout_warning') %>
       </h2>
-      <hr class='margin-bottom-4 bw4 rounded' />
+      <hr class='margin-bottom-4 border-width-05' />
       <div class='margin-bottom-6'>
         <p>
           <%= modal.message %>

diff --git a/app/views/shared/_cancel_or_back_to_options.html.erb b/app/views/shared/_cancel_or_back_to_options.html.erb
@@ -1,6 +1,6 @@
 <div class="margin-top-2 padding-top-1 border-top border-primary-light">
   <% if MfaPolicy.new(current_user).two_factor_enabled? %>
-    <%= link_to t('links.cancel'), account_path, class: 'h5' %>
+    <%= link_to t('links.cancel'), account_path %>
   <% else %>
     <%= link_to t('two_factor_authentication.choose_another_option'), two_factor_options_path %>
   <% end %>

diff --git a/app/views/shared/_failure.html.erb b/app/views/shared/_failure.html.erb
@@ -12,7 +12,7 @@
 
 <% if presenter.message.present? %>
   <div class="col-2">
-    <hr class="margin-top-4 margin-bottom-2 bw4 rounded border-<%= presenter.state_color %>" />
+    <hr class="margin-top-4 margin-bottom-2 border-width-05 border-<%= presenter.state_color %>" />
   </div>
 
   <h2 class="h4 margin-bottom-2 margin-top-4 margin-y-0">

diff --git a/app/views/sign_up/emails/show.html.erb b/app/views/sign_up/emails/show.html.erb
@@ -18,8 +18,8 @@
    <%= t('notices.signed_up_but_unconfirmed.first_paragraph_end') %>
 </p>
 
-<div class="col-3">
-  <hr class="margin-y-4 bw3 border-teal rounded"/>
+<div class="width-10">
+  <hr class="margin-y-4 border-width-05 border-teal">
 </div>
 
 <%= validated_form_for @resend_email_confirmation_form,
-Original file line number
+Diff line change
@@ Expand Up / @@ -75,7 +75,7 @@ @@
         }
         hr {
-          width: 7.5rem;
+          width: 5rem;
         }
       }
@@ Expand Down @@