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={}
/>
) : (