Improve the UX for de-duped themes

[lmorchard]

With PR #231 we stop saving a new theme entry if the current theme matches any of the themes already saved. This could use some UI polish, e.g.:

• Re-order the set of saved themes so that the already saved one that matches the current one pops to the top of the list on save attempt
• CSS animation to show the reorder? (might be wasted if the saved list is off-screen)
• Grey-out the save button if the current theme is already saved (a little like issue Refreshing the page wrongly changes the "Saved" button into "Save" #246)

[ManishAradwad]

Hey! I'd love taking this up. Could you plz point me in some direction to begin??

[Rob--W]

Grey-out the save button if the current theme is already saved (a little like issue #246)

This has already been implemented.

The UX of the other suggestions (re-ordering themes) does not look that friendly to me. I think that adding a border around the active theme (or other form of visual emphasis) looks better, and it's also easier to implement.

The React component that is responsible for rendering these theme blocks is implemented at https://github.com/mozilla/FirefoxColor/blob/2126d3698a1d0126d4a5ed6d1fca20b8d1299bff/src/web/lib/components/PaginatedThemeSelector/index.js

The README provides documentation on getting started. Knowledge of React is needed.

[ojuschugh1]

Greetings,
Hi Everyone, Is this issue still open?

Thanks & Regards