Style: UI Refresh

[VitroidFPV]

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

[netlify]

✅ Deploy Preview for origin-betaflight-app ready!

Name	Link
🔨 Latest commit	f4a02ef
🔍 Latest deploy log	https://app.netlify.com/sites/origin-betaflight-app/deploys/6653a487cade96000829ba3b
😎 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.

[McGiverGim]

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"?

[VitroidFPV]

@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

[nerdCopter]

save/reboot/etc is always left-aligned.

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

[McGiverGim]

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

1. The combos in the header have some strange outlines, maybe the Vue components styles hardcoded conflicts?
   
2. 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.
   
3. 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.
   
4. Similar here:
   
5. A little here too:
   
6. The letters of the buttons when hovering seem blur:
   
7. 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.

[VitroidFPV]

@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

[McGiverGim]

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

[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.

[sonarcloud]

Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud