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 @@ -2,6 +2,7 @@ display: flex; flex-direction: column; overflow: hidden; + padding: 20px; } div.avatarContainer { @@ -17,5 +18,10 @@ } div.colorSelectorContainer { - margin: 20px 80px; + margin: 20px 60px; +} + +div.saveButtonContainer { + display: flex; + flex-direction: column; } 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 @@ -2,8 +2,10 @@ import data from '@emoji-mart/data'; import Picker from '@emoji-mart/react'; +import invariant from 'invariant'; import * as React from 'react'; +import { EditUserAvatarContext } from 'lib/components/base-edit-user-avatar-provider.react.js'; import { useModalContext } from 'lib/components/modal-provider.react.js'; import { defaultAnonymousUserEmojiAvatar, @@ -17,6 +19,7 @@ import Avatar from './avatar.react.js'; import css from './emoji-avatar-selection-modal.css'; +import Button, { buttonThemes } from '../components/button.react.js'; import Modal from '../modals/modal.react.js'; import ColorSelector from '../modals/threads/color-selector.react.js'; import { useSelector } from '../redux/redux-utils.js'; @@ -24,6 +27,11 @@ function EmojiAvatarSelectionModal(): React.Node { const { popModal } = useModalContext(); + const editUserAvatarContext = React.useContext(EditUserAvatarContext); + invariant(editUserAvatarContext, 'editUserAvatarContext should be set'); + + const { setUserAvatar } = editUserAvatarContext; + const currentUserInfo = useSelector(state => state.currentUserInfo); const currentUserAvatar: ClientAvatar = getAvatarForUser(currentUserInfo); const defaultUserAvatar: ClientEmojiAvatar = currentUserInfo?.username @@ -56,6 +64,11 @@ setPendingAvatarEmoji(selection.native); }, []); + const onSaveAvatar = React.useCallback( + () => setUserAvatar(pendingEmojiAvatar), + [pendingEmojiAvatar, setUserAvatar], + ); + return (
@@ -71,6 +84,15 @@ onColorSelection={setPendingAvatarColor} />
+
+ +
);