Mattermost-server: Improve Emoji Picker UI

[mattermod]

A refreshed UI for the emoji picker to better align with the latest design work.

Proposed Solution

Plus a few additional functional elements:

1. Skin tone selector
2. A custom emoji button for more contextual access to creating custom emojis

Figma design file

Figma prototype

---

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.

JIRA: https://mattermost.atlassian.net/browse/MM-25435

[esethna]

Anyone interested in this ticket: Note that there is an existing ticket that adds the emoji skin tone support that may conflict with this ticket: https://github.com/mattermost/mattermost-server/issues/15930

[esethna]

@vipul08 is taking this one along with https://github.com/mattermost/mattermost-server/issues/15930

[esethna]

@vipul08 how's this going? Let us know if you're still working on this :)

[esethna]

Re-adding up for grabs as @vipul08 won't be working on this anymore

[bhargav50]

@esethna I would like to work on this.

[bhargav50]

In master branch emoji picker, emojis look smaller. So according to new design, emoji size also needs to be increased right?

[esethna]

@bhargav50 yes correct, you can use figma to inspect the design: see a brief tutorial: https://drive.google.com/open?id=12lyaF55UVayzIIWhvLpMjHXubWqm78yy&authuser=matthew.birtch%40mattermost.com&usp=drive_fs

[bhargav50]

Thanks for the suggestion @esethna, I tried downloading and the video is not playable in VLC or google preview. Though now I know the inspect feature in figma.

[bhargav50]

@esethna Here what should be shown when "Custom Emoji" button is clicked? I can't find that in prototype or designs.

[bhargav50]

@esethna Here what should be shown when "Custom Emoji" button is clicked? I can't find that in prototype or designs.

Found it now, I thought it will be a popup or something but it is an old functionality only where I have to redirect.

[esethna]

@bhargav50 how's this going? Need any assistance?

[bhargav50]

@bhargav50 how's this going? Need any assistance?

Almost done, l will raise PR this weekend. Emoji logic was somewhat tricky to figure out but now it's sorted.

[esethna]

Awesome! Thanks @bhargav50!

[bhargav50]

@esethna in new design, on click of skin tone emoji, all the skin tones are appearing in one specific animation effect. I am stuck on how to implement that animation. I could use some help here.

[esethna]

@asaadmahmood would you be able to provide some assistance here ^

[asaadmahmood]

@bhargav50 Can you share a gif or video on how it is appearing?
Also, if you can create a PR for the stuff you've already done, I can take a look and give suggestions, or submit code to the PR.

[bhargav50]

@asaadmahmood for animation effect, check out the Figma prototype and click on skin tone emoji. Then that all skin tone options toolbar will appear with an animation which I am talking about.

[asaadmahmood]

@bhargav50 Yup, I understand, was just asking how far you were. I'll check out your PR, if you already have the skintone buttons in, I can add that animation.