New Design: Case Detail Page

mariahkannenberg commented 5 years ago

As a development team, in order to ensure our design is updated with the latest internal style guide, we need to update the Case Detail Page

Figma File: https://www.figma.com/file/Z2MXE2BHNyNKK8rILSWkLCAX/USTC-For-devs?node-id=1927%3A0

Pre-Conditions

Acceptance Criteria

Case Detail Page is updated with newest changes to our style guide

Notes

Tasks

[x] 1. Update Messages in Progress view (Cody #1713)
[x] 2. Update Docket Record view (desktop) (Cody #1716)
[x] 2a. Docket Number Header - Eric
[x] 2b. update button design and actions - (Rachael #1715 #1726)
[x] 3. Update Docket Record view (mobile) - (Matt #1718)
[x] 4. Update Document Details mobile overlay (Rachael #1732)
[x] 5. Update Case Information view - (William #1717 #1728)
[x] 6. Update Action Required view - (Cody #1707 #1710)
[x] 7. Revisit header (Cody #1737)
[x] 8. Remove icon from pending messages (Joe #1724)
[x] 9. Add hoverstate to white links on dark backgrounds (Eric)
[x] 10. Check hoverstates on all primary links
[x] 11. TAB TASKS - a. Unselected tabs color should be blue and bold, b. Left align first tab with left margin of table underneath, c. Onstate bar underneath tab should be same width as text (Cody #1734)
[x] 12. Sizing on the case information docket record tabs (Cody #1734)
[x] 13. Select dropdown box should have a hoverstate, check global style guide (Joe #1729)
[x] 14. Add semi-bold 600 font weight back to global styles (Eric)
[x] 15. Change mobile view tabs to select menu (Joe #1731 #1764)
[x] 16. Update Case Information view (mobile) - (William #1739 #1741)
[x] 17. Align responsive breakpoints - (William #1748)
[x] 18. Format dates with 2-digit year (Rachael #1751)
[x] 19 Both tables are missing row hover (Eric)
[x] 20 The underline under Messages should be closer to the word (10px bottom padding) (Matt #https://github.com/flexion/ef-cms/pull/1767)
[x] 22 Top/bottom padding on all table rows should be 15px, not 20px (Eric)
[x] 23 When body copy falls under a field label (like in Case info tab), the body copy/paragraph style should have margin-top: 5px (default is 16px it appears) (Rachael #1755)
[x] 24 On case info tab, the padding around content area should be 20px (currently 15px) (William #1754)
[x] 25 Increase spacing under the horizontal line under the docket record/case info table (above the cards) to 40px (margin-bottom of tab container) (Rachael #1752)
[x] 26 Stroke outline on cards for should be #dcdee0 bg-base-lighter (Rachael #1752)
[x] 27 wrap td content with span and add no wrap to columns (Cody #1753)
[x] 28 align add docket entry button and sort field (Rachael #1755)
Definition of Done

Product Owner
- [x] Acceptance criteria have been met UX
- [x] Usability has been validated

uxforgood commented 5 years ago

Docket Record (Internal user)

Docket Record (External user)

Docket Record (Practitioner not already associated with the case)

Case Information

showing "No messages" variation

uxforgood commented 5 years ago

Mobile view for external users

klohman commented 5 years ago

UX Comments

Logged in as Petition Clerk

Sort- dropdown

[x] Border and sort icon should be bg-base (Matt #1780)

Case Info tab

[x] Card border should be bg-base-lighter (#dcdee0) (someone)
[x] Need more space between the tabs and the cards (Matt #1780)
[x] Read-only fields have too much spacing between label and field text (someone)
[x] Divider under the card header should be #aeb0b5 - bg-base-light (Matt - see note below)

turnipsparkle commented 5 years ago

UX review complete. Here are my notes. Thanks everyone!!

Tab Groups @rachaelparris

25 in the list above: padding below H1 tab groups should be 40px (global), currently 20px on both docket record tab and case information tab. Checked off the list but change not reflected.

Pending Messages Section @ericsorenson

Padding above and below "There are no messages." text to match comp. @uxforgood, can you specify? ✅

Action Required Section @matthopson @sutt0n

Padding should be 15px top; bottom; left; right
10px padding between flag and text
Text should be semibold
"Pay by Debit/Credit" should be H2
Reduce spacing between bottom of hint box and "Can't afford..." text to match comp
Reduce space between Action Required Section and Docket Record / Case Information tab group. @uxforgood, can you specify?

matthopson commented 5 years ago

@klohman I did not touch the last item - divider under the card header - as Natalie said the h3 style should have a border bottom of bg-base-lighter. Also, the hex value mentioned in that task doesn't line up with bg-base-light.

turnipsparkle commented 5 years ago

UX Review complete...

External Users

[x] A) Mobile > action required > "Can't afford" and "Mail In" order should be reversed, see Figma (Matt #1812)
[x] B) Desktop > action required > "Can't afford" section top margin should be 50px (Matt #1812)
[x] C) Both > action Required Section > Pay Now button should use standard primary button style (Matt #1812)
[x] D) Mobile > document detail page > spacing between label and field data should be 5px (Matt #1821)
[x] D) Mobile > document detail page > spacing between field data and next label should be 20px (Matt #1821)
[x] E) Mobile > docket record view > top and bottom margin for oldest to newest toggle 30px (Matt #1821)

Internal Users

[x] F) Desktop > case information > space between cards is uneven, especially horizontal. External version looks good - please match (Matt #1821)

Pending Feedback from UX Team

[x] All > Desktop > docket record row > contents alignment (Matt #1821)
[x] External > Desktop > action required > bottom margin when accordion is closed (Matt #1821)

turnipsparkle commented 5 years ago

Screen shots for the list above:

A) section display order