diff options
| -rw-r--r-- | src/components/StarterPack/ProfileStarterPacks.tsx | 2 | ||||
| -rw-r--r-- | src/view/com/lists/MyLists.tsx | 51 | ||||
| -rw-r--r-- | src/view/com/util/EmptyState.tsx | 21 | ||||
| -rw-r--r-- | src/view/screens/Lists.tsx | 3 | ||||
| -rw-r--r-- | src/view/screens/ModerationModlists.tsx | 5 |
5 files changed, 48 insertions, 34 deletions
diff --git a/src/components/StarterPack/ProfileStarterPacks.tsx b/src/components/StarterPack/ProfileStarterPacks.tsx index 5f58a19df..64307070b 100644 --- a/src/components/StarterPack/ProfileStarterPacks.tsx +++ b/src/components/StarterPack/ProfileStarterPacks.tsx @@ -228,7 +228,7 @@ function Empty() { a.justify_between, a.gap_lg, a.shadow_lg, - {marginTop: 2}, + {marginTop: 1}, ]}> <View style={[a.gap_xs]}> <Text diff --git a/src/view/com/lists/MyLists.tsx b/src/view/com/lists/MyLists.tsx index 17327fd9a..deac87dca 100644 --- a/src/view/com/lists/MyLists.tsx +++ b/src/view/com/lists/MyLists.tsx @@ -8,8 +8,7 @@ import { ViewStyle, } from 'react-native' import {AppBskyGraphDefs as GraphDefs} from '@atproto/api' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import {Trans} from '@lingui/macro' import {usePalette} from '#/lib/hooks/usePalette' import {cleanError} from '#/lib/strings/errors' @@ -17,9 +16,10 @@ import {s} from '#/lib/styles' import {logger} from '#/logger' import {useModerationOpts} from '#/state/preferences/moderation-opts' import {MyListsFilter, useMyListsQuery} from '#/state/queries/my-lists' -import {EmptyState} from '#/view/com/util/EmptyState' import {atoms as a, useTheme} from '#/alf' +import {BulletList_Stroke2_Corner0_Rounded as ListIcon} from '#/components/icons/BulletList' import * as ListCard from '#/components/ListCard' +import {Text} from '#/components/Typography' import {ErrorMessage} from '../util/error/ErrorMessage' import {List} from '../util/List' @@ -42,7 +42,6 @@ export function MyLists({ }) { const pal = usePalette('default') const t = useTheme() - const {_} = useLingui() const moderationOpts = useModerationOpts() const [isPTRing, setIsPTRing] = React.useState(false) const {data, isFetching, isFetched, isError, error, refetch} = @@ -84,11 +83,43 @@ export function MyLists({ ({item, index}: {item: any; index: number}) => { if (item === EMPTY) { return ( - <EmptyState - icon="list-ul" - message={_(msg`You have no lists.`)} - testID="listsEmpty" - /> + <View style={[a.flex_1, a.align_center, a.gap_sm, a.px_xl, a.pt_xl]}> + <View + style={[ + a.align_center, + a.justify_center, + a.rounded_full, + t.atoms.bg_contrast_25, + { + width: 32, + height: 32, + }, + ]}> + <ListIcon size="md" fill={t.atoms.text_contrast_low.color} /> + </View> + <Text + style={[ + a.text_center, + a.flex_1, + a.text_sm, + a.leading_snug, + t.atoms.text_contrast_medium, + { + maxWidth: 200, + }, + ]}> + {filter === 'curate' && ( + <Trans> + Public, sharable lists which can be used to drive feeds. + </Trans> + )} + {filter === 'mod' && ( + <Trans> + Public, sharable lists of users to mute or block in bulk. + </Trans> + )} + </Text> + </View> ) } else if (item === ERROR_ITEM) { return ( @@ -118,7 +149,7 @@ export function MyLists({ </View> ) }, - [renderItem, t.atoms.border_contrast_low, _, error, onRefresh], + [t, renderItem, error, onRefresh, filter], ) if (inline) { diff --git a/src/view/com/util/EmptyState.tsx b/src/view/com/util/EmptyState.tsx index 7f1632936..a6352c2fe 100644 --- a/src/view/com/util/EmptyState.tsx +++ b/src/view/com/util/EmptyState.tsx @@ -8,7 +8,6 @@ import { import {usePalette} from '#/lib/hooks/usePalette' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {UserGroupIcon} from '#/lib/icons' -import {isWeb} from '#/platform/detection' import {Growth_Stroke2_Corner0_Rounded as Growth} from '#/components/icons/Growth' import {Text} from './text/Text' @@ -25,16 +24,11 @@ export function EmptyState({ }) { const pal = usePalette('default') const {isTabletOrDesktop} = useWebMediaQueries() - const iconSize = isTabletOrDesktop ? 80 : 64 + const iconSize = isTabletOrDesktop ? 64 : 48 return ( <View testID={testID} - style={[ - styles.container, - isWeb && pal.border, - isTabletOrDesktop && {paddingRight: 20}, - style, - ]}> + style={[isTabletOrDesktop && {paddingRight: 20}, style]}> <View style={[ styles.iconContainer, @@ -61,23 +55,20 @@ export function EmptyState({ } const styles = StyleSheet.create({ - container: { - borderTopWidth: isWeb ? 1 : undefined, - }, iconContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', - height: 100, - width: 100, + height: 80, + width: 80, marginLeft: 'auto', marginRight: 'auto', borderRadius: 80, marginTop: 30, }, iconContainerBig: { - width: 140, - height: 140, + width: 100, + height: 100, marginTop: 50, }, text: { diff --git a/src/view/screens/Lists.tsx b/src/view/screens/Lists.tsx index 99abf0603..300153966 100644 --- a/src/view/screens/Lists.tsx +++ b/src/view/screens/Lists.tsx @@ -61,9 +61,6 @@ export function ListsScreen({}: Props) { <Layout.Header.TitleText> <Trans>Lists</Trans> </Layout.Header.TitleText> - <Layout.Header.SubtitleText> - <Trans>Public, shareable lists which can drive feeds.</Trans> - </Layout.Header.SubtitleText> </Layout.Header.Content> <Button label={_(msg`New list`)} diff --git a/src/view/screens/ModerationModlists.tsx b/src/view/screens/ModerationModlists.tsx index 0ef4d4389..0b5090e3d 100644 --- a/src/view/screens/ModerationModlists.tsx +++ b/src/view/screens/ModerationModlists.tsx @@ -61,11 +61,6 @@ export function ModerationModlistsScreen({}: Props) { <Layout.Header.TitleText> <Trans>Moderation Lists</Trans> </Layout.Header.TitleText> - <Layout.Header.SubtitleText> - <Trans> - Public, shareable lists of users to mute or block in bulk. - </Trans> - </Layout.Header.SubtitleText> </Layout.Header.Content> <Button label={_(msg`New list`)} |