ui: make badges and progress indicator more consistent across workflow list and details pages

[giuseppe-steduto]

This discussion originated in #321. Questions were arised about the placement of the workflow badges in the workflow UI, nominally:

• The GitHub / GitLab / Zenodo icon and link
• The Jupyter notebook icon and link
• The workflow size icon and value
• Possible other badges that we could add in the future (e.g. shared workflow)

At the moment the styles of these badges are inconsistent, both between each other and across different pages (workflow list, workflow details). We should redesign the components to make them more consistent (better UI), more scalable (easy to add other badges), more informative, and more usable (better UX).

Moreover, in the workflow list page the workflow box, which is an interactive element (a clickable button that links to the workflow details page) contains other interactive element (the Jupyter notebook icon and the action menu button) that link to other pages or perform other actions. The HTML a element specification forbids having nested a element / interactive content, so we should consider and fix this as well.

Attention should be put in extracting common reusable React components to be used both in the workflow list and in the workflow details page to avoid code repetition and facilitate maintainability.

Finally, in the context of this redesign and with the goal of making the workflow list and the workflow details page more consistent with each other, we could replace the linear progress bar in the workflow details page with a similar progress indicator, that would be used in both pages, and that would be more complete, by displaying the status of different steps (how many are finished, running, still to be executed, ...), e.g. on the lines of what the GitHub actions progress bar does.