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 @@ -35,6 +35,8 @@ const { setUserAvatar, userAvatarSaveInProgress } = editUserAvatarContext; const [errorMessage, setErrorMessage] = React.useState(); + const [updateSuccessful, setUpdateSuccessful] = + React.useState(false); const currentUserInfo = useSelector(state => state.currentUserInfo); const currentUserAvatar: ClientAvatar = getAvatarForUser(currentUserInfo); @@ -66,26 +68,40 @@ const onEmojiSelect = React.useCallback(selection => { setErrorMessage(); + setUpdateSuccessful(false); setPendingAvatarEmoji(selection.native); }, []); const onColorSelection = React.useCallback((hex: string) => { setErrorMessage(); + setUpdateSuccessful(false); setPendingAvatarColor(hex); }, []); const onSaveAvatar = React.useCallback(async () => { try { await setUserAvatar(pendingEmojiAvatar); + setUpdateSuccessful(true); } catch { setErrorMessage('Avatar update failed. Please try again.'); } }, [pendingEmojiAvatar, setUserAvatar]); let saveButtonContent; + let buttonColor; if (userAvatarSaveInProgress) { + buttonColor = buttonThemes.standard; saveButtonContent = ; + } else if (updateSuccessful) { + buttonColor = buttonThemes.success; + saveButtonContent = ( + <> + + {'Avatar update succeeded.'} + + ); } else if (errorMessage) { + buttonColor = buttonThemes.danger; saveButtonContent = ( <> @@ -93,6 +109,7 @@ ); } else { + buttonColor = buttonThemes.standard; saveButtonContent = 'Save Avatar'; } @@ -118,9 +135,7 @@