NASA-AMMOS / aerie-ui

The client application for Aerie.
https://nasa-ammos.github.io/aerie-docs/
MIT License
28 stars 4 forks source link

Refresh icons using radix icon set #1175

Open lklyne opened 3 months ago

lklyne commented 3 months ago

The current stellar icon set has room for improvement. The icons use a fill style that draws a lot of visual attention, and the rounded corners aren't the best fit for a dense and technical application. In addition, many of the icons aren't pixel fit, creating blurry icons at small sizes due to anti-aliasing.

The current stellar icon set is using 16x16px icons, making it difficult to center things that are pixel fit. Radix has a crispy set of icons that fit most of our use cases. https://www.radix-ui.com/icons

Lots of the icons we use in aerie are already present in the Radix Icon set, and I've re-created our custom icons in this style, ensuring everything is pixel fit and legible at small sizes. Would be great to include these in the UI refactor.

image

Here's the icon set applied to the timeline toolbar. When we use a toolbar ribbon like this, we should also have no gaps between the hit target and edge of the container. This makes the clickable area a much more accessible 40px vs 24px as it is now. Still a bit of design iteration on how to handle the different states (on / off / keyboard toggle).

image

All radix icons: image

This is currently in a working branch of stellar, but icons should be cleaned up enough to be added: https://www.figma.com/file/ry4MSmDg1HthhvihgkDUYk/Radix-icons-test?type=design&node-id=11751-74&mode=design&t=IUckNNlfZVt3kLJW-4

lklyne commented 3 months ago

This shows the pixel fitting issue with 16x16 icons image