[DRAFT] Dark theme, UI elements unification, UX enhancements

[bfmvsa]

THIS IS DRAFT, please do not merge since some parts of this huge PR is still in progress.

Please Note: I didn't test these changes in Windows, because I do not have this OS, if there are any problems please send me screenshots.

I'm going to write detailed docs for all changes. But for now this short description is:
Mostly all changes are cosmetic, the biggest UX changes were in Failsafe tab (simplified visual part).
In this PR I use bootstrap sass framework for unification UI elements like buttons, tables, lists, etc. Also, it supports dark themes out of the box. However, developers still can use regular CSS files as they used to be.

Apart from Dark/Light theme, I've added an inverted sidebar & header according to this reasonable request.

Some screenshots:

[14 October '24]
Not ready tabs:

1. SITL
2. Mixer
3. Outputs
4. Tuning
5. Programming
6. LED Strip

Ready for testing tabs:

1. Welcome
2. Mission Control
3. Firmware Flasher
4. Status
5. Calibration
6. Ports
7. Configuration
8. Failsafe
9. Advanced Tuning
10. Receiver
11. Modes
12. Adjustments
13. GPS
14. Alignment Tool
15. OSD
16. Sensors
17. Tethered Logging
18. Blackbox
19. CLI
20. Options

[bfmvsa]

Added responsive "screen" in the OSD tab

Changed behavior of "helpicon" when it is actually a link (In my opinion it was not obvious that this is the external link)

Changed behavior of "Highlight profiles" checkbox, now it works without "reloading" of page

Simplified Failsafe tab UI, now you do not see any inputs if they do not needed for current procedure

Mobile friendly design (at least elements should not be overlapping each other)

Unified styles and design tokens across the app

And a lot of other fixes/improvements, everything will be described in docs

[trailx]

I appreciate the UI changes you've been working on. Looks like a lot of small positive changes! To clarify since you're talking about a mobile-friendly design, will this become a web-app like betaflight's configurator? or is it still going to be a standalone app only?

[bfmvsa]

@trailx This is still a standalone app, when I say "mobile friendly" I mean it looks ok and is usable on narrow screens. In other words, It has a responsive design.

[trailx]

@bfmvsa I gotcha, I wasn't sure if there was something I had missed. There are often times when I use it half screen, so just being more responsive to window size will be nice!

Since you're in there, one idea that came up in a discussion was creating a button in the blackbox tab that would put the FC into MSC mode. Betaflight has this, and it's handy rather than having to look it up on GitHub every time. This seems like a relatively easy add and would bring more attention to the MSC function. Since you're working on the UI, you seemed like the best person to bring this up to. Thanks for the consideration!

[bfmvsa]

@trailx It looks like somebody was trying to add this button (at least it is presented on the tab). But if I am not mistaken this button is not working (always disabled and there are no any click handlers for this button), also this button is added only for SD cards, need it also for onboard dataflash chip.
As a part of this huge PR I decided to not change the current logic a lot, but in the future your suggestion will be implemented, this is already in my todo list :)