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:
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user