perf: use icons instead of SVGs in TimeSlider

[VIKTORVAV99]

Description

Splits out icon changes in TimeSlider from #6911 so it is easier to review that PR and can be merged faster.

The reasoning for doing this and not using the SVG files as backgrounds are two fold. One we always need them so it's smart to bundle them directly with the code and reduce the http calls we make. Two they no longer match our visual design of the other icons and changing them to Font Awesome versions fixes that as we use Font Awesome in other parts of the app.

Preview

Double check

• I have run pnpx prettier@2 --write . and poetry run format in the top level directory to format my changes.

[madsnedergaard]

How about keeping existing icons (but moving them to React components) for now, and then we later on take a thorough revisit to all icon usage instead? I personally don't think it's worth using a consistent icon package if it means sacrificing eligibility and UX
¯\_(ツ)_/¯

[VIKTORVAV99]

How about keeping existing icons (but moving them to React components) for now, and then we later on take a thorough revisit to all icon usage instead? I personally don't think it's worth using a consistent icon package if it means sacrificing eligibility and UX

¯\_(ツ)_/¯

The problem with the existing icons are that they are not uniform and scaling them is not the easiest without a lot of manual work (or runtime calculations).

There are outline versions of these icons as well but I would much prefer to use the icon library than have them as custom components since that means we will use a consistent icon style. I'd be happy to discuss it on the design review it's Alex though if we have the time (tomorrow).

[madsnedergaard]

How about keeping existing icons (but moving them to React components) for now, and then we later on take a thorough revisit to all icon usage instead? I personally don't think it's worth using a consistent icon package if it means sacrificing eligibility and UX
¯_(ツ)_/¯

The problem with the existing icons are that they are not uniform and scaling them is not the easiest without a lot of manual work (or runtime calculations).

There are outline versions of these icons as well but I would much prefer to use the icon library than have them as custom components since that means we will use a consistent icon style. I'd be happy to discuss it on the design review it's Alex though if we have the time (tomorrow).

Did you have a chance to discuss this yesterday? :)

[VIKTORVAV99]

How about keeping existing icons (but moving them to React components) for now, and then we later on take a thorough revisit to all icon usage instead? I personally don't think it's worth using a consistent icon package if it means sacrificing eligibility and UX

¯_(ツ)_/¯

The problem with the existing icons are that they are not uniform and scaling them is not the easiest without a lot of manual work (or runtime calculations).

There are outline versions of these icons as well but I would much prefer to use the icon library than have them as custom components since that means we will use a consistent icon style. I'd be happy to discuss it on the design review it's Alex though if we have the time (tomorrow).

Did you have a chance to discuss this yesterday? :)

I did not, so let's pause this PR for a bit until next week.

I don't necessarily believe that this impacts the UX in a negative way though. Having a uniform icon style brings it's own UX benefits.

But I'll test it a bit on lower resolution devices as well and see how it looks.

[tonypls]

Code looks good to me, but I think it's more a UX change that is suited to @Alportan to review

[Alportan]

Code looks good to me, but I think it's more a UX change that is suited to @Alportan to review

Just a heads up on the dark mode: the contrast could use a little boost. We might want to tweak the slider nob's background and make it darker, as the white icons are blending into the nob's grey.

I've put together a quick GIF using what I call the "blur of accessibility" to illustrate the eligibility and UX concern Mads mentioned. I use this whenever I'm in doubt of contrast, as it can highlight any contrast issues (either in color or shape, in this case filled icons vs outlined).

You can see the outlined icons lose their contrast a bit. Here are my suggestions:

• Bump the nob size to 28px
• Bump up icon size to 20px
• Darken the nob a bit
• Add an outline to the nob for contrast
• Change the icon when no zone is selected to chevrons-left-right

I've mocked up these changes in Figma. Feel free to play with the blur to see the difference. Let me know what you think @VIKTORVAV99 ! 🙌

[VIKTORVAV99]

The proposed updates should be live now, let me know what you think 🙂

[tonypls]

LGTM

[VIKTORVAV99]

@Alportan do you have any additional feedback or can I merge this?

[Alportan]

@Alportan do you have any additional feedback or can I merge this?

Looking good, green light from my side! 🎉 You can merge! 😎