From aa08c81a2ab9501efc0a58a4e2be259b4055360e Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuel@fancy.org.uk>
Date: Sun, 12 Jun 2022 16:58:13 +0100
Subject: [PATCH] Don't show macOS themed buttons as pressed when the cursor
 isn't over them

---
 src/app/browser/components/button.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/app/browser/components/button.tsx b/src/app/browser/components/button.tsx
index 480a2d3..2bb35dd 100644
--- a/src/app/browser/components/button.tsx
+++ b/src/app/browser/components/button.tsx
@@ -15,17 +15,26 @@ function ButtonMac(props: {
 
     const window_focused = useContext(WindowFocusedContext);
     const accent_colour = useAccentColour();
+
+    const [hovered, setMouseOver] = useState(false);
+    const onMouseOver = useCallback(() => setMouseOver(true), []);
+    const onMouseOut = useCallback(() => setMouseOver(false), []);
+
     const [pressed, setPressIn] = useState(false);
     const onPressIn = useCallback(() => setPressIn(true), []);
     const onPressOut = useCallback(() => setPressIn(false), []);
-
-    const active = window_focused && (props.primary || pressed);
+    
+    const pressed_appearance = window_focused && pressed && hovered;
+    const active = window_focused && (props.primary || pressed_appearance);
 
     return <Pressable
         style={[
             styles.button,
             active ? {backgroundColor: props.color ?? accent_colour} : null,
         ]}
+        // @ts-expect-error react-native-web
+        onMouseOver={onMouseOver}
+        onMouseOut={onMouseOut}
         onPress={props.onPress}
         onPressIn={onPressIn}
         onPressOut={onPressOut}
@@ -33,7 +42,7 @@ function ButtonMac(props: {
         <View style={[
             styles.inner,
             active ? styles.innerActive : null,
-            active && pressed ? styles.innerPressed : null,
+            active && pressed_appearance ? styles.innerPressed : null,
         ]}>
             <Text style={styles.text}>{props.title}</Text>
         </View>
@@ -91,6 +100,7 @@ function ButtonWindows(props: {
     const [pressed, setPressIn] = useState(false);
     const onPressIn = useCallback(() => setPressIn(true), []);
     const onPressOut = useCallback(() => setPressIn(false), []);
+
     const active = window_focused && (props.primary || pressed);
 
     return <Pressable