Refactor Frontend

[GrahamSH-LLK]

Description

This PR completely removes Vuetify from the photon-client codebase in favor of a custom component set built with Tailwind CSS and Reka UI.

Summary of changes

1. Completely removed Vuetify. This lowers build times, allows much more flexibility, and shrinks CSS bundles a lot.
2. Implemented simpler Tailwind + Reka component library (src/components/common/). This allows for more modern, accessible and custom components that fit our theme better.
3. Generally tighten up UI styling. Tweak breakpoints so that the UI is more usable at small viewports.
4. Moved body font from Prompt to Lato- Prompt is a really terrible body text font and doesn't support tabular numbers which leads to layout shifting and jittering. Lato is what our brandards recommend for body text anyways
5. Improved tree shaking of various parts of the app (Migrating icons alone cut <30% of content loaded)
6. Upgraded minor outdated deps

Meta

Merge checklist:

• Pull Request title is short, imperative summary of proposed changes
• The description documents the what and why, including events that led to this PR
• If this PR changes behavior or adds a feature, user documentation is updated
• If this PR touches photon-serde, all messages have been regenerated and hashes have not changed unexpectedly
• If this PR touches configuration, this is backwards compatible with all settings going back to the previous seasons's last release (seasons end after champs ends)
• If this PR touches pipeline settings or anything related to data exchange, the frontend typing is updated
• If this PR addresses a bug, a regression test for it is added
• If this PR adds a dependency, the license has been checked for compatibility and steps taken to follow it

[thatcomputerguy0101]

We should probably have a fallback for CSS contrast-color since some environments (like the VSCode integrated browser) don't support it yet.

This alternative gives acceptable fallback results: oklch(from var(--name) round(1.21 - L) 0 0), (from https://css-tricks.com/approximating-contrast-color-with-other-css-features/)

[spacey-sooty]

I can't toggle the low latency mode switch with this on my laptop with its in built webcam whereas I can (and observe that it has an effect) on main

[samfreund]

I don't like how you can't tell whether an element is a button or not. There should be some sort of indicator of whether something is clickable, which is currently missing.

[GrahamSH-LLK]

I don't like how you can't tell whether an element is a button or not. There should be some sort of indicator of whether something is clickable, which is currently missing.

Could you give an example of something that isn't clearly clickable? Buttons in the app have relatively consistent styling but I'm not sure if there's a specific spot I'm missing

[samfreund]

I don't like how you can't tell whether an element is a button or not. There should be some sort of indicator of whether something is clickable, which is currently missing.

Could you give an example of something that isn't clearly clickable? Buttons in the app have relatively consistent styling but I'm not sure if there's a specific spot I'm missing

The big one for me was with raw/processed stream mode. If you've only got one on, you can't turn it off , but the button doesn't change to indicate that. Similar things with other buttons.

[GrahamSH-LLK]

I don't like how you can't tell whether an element is a button or not. There should be some sort of indicator of whether something is clickable, which is currently missing.

Could you give an example of something that isn't clearly clickable? Buttons in the app have relatively consistent styling but I'm not sure if there's a specific spot I'm missing

The big one for me was with raw/processed stream mode. If you've only got one on, you can't turn it off , but the button doesn't change to indicate that. Similar things with other buttons.

How about this