Add subtle web hover to interactive rows (#5989)

* Add subtle web hover to interactive rows

* Adjust numbers

* Ignore touch devices

1 files changed, 48 insertions, 0 deletions

diff --git a/src/components/SubtleWebHover.web.tsx b/src/components/SubtleWebHover.web.tsx
new file mode 100644
index 000000000..e98251e0d
--- /dev/null
+++ b/src/components/SubtleWebHover.web.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+
+import {isTouchDevice} from '#/lib/browser'
+import {useTheme} from '#/alf'
+
+export function SubtleWebHover({hover}: {hover: boolean}) {
+  const t = useTheme()
+  if (isTouchDevice) {
+    return null
+  }
+  let opacity: number
+  switch (t.name) {
+    case 'dark':
+      opacity = 0.4
+      break
+    case 'dim':
+      opacity = 0.45
+      break
+    case 'light':
+      opacity = 0.5
+      break
+  }
+  return (
+    <View
+      style={[
+        t.atoms.bg_contrast_25,
+        styles.container,
+        {
+          opacity: hover ? opacity : 0,
+        },
+      ]}
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    top: 0,
+    pointerEvents: 'none',
+    // @ts-ignore web only
+    transition: '0.15s ease-in-out opacity',
+  },
+})