From 31ef1509eb1a77134d794f6a8e8d6536b4bb8e24 Mon Sep 17 00:00:00 2001
From: Tom Dooner <tomdooner@navapbc.com>
Date: Wed, 21 Aug 2024 13:57:29 -0700
Subject: [PATCH 1/2] Surround most text in a "usa-prose" component

The typography on our pages doesn't match the designs in general:
everything fees cramped with a short line-height and different
font-size. Upon further inspection of the USWDS page templates, most
body content is in a "Prose" component, which makes the text a bit more
readable.

This commit surrounds all the text in a "usa-prose" component.

It also updates the styling of the <label> with the consent, since there
was an extra large bottom margin due to the <p>.

I didn't touch the payment details page, since Matt is concurrently
refactoring the whole thing.
---
 .../cbv_flow_invitations/new.html.erb         |  4 +-
 .../views/caseworker/dashboards/show.html.erb | 24 ++++---
 app/app/views/cbv/add_jobs/show.html.erb      | 36 +++++-----
 .../views/cbv/employer_searches/show.html.erb | 25 ++++---
 app/app/views/cbv/entries/show.html.erb       | 26 ++++---
 app/app/views/cbv/successes/show.html.erb     | 18 ++---
 app/app/views/cbv/summaries/show.html.erb     | 71 ++++++++++---------
 app/app/views/pages/home.html.erb             |  8 ++-
 app/config/locales/en.yml                     |  6 +-
 9 files changed, 123 insertions(+), 95 deletions(-)

diff --git a/app/app/views/caseworker/cbv_flow_invitations/new.html.erb b/app/app/views/caseworker/cbv_flow_invitations/new.html.erb
index 7234d750..e0b3d176 100644
--- a/app/app/views/caseworker/cbv_flow_invitations/new.html.erb
+++ b/app/app/views/caseworker/cbv_flow_invitations/new.html.erb
@@ -1,7 +1,9 @@
 <% content_for :title, t(".header") %>
 
 <h1><%= t(".header") %></h1>
-<%= t(".description_html", pay_income_days: current_site.pay_income_days) %>
+<div class="usa-prose">
+  <%= t(".description_html", pay_income_days: current_site.pay_income_days) %>
+</div>
 
 <%= form_with(model: @cbv_flow_invitation, url: invitations_path, builder: UswdsFormBuilder) do |f| %>
   <%= hidden_field_tag :secret, params[:secret] %>
diff --git a/app/app/views/caseworker/dashboards/show.html.erb b/app/app/views/caseworker/dashboards/show.html.erb
index 60c54d1a..b601d533 100644
--- a/app/app/views/caseworker/dashboards/show.html.erb
+++ b/app/app/views/caseworker/dashboards/show.html.erb
@@ -2,14 +2,20 @@
 
 <h1><%= t(".header") %></h1>
 
-<p><%= t(".invite_clients") %></p>
+<div class="usa-prose">
+  <p><%= t(".invite_clients") %></p>
+</div>
 
 <h2><%= t(".helpful_reminders") %></h2>
-<ul>
-  <li><%= t(".reminder_1") %></li>
-  <li><%= t(".reminder_2", expires_days: t(".expires_within", count: current_site.invitation_valid_days)) %></li>
-  <li><%= t(".reminder_3") %></li>
-  <li><%= t(".reminder_4") %></li>
-</ul>
-
-<%= link_to t(".create_invitation"), new_invitation_path(site_id: params[:site_id]), class: "usa-button usa-button--primary" %>
+<div class="usa-prose">
+  <ul>
+    <li><%= t(".reminder_1") %></li>
+    <li><%= t(".reminder_2", expires_days: t(".expires_within", count: current_site.invitation_valid_days)) %></li>
+    <li><%= t(".reminder_3") %></li>
+    <li><%= t(".reminder_4") %></li>
+  </ul>
+</div>
+
+<div class="margin-top-5">
+  <%= link_to t(".create_invitation"), new_invitation_path(site_id: params[:site_id]), class: "usa-button usa-button--primary" %>
+</div>
diff --git a/app/app/views/cbv/add_jobs/show.html.erb b/app/app/views/cbv/add_jobs/show.html.erb
index a8f7916f..0f6b9247 100644
--- a/app/app/views/cbv/add_jobs/show.html.erb
+++ b/app/app/views/cbv/add_jobs/show.html.erb
@@ -3,26 +3,30 @@
 <p><%= t(".subheader", pay_income_days: current_site.pay_income_days) %></p>
 
 <div data-controller="cbv-add-job">
-
   <h2><%= t(".answer_yes_header") %></h2>
-  <ul>
-    <li><%= t(".answer_yes_bullet_1") %></li>
-    <li><%= t(".answer_yes_bullet_2") %></li>
-    <li><%= t(".answer_yes_bullet_3") %></li>
-  </ul>
+
+  <div class="usa-prose">
+    <ul>
+      <li><%= t(".answer_yes_bullet_1") %></li>
+      <li><%= t(".answer_yes_bullet_2") %></li>
+      <li><%= t(".answer_yes_bullet_3") %></li>
+    </ul>
+  </div>
 
   <h2><%= t(".answer_no_header") %></h2>
-  <ul>
-    <li><%= t(".answer_no_bullet_1") %></li>
-    <li><%= t(".answer_no_bullet_2") %></li>
-    <li><%= t(".answer_no_bullet_3") %></li>
-    <li><%= t(".answer_no_bullet_4") %></li>
-    <li><%= t(".answer_no_bullet_5") %></li>
-  </ul>
+  <div class="usa-prose">
+    <ul>
+      <li><%= t(".answer_no_bullet_1") %></li>
+      <li><%= t(".answer_no_bullet_2") %></li>
+      <li><%= t(".answer_no_bullet_3") %></li>
+      <li><%= t(".answer_no_bullet_4") %></li>
+      <li><%= t(".answer_no_bullet_5") %></li>
+    </ul>
 
-  <div class="margin-bottom-2">
-    <%= t(".criteria_disclaimer", pay_income_days: current_site.pay_income_days) %>
-    <%= site_translation(".learn_more_link_html") %>
+    <div class="margin-bottom-2">
+      <%= t(".criteria_disclaimer", pay_income_days: current_site.pay_income_days) %>
+      <%= site_translation(".learn_more_link_html") %>
+    </div>
   </div>
 
   <%= form_with(url: cbv_flow_add_job_path, builder: UswdsFormBuilder, data: { "add-job-target": "addJobForm", turbo: "false" }, id: "add_job_form") do |f| %>
diff --git a/app/app/views/cbv/employer_searches/show.html.erb b/app/app/views/cbv/employer_searches/show.html.erb
index 325b3338..9eb5dc0e 100644
--- a/app/app/views/cbv/employer_searches/show.html.erb
+++ b/app/app/views/cbv/employer_searches/show.html.erb
@@ -4,25 +4,28 @@
 </h1>
 
 <div data-controller="cbv-employer-search">
-  <p class="line-height-sans-5"><%= t(".search_for_employer") %></p>
-  <p class="line-height-sans-5"><%= t(".to_access") %></p>
-  <ul class="line-height-sans-5">
-    <li><%= t(".to_access_li_1_html") %></li>
-    <li><%= t(".to_access_li_2_html") %></li>
-    <li><%= t(".to_access_li_3_html") %></li>
-  </ul>
+  <div class="usa-prose">
+    <p class="line-height-sans-5"><%= t(".search_for_employer") %></p>
+    <p class="line-height-sans-5"><%= t(".to_access") %></p>
+    <ul class="line-height-sans-5">
+      <li><%= t(".to_access_li_1_html") %></li>
+      <li><%= t(".to_access_li_2_html") %></li>
+      <li><%= t(".to_access_li_3_html") %></li>
+    </ul>
 
-  <p><%= t(".you_ll_go") %></p>
-  <div class="grid-row grid-gap-md">
+    <p><%= t(".you_ll_go") %></p>
+    <div class="grid-row grid-gap-md">
       <div class="grid-col-auto">
-        <svg class="usa-icon text-primary" aria-hidden="true" focusable="false" role="img">
-         <use xlink:href="<%= asset_path("@uswds/uswds/dist/img/sprite.svg#help") %>"></use>
+        <svg class="usa-icon usa-icon--size-3 text-primary text-bottom" aria-hidden="true" focusable="false" role="img">
+          <use xlink:href="<%= asset_path("@uswds/uswds/dist/img/sprite.svg#help") %>"></use>
         </svg>
       </div>
       <div class="grid-col line-height-sans-5">
         <%= t(".what_is_html") %>
       </div>
     </div>
+  </div>
+
   <%= form_with url: cbv_flow_employer_search_path, method: :get, class: "usa-search usa-search--big margin-y-4", html: { role: "search" }, data: { turbo_frame: "employers", turbo_action: "advance" } do |f| %>
     <%= f.label :query, "Search for your employer", class: "usa-sr-only" %>
     <%= f.text_field :query, value: @query, class: "usa-input", type: "search", data: { "cbv-employer-search-target": "searchTerms" } %>
diff --git a/app/app/views/cbv/entries/show.html.erb b/app/app/views/cbv/entries/show.html.erb
index 28454219..0a707d28 100644
--- a/app/app/views/cbv/entries/show.html.erb
+++ b/app/app/views/cbv/entries/show.html.erb
@@ -1,20 +1,26 @@
 <% content_for :title, t(".header") %>
 <h1><%= t(".header") %></h1>
 
-<p><%= t(".subheader") %></p>
+<div class="usa-prose">
+  <p><%= t(".subheader") %></p>
+</div>
 
 <h2><%= t(".subheader_1") %></h2>
-<ul>
-  <li><%= t(".has_online_payroll_provider") %></li>
-  <li><%= t(".do_app_based_work") %></li>
-</ul>
+<div class="usa-prose">
+  <ul>
+    <li><%= t(".has_online_payroll_provider") %></li>
+    <li><%= t(".do_app_based_work") %></li>
+  </ul>
+</div>
 
 <h2><%= t(".subheader_2") %></h2>
-<p><%= t(".you_can_get_started") %></p>
-<ul>
-  <li><%= t(".your_employers_name") %></li>
-  <li><%= t(".your_login_credentials") %></li>
-</ul>
+<div class="usa-prose">
+  <p><%= t(".you_can_get_started") %></p>
+  <ul>
+    <li><%= t(".your_employers_name") %></li>
+    <li><%= t(".your_login_credentials") %></li>
+  </ul>
+</div>
 
 <div class="usa-alert usa-alert--no-icon bg-accent-cool-lighter margin-bottom-3 margin-top-3">
   <div class="usa-alert__body">
diff --git a/app/app/views/cbv/successes/show.html.erb b/app/app/views/cbv/successes/show.html.erb
index e3e55f94..636978da 100644
--- a/app/app/views/cbv/successes/show.html.erb
+++ b/app/app/views/cbv/successes/show.html.erb
@@ -1,19 +1,21 @@
 <% content_for :title, t(".header") %>
 <h1><%= t(".header") %></h1>
 
-<ul>
+<div class="usa-prose">
+  <ul>
     <li><%= t(".caseworker_received") %></li>
     <li><%= t(".check_status") %></li>
-</ul>
+  </ul>
 
-<p>
+  <p>
     <%= t(".confirmation_code", confirmation_code: @cbv_flow.confirmation_code) %>
-</p>
+  </p>
+</div>
 
-<%= link_to cbv_flow_summary_path(format: "pdf"), target: "_blank", class: "usa-button margin-top-3 usa-button--outline" do %>
+  <%= link_to cbv_flow_summary_path(format: "pdf"), target: "_blank", class: "usa-button margin-top-3 usa-button--outline" do %>
     <%= t(".download") %>
-<% end %>
+  <% end %>
 
-<%= link_to agency_url, target: "_blank", class: "usa-button margin-top-3 usa-button" do %>
+  <%= link_to agency_url, target: "_blank", class: "usa-button margin-top-3 usa-button" do %>
     <%= t(".back_to_agency") %>
-<% end %>
+  <% end %>
diff --git a/app/app/views/cbv/summaries/show.html.erb b/app/app/views/cbv/summaries/show.html.erb
index 50ca1575..39012f04 100644
--- a/app/app/views/cbv/summaries/show.html.erb
+++ b/app/app/views/cbv/summaries/show.html.erb
@@ -4,47 +4,50 @@
 </h1>
 
 <% if @payments.any? %>
-  <div class="width-full margin-bottom-6">
+  <div class="margin-bottom-6 usa-prose">
     <p>
       <%= t(".description", summary_start_date: @summary_start_date, summary_end_date: @summary_end_date) %>
     </p>
-    <h2 class="site-preview-heading"><%= t(".total_payments", amount: format_money(total_gross_income)) %></h2>
+  </div>
+
+  <h2 class="site-preview-heading"><%= t(".total_payments", amount: format_money(total_gross_income)) %></h2>
+  <div class="usa-prose">
     <p><%= t(".total_payments_desc") %></p>
+  </div>
 
-    <% payments_grouped_by_employer.each_with_index do |(account_id, summary), index| %>
-      <table class="usa-table usa-table--borderless width-full">
-        <h3>
-          <% if summary[:employer_name] %>
-            <%= t(".table_caption", number: index, employer_name: summary[:employer_name]) %>
-          <% else %>
-            <%= t(".table_caption_no_name", number: index + 1) %>
-          <% end %>
-        </h3>
-        <thead class="border-top-05">
+  <% payments_grouped_by_employer.each_with_index do |(account_id, summary), index| %>
+    <table class="usa-table usa-table--borderless width-full">
+      <h3>
+        <% if summary[:employer_name] %>
+          <%= t(".table_caption", number: index, employer_name: summary[:employer_name]) %>
+        <% else %>
+          <%= t(".table_caption_no_name", number: index + 1) %>
+        <% end %>
+      </h3>
+      <thead class="border-top-05">
+        <tr>
+          <th class="padding-3" style="background-color: #d9e8f6;" colspan="2">
+            <h4 class="margin-0">
+              <% if summary[:employer_name] %>
+                <%= t(".total_income_from", employer_name: summary[:employer_name], amount: summary[:total]) %>
+              <% else %>
+                <%= t(".total_income_from_no_employer_name", amount: format_money(summary[:total])) %>
+              <% end %>
+            </h4>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <% summary[:payments].each do |payment| %>
           <tr>
-            <th class="padding-3" style="background-color: #d9e8f6;" colspan="2">
-              <h4 class="margin-0">
-                <% if summary[:employer_name] %>
-                  <%= t(".total_income_from", employer_name: summary[:employer_name], amount: summary[:total]) %>
-                <% else %>
-                  <%= t(".total_income_from_no_employer_name", amount: format_money(summary[:total])) %>
-                <% end %>
-              </h4>
-            </th>
+            <td><%= t(".payment", amount: format_money(payment[:gross_pay_amount]), date: format_date(payment[:pay_date])) %></td>
           </tr>
-        </thead>
-        <tbody>
-          <% summary[:payments].each do |payment| %>
-            <tr>
-              <td><%= t(".payment", amount: format_money(payment[:gross_pay_amount]), date: format_date(payment[:pay_date])) %></td>
-            </tr>
-          <% end %>
-        </tbody>
-      </table>
-      <h4><%= t(".additional_comments") %></h4>
-      <%= get_comment_by_account_id(account_id).dig("comment") != "" ? get_comment_by_account_id(account_id).dig("comment") : t("shared.not_applicable") %>
-    <% end %>
-  </div>
+        <% end %>
+      </tbody>
+    </table>
+    <h4><%= t(".additional_comments") %></h4>
+    <%= get_comment_by_account_id(account_id).dig("comment") != "" ? get_comment_by_account_id(account_id).dig("comment") : t("shared.not_applicable") %>
+  <% end %>
 <% else %>
   <h3 class="site-preview-heading">
     <%= t(".none_found") %>
diff --git a/app/app/views/pages/home.html.erb b/app/app/views/pages/home.html.erb
index 80db622d..f107c7ba 100644
--- a/app/app/views/pages/home.html.erb
+++ b/app/app/views/pages/home.html.erb
@@ -2,6 +2,8 @@
 <% content_for :title, welcome %>
 <h1><%= welcome %></h1>
 
-<p><%= t(".description_1") %></p>
-<p><%= t(".description_2") %></p>
-<%= t(".description_3_html") %>
+<div class="usa-prose">
+  <p><%= t(".description_1") %></p>
+  <p><%= t(".description_2") %></p>
+  <%= t(".description_3_html") %>
+</div>
diff --git a/app/config/locales/en.yml b/app/config/locales/en.yml
index c07b9382..6cf04f89 100644
--- a/app/config/locales/en.yml
+++ b/app/config/locales/en.yml
@@ -222,9 +222,9 @@ en:
         additional_information_title: Is there anything else you'd like your caseworker to know about your income?
         case_number: 'Case number: %{case_number}'
         consent_to_authorize_use_html:
-          ma: Check this box to confirm that the information provided by you is true and complete to the best of your knowledge. You agree to inform DTA of any income not reflected in this report or any discrepancies found in the information gathered with this tool. You understand that providing accurate and complete information is your responsibility, and any false or omitted information may have legal consequences. For more information on your rights and responsibilities regarding private information you share with DTA please refer to the Rights and Responsibilities you signed at application, found on <a href="https://www.mass.gov/lists/department-of-transitional-assistance-rights-responsibilities-and-penalties">Mass.gov</a>.<p>By sending this report, you authorize its use for income verification by DTA and authorized personnel.</p>
-          nyc: Check this box to confirm that the information provided by you is true and complete to the best of your knowledge. You agree to inform NYC Human Resources Administration (HRA) of any income not reflected in this report or any discrepancies found in the information gathered with this tool. You understand that providing accurate and complete information is your responsibility, and any false or omitted information may have legal consequences.<p>By sending this report, you authorize its use for income verification by authorized HRA personnel.</p>
-          sandbox: Check this box to confirm that the information provided by you is true and complete to the best of your knowledge. You agree to inform CBV Test Agency of any income not reflected in this report or any discrepancies found in the information gathered with this tool. You understand that providing accurate and complete information is your responsibility, and any false or omitted information may have legal consequences.<p>By sending this report, you authorize its use for income verification by authorized CBV personnel.</p>
+          ma: Check this box to confirm that the information provided by you is true and complete to the best of your knowledge. You agree to inform DTA of any income not reflected in this report or any discrepancies found in the information gathered with this tool. You understand that providing accurate and complete information is your responsibility, and any false or omitted information may have legal consequences. For more information on your rights and responsibilities regarding private information you share with DTA please refer to the Rights and Responsibilities you signed at application, found on <a href="https://www.mass.gov/lists/department-of-transitional-assistance-rights-responsibilities-and-penalties">Mass.gov</a>.<br/><br/>By sending this report, you authorize its use for income verification by DTA and authorized personnel.
+          nyc: Check this box to confirm that the information provided by you is true and complete to the best of your knowledge. You agree to inform NYC Human Resources Administration (HRA) of any income not reflected in this report or any discrepancies found in the information gathered with this tool. You understand that providing accurate and complete information is your responsibility, and any false or omitted information may have legal consequences.<br/><br/>By sending this report, you authorize its use for income verification by authorized HRA personnel.
+          sandbox: Check this box to confirm that the information provided by you is true and complete to the best of your knowledge. You agree to inform CBV Test Agency of any income not reflected in this report or any discrepancies found in the information gathered with this tool. You understand that providing accurate and complete information is your responsibility, and any false or omitted information may have legal consequences.<br/><br/>By sending this report, you authorize its use for income verification by authorized CBV personnel.
         consent_to_authorize_use_title: Legal Agreement
         description: The report below has your income from the past 90 days from, from %{summary_start_date} to %{summary_end_date}. %{summary_end_date}. Please review it before you send it to your benefits agency.
         document_timestamp: 'Document origination: %{timestamp}'

From 75b2f5cc8589e4de38d57b9ab5a582b0848b870f Mon Sep 17 00:00:00 2001
From: Tom Dooner <tomdooner@navapbc.com>
Date: Thu, 22 Aug 2024 10:21:25 -0700
Subject: [PATCH 2/2] Make the "What is a payroll provider" help text less wide

---
 app/app/views/cbv/employer_searches/show.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/app/views/cbv/employer_searches/show.html.erb b/app/app/views/cbv/employer_searches/show.html.erb
index 9eb5dc0e..3de74f62 100644
--- a/app/app/views/cbv/employer_searches/show.html.erb
+++ b/app/app/views/cbv/employer_searches/show.html.erb
@@ -20,7 +20,7 @@
           <use xlink:href="<%= asset_path("@uswds/uswds/dist/img/sprite.svg#help") %>"></use>
         </svg>
       </div>
-      <div class="grid-col line-height-sans-5">
+      <div class="grid-col tablet:grid-col-8 line-height-sans-5">
         <%= t(".what_is_html") %>
       </div>
     </div>