From 2cad16d6b3ad6522a6b598c164ff478f25c28712 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sun, 23 Jun 2024 17:25:36 -0400
Subject: [PATCH] fix: Disable hover background on non-interactive share list
 items

---
 app/components/List/Item.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/app/components/List/Item.tsx b/app/components/List/Item.tsx
index 3e9ddef90..331131dda 100644
--- a/app/components/List/Item.tsx
+++ b/app/components/List/Item.tsx
@@ -123,18 +123,15 @@ const ListItem = (
       ref={itemRef}
       $border={border}
       $small={small}
+      $hover={!!rest.onClick}
       {...rest}
       {...rovingTabIndex}
       onClick={(ev) => {
-        if (rest.onClick) {
-          rest.onClick(ev);
-        }
+        rest.onClick?.(ev);
         rovingTabIndex.onClick(ev);
       }}
       onKeyDown={(ev) => {
-        if (rest.onKeyDown) {
-          rest.onKeyDown(ev);
-        }
+        rest.onKeyDown?.(ev);
         rovingTabIndex.onKeyDown(ev);
       }}
     >
@@ -146,6 +143,7 @@ const ListItem = (
 const Wrapper = styled.a<{
   $small?: boolean;
   $border?: boolean;
+  $hover?: boolean;
   onClick?: React.MouseEventHandler<HTMLAnchorElement>;
   to?: LocationDescriptor;
 }>`
@@ -170,7 +168,7 @@ const Wrapper = styled.a<{
   &:focus,
   &:focus-within {
     background: ${(props) =>
-      props.onClick ? props.theme.secondaryBackground : "inherit"};
+      props.$hover ? props.theme.secondaryBackground : "inherit"};
   }
 
   cursor: ${(props) =>