Improvement: New Add Category Flow

[justinfar]

The category modal has been slightly redesigned with a focus on improving the selection process for colors and icons.

• Colors & icons are now in a submenu/secondary modal that appears when clicking the edit icon
• This brings up preset colors + icons that users can select.
• On selection, the icon preview updates in both the primary and secondary modals.
• Users can also use a color picker to manually select a HEX value.
• If the user enters an invalid HEX code, it defaults to #000 (open to better validation suggestions).
• If a new category has a parent category, its color will be inherited for consistency.

Handling low contrast icon colors

Since we’re introducing custom colors, there’s a high chance that users will pick a low-contrast color (e.g., white on a light background), making icons hard to see

• It'd be great if we detect when an icon’s color is too close to the background color.
• If detected, automatically darken the icon (e.g., switch to dark gray or black) to maintain contrast.

Please let me know if you have any questions as you're building this out

Link to the Figma page