forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Remove header subtitle from list-related screens (#7154)
* rm subtitle, add admonition
* rm top border from empty state
* Minimal approach
* Revert uneeded change
* Even more minimal
---------
Co-authored-by: Eric Bailey <git@esb.lol>
authored by
Samuel Newman
Eric Bailey
and committed by
GitHub
3481d165
2d827430
+48
-34
+1
-1
src/components/StarterPack/ProfileStarterPacks.tsx
+1
-1
src/components/StarterPack/ProfileStarterPacks.tsx
+41
-10
src/view/com/lists/MyLists.tsx
+41
-10
src/view/com/lists/MyLists.tsx
···
8
8
ViewStyle,
9
9
} from 'react-native'
10
10
import {AppBskyGraphDefs as GraphDefs} from '@atproto/api'
11
-
import {msg} from '@lingui/macro'
12
-
import {useLingui} from '@lingui/react'
11
+
import {Trans} from '@lingui/macro'
13
12
14
13
import {usePalette} from '#/lib/hooks/usePalette'
15
14
import {cleanError} from '#/lib/strings/errors'
···
17
16
import {logger} from '#/logger'
18
17
import {useModerationOpts} from '#/state/preferences/moderation-opts'
19
18
import {MyListsFilter, useMyListsQuery} from '#/state/queries/my-lists'
20
-
import {EmptyState} from '#/view/com/util/EmptyState'
21
19
import {atoms as a, useTheme} from '#/alf'
20
+
import {BulletList_Stroke2_Corner0_Rounded as ListIcon} from '#/components/icons/BulletList'
22
21
import * as ListCard from '#/components/ListCard'
22
+
import {Text} from '#/components/Typography'
23
23
import {ErrorMessage} from '../util/error/ErrorMessage'
24
24
import {List} from '../util/List'
25
25
···
42
42
}) {
43
43
const pal = usePalette('default')
44
44
const t = useTheme()
45
-
const {_} = useLingui()
46
45
const moderationOpts = useModerationOpts()
47
46
const [isPTRing, setIsPTRing] = React.useState(false)
48
47
const {data, isFetching, isFetched, isError, error, refetch} =
···
84
83
({item, index}: {item: any; index: number}) => {
85
84
if (item === EMPTY) {
86
85
return (
87
-
<EmptyState
88
-
icon="list-ul"
89
-
message={_(msg`You have no lists.`)}
90
-
testID="listsEmpty"
91
-
/>
86
+
<View style={[a.flex_1, a.align_center, a.gap_sm, a.px_xl, a.pt_xl]}>
87
+
<View
88
+
style={[
89
+
a.align_center,
90
+
a.justify_center,
91
+
a.rounded_full,
92
+
t.atoms.bg_contrast_25,
93
+
{
94
+
width: 32,
95
+
height: 32,
96
+
},
97
+
]}>
98
+
<ListIcon size="md" fill={t.atoms.text_contrast_low.color} />
99
+
</View>
100
+
<Text
101
+
style={[
102
+
a.text_center,
103
+
a.flex_1,
104
+
a.text_sm,
105
+
a.leading_snug,
106
+
t.atoms.text_contrast_medium,
107
+
{
108
+
maxWidth: 200,
109
+
},
110
+
]}>
111
+
{filter === 'curate' && (
112
+
<Trans>
113
+
Public, sharable lists which can be used to drive feeds.
114
+
</Trans>
115
+
)}
116
+
{filter === 'mod' && (
117
+
<Trans>
118
+
Public, sharable lists of users to mute or block in bulk.
119
+
</Trans>
120
+
)}
121
+
</Text>
122
+
</View>
92
123
)
93
124
} else if (item === ERROR_ITEM) {
94
125
return (
···
118
149
</View>
119
150
)
120
151
},
121
-
[renderItem, t.atoms.border_contrast_low, _, error, onRefresh],
152
+
[t, renderItem, error, onRefresh, filter],
122
153
)
123
154
124
155
if (inline) {
+6
-15
src/view/com/util/EmptyState.tsx
+6
-15
src/view/com/util/EmptyState.tsx
···
8
8
import {usePalette} from '#/lib/hooks/usePalette'
9
9
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
10
10
import {UserGroupIcon} from '#/lib/icons'
11
-
import {isWeb} from '#/platform/detection'
12
11
import {Growth_Stroke2_Corner0_Rounded as Growth} from '#/components/icons/Growth'
13
12
import {Text} from './text/Text'
14
13
···
25
24
}) {
26
25
const pal = usePalette('default')
27
26
const {isTabletOrDesktop} = useWebMediaQueries()
28
-
const iconSize = isTabletOrDesktop ? 80 : 64
27
+
const iconSize = isTabletOrDesktop ? 64 : 48
29
28
return (
30
29
<View
31
30
testID={testID}
32
-
style={[
33
-
styles.container,
34
-
isWeb && pal.border,
35
-
isTabletOrDesktop && {paddingRight: 20},
36
-
style,
37
-
]}>
31
+
style={[isTabletOrDesktop && {paddingRight: 20}, style]}>
38
32
<View
39
33
style={[
40
34
styles.iconContainer,
···
61
55
}
62
56
63
57
const styles = StyleSheet.create({
64
-
container: {
65
-
borderTopWidth: isWeb ? 1 : undefined,
66
-
},
67
58
iconContainer: {
68
59
flexDirection: 'row',
69
60
alignItems: 'center',
70
61
justifyContent: 'center',
71
-
height: 100,
72
-
width: 100,
62
+
height: 80,
63
+
width: 80,
73
64
marginLeft: 'auto',
74
65
marginRight: 'auto',
75
66
borderRadius: 80,
76
67
marginTop: 30,
77
68
},
78
69
iconContainerBig: {
79
-
width: 140,
80
-
height: 140,
70
+
width: 100,
71
+
height: 100,
81
72
marginTop: 50,
82
73
},
83
74
text: {
-3
src/view/screens/Lists.tsx
-3
src/view/screens/Lists.tsx
···
61
61
<Layout.Header.TitleText>
62
62
<Trans>Lists</Trans>
63
63
</Layout.Header.TitleText>
64
-
<Layout.Header.SubtitleText>
65
-
<Trans>Public, shareable lists which can drive feeds.</Trans>
66
-
</Layout.Header.SubtitleText>
67
64
</Layout.Header.Content>
68
65
<Button
69
66
label={_(msg`New list`)}
-5
src/view/screens/ModerationModlists.tsx
-5
src/view/screens/ModerationModlists.tsx
···
61
61
<Layout.Header.TitleText>
62
62
<Trans>Moderation Lists</Trans>
63
63
</Layout.Header.TitleText>
64
-
<Layout.Header.SubtitleText>
65
-
<Trans>
66
-
Public, shareable lists of users to mute or block in bulk.
67
-
</Trans>
68
-
</Layout.Header.SubtitleText>
69
64
</Layout.Header.Content>
70
65
<Button
71
66
label={_(msg`New list`)}