diff --git a/web/avatars/emoji-avatar-selection-modal.css b/web/avatars/emoji-avatar-selection-modal.css --- a/web/avatars/emoji-avatar-selection-modal.css +++ b/web/avatars/emoji-avatar-selection-modal.css @@ -9,3 +9,13 @@ justify-content: center; padding-top: 20px; } + +div.emojiPickerContainer { + display: flex; + justify-content: center; + align-items: center; +} + +div.colorSelectorContainer { + margin: 20px 80px; +} diff --git a/web/avatars/emoji-avatar-selection-modal.react.js b/web/avatars/emoji-avatar-selection-modal.react.js --- a/web/avatars/emoji-avatar-selection-modal.react.js +++ b/web/avatars/emoji-avatar-selection-modal.react.js @@ -1,5 +1,7 @@ // @flow +import data from '@emoji-mart/data'; +import Picker from '@emoji-mart/react'; import * as React from 'react'; import { useModalContext } from 'lib/components/modal-provider.react.js'; @@ -50,20 +52,29 @@ [pendingAvatarColor, pendingAvatarEmoji], ); + const onEmojiSelect = React.useCallback(selection => { + setPendingAvatarEmoji(selection.native); + }, []); + return (
- +
+ +
+
+ +
);