Design changes for Renku 2.0

[lorenzo-cavazzi]

Revamp the design, dropping most of the old Bootstrap customization used for v1 in favor of a new minimal set of customizations and dropping a bunch of custom components in favor of standard Bootstrap components.

Mind that this also impacts v1 for a few shared components. E.G. alerts, 404/error pages, ...
Some shared components still need to be re-implemented (E.G. in the project settings page), but there will soon be a follow-up PR.

Notion page reference

/deploy

[RenkuBot]

You can access the deployment of this PR at https://renku-ci-ui-3214.dev.renku.ch

[leafty]

Some early comments about bootstrap icons and overrides.

[leafty]

More comments.

[lorenzo-cavazzi]

@andre-code thank you for your review!

For all your comments, I've either 1) addressed it or 2) added it to the second round of design changes or 3) added an inline comment (below this message for non-inline comments). Please give it a look.

---

1, 2: Done

3. Consider adjusting the off-canvas size for the session view [...]

Currently, all the off-canvas elements have the same width. Making it larger for sessions won't help much -- we have a lot of vertical content, but expanding horizontally won't fit more elements and users will need to scroll anyway. For this reason, I prefer to keep it consistent with all the other off-canvas. We can revise this later if we wish to re-think how we display the content there.

4. In the session off-canvas, consider including the code repository permission information [...]

The space there seems a little limited to add more info. We could think about opening the Code repositories off-canvas on click. If we do that, we should add the same interaction for the other elements on the page (data source, launcher, ...). I would rather discuss this change with the product team since it will require a bit of work.

5: That's planned for the second round of design changes.

6, 7, 8, 9: Good point! I'll check into those with Jimena during the second round of design changes. Thank you for bringing those up!

10. Done

11. I would rather rework both the "Launched Sessions" and "Session Environment" sections separately; I agree the current output might be a little confusing to the users, but the restyle PR might not be the best place to change the content there.

[leafty]

Some thing I noted from the deployment:

1. The icon used in the new Alert components should be aligned to the top. If the content of the alert is large, then the icon floats too much in the middle
   
   

2. The small avatar should be used for project members:
   

Otherwise the changes look good, and any more adjustment can be done later.

[lorenzo-cavazzi]

@leafty
For the avatar, there was a discussion and we postponed the decision to the second iteration. I think we should leave this as is since we will address it soon; the alternative would be temporarily removing the avatar also from the other places.

For the alerts, we considered that the content is unlikely to be very long. In principle, I agree with your comment and I will bring this up again, but I would rather address this later since the topic has been discussed already and there are a few other details we would like to address for the alerts (E.G. using non-filled icons and match the color we use for the text)

[andre-code]

🚀

[RenkuBot]

Tearing down the temporary RenkuLab deplyoment for this PR.