jollywhoppers.com
Bluesky app fork with some witchin' additions 💫
witchsky.app
bluesky
fork
client
[Explore] Design tweaks (#8131)
* Fix interests card spacing
* Space out AvatarStack
* SP icon size
* Visual alignment of tab bar and headers
* Tweak spacing around search input
* Drop text size in sp card overflow count
* Tweak
authored by
Eric Bailey
and committed by
GitHub
0b08128e
aca89d4a
+3
-3
src/components/AvatarStack.tsx
+3
-3
src/components/AvatarStack.tsx
···
19
19
numPending?: number
20
20
backgroundColor?: string
21
21
}) {
22
-
const halfSize = size / 2
22
+
const translation = size / 3 // overlap by 1/3
23
23
const t = useTheme()
24
24
const moderationOpts = useModerationOpts()
25
25
···
43
43
a.flex_row,
44
44
a.align_center,
45
45
a.relative,
46
-
{width: size + (items.length - 1) * halfSize},
46
+
{width: size + (items.length - 1) * (size - translation)},
47
47
]}>
48
48
{items.map((item, i) => (
49
49
<View
···
54
54
{
55
55
width: size,
56
56
height: size,
57
-
left: i * -halfSize,
57
+
left: i * -translation,
58
58
borderWidth: 1,
59
59
borderColor: backgroundColor ?? t.atoms.bg.backgroundColor,
60
60
borderRadius: 999,
+11
-2
src/components/ProgressGuide/FollowDialog.tsx
+11
-2
src/components/ProgressGuide/FollowDialog.tsx
···
1
1
import {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'
2
-
import {ScrollView, TextInput, useWindowDimensions, View} from 'react-native'
2
+
import {
3
+
ScrollView,
4
+
type StyleProp,
5
+
TextInput,
6
+
useWindowDimensions,
7
+
View,
8
+
type ViewStyle,
9
+
} from 'react-native'
3
10
import Animated, {
4
11
LayoutAnimationConfig,
5
12
LinearTransition,
···
453
460
hasSearchText,
454
461
interestsDisplayNames,
455
462
TabComponent = Tab,
463
+
contentContainerStyle,
456
464
}: {
457
465
onSelectTab: (tab: string) => void
458
466
interests: string[]
···
460
468
hasSearchText: boolean
461
469
interestsDisplayNames: Record<string, string>
462
470
TabComponent?: React.ComponentType<React.ComponentProps<typeof Tab>>
471
+
contentContainerStyle?: StyleProp<ViewStyle>
463
472
}): React.ReactNode => {
464
473
const listRef = useRef<ScrollView>(null)
465
474
const [scrollX, setScrollX] = useState(0)
···
520
529
<ScrollView
521
530
ref={listRef}
522
531
horizontal
523
-
contentContainerStyle={[a.gap_sm, a.px_lg]}
532
+
contentContainerStyle={[a.gap_sm, a.px_lg, contentContainerStyle]}
524
533
showsHorizontalScrollIndicator={false}
525
534
decelerationRate="fast"
526
535
snapToOffsets={
+4
-1
src/screens/Search/Explore.tsx
+4
-1
src/screens/Search/Explore.tsx
···
45
45
import * as FeedCard from '#/components/FeedCard'
46
46
import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDownIcon} from '#/components/icons/Chevron'
47
47
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
48
+
import {type Props as IcoProps} from '#/components/icons/common'
48
49
import {type Props as SVGIconProps} from '#/components/icons/common'
49
50
import {ListSparkle_Stroke2_Corner0_Rounded as ListSparkle} from '#/components/icons/ListSparkle'
50
51
import {StarterPack} from '#/components/icons/StarterPack'
···
110
111
key: string
111
112
title: string
112
113
icon: React.ComponentType<SVGIconProps>
114
+
iconSize?: IcoProps['size']
113
115
searchButton?: {
114
116
label: string
115
117
metricsTag: MetricEvents['explore:module:searchButtonPress']['module']
···
461
463
key: 'suggested-starterPacks-header',
462
464
title: _(msg`Starter Packs`),
463
465
icon: StarterPack,
466
+
iconSize: 'xl',
464
467
})
465
468
466
469
if (isLoadingSuggestedSPs) {
···
562
565
case 'header': {
563
566
return (
564
567
<ModuleHeader.Container>
565
-
<ModuleHeader.Icon icon={item.icon} />
568
+
<ModuleHeader.Icon icon={item.icon} size={item.iconSize} />
566
569
<ModuleHeader.TitleText>{item.title}</ModuleHeader.TitleText>
567
570
{item.searchButton && (
568
571
<ModuleHeader.SearchButton
+1
-1
src/screens/Search/Shell.tsx
+1
-1
src/screens/Search/Shell.tsx
···
318
318
</Layout.Header.Outer>
319
319
</View>
320
320
)}
321
-
<View style={[a.px_md, a.pt_sm, a.pb_sm, a.overflow_hidden]}>
321
+
<View style={[a.px_lg, a.pt_sm, a.pb_sm, a.overflow_hidden]}>
322
322
<View style={[a.gap_sm]}>
323
323
<View style={[a.w_full, a.flex_row, a.align_stretch, a.gap_xs]}>
324
324
<View style={[a.flex_1]}>
+2
-10
src/screens/Search/components/ModuleHeader.tsx
+2
-10
src/screens/Search/components/ModuleHeader.tsx
···
6
6
import {makeCustomFeedLink} from '#/lib/routes/links'
7
7
import {logger} from '#/logger'
8
8
import {UserAvatar} from '#/view/com/util/UserAvatar'
9
-
import {
10
-
atoms as a,
11
-
native,
12
-
useGutters,
13
-
useTheme,
14
-
type ViewStyleProp,
15
-
web,
16
-
} from '#/alf'
9
+
import {atoms as a, native, useTheme, type ViewStyleProp, web} from '#/alf'
17
10
import {Button, ButtonIcon} from '#/components/Button'
18
11
import * as FeedCard from '#/components/FeedCard'
19
12
import {sizes as iconSizes} from '#/components/icons/common'
···
27
20
headerHeight,
28
21
}: {children: React.ReactNode; headerHeight?: number} & ViewStyleProp) {
29
22
const t = useTheme()
30
-
const gutters = useGutters([0, 'base'])
31
23
return (
32
24
<View
33
25
style={[
34
-
gutters,
35
26
a.flex_row,
36
27
a.align_center,
28
+
a.px_lg,
37
29
a.pt_2xl,
38
30
a.pb_md,
39
31
a.gap_sm,
+1
-1
src/screens/Search/components/StarterPackCard.tsx
+1
-1
src/screens/Search/components/StarterPackCard.tsx
+2
-3
src/screens/Search/modules/ExploreInterestsCard.tsx
+2
-3
src/screens/Search/modules/ExploreInterestsCard.tsx
···
6
6
import {Nux, useSaveNux} from '#/state/queries/nuxs'
7
7
import {usePreferencesQuery} from '#/state/queries/preferences'
8
8
import {useInterestsDisplayNames} from '#/screens/Onboarding/state'
9
-
import {atoms as a, useGutters, useTheme} from '#/alf'
9
+
import {atoms as a, useTheme} from '#/alf'
10
10
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
11
11
import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
12
12
import {Link} from '#/components/Link'
···
16
16
export function ExploreInterestsCard() {
17
17
const t = useTheme()
18
18
const {_} = useLingui()
19
-
const gutters = useGutters([0, 'base'])
20
19
const {data: preferences} = usePreferencesQuery()
21
20
const interestsDisplayNames = useInterestsDisplayNames()
22
21
const {mutateAsync: saveNux} = useSaveNux()
···
53
52
onConfirm={onConfirmClose}
54
53
/>
55
54
56
-
<View style={[gutters, a.pt_lg, a.pb_2xs]}>
55
+
<View style={[a.p_lg, a.pb_2xs]}>
57
56
<View
58
57
style={[
59
58
a.p_lg,