Advanced Payments feature: UI/UX updates before master merge

[melyndav]

Teamwork task: Advanced Payments feature: UI/UX updates before master merge

Related PR's

• [x] Issue 1,2,3,4,5,6 resolved by PR
• [x] Issue 7 resolved by PR
• [x] Issue 8-10 resolved by PR

Description

As discussed with PagePro, large features would be reviewed by Design at the final stage before merging to master to identify any UI/UX issues.

This PR is a running log of any issues picked up within the smaller PR's and should not be picked up until the final review stage.

Any new UI/UX issues picked up will be added to this PR.

UI/UX Issues

Issue 1: Remove the capitalization on the 'in' for the claim timer pill and 'N' for Now.

Example in Figma link: https://www.figma.com/file/5V8pr7iMwXsT9L3VAZsmUt/Colony-v5?type=design&node-id=21220-245079&mode=design&t=ZBawkVoRyAeo1kU2-4

--

Issue 2: Left mobile column with row titles should all be one line. Claim delay shouldn't wrap. I believe this is being caused by the border to the right of the column.

As per Figma:

https://www.figma.com/file/5V8pr7iMwXsT9L3VAZsmUt/Colony-v5?type=design&node-id=21221-265349&mode=design&t=ZBawkVoRyAeo1kU2-4

--

Issue 3: Metadata in the default state should be set to the following:

'Payment to multiple recipients by [username]'

Currently:

---

Issue 4; Spacing in the Payment overview widget between the amount and the token is missing

As per Figma component: https://www.figma.com/design/l1dOM5qiQYwF0ElvKDqqjg/Design-System---Colony-v3?node-id=1782-131246&t=Qz7sDjp9ooGeiVuQ-4

--

Issue 5: Blue hover state is missing from pills as per Figma

https://www.figma.com/design/5V8pr7iMwXsT9L3VAZsmUt/Colony-v5?node-id=3280-369096&t=XHtuSgnDihaINrVx-4

---

Issue 6: User cards are showing as different widths inside table. All cards should be the same width for users no matter the user type

Figma component: https://www.figma.com/design/l1dOM5qiQYwF0ElvKDqqjg/Design-System---Colony-v3?node-id=1782-42685&t=Qz7sDjp9ooGeiVuQ-4

---

Issue 7: Status pills should match the same used in the side panel headers across dashboard and activity feed tables

Figma component: https://www.figma.com/design/l1dOM5qiQYwF0ElvKDqqjg/Design-System---Colony-v3?node-id=1782-12590&t=Qz7sDjp9ooGeiVuQ-4

---

Issue 8: remove tooltips from the 'select member' row in the table as they break and are not needed

---

Issue 9: Rename the .CSV file template name from 'expenditures_batch.csv' to 'colony_payment_template.csv'

---

Issue 10: Avatar is showing in metadata and should not be present as per all other action types

--

** Issue 11: Validation on the table is not showing as normal error styling but showing as the browser styling:

Example of styling for the current hour input exceeding the limit:

---

Issue 12: Table loading state should all be skeleton elements in each table column to match other loading table states (activity feed, permissions etc) and not show 0x0000 placeholder or an avatar for the member column.

[melyndav]

@AdrianDudko tagging you as an FYI to my Discord message. 👍

[melyndav]

@AdrianDudko FYI - this list has been updated now Advanced payments is in the staging environment. I will do further testing but these should be good to get started on since this is going into production with these UI issues.

Any ones that come up I can make seperate issues for.

[AdrianDudko]

@joanna-pagepro @CzarekDryl

Please split this issue into smaller PRs for quicker resolution.

[AdrianDudko]

@melyndav

Issue 12 looks like a duplication of https://github.com/JoinColony/colonyCDapp/issues/2414 and will be tackled there.

FYI @CzarekDryl

[CzarekDryl]

@melyndav Do we have pills colors for issue 7?

[melyndav]

@melyndav Do we have pills colors for issue 7?

I'll get these for you @CzarekDryl :)

[AdrianDudko]

@melyndav All issues should be fixed. Could you please confirm?

[AdrianDudko]

@melyndav Could you please confirm that everything is okay with that old issue?

[melyndav]

Hey @AdrianDudko I will check this and get back to you. 👍