From 548b1ebafd31652e1c88bd4d8a0c6c9f5cc876e6 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Mon, 26 Feb 2024 12:58:24 +0100
Subject: [PATCH] update avatar setting

---
 .../avatar-settings.module.css                |  1 +
 .../avatar-settings/avatar-settings.tsx       | 25 +++++++------------
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/src/views/settings/avatar-settings/avatar-settings.module.css b/src/views/settings/avatar-settings/avatar-settings.module.css
index cf018486..7e22482d 100644
--- a/src/views/settings/avatar-settings/avatar-settings.module.css
+++ b/src/views/settings/avatar-settings/avatar-settings.module.css
@@ -2,6 +2,7 @@
   width: 70px;
   height: 70px;
   border: 1px solid var(--border-text);
+  cursor: pointer;
 }
 
 .avatar img {
diff --git a/src/views/settings/avatar-settings/avatar-settings.tsx b/src/views/settings/avatar-settings/avatar-settings.tsx
index de99d812..effc5e24 100644
--- a/src/views/settings/avatar-settings/avatar-settings.tsx
+++ b/src/views/settings/avatar-settings/avatar-settings.tsx
@@ -1,16 +1,13 @@
 import { useEffect, useMemo, useState } from 'react';
 import { setAccount, useAccount, useAuthorAvatar } from '@plebbit/plebbit-react-hooks';
-import { useTranslation } from 'react-i18next';
 import styles from './avatar-settings.module.css';
 
 interface AvatarSettingsProps {
-  areSettingsShown?: boolean;
   avatar?: any;
   showSettings?: () => void;
 }
 
-const AvatarPreview = ({ avatar, showSettings, areSettingsShown }: AvatarSettingsProps) => {
-  const { t } = useTranslation();
+const AvatarPreview = ({ avatar, showSettings }: AvatarSettingsProps) => {
   const account = useAccount();
   let author = useMemo(() => ({ ...account?.author, avatar }), [account, avatar]);
 
@@ -30,18 +27,14 @@ const AvatarPreview = ({ avatar, showSettings, areSettingsShown }: AvatarSetting
 
   return (
     <>
-      <div className={styles.avatar}>
-        {imageUrl && state !== 'initializing' ? (
-          <img src={imageUrl} alt='avatar' />
-        ) : (
-          <span className={styles.emptyAvatar} onClick={showSettings}>
-            {areSettingsShown ? '–' + t('hide') : '+' + t('add')}
-          </span>
-        )}
-      </div>
-      <div className={styles.state}>
-        {stateText} {error?.message}
+      <div className={styles.avatar} onClick={showSettings}>
+        {imageUrl && state !== 'initializing' && <img src={imageUrl} alt='avatar' />}
       </div>
+      {state !== 'succeeded' && account?.author?.avatar && (
+        <div className={styles.state}>
+          {stateText} {error?.message}
+        </div>
+      )}
     </>
   );
 };
@@ -128,7 +121,7 @@ const AvatarSettings = () => {
 
   return (
     <div className={styles.avatarSettings}>
-      <AvatarPreview avatar={avatar} showSettings={() => setShowSettings(!showSettings)} areSettingsShown={showSettings} />
+      <AvatarPreview avatar={avatar} showSettings={() => setShowSettings(!showSettings)} />
       {showSettings && (
         <div className={styles.avatarSettingsForm}>
           <div className={styles.avatarSettingInput}>