UI: Improve Primary Color Selection with Visual Swatches

Describe your suggested feature

The current primary color selector uses a text-based list of color names.This forces users to guess the actual shade based on a label, often requiring them to repeatedly apply colors to see the result. This process is inefficient and not visually intuitive.

Proposed Solution:

Replace the text list with a grid of visual color swatches,organized by hue and shade for quick, intuitive selection.

Key Implementation Details:

• Visual Swatches: Use circular color swatches instead of text names, allowing users to see the color directly.
• Organized Layout: Group swatches into rows by base color (e.g., Blue, Green, Red).
• Shade Gradient: Within each row, display 4-5 shades of that color, logically ordered from lightest to darkest.

Example Layout:

• Blue Row: Light Blue Swatch, Blue Swatch, Dark Blue Swatch, Navy Swatch
• Green Row: Light Green Swatch, Green Swatch, Dark Green Swatch, Olive Swatch

Benefits:

• Faster & More Intuitive: Users can identify and select their desired color instantly, without guesswork.
• Cleaner Interface: A structured grid is easier to scan than a long, plain text list.
• Simplified Management: Reduces the reliance on precise and often subjective color naming.

This change would make the customization process significantly more efficient and enjoyable, aligning with modern UI/UX best practices.

Other details

Acknowledgements

• My suggestion is NOT about adding a new provider
• I have searched the existing issues and this is a new ticket, NOT a duplicate or related to another open issue.

Start by locating the current primary color selector in the Android app and running the customization screen to understand its existing behavior. Replace the text-based list with circular swatches arranged by hue and shade, then verify that users can identify and select colors through the proposed grid layout.