diff --git a/packages/mobile/src/assets/images/leftPointingMagnifyingGlass.png b/packages/mobile/src/assets/images/leftPointingMagnifyingGlass.png new file mode 100644 index 00000000000..f8097a46d7b Binary files /dev/null and b/packages/mobile/src/assets/images/leftPointingMagnifyingGlass.png differ diff --git a/packages/mobile/src/screens/chat-screen/ChatUserListScreen.tsx b/packages/mobile/src/screens/chat-screen/ChatUserListScreen.tsx index b2354404ec6..9f51543bc8b 100644 --- a/packages/mobile/src/screens/chat-screen/ChatUserListScreen.tsx +++ b/packages/mobile/src/screens/chat-screen/ChatUserListScreen.tsx @@ -9,13 +9,20 @@ import { cacheUsersSelectors, Status } from '@audius/common' -import { View } from 'react-native' +import { View, Image } from 'react-native' import { useDispatch, useSelector } from 'react-redux' import { useDebounce } from 'react-use' import IconCompose from 'app/assets/images/iconCompose.svg' import IconSearch from 'app/assets/images/iconSearch.svg' -import { Screen, FlatList, ScreenContent, TextInput } from 'app/components/core' +import MagnifyingGlass from 'app/assets/images/leftPointingMagnifyingGlass.png' +import { + Screen, + Text, + FlatList, + ScreenContent, + TextInput +} from 'app/components/core' import LoadingSpinner from 'app/components/loading-spinner' import { makeStyles } from 'app/styles' import { useThemeColors } from 'app/utils/theme' @@ -31,7 +38,10 @@ const DEBOUNCE_MS = 100 const messages = { title: 'New Message', - search: 'Search Users' + search: 'Search Users', + emptyTitle: 'Search for Friends', + emptyDescription: + 'Search for fellow music lovers and strike up a conversation.' } const useStyles = makeStyles(({ spacing, palette, typography }) => ({ @@ -78,9 +88,53 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({ }, flatListContainer: { minHeight: '100%' + }, + emptyContainer: { + marginTop: spacing(6), + margin: spacing(2), + padding: spacing(6), + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + gap: spacing(6), + backgroundColor: palette.neutralLight10, + borderRadius: spacing(2), + borderColor: palette.background, + borderWidth: 1 + }, + emptyTextContainer: { + flexShrink: 1, + gap: spacing(2) + }, + magnifyingGlass: { + height: spacing(16), + width: spacing(16) + }, + emptyTitle: { + fontSize: typography.fontSize.xxl, + fontFamily: typography.fontByWeight.bold, + lineHeight: typography.fontSize.xxl * 1.3 + }, + emptyDescription: { + fontSize: typography.fontSize.large, + lineHeight: typography.fontSize.large * 1.3 } })) +const ListEmpty = () => { + const styles = useStyles() + + return ( + + + + {messages.emptyTitle} + {messages.emptyDescription} + + + ) +} + type ChatUserListScreenProps = { debounceMs?: number defaultUserList?: { @@ -193,6 +247,7 @@ export const ChatUserListScreen = (props: ChatUserListScreenProps) => { renderItem={({ item }) => } keyExtractor={(user: User) => user.handle} contentContainerStyle={styles.flatListContainer} + ListEmptyComponent={} /> ) : (