style(avatar settings): add info about anon mode if it's enabled

src/components/settings-modal/avatar-settings/avatar-settings.module.css

@@ -11,6 +11,13 @@
   display: inline-block;
 }
 
+.warning {
+  font-size: 0.8em;
+  color: red;
+  padding: 0 10px 10px 10px;
+  display: block;
+}
+
 .avatar img {
   width: 64px;
   height: 64px;

src/components/settings-modal/avatar-settings/avatar-settings.tsx

@@ -4,6 +4,7 @@ import { setAccount, useAccount, useAuthorAvatar } from '@plebbit/plebbit-react-
 import styles from './avatar-settings.module.css';
 import { Trans, useTranslation } from 'react-i18next';
 import LoadingEllipsis from '../../loading-ellipsis';
+import useAnonMode from '../../../hooks/use-anon-mode';
 
 const AvatarPreview = ({ avatar }: any) => {
   const { t } = useTranslation();
@@ -114,8 +115,11 @@ const AvatarSettings = () => {
     alert(`saved`);
   };
 
+  const { anonMode } = useAnonMode();
+
   return (
     <div className={styles.avatarSettings}>
+      {anonMode && <span className={styles.warning}>{t('avatar_warning')}</span>}
       <AvatarPreview avatar={avatar} />
       <div className={styles.avatarSettingsForm}>
         <div className={styles.avatarSettingInput}>