UI Design - Transaction table UI Enhancement

[ethantspitt]

UXPin with the detail comments

https://preview.uxpin.com/16e91fc236dd786256387deb1421be6529805b1b#/pages/164315860

Descriptions

• [ ] Apply autocomplete function on transaction type search box https://vuetifyjs.com/en/components/autocompletes/#usage

• [ ] Add a search filter to "Amount"

• [ ] Fix table header position when scrolling (using PPR table as reference)

• [ ] When no column selected, display empty state:

Tracey's Visual UXA:

Note: Text colours should be" bold headers #212529 / table data #495057 (May be better as a future ticket to update text colours so all info in each Account tabs matches including this one)

---

- [ ] Fix Header Title Bars - Transactions + Recent Routing Slip

• light blue header bar bg colour should be #E2E8EE and top two corners rounded for both
• match "Transactions (XX)" header size to "Recent Routing Slip"
• "(XX)" - Number of Transactions in brackets should be regular weight (keep "Transactions" bold)
• both header's icon colours should be #38598A

---

• [ ] Clickable expanding arrows should be the link blue colour #1669BB

---

- [ ] Fix all tool tips and icons

• tool tips should be above icon, point centred with icon
• match tool tip text size and background colour to our standard (see Name Request "Select an Action" tool tips in first dropdown menu)
• reduce info icons to be 22px (instead of 24px)
• visually centre icons with the bold text
• green check marks should be #2E8549 (AA approved)
• Turn off the scaling animation on tool tips and just have them fade on/off (see Name Request "Select an Action" tool tips in first dropdown menu)

---

- [ ] Fix Date Picker Styling

• make headers/buttons/text colours match to PPR Table date picker (shouldn't this be a shared component?)

---

- [ ] Fix All Dropdowns

• dropdown should appear and be anchored right below the field
• default text is #495057

---

- [ ] Fix Columns to Show

• dropdown should appear and be anchored right below the field
• Text size for field and dropdown items should be 14px
• text is too far away from check boxes
• capital "S"
• default text and checkboxes should be #495057
• Remove the selected light blue bg row colour
• Folio # in all instances should be "Folio Number"

---

• [ ] Decrease gutters between column (Match to PPR table)
• [ ] Folio # in all instances should be "Folio Number" (dropdown/header/filter - may need to increase column width

---

• [ ] Think we may need to move away from pagination and make the header/filter rows sticky and scrollbar and fixed height (which could increase based on browser height for 4k monitors?) - worth design team discussion

[tlebedovich]

@ethantspitt - I just moved this to Ready to Start, but I am done with the visual UXA for now. To note, that the updates made for Transactions should also be made for Fee Accounting table - the styling for these two tables in general are inconsistent with each other.

example:

[ethantspitt]

Changes pending for Vue3 upgrade and design system.