diff --git a/lib/shared/avatar-utils.js b/lib/shared/avatar-utils.js --- a/lib/shared/avatar-utils.js +++ b/lib/shared/avatar-utils.js @@ -345,6 +345,7 @@ } export { + defaultAnonymousUserEmojiAvatar, defaultEmojiAvatars, getRandomDefaultEmojiAvatar, getDefaultAvatar, diff --git a/web/avatars/emoji-avatar-selection-modal.css b/web/avatars/emoji-avatar-selection-modal.css new file mode 100644 --- /dev/null +++ b/web/avatars/emoji-avatar-selection-modal.css @@ -0,0 +1,11 @@ +div.modalBody { + display: flex; + flex-direction: column; + overflow: hidden; +} + +div.avatarContainer { + display: flex; + justify-content: center; + padding-top: 20px; +} 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 @@ -3,17 +3,50 @@ import * as React from 'react'; import { useModalContext } from 'lib/components/modal-provider.react.js'; +import { + defaultAnonymousUserEmojiAvatar, + getAvatarForUser, + getDefaultAvatar, +} from 'lib/shared/avatar-utils.js'; +import type { + ClientAvatar, + ClientEmojiAvatar, +} from 'lib/types/avatar-types.js'; +import Avatar from './avatar.react.js'; +import css from './emoji-avatar-selection-modal.css'; import Modal from '../modals/modal.react.js'; +import { useSelector } from '../redux/redux-utils.js'; function EmojiAvatarSelectionModal(): React.Node { const modalContext = useModalContext(); + + const currentUserInfo = useSelector(state => state.currentUserInfo); + const currentUserAvatar: ClientAvatar = getAvatarForUser(currentUserInfo); + const defaultUserAvatar: ClientEmojiAvatar = currentUserInfo?.username + ? getDefaultAvatar(currentUserInfo.username) + : defaultAnonymousUserEmojiAvatar; + + // eslint-disable-next-line no-unused-vars + const [pendingUserAvatar, setPendingUserAvatar] = + React.useState( + currentUserAvatar.type === 'emoji' + ? currentUserAvatar + : defaultUserAvatar, + ); + return ( + > +
+
+ +
+
+ ); }