tweak avatars

packages/app/src/Components/ProxyImg.tsx

@@ -22,7 +22,7 @@ const ProxyImgComponent = forwardRef<HTMLImageElement, ProxyImgProps>(function P
   const { proxy } = useImgProxy();
   const [loadFailed, setLoadFailed] = useState(false);
   const [bypass, setBypass] = useState(CONFIG.media.bypassImgProxyError);
-  const [imgSrc, setImgSrc] = useState<string>(proxy(src, size, sha256));
+  const [imgSrc, setImgSrc] = useState<string | undefined>(src ? proxy(src, size, sha256) : undefined);
 
   useEffect(() => {
     setLoadFailed(false);

packages/app/src/Components/User/Avatar.css

@@ -1,14 +1,7 @@
 .avatar {
-  border-radius: 50%;
+  @apply rounded-full;
   height: 210px;
   width: 210px;
-  background-image: var(--img-url);
-  border: 1px solid transparent;
-  background-origin: border-box;
-  background-clip: content-box, border-box;
-  background-size: cover;
-  box-sizing: border-box;
-  background-position: center;
   background-color: var(--gray);
   z-index: 2;
 }

packages/app/src/Components/User/Avatar.tsx

@@ -30,8 +30,11 @@ const Avatar = ({
   className,
   showTitle = true,
 }: AvatarProps) => {
+  const defaultImg = defaultAvatar(pubkey);
   const url = useMemo(() => {
-    return image ?? user?.picture ?? defaultAvatar(pubkey);
+    if((image?.length ?? 0) > 0) return image;
+    if((user?.picture?.length ?? 0) > 0) return user?.picture;
+    return defaultImg;
   }, [user, image, pubkey]);
 
   const s = size ?? 120;
@@ -42,6 +45,7 @@ const Avatar = ({
   }
 
   const domain = user?.nip05 && user.nip05.split("@")[1];
+  const isDefault = url === defaultImg;
   return (
     <div
       onClick={onClick}
@@ -49,6 +53,7 @@ const Avatar = ({
       className={classNames(
         "avatar relative flex items-center justify-center",
         { "with-overlay": imageOverlay },
+        { "outline outline-2 outline-nostr-purple m-[2px]": isDefault },
         className,
       )}
       data-domain={domain?.toLowerCase()}