style(settings): update UI

src/views/settings/avatar-settings/avatar-settings.module.css

@@ -5,20 +5,15 @@
   cursor: pointer;
 }
 
+.avatarPreview {
+  display: inline-block;
+}
+
 .avatar img {
   width: 70px;
   height: 70px;
 }
 
-.settingsBox {
-  margin-top: 5px;
-  border: 1px solid var(--border-contrast);
-  border-radius: 7px;
-  padding: 7px;
-  position: relative;
-  display: inline-block;
-}
-
 .avatarSettingsForm {
   padding-top: 10px;
 }
@@ -60,7 +55,7 @@
 }
 
 .state {
-  padding: 10px 0;
+  padding-top: 10px;
   max-width: 300px;
 }
 

src/views/settings/avatar-settings/avatar-settings.tsx

@@ -6,9 +6,10 @@ import { Trans, useTranslation } from 'react-i18next';
 
 interface AvatarSettingsProps {
   avatar?: any;
+  showSettings?: () => void;
 }
 
-const AvatarPreview = ({ avatar }: AvatarSettingsProps) => {
+const AvatarPreview = ({ avatar, showSettings }: AvatarSettingsProps) => {
   const account = useAccount();
   let author = useMemo(() => ({ ...account?.author, avatar }), [account, avatar]);
 
@@ -28,7 +29,9 @@ const AvatarPreview = ({ avatar }: AvatarSettingsProps) => {
 
   return (
     <>
-      <div className={styles.avatar}>{imageUrl && state !== 'initializing' && <img src={imageUrl} alt='' />}</div>
+      <div className={styles.avatar} onClick={showSettings}>
+        {imageUrl && state !== 'initializing' && <img src={imageUrl} alt='' />}
+      </div>
       {state !== 'succeeded' && account?.author?.avatar && (
         <div className={styles.state}>
           {stateText} {error?.message}
@@ -117,90 +120,85 @@ const AvatarSettings = () => {
 
   return (
     <div className={styles.avatarSettings}>
-      <AvatarPreview avatar={avatar} />
-      <div className={styles.settingsBox}>
-        <button className={styles.showSettings} onClick={() => setShowSettings(!showSettings)}>
-          {showSettings ? t('hide_settings') : t('show_settings')}
-        </button>
-        {showSettings && (
-          <div className={styles.avatarSettingsForm}>
-            <div className={styles.avatarSettingInput}>
-              <span className={styles.settingTitle}>{t('chain_ticker')}</span>
-              <input
-                type='text'
-                placeholder='eth/sol/avax'
-                autoCorrect='off'
-                autoComplete='off'
-                spellCheck='false'
-                defaultValue={account?.author?.avatar?.chainTicker}
-                onChange={(e) => setChainTicker(e.target.value)}
-              />
-            </div>
-            <div className={styles.avatarSettingInput}>
-              <span className={styles.settingTitle}>
-                <Trans
-                  i18nKey='token_address_whitelist'
-                  shouldUnescape={true}
-                  components={{
-                    1: (
-                      <Link
-                        to='https://github.com/plebbit/plebbit-react-hooks/blob/557cc3f40b5933a00553ed9c0bc310d2cd7a3b52/src/hooks/authors/author-avatars.ts#L133'
-                        target='_blank'
-                        rel='noopener noreferrer'
-                      />
-                    ),
-                  }}
-                />
-              </span>
-              <input
-                type='text'
-                placeholder='0x...'
-                autoCorrect='off'
-                autoComplete='off'
-                spellCheck='false'
-                defaultValue={account?.author?.avatar?.address}
-                onChange={(e) => setTokenAddress(e.target.value)}
-              />
-            </div>
-            <div className={styles.avatarSettingInput}>
-              <span className={styles.settingTitle}>{t('token_id')}</span>
-              <input
-                type='text'
-                placeholder='Token ID'
-                autoCorrect='off'
-                autoComplete='off'
-                spellCheck='false'
-                defaultValue={account?.author?.avatar?.id}
-                onChange={(e) => setTokenId(e.target.value)}
-              />
-            </div>
-            <div className={styles.copyMessage}>
+      <AvatarPreview avatar={avatar} showSettings={() => setShowSettings(!showSettings)} />
+      {showSettings && (
+        <div className={styles.avatarSettingsForm}>
+          <div className={styles.avatarSettingInput}>
+            <span className={styles.settingTitle}>{t('chain_ticker')}</span>
+            <input
+              type='text'
+              placeholder='eth/sol/avax'
+              autoCorrect='off'
+              autoComplete='off'
+              spellCheck='false'
+              defaultValue={account?.author?.avatar?.chainTicker}
+              onChange={(e) => setChainTicker(e.target.value)}
+            />
+          </div>
+          <div className={styles.avatarSettingInput}>
+            <span className={styles.settingTitle}>
               <Trans
-                i18nKey='copy_message_etherscan'
-                values={{ copy: hasCopied ? t('copied') : t('copy') }}
+                i18nKey='token_address_whitelist'
+                shouldUnescape={true}
                 components={{
-                  1: <button onClick={copyMessageToSign} />,
-                  // eslint-disable-next-line
-                  2: <a href='https://etherscan.io/verifiedSignatures' target='_blank' rel='noopener noreferrer' />,
+                  1: (
+                    <Link
+                      to='https://github.com/plebbit/plebbit-react-hooks/blob/557cc3f40b5933a00553ed9c0bc310d2cd7a3b52/src/hooks/authors/author-avatars.ts#L133'
+                      target='_blank'
+                      rel='noopener noreferrer'
+                    />
+                  ),
                 }}
               />
-            </div>
-            <div className={styles.pasteSignature}>
-              <span className={styles.settingTitle}>{t('paste_signature')}</span>
-              <input
-                type='text'
-                placeholder='0x...'
-                autoCorrect='off'
-                autoComplete='off'
-                spellCheck='false'
-                defaultValue={account?.author?.avatar?.signature?.signature}
-                onChange={(e) => setSignature(e.target.value)}
-              />
-              <button onClick={save}>{t('save')}</button>
-            </div>
+            </span>
+            <input
+              type='text'
+              placeholder='0x...'
+              autoCorrect='off'
+              autoComplete='off'
+              spellCheck='false'
+              defaultValue={account?.author?.avatar?.address}
+              onChange={(e) => setTokenAddress(e.target.value)}
+            />
           </div>
-        )}
-      </div>
+          <div className={styles.avatarSettingInput}>
+            <span className={styles.settingTitle}>{t('token_id')}</span>
+            <input
+              type='text'
+              placeholder='Token ID'
+              autoCorrect='off'
+              autoComplete='off'
+              spellCheck='false'
+              defaultValue={account?.author?.avatar?.id}
+              onChange={(e) => setTokenId(e.target.value)}
+            />
+          </div>
+          <div className={styles.copyMessage}>
+            <Trans
+              i18nKey='copy_message_etherscan'
+              values={{ copy: hasCopied ? t('copied') : t('copy') }}
+              components={{
+                1: <button onClick={copyMessageToSign} />,
+                // eslint-disable-next-line
+                2: <a href='https://etherscan.io/verifiedSignatures' target='_blank' rel='noopener noreferrer' />,
+              }}
+            />
+          </div>
+          <div className={styles.pasteSignature}>
+            <span className={styles.settingTitle}>{t('paste_signature')}</span>
+            <input
+              type='text'
+              placeholder='0x...'
+              autoCorrect='off'
+              autoComplete='off'
+              spellCheck='false'
+              defaultValue={account?.author?.avatar?.signature?.signature}
+              onChange={(e) => setSignature(e.target.value)}
+            />
+            <button onClick={save}>{t('save')}</button>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

src/views/settings/wallet-settings/wallet-settings.tsx

@@ -81,7 +81,7 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
       </div>
       <div key={index} className={styles.walletBox}>
         <button className={styles.toggleWallet} onClick={() => toggleShowWallet(index)}>
-          {showWallet[index] ? t('hide_settings') : t('show_settings')}
+          {showWallet[index] ? t('hide') : t('show')}
         </button>
         <button onClick={() => setWalletsArray([...walletsArray.slice(0, index), ...walletsArray.slice(index + 1)])}>{t('remove')}</button>
         <div className={`${showWallet[index] ? styles.show : styles.hide}`}>