Introduce an "enhanced" theme selector for user settings

[ivarnakken]

Description

Not a fan of the radio buttons

Result

• Changes look good on both light and dark theme.
• Changes look good with different viewports (mobile, tablet, etc.).
• Changes look good with slower Internet connections.

Before	After

Testing

• I have thoroughly tested my changes.

Changing themes works fine, and I've tested that changing it through the navbar updates the form (unlike before).

---

Resolves ABA-1212

[linear]

ABA-1212 Improve user theme selector on settings page

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
lego-bricks-storybook	⬜️ Ignored (Inspect)	Visit Preview		Jan 6, 2025 7:24pm

[Bestem0r]

Looks really good! 🤩

[emillub]

Looks very nice! Just curious; do you know why cypress cant save changes? I could do it.

[ivarnakken]

Just curious; do you know why cypress cant save changes? I could do it.

nooo idea 😆

[norbye]

Just curious; do you know why cypress cant save changes? I could do it.

nooo idea 😆

Doesn't work for me. I can press the save-button if I change the theme, but if I do not edit it the save button is deactivated :'(

The button is also deactivated if I change it and then change back before I try to save

Hmm upon further inspection what happened to me might be on purpose, in contrast to what happens to cypress

[norbye]

This peaked my curiosity, so I spent some time testing it. Seems that pristine is true even though the contents of the form is changed.. doesn't happen locally but for some reason it does with cypress

https://cloud.cypress.io/projects/niikbo/runs/8710/test-results/c013f453-4539-4957-8d7b-e91c18ccfca0/replay?actions=%5B%5D&att=1&browsers=%5B%5D&groups=%5B%5D&isFlaky=%5B%5D&modificationDateRange=%7B%22startDate%22%3A%221970-01-01%22%2C%22endDate%22%3A%222038-01-19%22%7D&orderBy=EXECUTION_ORDER&oses=%5B%5D&specs=%5B%5D&statuses=%5B%7B%22value%22%3A%22FAILED%22%2C%22label%22%3A%22FAILED%22%7D%5D&testingTypesEnum=%5B%5D&ts=1736266959432&utm_source=github

[falbru]

Looks really good! Great job 😍

[ivarnakken]

doesn't happen locally but for some reason it does with cypress

Yes it's impossible to reproduce locally ..

Thanks a lot for looking into it though! ❤️

[ShaileshS1702]

This is really cool!

[ch0rizo]

One step closer to looking better than TIHLDEs website😆

[eikhr]

Looks very good!

[ivarnakken]

lets go 🔥

[ch0rizo]

lets go 🔥

Its time😝

[norbye]

lets go 🔥

Its time😝

Glad to see this is alive 🤘

[ch0rizo]

Context for the thread above:

SSR/hydration was reinitializing the profile form, which reset Final Form’s pristine state after field edits, so the "Lagre endringer" submit button stayed disabled in CI even though the Cypress flow worked locally. Impossible to reproduce locally and CI Cypress run is flaky, giving unreliable result when nothing changed😩

[ivarnakken]

Context for the thread above:

SSR/hydration was reinitializing the profile form, which reset Final Form’s pristine state after field edits, so the "Lagre endringer" submit button stayed disabled in CI even though the Cypress flow worked locally. Impossible to reproduce locally and CI Cypress run is flaky, giving unreliable result when nothing changed😩

😩 i was before my time then - would've needed claude to resolve that bitch