note hover color

packages/app/src/Element/Event/Note.css

@@ -5,10 +5,6 @@
   gap: 16px;
 }
 
-.note:hover {
-  cursor: pointer;
-}
-
 .note > .header .reply {
   font-size: 13px;
   color: var(--font-secondary-color);

packages/app/src/Element/Event/Note.tsx

@@ -23,6 +23,7 @@ export interface NoteProps {
   threadChains?: Map<string, Array<NostrEvent>>;
   context?: ReactNode;
   options?: {
+    isRoot?: boolean;
     showHeader?: boolean;
     showContextMenu?: boolean;
     showTime?: boolean;

packages/app/src/Element/Event/NoteInner.tsx

@@ -382,7 +382,13 @@ export function NoteInner(props: NoteProps) {
   }
 
   const note = (
-    <div className={classNames(baseClassName, { active: highlight })} onClick={e => goToEvent(e, ev)} ref={ref}>
+    <div
+      className={classNames(baseClassName, {
+        active: highlight,
+        "hover:bg-nearly-bg-color cursor-pointer": !opt?.isRoot,
+      })}
+      onClick={e => goToEvent(e, ev)}
+      ref={ref}>
       {content()}
     </div>
   );

packages/app/src/Element/Event/Thread.tsx

@@ -261,7 +261,7 @@ export function Thread(props: { onBack?: () => void; disableSpotlight?: boolean
           key={note.id}
           data={note}
           related={getLinkReactions(thread.reactions, NostrLink.fromEvent(note))}
-          options={{ showReactionsLink: true, showMediaSpotlight: !props.disableSpotlight }}
+          options={{ showReactionsLink: true, showMediaSpotlight: !props.disableSpotlight, isRoot: true }}
           onClick={navigateThread}
           threadChains={thread.chains}
         />

packages/app/src/index.css

@@ -4,6 +4,7 @@
 
 :root {
   --bg-color: #000;
+  --nearly-bg-color: #090909;
   --font-color: #fff;
   --font-secondary-color: #a7a7a7;
   --font-tertiary-color: #a3a3a3;
@@ -80,6 +81,7 @@ html {
 
 html.light {
   --bg-color: #fff;
+  --nearly-bg-color: #f9f9f9;
   --font-color: #2f3f64;
   --font-secondary-color: #5c6c92;
   --font-tertiary-color: #52525b;

packages/app/tailwind.config.js

@@ -5,7 +5,7 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        "neutral-999": "#090909",
+        "nearly-bg-color": "var(--nearly-bg-color)",
       },
       textColor: {
         "nostr-blue": "var(--repost)",