Implement new UI on Edit Mode

[ArturoManzoli]

Implementation based on the Figma mockups developed from the ideas of @ES-Alexander and further developed and debated by the rest of the SW team.

• Responsiveness to mobile devices will be implemented in a following task.

Closes #976

[patrickelectric]

Should we use import keys for this images to avoid possible breaks ? Since images path changes will be detected in compile time. At the moment this is not possible because of computed.

import RovThumb from '@/src/assets/vehicles/BlueROV_thumb.png'

[rafaellehmkuhl]

1. Clicking the widget gear icon is not opening their configuration menu here.

2. Clicking the mini-widget gear icon is also not opening their configuration menu.

3. Hovering a widget is causing it's entry to highlight, but hovering the entry is not highlighting the widget (on the mini-widgets this is working fine).

4. The highlight are of those two buttons is strange right now, don't know why. One is much bigger than the other, and both are overlapping their neighborhood. Maybe we change the icon color instead of putting an aurea:

5. The profile switch floating menu has a very weird background underneath it:

6. When the "config profile" button is clicked, the context menu is not being closed:

7. The default BlueRobotics logo with the white background is very generating a very weird combination of colors. Could we change it to a transparent-background white logo?

8. I think as a user I would expect the carrousel below to be scrollable, although we can open an issue and attack it in a stretch after stable:

9. Also as a stretch on a future issue, I think we should make the mini-widget entries also draggable, to have the same pattern as the rest.

[ArturoManzoli]

Main updates:

• Fixed responsiveness to HD and HD+ screens
• Items 1, 2, 3, 5, 6 and 7 from @rafaellehmkuhl review. --> Fixed
• Item 4 --> Code looks fine. Also not happening on latest cockpit release (1)
• Items 8 and 9 --> Specific issues created to solve those
• Integrated widgets configuration dialogs to new interface layout (2)

(1)
https://github.com/user-attachments/assets/8506ca5b-ff68-4f29-adfc-3fc856c4404b

(2)

[rafaellehmkuhl]

The previous points seem indeed to be fixed! I have found only two problems remaining, that were not happening before, both related to the profile change menu:

1. The profile-change context menu is apparently broken:

2. The icon for the vehicle is also presenting some problem, as it's changing from the default when the profile is selected.

Kapture.2024-07-22.at.10.28.19.mp4

[rafaellehmkuhl]

Awesome changes!