From ba802eb0f24d30467dd8621f204526d6457f9613 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@gmail.com>
Date: Tue, 29 Oct 2024 21:42:37 +0000
Subject: Add subtle web hover to interactive rows (#5989)

* Add subtle web hover to interactive rows

* Adjust numbers

* Ignore touch devices
---
 src/components/SubtleWebHover.web.tsx | 48 +++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 src/components/SubtleWebHover.web.tsx

(limited to 'src/components/SubtleWebHover.web.tsx')

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',
+  },
+})
-- 
cgit 1.4.1