recloudstream
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
- [x] My suggestion is NOT about adding a new provider
- [x] I have searched the existing issues and this is a new ticket, NOT a duplicate or related to another open issue.
There is plenty of such instances in the app where we can show a more detailed UI. However creating a custom UI for thing single thing is simply unnecessary and takes both a lot of developer time to create and maintain. This is mostly a one time setting that not many people touch, so there is not a great incentive to make it better.
