feat(ui): redesign "See more" suggested profiles card

Refactored the "See more accounts you might like" card to use ButtonIcon
and ButtonText for improved consistency and accessibility. Updated
styles for better alignment, spacing, and visual hierarchy. Navigates to
the Explore page when pressed.
This commit is contained in:
Caidan Williams
2025-08-25 16:54:19 -07:00
parent b667e8b985
commit 2b4d32bb09
+20 -17
View File
@@ -25,7 +25,7 @@ import {
type ViewStyleProp,
web,
} from '#/alf'
import {Button} from '#/components/Button'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import * as FeedCard from '#/components/FeedCard'
import {ArrowRight_Stroke2_Corner0_Rounded as ArrowRight} from '#/components/icons/Arrow'
import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag'
@@ -36,6 +36,7 @@ import type * as bsky from '#/types/bsky'
import {ProgressGuideList} from './ProgressGuide/List'
const MOBILE_CARD_WIDTH = 165
const FINAL_CARD_WIDTH = 120
function CardOuter({
children,
@@ -420,27 +421,29 @@ export function ProfileGrid({
}
function SeeMoreSuggestedProfilesCard() {
const navigation = useNavigation<NavigationProp>()
const t = useTheme()
const {_} = useLingui()
const navigation = useNavigation<NavigationProp>()
return (
<Button
color="primary"
label={_(msg`Browse more accounts on the Explore page`)}
style={[a.flex_col]}
onPress={() => {
navigation.navigate('SearchTab')
}}>
<CardOuter>
<View style={[a.flex_1, a.justify_center]}>
<View style={[a.flex_col, a.align_center, a.gap_md]}>
<Text style={[a.leading_snug, a.text_center]}>
<Trans>See more accounts you might like</Trans>
</Text>
<ArrowRight size="xl" />
</View>
</View>
</CardOuter>
style={[
a.flex_col,
a.align_center,
a.gap_xs,
a.p_md,
a.rounded_lg,
t.atoms.shadow_sm,
{width: FINAL_CARD_WIDTH},
]}
onPress={() => navigation.navigate('SearchTab')}>
<ButtonIcon icon={ArrowRight} size="lg" />
<ButtonText
style={[a.text_md, a.font_medium, a.leading_snug, a.text_center]}>
<Trans>See more</Trans>
</ButtonText>
</Button>
)
}