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>

2 files changed, 20 insertions, 6 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"
diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx
index fcdea35e8..4fae64fef 100644
--- a/src/view/shell/desktop/RightNav.tsx
+++ b/src/view/shell/desktop/RightNav.tsx
@@ -18,7 +18,7 @@ export const DesktopRightNav = observer(function DesktopRightNav() {
   const store = useStores()
   const pal = usePalette('default')
   const mode = useColorSchemeStyle('Light', 'Dark')
-  const otherMode = mode === 'Dark' ? 'Light' : 'Dark';
+  const otherMode = mode === 'Dark' ? 'Light' : 'Dark'
 
   const onDarkmodePress = React.useCallback(() => {
     store.shell.setDarkMode(!store.shell.darkMode)
@@ -72,12 +72,11 @@ export const DesktopRightNav = observer(function DesktopRightNav() {
               : 'Sets display to dark mode'
           }>
           <View style={[pal.viewLight, styles.darkModeToggleIcon]}>
-            {
-              mode === 'Dark' ?
+            {mode === 'Dark' ? (
               <SunIcon size={18} style={pal.textLight} />
-              :
+            ) : (
               <MoonIcon size={18} style={pal.textLight} />
-            }
+            )}
           </View>
           <Text type="sm" style={pal.textLight}>
             {otherMode} mode