Page MenuHomePhabricator
Files F3407501

D8268.diff
No OneTemporary
Actions

D8268.diff
View Options

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,16 +52,25 @@
[pendingAvatarColor, pendingAvatarEmoji],
);
+ const onEmojiSelect = React.useCallback(selection => {
+ setPendingAvatarEmoji(selection.native);
+ }, []);
+
return (
<Modal name="Emoji avatar selection" size="large" onClose={popModal}>
<div className={css.modalBody}>
<div className={css.avatarContainer}>
<Avatar avatarInfo={pendingEmojiAvatar} size="profile" />
</div>
- <ColorSelector
- currentColor={pendingAvatarColor}
- onColorSelection={setPendingAvatarColor}
- />
+ <div className={css.emojiPickerContainer}>
+ <Picker data={data} theme="dark" onEmojiSelect={onEmojiSelect} />
+ </div>
+ <div className={css.colorSelectorContainer}>
+ <ColorSelector
+ currentColor={pendingAvatarColor}
+ onColorSelection={setPendingAvatarColor}
+ />
+ </div>
</div>
</Modal>
);

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 5, 6:25 AM (15 h, 26 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2616227
Default Alt Text
D8268.diff (1 KB)

Event Timeline