jeanmachine.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Merge pull request #8901 from internet-development/caidanw/app-1358-final-card-refresh
feat(ui): redesign suggested profiles 'See more' card
+23
-20
+23
-20
src/components/FeedInterstitials.tsx
+23
-20
src/components/FeedInterstitials.tsx
···
25
25
type ViewStyleProp,
26
26
web,
27
27
} from '#/alf'
28
-
import {Button} from '#/components/Button'
28
+
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
29
29
import * as FeedCard from '#/components/FeedCard'
30
-
import {ArrowRight_Stroke2_Corner0_Rounded as Arrow} from '#/components/icons/Arrow'
30
+
import {ArrowRight_Stroke2_Corner0_Rounded as ArrowRight} from '#/components/icons/Arrow'
31
31
import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag'
32
32
import {InlineLinkText} from '#/components/Link'
33
33
import * as ProfileCard from '#/components/ProfileCard'
···
36
36
import {ProgressGuideList} from './ProgressGuide/List'
37
37
38
38
const MOBILE_CARD_WIDTH = 165
39
+
const FINAL_CARD_WIDTH = 120
39
40
40
41
function CardOuter({
41
42
children,
···
420
421
}
421
422
422
423
function SeeMoreSuggestedProfilesCard() {
424
+
const t = useTheme()
425
+
const {_} = useLingui()
423
426
const navigation = useNavigation<NavigationProp>()
424
-
const {_} = useLingui()
425
427
426
428
return (
427
429
<Button
430
+
color="primary"
428
431
label={_(msg`Browse more accounts on the Explore page`)}
429
-
style={[a.flex_col]}
430
-
onPress={() => {
431
-
navigation.navigate('SearchTab')
432
-
}}>
433
-
<CardOuter>
434
-
<View style={[a.flex_1, a.justify_center]}>
435
-
<View style={[a.flex_col, a.align_center, a.gap_md]}>
436
-
<Text style={[a.leading_snug, a.text_center]}>
437
-
<Trans>See more accounts you might like</Trans>
438
-
</Text>
439
-
440
-
<Arrow size="xl" />
441
-
</View>
442
-
</View>
443
-
</CardOuter>
432
+
style={[
433
+
a.flex_col,
434
+
a.align_center,
435
+
a.gap_xs,
436
+
a.p_md,
437
+
a.rounded_lg,
438
+
t.atoms.shadow_sm,
439
+
{width: FINAL_CARD_WIDTH},
440
+
]}
441
+
onPress={() => navigation.navigate('SearchTab')}>
442
+
<ButtonIcon icon={ArrowRight} size="lg" />
443
+
<ButtonText
444
+
style={[a.text_md, a.font_medium, a.leading_snug, a.text_center]}>
445
+
<Trans>See more</Trans>
446
+
</ButtonText>
444
447
</Button>
445
448
)
446
449
}
···
539
542
style={[t.atoms.text_contrast_medium]}>
540
543
<Trans>Browse more suggestions</Trans>
541
544
</InlineLinkText>
542
-
<Arrow size="sm" fill={t.atoms.text_contrast_medium.color} />
545
+
<ArrowRight size="sm" fill={t.atoms.text_contrast_medium.color} />
543
546
</View>
544
547
</View>
545
548
) : (
···
567
570
</Trans>
568
571
</Text>
569
572
570
-
<Arrow size="xl" />
573
+
<ArrowRight size="xl" />
571
574
</View>
572
575
</View>
573
576
</CardOuter>