Add subtle hover to all components except feed

src/components/SubtleHover.tsx

@@ -0,0 +1,34 @@
+import {View} from 'react-native'
+
+import {atoms as a, useTheme, type ViewStyleProp} from '#/alf'
+
+export function SubtleHover({style, hover}: ViewStyleProp & {hover: boolean}) {
+  const t = useTheme()
+
+  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={[
+        a.absolute,
+        a.inset_0,
+        a.pointer_events_none,
+        a.transition_opacity,
+        t.atoms.bg_contrast_25,
+        style,
+        {opacity: hover ? opacity : 0},
+      ]}
+    />
+  )
+}

src/screens/Search/Explore.tsx

@@ -52,6 +52,7 @@ import {StarterPack} from '#/components/icons/StarterPack'
 import {UserCircle_Stroke2_Corner0_Rounded as Person} from '#/components/icons/UserCircle'
 import {Loader} from '#/components/Loader'
 import * as ProfileCard from '#/components/ProfileCard'
+import {SubtleHover} from '#/components/SubtleHover'
 import {Text} from '#/components/Typography'
 import * as ModuleHeader from './components/ModuleHeader'
 import {
@@ -69,6 +70,8 @@ function LoadMore({item}: {item: ExploreScreenItems & {type: 'loadMore'}}) {
       onPress={item.onLoadMore}
       style={[a.relative, a.w_full]}>
       {({hovered, pressed}) => (
+        <>
+          <SubtleHover hover={hovered || pressed} />
           <View
             style={[
               a.flex_1,
@@ -78,24 +81,15 @@ function LoadMore({item}: {item: ExploreScreenItems & {type: 'loadMore'}}) {
               a.px_lg,
               a.py_md,
               a.gap_sm,
-            (hovered || pressed) && t.atoms.bg_contrast_25,
             ]}>
-          <Text
+            <Text style={[a.leading_snug]}>{item.message}</Text>
-            style={[
-              a.leading_snug,
-              hovered ? t.atoms.text : t.atoms.text_contrast_medium,
-            ]}>
-            {item.message}
-          </Text>
             {item.isLoadingMore ? (
               <Loader size="sm" />
             ) : (
-            <ChevronDownIcon
+              <ChevronDownIcon size="sm" style={t.atoms.text_contrast_medium} />
-              size="sm"
-              style={hovered ? t.atoms.text : t.atoms.text_contrast_medium}
-            />
             )}
           </View>
+        </>
       )}
     </Button>
   )

src/screens/Search/components/StarterPackCard.tsx

@@ -19,6 +19,7 @@ import {PlusSmall_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus
 import {Link} from '#/components/Link'
 import {MediaInsetBorder} from '#/components/MediaInsetBorder'
 import {useStarterPackLink} from '#/components/StarterPack/StarterPackCard'
+import {SubtleHover} from '#/components/SubtleHover'
 import {Text} from '#/components/Typography'
 import * as bsky from '#/types/bsky'
 
@@ -48,6 +49,15 @@ export function StarterPackCard({
     .map(item => item.subject)
 
   return (
+    <Link
+      to={link.to}
+      label={link.label}
+      onHoverIn={link.precache}
+      onPress={link.precache}>
+      {s => (
+        <>
+          <SubtleHover hover={s.hovered || s.pressed} />
+
           <View
             style={[
               a.w_full,
@@ -58,17 +68,6 @@ export function StarterPackCard({
               a.overflow_hidden,
               t.atoms.border_contrast_low,
             ]}>
-      <View aria-hidden style={[a.absolute, a.inset_0, a.z_40]}>
-        <Link
-          to={link.to}
-          label={link.label}
-          style={[a.absolute, a.inset_0]}
-          onHoverIn={link.precache}
-          onPress={link.precache}>
-          <View />
-        </Link>
-      </View>
-
             <AvatarStack
               profiles={profiles ?? []}
               numPending={profileCount}
@@ -95,7 +94,11 @@ export function StarterPackCard({
                 </Text>
                 <Text
                   emoji
-            style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}
+                  style={[
+                    a.text_sm,
+                    a.leading_snug,
+                    t.atoms.text_contrast_medium,
+                  ]}
                   numberOfLines={1}>
                   {view.creator?.did === currentAccount?.did
                     ? _(msg`By you`)
@@ -117,6 +120,9 @@ export function StarterPackCard({
               </Link>
             </View>
           </View>
+        </>
+      )}
+    </Link>
   )
 }
 

src/screens/Search/modules/ExploreSuggestedAccounts.tsx

@@ -17,6 +17,7 @@ import {atoms as a} from '#/alf'
 import {Button} from '#/components/Button'
 import * as ProfileCard from '#/components/ProfileCard'
 import {boostInterests, Tabs} from '#/components/ProgressGuide/FollowDialog'
+import {SubtleHover} from '#/components/SubtleHover'
 import {Text} from '#/components/Typography'
 import type * as bsky from '#/types/bsky'
 
@@ -133,10 +134,7 @@ let Tab = ({
               a.py_sm,
               a.border,
               active || hovered || pressed || focused
-                ? [
+                ? [t.atoms.bg_contrast_25, t.atoms.border_contrast_medium]
-                    t.atoms.bg_contrast_25,
-                    {borderColor: t.atoms.bg_contrast_25.backgroundColor},
-                  ]
                 : [t.atoms.bg, t.atoms.border_contrast_low],
             ]}>
             <Text
@@ -187,6 +185,8 @@ let SuggestedProfileCard = ({
         )
       }}>
       {s => (
+        <>
+          <SubtleHover hover={s.hovered || s.pressed} />
           <View
             style={[
               a.flex_1,
@@ -195,7 +195,6 @@ let SuggestedProfileCard = ({
               a.px_lg,
               a.border_t,
               t.atoms.border_contrast_low,
-            (s.hovered || s.pressed) && [t.atoms.bg_contrast_25],
             ]}>
             <ProfileCard.Outer>
               <ProfileCard.Header>
@@ -229,6 +228,7 @@ let SuggestedProfileCard = ({
               <ProfileCard.Description profile={profile} numberOfLines={2} />
             </ProfileCard.Outer>
           </View>
+        </>
       )}
     </ProfileCard.Link>
   )

src/screens/Search/modules/ExploreTrendingTopics.tsx

@@ -17,6 +17,7 @@ import {type Props as SVGIconProps} from '#/components/icons/common'
 import {Flame_Stroke2_Corner1_Rounded as FlameIcon} from '#/components/icons/Flame'
 import {Trending3_Stroke2_Corner1_Rounded as TrendingIcon} from '#/components/icons/Trending'
 import {Link} from '#/components/Link'
+import {SubtleHover} from '#/components/SubtleHover'
 import {Text} from '#/components/Typography'
 
 const TOPIC_COUNT = 5
@@ -92,15 +93,8 @@ export function TrendRow({
       PressableComponent={Pressable}>
       {({hovered, pressed}) => (
         <>
-          <View
+          <SubtleHover hover={hovered || pressed} />
-            style={[
+          <View style={[gutters, a.w_full, a.py_lg, a.flex_row, a.gap_2xs]}>
-              gutters,
-              a.w_full,
-              a.py_lg,
-              a.flex_row,
-              a.gap_2xs,
-              (hovered || pressed) && t.atoms.bg_contrast_25,
-            ]}>
             <View style={[a.flex_1, a.gap_xs]}>
               <View style={[a.flex_row]}>
                 <Text