betaflight-configurator Style: UI Refresh

This PR aims to:

Remove all of the old layout styles using outdated techniques in favor of flex- or grid-based layouts
Remove hard-set size values where applicable
And most noticeably, to refresh the old style for a more modern look, very close to the current website

Screenshots below: Or use preview deploy in the comments.

Opening the PR with the Setup tab being converted to the new layout and different breakpoints for desktop, tablet and mobile as I work on the rest. More tabs will be converted and old styles will be removed/updated going forward.

Please leave lots of constructive feedback! This is a big change, but it was discussed a lot internally prior to the PR - we belive this is a good way forward

May 13 '24 09:05 VitroidFPV

Deploy Preview for origin-betaflight-app ready!

Name	Link
Latest commit	0442b18d15602e60fc6253eb8dae6329b2dd13c4
Latest deploy log	https://app.netlify.com/sites/origin-betaflight-app/deploys/6671f5828252ba0008807d44
Deploy Preview	https://deploy-preview-3956.dev.app.betaflight.com
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

May 13 '24 09:05 netlify[bot]

Do you want to test this code? Here you have an automated build: Betaflight-Configurator-Android Betaflight-Configurator-Linux Betaflight-Configurator-macOS Betaflight-Configurator-Windows WARNING: It may be unstable and result in corrupted configurations or data loss. Use only for testing!

May 13 '24 09:05 github-actions[bot]

Tested the mobile layout, and fixes the issue with the size. Thanks! For the rest, it contains a lot of errors, I suppose that you don't want a review because it's a draft, or do you want some comments about the "Setup tab"?

May 14 '24 11:05 McGiverGim

@McGiverGim please comment as you wish 😅. For now, the Setup tab is the only one I tested across all sizes, the others not yet. I should have a couple done today, so I'll push them up

May 14 '24 18:05 VitroidFPV

save/reboot/etc is always left-aligned.

edit: yellow/orange links/words over white/gray is difficult on the eyes.

May 15 '24 13:05 nerdCopter

Ok, some comments, about light that is what I use:

The combos in the header have some strange outlines, maybe the Vue components styles hardcoded conflicts?
The black text over gray looks strange, in the header. In the contents it seems more or less ok to me. I don't know exactly why.
This seems disaligned to my eyes. I know is aligned with the top of the header, but maybe we can give some padding/margin on the top to the elements that don't have header to align with the body.
Similar here:
A little here too:
The letters of the buttons when hovering seem blur:
The ? that shows the tooltip when hovering, are not visible when the tooltip is open. I don't know if it's intended.

For the rest and incredible job. Maybe some color adjusting, but it's great. When it's more polished/finished I can give it another look.

May 15 '24 14:05 McGiverGim

@McGiverGim I was mostly working in dark mode, I'll fix the contrast issues, that does look pretty bad! As for the layout, for now, I wanted to make the big changes first and address the smaller alignments afterward when I can be sure it won't break some other thing

May 15 '24 19:05 VitroidFPV

I understand. It's s lot of work. Thanks for moving into this!

May 15 '24 20:05 McGiverGim

One thing: please, don't forget the Radio Emulator for MSP. It's usually forgotten and now the style is broken in this PR. You can see it if you select "MSP" as your radio protocol at the TX tab, and then a new button will appear at the bottom of the TX tab.

May 21 '24 07:05 McGiverGim