feat: add basic visual feedback on Button interactions (#708)

* feat: add basic visual feedback on Button interaction

* Use a more efficient approach to providing visual feedback

* Fix some lint issues left over from another PR

---------

Co-authored-by: Simek <gosimek@gmail.com>

1 files changed, 16 insertions, 1 deletions

diff --git a/src/view/com/util/forms/Button.tsx b/src/view/com/util/forms/Button.tsx
index a8f1f363f..6a5f19f99 100644
--- a/src/view/com/util/forms/Button.tsx
+++ b/src/view/com/util/forms/Button.tsx
@@ -128,6 +128,7 @@ export function Button({
       },
     },
   )
+
   const onPressWrapped = React.useCallback(
     (event: Event) => {
       event.stopPropagation()
@@ -136,9 +137,23 @@ export function Button({
     },
     [onPress],
   )
+
+  const getStyle = React.useCallback(
+    state => {
+      const arr = [typeOuterStyle, styles.outer, style]
+      if (state.pressed) {
+        arr.push({opacity: 0.6})
+      } else if (state.hovered) {
+        arr.push({opacity: 0.8})
+      }
+      return arr
+    },
+    [typeOuterStyle, style],
+  )
+
   return (
     <Pressable
-      style={[typeOuterStyle, styles.outer, style]}
+      style={getStyle}
       onPress={onPressWrapped}
       testID={testID}
       accessibilityRole="button"