Add cursor to clickable elements (#491)

* Add cursor to clickable elements

* Add cursor to clickable elements

* Update per comments

* Fix word wrap in notifications

* Center the web login-load screen

* Add hover states on web

* Fix lint

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

3 files changed, 49 insertions, 9 deletions

diff --git a/src/view/com/util/PressableWithHover.tsx b/src/view/com/util/PressableWithHover.tsx
new file mode 100644
index 000000000..09ccb6a2d
--- /dev/null
+++ b/src/view/com/util/PressableWithHover.tsx
@@ -0,0 +1,45 @@
+import React, {
+  useState,
+  useCallback,
+  PropsWithChildren,
+  forwardRef,
+  Ref,
+} from 'react'
+import {Pressable, PressableProps, StyleProp, ViewStyle} from 'react-native'
+import {addStyle} from 'lib/styles'
+
+interface PressableWithHover extends PressableProps {
+  hoverStyle: StyleProp<ViewStyle>
+}
+
+export const PressableWithHover = forwardRef(
+  (
+    {
+      children,
+      style,
+      hoverStyle,
+      ...props
+    }: PropsWithChildren<PressableWithHover>,
+    ref: Ref<any>,
+  ) => {
+    const [isHovering, setIsHovering] = useState(false)
+
+    const onHoverIn = useCallback(() => setIsHovering(true), [setIsHovering])
+    const onHoverOut = useCallback(() => setIsHovering(false), [setIsHovering])
+    style =
+      typeof style !== 'function' && isHovering
+        ? addStyle(style, hoverStyle)
+        : style
+
+    return (
+      <Pressable
+        {...props}
+        style={style}
+        onHoverIn={onHoverIn}
+        onHoverOut={onHoverOut}
+        ref={ref}>
+        {children}
+      </Pressable>
+    )
+  },
+)
diff --git a/src/view/com/util/Selector.tsx b/src/view/com/util/Selector.tsx
index 03db13bd1..872b78184 100644
--- a/src/view/com/util/Selector.tsx
+++ b/src/view/com/util/Selector.tsx
@@ -1,10 +1,5 @@
 import React, {createRef, useState, useMemo, useRef} from 'react'
-import {
-  Animated,
-  StyleSheet,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native'
+import {Animated, Pressable, StyleSheet, View} from 'react-native'
 import {Text} from './text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
 
@@ -99,7 +94,7 @@ export function Selector({
       {items.map((item, i) => {
         const selected = i === selectedIndex
         return (
-          <TouchableWithoutFeedback key={i} onPress={() => onPressItem(i)}>
+          <Pressable key={item} onPress={() => onPressItem(i)}>
             <View style={styles.item} ref={itemRefs[i]}>
               <Text
                 style={
@@ -110,7 +105,7 @@ export function Selector({
                 {item}
               </Text>
             </View>
-          </TouchableWithoutFeedback>
+          </Pressable>
         )
       })}
     </View>
diff --git a/src/view/com/util/moderation/ContentHider.tsx b/src/view/com/util/moderation/ContentHider.tsx
index c1512171d..42a97cd34 100644
--- a/src/view/com/util/moderation/ContentHider.tsx
+++ b/src/view/com/util/moderation/ContentHider.tsx
@@ -40,7 +40,7 @@ export function ContentHider({
   }
 
   if (labelPref.pref === 'hide') {
-    return <></>
+    return null
   }
 
   return (