Find solution for stickfrequency visual representation

[bastislack]

Having 7 colors for the stickfrequencies is not great as it kind of takes away the possibility to have good primary and secondary app colors. So let's come up with a better alternative.

[Dosbodoke]

I like how Airbnb approaches Radio Groups. Some big boxes with descriptions and an icon to identify the success frequency, and implement a different state for the selected one. IDK which Icons could be used to represent the evolution of the ranking system, but if we could do some Freestyle personalized icons would be perfect.

Another example of a Radio group is from Pines UI, it's simpler but works nicely.

[bastislack]

Nice, the icons could definitely be a good solution. What about combining colors (e.g. red, yellow, and green) together with icons. This way users can still make their tricks colorful but at the same time we don't use 7 different colors.

[bastislack]

We could do something like:

• Work in progress: Red
• Once: Red + double arrow up
• Rarely: Yellow
• Sometimes: Yellow + double arrow up
• Often: Green
• Generally: Green + double arrow up
• Always: Green + some star icon + possibly a dofferent border decoration?

[Dosbodoke]

Hello, sorry for the delay, I have been very busy with a personal Highline project.

I liked your purpose and tried to design it, needs some refinement on colors and text content but I think it can work. Let me know what is your opinion.

Improvements

1. The gradient border on the always option can be better, but I wasn't able to change its direction on Figma.
2. Putting a shadow box on the card should add contrast to the background and improve visibility.

https://www.figma.com/file/tJXK2yCbClWXtqqOWFEJ1W/Highline-Freestyle?type=design&node-id=0%3A1&mode=design&t=ndCdimj92Zq0iOLK-1

[Dosbodoke]

I used the following component as inspiration

https://flowbite.com/docs/forms/radio/#advanced-layout

[bastislack]

Nice, thanks for your input! We can definitely use that as a base :)