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,
|
type ViewStyleProp,
|
||||||
web,
|
web,
|
||||||
} from '#/alf'
|
} from '#/alf'
|
||||||
import {Button} from '#/components/Button'
|
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
|
||||||
import * as FeedCard from '#/components/FeedCard'
|
import * as FeedCard from '#/components/FeedCard'
|
||||||
import {ArrowRight_Stroke2_Corner0_Rounded as ArrowRight} from '#/components/icons/Arrow'
|
import {ArrowRight_Stroke2_Corner0_Rounded as ArrowRight} from '#/components/icons/Arrow'
|
||||||
import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag'
|
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'
|
import {ProgressGuideList} from './ProgressGuide/List'
|
||||||
|
|
||||||
const MOBILE_CARD_WIDTH = 165
|
const MOBILE_CARD_WIDTH = 165
|
||||||
|
const FINAL_CARD_WIDTH = 120
|
||||||
|
|
||||||
function CardOuter({
|
function CardOuter({
|
||||||
children,
|
children,
|
||||||
@@ -420,27 +421,29 @@ export function ProfileGrid({
|
|||||||
}
|
}
|
||||||
|
|
||||||
function SeeMoreSuggestedProfilesCard() {
|
function SeeMoreSuggestedProfilesCard() {
|
||||||
const navigation = useNavigation<NavigationProp>()
|
const t = useTheme()
|
||||||
const {_} = useLingui()
|
const {_} = useLingui()
|
||||||
|
const navigation = useNavigation<NavigationProp>()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
|
color="primary"
|
||||||
label={_(msg`Browse more accounts on the Explore page`)}
|
label={_(msg`Browse more accounts on the Explore page`)}
|
||||||
style={[a.flex_col]}
|
style={[
|
||||||
onPress={() => {
|
a.flex_col,
|
||||||
navigation.navigate('SearchTab')
|
a.align_center,
|
||||||
}}>
|
a.gap_xs,
|
||||||
<CardOuter>
|
a.p_md,
|
||||||
<View style={[a.flex_1, a.justify_center]}>
|
a.rounded_lg,
|
||||||
<View style={[a.flex_col, a.align_center, a.gap_md]}>
|
t.atoms.shadow_sm,
|
||||||
<Text style={[a.leading_snug, a.text_center]}>
|
{width: FINAL_CARD_WIDTH},
|
||||||
<Trans>See more accounts you might like</Trans>
|
]}
|
||||||
</Text>
|
onPress={() => navigation.navigate('SearchTab')}>
|
||||||
|
<ButtonIcon icon={ArrowRight} size="lg" />
|
||||||
<ArrowRight size="xl" />
|
<ButtonText
|
||||||
</View>
|
style={[a.text_md, a.font_medium, a.leading_snug, a.text_center]}>
|
||||||
</View>
|
<Trans>See more</Trans>
|
||||||
</CardOuter>
|
</ButtonText>
|
||||||
</Button>
|
</Button>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user