Use inverted colors for score sliders (+ some refactoring)

annavik commented 3 days ago

Summary

Use inverted colors for score threshold everywhere
"Primary blue" as fill color in occurrence list view
"Secondary blue" as fill color in session detail view (we needed some more contrast here)
Occurrence frame colors will now match the ring color in list list view. Logic based on score, see intervals:
- [0.8, 1]: "success green"
- [0.6, 0.8): "warning orange"
- [0, 0.6): "destructive green"
In session detail view we now use the same slider as in the list view (our new one from Nova UI Kit).
Remove unused slider code and rework the component structure

Comments

My plan is to remove more code like this, while we gradually move towards using Nova in more places. My hope is to keep the Antenna FE code more clean this way, keeping it focused on Antenna specific FE logic rather than styling! :)

Screenshots

After:

netlify[bot] commented 3 days ago

Deploy Preview for ami-dev ready!

Name	Link
Latest commit	77ff4de76ba8593e883e5d44757eee21b1a51474
Latest deploy log	https://app.netlify.com/sites/ami-dev/deploys/673dd168ae54fb0008f8f98c
Deploy Preview	https://deploy-preview-620--ami-dev.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 73 Accessibility: 89 Best Practices: 92 SEO: 100 PWA: 80 View the detailed breakdown and full score reports

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

annavik commented 3 days ago

My suggestion on updates to this PR after discussion on Slack (thank you @mihow !):

We revert updated score slider color to generic blue
We update occurrences frame colors in session detail view, to follow same logic as the circles in list view

annavik commented 2 days ago

PR is updated, updated description as well.

RolnickLab / antenna