Style tweaks

packages/app/src/Element/Avatar.tsx

@@ -1,20 +1,21 @@
 import "./Avatar.css";
-import Nostrich from "nostrich.webp";
 
 import { CSSProperties, useEffect, useState } from "react";
 import type { UserMetadata } from "@snort/system";
 
 import useImgProxy from "Hooks/useImgProxy";
 import { getDisplayName } from "Element/ProfileImage";
+import { defaultAvatar } from "SnortUtils";
 
 interface AvatarProps {
+  pubkey: string;
   user?: UserMetadata;
   onClick?: () => void;
   size?: number;
   image?: string;
 }
-const Avatar = ({ user, size, onClick, image }: AvatarProps) => {
-  const [url, setUrl] = useState<string>(Nostrich);
+const Avatar = ({ pubkey, user, size, onClick, image }: AvatarProps) => {
+  const [url, setUrl] = useState("");
   const { proxy } = useImgProxy();
 
   useEffect(() => {
@@ -23,7 +24,7 @@ const Avatar = ({ user, size, onClick, image }: AvatarProps) => {
       const proxyUrl = proxy(url, size ?? 120);
       setUrl(proxyUrl);
     } else {
-      setUrl(Nostrich);
+      setUrl(defaultAvatar(pubkey));
     }
   }, [user, image]);
 

packages/app/src/Element/Modal.css

@@ -22,6 +22,6 @@
   margin-bottom: auto;
 }
 
-.modal-body button:hover {
+.modal-body button.secondary:hover {
   background-color: var(--gray);
 }

packages/app/src/Element/Nip05.tsx

@@ -1,7 +1,5 @@
 import "./Nip05.css";
 import { HexKey } from "@snort/system";
-
-import Icon from "Icons/Icon";
 import { useUserProfile } from "@snort/system-react";
 
 export function useIsVerified(pubkey: HexKey, bypassCheck?: boolean) {
@@ -28,7 +26,6 @@ const Nip05 = ({ nip05, pubkey, verifyNip = true }: Nip05Params) => {
           <span className="domain" data-domain={domain?.toLowerCase()}>
             {domain}
           </span>
-          <Icon name="check-verified" className="badge" size={16} />
         </>
       )}
     </div>

packages/app/src/Element/NoteCreator.css

@@ -81,6 +81,7 @@
   width: 48px;
   height: 48px;
   background-color: var(--highlight);
+  color: white;
   border: none;
   border-radius: 100%;
   position: fixed;

packages/app/src/Element/ProfileImage.css

@@ -19,9 +19,6 @@ a.pfp {
 }
 
 .pfp .username {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
   font-weight: 600;
 }
 

packages/app/src/Element/ProfileImage.tsx

@@ -54,11 +54,11 @@ export default function ProfileImage({
     return (
       <>
         <div className="avatar-wrapper">
-          <Avatar user={user} size={size} />
+          <Avatar pubkey={pubkey} user={user} size={size} />
         </div>
         {showUsername && (
           <div className="f-ellipsis">
-            <div className="username">
+            <div className="flex g4 username">
               <div>{name.trim()}</div>
               {nip05 && <Nip05 nip05={nip05} pubkey={pubkey} verifyNip={verifyNip} />}
             </div>

packages/app/src/Element/TrendingPosts.tsx

@@ -4,9 +4,11 @@ import { NostrEvent, TaggedNostrEvent } from "@snort/system";
 import PageSpinner from "Element/PageSpinner";
 import Note from "Element/Note";
 import NostrBandApi from "External/NostrBand";
+import { useReactions } from "Feed/FeedReactions";
 
 export default function TrendingNotes() {
   const [posts, setPosts] = useState<Array<NostrEvent>>();
+  const related = useReactions("trending", posts?.map(a => a.id) ?? []);
 
   async function loadTrendingNotes() {
     const api = new NostrBandApi();
@@ -23,7 +25,7 @@ export default function TrendingNotes() {
   return (
     <>
       {posts.map(e => (
-        <Note key={e.id} data={e as TaggedNostrEvent} related={[]} depth={0} />
+        <Note key={e.id} data={e as TaggedNostrEvent} related={related?.data ?? []} depth={0} />
       ))}
     </>
   );