Mattermost-server: Improve the UX of the custom theme text box and color selectors

[esethna]

If you're interested please comment here and come join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

New contributors please see our Developer's Guide.

---

Notes: Jira ticket

Notes for implementation

Please reach out in the [UX Design|https://community.mattermost.com/core/channels/ux-design] channel with any questions.

Design and UX changes

Design files can be found here: https://invis.io/DXS0Z4X7GUJ#/363350964_Project_Details.

Final specifications can be found here: https://docs.google.com/document/d/1Y2wZ5mZ5qrdwXObnStU7fZZAZITJS_rvQI0h-9kCt8E/edit#heading=h.5vmpeaypjktl

Summary of changes below:

Combo control

Input controls are now combo controls that support text input and a color picker. We’ve defined the behavior for the inputs controls here

High level behavior notes:

1. Input only accepts the following characters: a-f, A-F, and 0-9
2. HEX values render as all Uppercase in the input
3. Inputs DO NOT accept more than 6 characters
4. Color tile should update while the value is being input or immediately if a users pastes a value in the input
5. Don’t update the color tile if it’s not a valid hex value
6. Revert to the last valid hex value if a user inputs an invalid value.

Spacing

Spacing has been updated to align with grid system defined in the UX Toolkit.

Color Picker

Color picker has been simplified to:

1. Support HEX values only
2. Is a color picker only and doesn’t support input values in the popover

Sharing Theme Colors

Improved the copy and paste text area and introduced a button as an affordance to users to make the action clear.

1. We’ll keep the current functionality which allows users to click or tab into the input to use keyboard commands to copy the theme.
2. Well present the user with a success state in the form of a copied badge once the theme content has been copied either using the button, keyboard commands, or mouse-click-context menu.

[niklabh]

Can i work on this?

[niklabh]

Here's a pull request: https://github.com/mattermost/mattermost-webapp/pull/3672

[niklabh]

Can i get access to https://docs.google.com/document/d/1Y2wZ5mZ5qrdwXObnStU7fZZAZITJS_rvQI0h-9kCt8E/edit#heading=h.5vmpeaypjktl
I have requested for permission from [email protected]

[hanzei]

Thanks for working on this @niklabh :+1:

[jasonblais]

Thanks @niklabh!