search

JoinColony / colonyCDapp

An iteration of the Colony Dapp sporting both a fully decentralized operating mode, as well as a mode enhanced by a metadata caching layer
5 stars 14 forks source link

Claim incoming funds pending on dashboard. #3506

Open arrenv opened 3 weeks ago

arrenv commented 3 weeks ago

Steps to reproduce

  1. Ensure you have unclaimed incoming funds into a colony.
  2. Return to the Dashboard.
  3. Click on the "Claim" button.
  4. Note the state of the button.

Description

The consistent pattern in the app is that all button that trigger a transaction, should show in the Pending state, so users know that they need to do sign in order to continue. At the moment, the "Claim" button shows as a skeleton loader, which aligns with the design, however does not follow the pattern.

This enhancement is to update the loading state of the button to use the "Pending" button state.

Figma design

image

Current state

image

iamsamgibbs commented 1 week ago

This might need some further discussion @arrenv @melyndav

With a screen width of 1280px, the claim button is right up against the amount and changing it to "Pending" would push the buttons onto a new line:

Image

Image

But I've also realised with some amounts the buttons would already drop to a new line, £10,000.00 does this for example:

Image

arrenv commented 5 days ago

Nice QA @iamsamgibbs, at smaller screen sizes, can we just have the spinner with no "Pending" text?

iamsamgibbs commented 4 days ago

It's still too big even with just the spinner.

The issue is with long numbers pushing the buttons to the next line, even when not in the loading state. £1,000,000.00 GBP pushes the buttons to the next line on screen sizes between 1280px - 1325px. (It only starts abbreviating at £10M)

Screenshot 2024-11-21 at 14 40 10

And the spinner has the same issue on these screen sizes:

Screenshot 2024-11-21 at 14 38 21

Tablet and mobile screen sizes are actually fine (all the way down to 385px) as the outer component is actually wider on those screen sizes.

arrenv commented 4 days ago

I think we need to make some design changes here, for now though, is it possible to just have the "Claim" move to a new line so "Add" stays in the same place all the time, with the pending text back in? Hopefully that is not too wack.

Otherwise, I think we just have to leave it with the move until an updated design can be worked out to handle it better.

iamsamgibbs commented 3 days ago

In that case lets wait for the updated design, I think it would be a bit of a mess getting the buttons to drop down in that way for such a small edge case.

Do you want me to completely leave it as is at the moment, or still implement the "Pending" text and accept it will drop to the new line on these screen sizes?