wip

src/shared/notes/mentions/boost.tsx

@@ -1,3 +1,3 @@
 export function Boost({ boost }: { boost: string }) {
-  return <span className="break-words text-blue-400 hover:text-blue-500">{boost}</span>;
+  return <span className="break-words text-blue-400 hover:text-blue-600">{boost}</span>;
 }

src/shared/notes/mentions/hashtag.tsx

@@ -24,7 +24,7 @@ export function Hashtag({ tag }: { tag: string }) {
           content: tag.replace('#', ''),
         })
       }
-      className="break-all text-blue-500 hover:text-blue-500"
+      className="cursor-default break-all text-blue-500 hover:text-blue-600"
     >
       {tag}
     </span>

src/shared/notes/mentions/invoice.tsx

@@ -1,9 +1,10 @@
 import { QRCodeSVG } from 'qrcode.react';
+import { memo } from 'react';
 
-export function Invoice({ invoice }: { invoice: string }) {
+export const Invoice = memo(function Invoice({ invoice }: { invoice: string }) {
   return (
-    <div className="mt-2 flex items-center rounded-lg bg-neutral-200 p-2 dark:bg-neutral-800">
+    <span className="mt-2 flex items-center rounded-lg bg-neutral-200 p-2 dark:bg-neutral-800">
       <QRCodeSVG value={invoice} includeMargin={true} className="rounded-lg" />
-    </div>
+    </span>
   );
-}
+});

src/shared/notes/mentions/user.tsx

@@ -30,7 +30,7 @@ export const MentionUser = memo(function MentionUser({ pubkey }: { pubkey: strin
           content: pubkey,
         })
       }
-      className="break-words text-blue-500 hover:text-blue-500"
+      className="break-words text-blue-500 hover:text-blue-600"
     >
       {'@' +
         (user?.name ||