forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Visually improve the empty state of feeds (#4466)
authored by
Paul Frazee
and committed by
GitHub
4efd576f
c2d7d234
+40
-21
+1
-1
src/screens/Profile/Sections/Feed.tsx
+1
-1
src/screens/Profile/Sections/Feed.tsx
+37
-18
src/view/com/util/EmptyState.tsx
+37
-18
src/view/com/util/EmptyState.tsx
···
5
5
FontAwesomeIcon,
6
6
FontAwesomeIconStyle,
7
7
} from '@fortawesome/react-native-fontawesome'
8
-
import {Text} from './text/Text'
8
+
9
+
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
10
+
import {usePalette} from 'lib/hooks/usePalette'
9
11
import {UserGroupIcon} from 'lib/icons'
10
-
import {usePalette} from 'lib/hooks/usePalette'
11
12
import {isWeb} from 'platform/detection'
13
+
import {Growth_Stroke2_Corner0_Rounded as Growth} from '#/components/icons/Growth'
14
+
import {Text} from './text/Text'
12
15
13
16
export function EmptyState({
14
17
testID,
···
17
20
style,
18
21
}: {
19
22
testID?: string
20
-
icon: IconProp | 'user-group'
23
+
icon: IconProp | 'user-group' | 'growth'
21
24
message: string
22
25
style?: StyleProp<ViewStyle>
23
26
}) {
24
27
const pal = usePalette('default')
28
+
const {isTabletOrDesktop} = useWebMediaQueries()
29
+
const iconSize = isTabletOrDesktop ? 80 : 64
25
30
return (
26
31
<View
27
32
testID={testID}
28
-
style={[styles.container, isWeb && pal.border, style]}>
29
-
<View style={styles.iconContainer}>
33
+
style={[
34
+
styles.container,
35
+
isWeb && pal.border,
36
+
isTabletOrDesktop && {paddingRight: 20},
37
+
style,
38
+
]}>
39
+
<View
40
+
style={[
41
+
styles.iconContainer,
42
+
isTabletOrDesktop && styles.iconContainerBig,
43
+
pal.viewLight,
44
+
]}>
30
45
{icon === 'user-group' ? (
31
-
<UserGroupIcon size="64" style={styles.icon} />
46
+
<UserGroupIcon size={iconSize} />
47
+
) : icon === 'growth' ? (
48
+
<Growth width={iconSize} fill={pal.colors.emptyStateIcon} />
32
49
) : (
33
50
<FontAwesomeIcon
34
51
icon={icon}
35
-
size={64}
36
-
style={[
37
-
styles.icon,
38
-
{color: pal.colors.emptyStateIcon} as FontAwesomeIconStyle,
39
-
]}
52
+
size={iconSize}
53
+
style={[{color: pal.colors.emptyStateIcon} as FontAwesomeIconStyle]}
40
54
/>
41
55
)}
42
56
</View>
43
-
<Text
44
-
type="xl-medium"
45
-
style={[{color: pal.colors.textVeryLight}, styles.text]}>
57
+
<Text type="xl" style={[{color: pal.colors.textLight}, styles.text]}>
46
58
{message}
47
59
</Text>
48
60
</View>
···
51
63
52
64
const styles = StyleSheet.create({
53
65
container: {
54
-
paddingVertical: 24,
55
-
paddingHorizontal: 36,
56
66
borderTopWidth: isWeb ? 1 : undefined,
57
67
},
58
68
iconContainer: {
59
69
flexDirection: 'row',
60
-
},
61
-
icon: {
70
+
alignItems: 'center',
71
+
justifyContent: 'center',
72
+
height: 100,
73
+
width: 100,
62
74
marginLeft: 'auto',
63
75
marginRight: 'auto',
76
+
borderRadius: 80,
77
+
marginTop: 30,
78
+
},
79
+
iconContainerBig: {
80
+
width: 140,
81
+
height: 140,
82
+
marginTop: 50,
64
83
},
65
84
text: {
66
85
textAlign: 'center',
+1
-1
src/view/screens/ProfileFeed.tsx
+1
-1
src/view/screens/ProfileFeed.tsx
···
468
468
}, [onScrollToTop, isScreenFocused])
469
469
470
470
const renderPostsEmpty = useCallback(() => {
471
-
return <EmptyState icon="feed" message={_(msg`This feed is empty!`)} />
471
+
return <EmptyState icon="hashtag" message={_(msg`This feed is empty.`)} />
472
472
}, [_])
473
473
474
474
return (
+1
-1
src/view/screens/ProfileList.tsx
+1
-1
src/view/screens/ProfileList.tsx
···
726
726
}, [onScrollToTop, isScreenFocused])
727
727
728
728
const renderPostsEmpty = useCallback(() => {
729
-
return <EmptyState icon="feed" message={_(msg`This feed is empty!`)} />
729
+
return <EmptyState icon="hashtag" message={_(msg`This feed is empty.`)} />
730
730
}, [_])
731
731
732
732
return (