Page MenuHomePhabricator
Files F3407559

D8278.diff
No OneTemporary
Actions

D8278.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
@@ -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 (
<Modal name="Emoji avatar selection" size="large" onClose={popModal}>
<div className={css.modalBody}>
@@ -71,6 +84,15 @@
onColorSelection={setPendingAvatarColor}
/>
</div>
+ <div className={css.saveButtonContainer}>
+ <Button
+ variant="filled"
+ buttonColor={buttonThemes.standard}
+ onClick={onSaveAvatar}
+ >
+ Save Avatar
+ </Button>
+ </div>
</div>
</Modal>
);

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 5, 6:40 AM (15 h, 34 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2616270
Default Alt Text
D8278.diff (2 KB)

Event Timeline