diff options
Diffstat (limited to 'src/screens/Search/modules')
-rw-r--r-- | src/screens/Search/modules/ExploreInterestsCard.tsx | 8 | ||||
-rw-r--r-- | src/screens/Search/modules/ExploreSuggestedAccounts.tsx | 93 | ||||
-rw-r--r-- | src/screens/Search/modules/ExploreTrendingTopics.tsx | 25 |
3 files changed, 64 insertions, 62 deletions
diff --git a/src/screens/Search/modules/ExploreInterestsCard.tsx b/src/screens/Search/modules/ExploreInterestsCard.tsx index 00a15111a..00014ffc6 100644 --- a/src/screens/Search/modules/ExploreInterestsCard.tsx +++ b/src/screens/Search/modules/ExploreInterestsCard.tsx @@ -40,14 +40,14 @@ export function ExploreInterestsCard() { <> <Prompt.Basic control={trendingPrompt} - title={_(msg`Your interests`)} + title={_(msg`Dismiss interests`)} description={_( - msg`You can adjust your interests at any time from your "Content and media" settings.`, + msg`You can adjust your interests at any time from "Content and media" settings.`, )} confirmButtonCta={_( msg({ - message: `Copy that!`, - comment: `Confirm button text. Can be a short cheeky phrase that means "OK" e.g. "Copy that!"`, + message: `OK`, + comment: `Confirm button text.`, }), )} onConfirm={onConfirmClose} diff --git a/src/screens/Search/modules/ExploreSuggestedAccounts.tsx b/src/screens/Search/modules/ExploreSuggestedAccounts.tsx index 6d36ef1a7..8d66dfbc1 100644 --- a/src/screens/Search/modules/ExploreSuggestedAccounts.tsx +++ b/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, - {borderColor: t.atoms.bg_contrast_25.backgroundColor}, - ] + ? [t.atoms.bg_contrast_25, t.atoms.border_contrast_medium] : [t.atoms.bg, t.atoms.border_contrast_low], ]}> <Text @@ -186,47 +184,52 @@ let SuggestedProfileCard = ({ {statsig: true}, ) }}> - <View - style={[ - a.w_full, - a.py_lg, - a.px_lg, - a.border_t, - t.atoms.border_contrast_low, - a.flex_1, - ]}> - <ProfileCard.Outer> - <ProfileCard.Header> - <ProfileCard.Avatar - profile={profile} - moderationOpts={moderationOpts} - /> - <ProfileCard.NameAndHandle - profile={profile} - moderationOpts={moderationOpts} - /> - <ProfileCard.FollowButton - profile={profile} - moderationOpts={moderationOpts} - withIcon={false} - logContext="ExploreSuggestedAccounts" - onFollow={() => { - logger.metric( - 'suggestedUser:follow', - { - logContext: 'Explore', - location: 'Card', - recId, - position, - }, - {statsig: true}, - ) - }} - /> - </ProfileCard.Header> - <ProfileCard.Description profile={profile} numberOfLines={2} /> - </ProfileCard.Outer> - </View> + {s => ( + <> + <SubtleHover hover={s.hovered || s.pressed} /> + <View + style={[ + a.flex_1, + a.w_full, + a.py_lg, + a.px_lg, + a.border_t, + t.atoms.border_contrast_low, + ]}> + <ProfileCard.Outer> + <ProfileCard.Header> + <ProfileCard.Avatar + profile={profile} + moderationOpts={moderationOpts} + /> + <ProfileCard.NameAndHandle + profile={profile} + moderationOpts={moderationOpts} + /> + <ProfileCard.FollowButton + profile={profile} + moderationOpts={moderationOpts} + withIcon={false} + logContext="ExploreSuggestedAccounts" + onFollow={() => { + logger.metric( + 'suggestedUser:follow', + { + logContext: 'Explore', + location: 'Card', + recId, + position, + }, + {statsig: true}, + ) + }} + /> + </ProfileCard.Header> + <ProfileCard.Description profile={profile} numberOfLines={2} /> + </ProfileCard.Outer> + </View> + </> + )} </ProfileCard.Link> ) } diff --git a/src/screens/Search/modules/ExploreTrendingTopics.tsx b/src/screens/Search/modules/ExploreTrendingTopics.tsx index 75ca19351..167f6d193 100644 --- a/src/screens/Search/modules/ExploreTrendingTopics.tsx +++ b/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 @@ -28,10 +29,10 @@ export function ExploreTrendingTopics() { } function Inner() { - const {data: trending, error, isLoading} = useGetTrendsQuery() + const {data: trending, error, isLoading, isRefetching} = useGetTrendsQuery() const noTopics = !isLoading && !error && !trending?.trends?.length - return isLoading ? ( + return isLoading || isRefetching ? ( Array.from({length: TOPIC_COUNT}).map((__, i) => ( <TrendingTopicRowSkeleton key={i} withPosts={i === 0} /> )) @@ -92,25 +93,23 @@ export function TrendRow({ PressableComponent={Pressable}> {({hovered, pressed}) => ( <> - <View - style={[ - gutters, - a.w_full, - a.py_lg, - a.flex_row, - a.gap_2xs, - (hovered || pressed) && t.atoms.bg_contrast_25, - ]}> + <SubtleHover hover={hovered || pressed} /> + <View style={[gutters, a.w_full, a.py_lg, a.flex_row, a.gap_2xs]}> <View style={[a.flex_1, a.gap_xs]}> <View style={[a.flex_row]}> <Text - style={[a.text_md, a.font_bold, a.leading_snug, {width: 20}]}> + style={[ + a.text_md, + a.font_bold, + a.leading_tight, + {width: 20}, + ]}> <Trans comment='The trending topic rank, i.e. "1. March Madness", "2. The Bachelor"'> {rank}. </Trans> </Text> <Text - style={[a.text_md, a.font_bold, a.leading_snug]} + style={[a.text_md, a.font_bold, a.leading_tight]} numberOfLines={1}> {trend.displayName} </Text> |