Progress of execution UI

[ramirotw]

Description

UI implementation of the progress bar component discussed in https://github.com/gnosis/cowswap/issues/1946 Documentation: https://docs.google.com/document/d/1rJPCmztsbpIi-jklCFAQIrrPusIBYmrJvswB26I8AWA/edit#heading=h.gjdgxs Design: https://www.figma.com/file/bcoZf5RIgVKDItdOaTZq18/GP-Swap?node-id=4167%3A93

[elena-zh]

Spec can be found here https://docs.google.com/document/d/1rJPCmztsbpIi-jklCFAQIrrPusIBYmrJvswB26I8AWA/edit#heading=h.gjdgxs

[alongoni]

We have to define if we are going to add a "show more" button to give more context and expand the card. Or Maybe we can use a tooltip after the sentence e.g: "Looking for a CoW ⓘ [ + tooltip]".

In both cases, we have to consider that the card state will be changing in each step/proccess. In that scenario maybe a user is reading the content (show more or tooltip) and we have to take care to don't hide it.

WDYT @fairlighteth @anxolin @alfetopito @ramirotw

[alfetopito]

I'm in favor of a show more link styled button like what we already have.

As for the text disappearing while it's open, I personally don't think it's a problem, since it's no longer relevant given that the step is complete. If we must, we could have a permalink to the docs explaining the whole process in detail with all the steps in it.

[fairlighteth]

Agree with @alfetopito here.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you think it shouldn't be closed, speak now or forever hold your peace.