Tbolt/4506 Updates to proposed budget and executive summary

[tbolt]

Resolves #4506

Description

Updates to table designs

Chromatic approval

Significant changes or possible side effects

• Styling changes for many of the table classes. Possible side-effects: Updating a CSS class has a cascading effect and updates an unintended component/table

Automated test cases written

No new tests needed for these design changes. Tests were updated where needed.

Steps to manually verify this change

1. Login to view APDs
2. View an APD with MMIS type
3. Verify Changes are according to ticket + Figma
4. Repeat with an HITECH APD type
5. Since we changed the order of the tables - swapping the federal and state share columns - test that state share data and federal share data is displaying in their correct columns

This pull request is ready to code review when

• Automated tests are updated (and all tests are passing)
• New automated test cases are documented above
• Pull request has been labeled, if applicable with feature, content, bug,
  tests, refactor
• Associated OpenAPI documentation has been updated
• The experience passes a basic manual accessibility audit (keyboard nav,
  screenreader, text scaling) OR an exemption is documented

This pull request is ready to test when

• Code has been reviewed by someone other than the original author

This pull request is ready to review when the QA has

• Verified the functionality related to the change
• Verified that the change works with Narrator on Windows
• Verified that the change works with VoiceOver on Mac
• Verified all updated pages with the WAVE tool
• Verified tab and keyboard navigation functionality

This pull request can be merged when

• Design has approved the experience
• Product has approved the experience

[codecov]

Codecov Report

Merging #4583 (6956342) into main (57ec9df) will increase coverage by 0.01%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             main    #4583      +/-   ##
==========================================
+ Coverage   94.30%   94.31%   +0.01%     
==========================================
  Files         273      273              
  Lines        8660     8694      +34     
  Branches     1721     1746      +25     
==========================================
+ Hits         8167     8200      +33     
- Misses        469      470       +1     
  Partials       24       24              

Flag	Coverage Δ
api	∅ <ø> (∅)
common	100.00% <ø> (ø)
web	94.05% <100.00%> (+0.01%)	⬆️

Impacted Files	Coverage Δ
e2e/cypress/page-objects/activity-schedule-page.js	100.00% <ø> (ø)
e2e/cypress/page-objects/export-page.js	64.95% <ø> (ø)
...vities/cost-allocation/CostAllocateFFPQuarterly.js	100.00% <ø> (ø)
...eb/src/pages/apd/activities/ffp/CostAllocateFFP.js	97.61% <ø> (ø)
...b/src/pages/apd/activities/ffp/FedStateSelector.js	100.00% <ø> (ø)
.../src/pages/apd/activities/ffp/MatchRateSelector.js	100.00% <ø> (ø)
...rc/pages/apd/executive-summary/ExecutiveSummary.js	96.96% <ø> (ø)
...src/pages/apd/proposed-budget/IncentivePayments.js	94.91% <ø> (ø)
...es/apd/proposed-budget/SummaryActivityBreakdown.js	100.00% <ø> (ø)
...es/apd/proposed-budget/SummaryKeyStatePersonnel.js	100.00% <ø> (ø)
... and 11 more

... and 1 file with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 57ec9df...6956342. Read the comment docs.

[cms-eapd-bot]

See this pull request in action: https://ec2-34-193-194-48.compute-1.amazonaws.com

6956342

[thetif]

looks good

[amyd11]

Nice job!

[mirano-darren]

Looks good to me! Note: Executive summary couldn't be checked (page still crashes) so I checked them in Chromatic

Given	When	Then	Covered
a HITECH or MMIS APD	On the Proposed Budget page, Executive Summary page, Budget and FFP page, and the Activity Schedule Summary page	All changes to tables should only affect the Activity total cost table, Combined Activity Cost table, State and Contractor Cost breakdown table, Summary Budget Table, Budget and FFP table, Executive Summary Table, Schedule Summary by Activity, and Milestone Tables by Activity	✅
a HITECH or MMIS APD	On the Proposed Budget page, Executive Summary page, Budget and FFP page, and the Activity Schedule Summary page	If a table has more than 4 rows, each row should alternate in color. Even numbered rows should be gray (#F1F1F1)	✅
a HITECH or MMIS APD	Tables on the Proposed Budget page and Budget and FFP page	Subtotal rows should have a light yellow background color and Grand total rows should have a dark yellow background color	✅
a HITECH or MMIS APD	Tables on the Executive Summary page	Total row should be light yellow. This is an exception to the totals/subtotals color scheme. (Verified w/ Akua)	✅
a HITECH or MMIS APD	On the Proposed Budget page	Help text for the Summary Budget table section should be updated	✅
a HITECH or MMIS APD	Tables on the Activity Schedule Summary; Combined Activity Costs and State and Contractor Cost Breakdown tables on the Proposed budget	The table header background color should change from black to gray to match the other tables	✅
a HITECH or MMIS APD	Summary Budget Tables on the Proposed Budget	Federal total should come first before State total	✅
a HITECH or MMIS APD	Milestone Tables by Activity on the Activity Schedule Summary page	Table header should be changed to the activity name. Subheaders should be Milestone List and Target completion date	✅

[jeromeleecms]

Nice - this looks like the Figma. Still other tickets to revise the tables, but this covers the scope of the ticket!

[SGilliamA1M]

Great work on the table updates @tbolt!

[mirano-darren]

Looks good to me, Well done!