diff --git a/apps/audius-client/packages/mobile/src/assets/images/iconCloseAlt.svg b/apps/audius-client/packages/mobile/src/assets/images/iconCloseAlt.svg
new file mode 100644
index 00000000000..9fb30f55704
--- /dev/null
+++ b/apps/audius-client/packages/mobile/src/assets/images/iconCloseAlt.svg
@@ -0,0 +1,3 @@
+
diff --git a/apps/audius-client/packages/mobile/src/assets/images/iconSearch.svg b/apps/audius-client/packages/mobile/src/assets/images/iconSearch.svg
old mode 100755
new mode 100644
index 00880255e6b..199e2a92761
--- a/apps/audius-client/packages/mobile/src/assets/images/iconSearch.svg
+++ b/apps/audius-client/packages/mobile/src/assets/images/iconSearch.svg
@@ -1,12 +1,5 @@
-
-
\ No newline at end of file
+
diff --git a/apps/audius-client/packages/mobile/src/components/core/TextInput.tsx b/apps/audius-client/packages/mobile/src/components/core/TextInput.tsx
index 7c69ef4015a..5f1da7588b2 100644
--- a/apps/audius-client/packages/mobile/src/components/core/TextInput.tsx
+++ b/apps/audius-client/packages/mobile/src/components/core/TextInput.tsx
@@ -21,7 +21,7 @@ import {
import { TouchableWithoutFeedback } from 'react-native-gesture-handler'
import type { SvgProps } from 'react-native-svg'
-import IconClose from 'app/assets/images/iconRemove.svg'
+import IconCloseAlt from 'app/assets/images/iconCloseAlt.svg'
import { usePressScaleAnimation } from 'app/hooks/usePressScaleAnimation'
import type { StylesProp } from 'app/styles'
import { makeStyles } from 'app/styles'
@@ -41,6 +41,7 @@ const useStyles = makeStyles(({ typography, palette, spacing }) => ({
flexDirection: 'row',
alignItems: 'center',
flexWrap: 'wrap',
+ justifyContent: 'space-between',
borderRadius: 8,
borderWidth: 1,
paddingVertical: spacing(2),
@@ -67,13 +68,14 @@ const useStyles = makeStyles(({ typography, palette, spacing }) => ({
color: palette.neutral,
fontFamily: typography.fontByWeight.medium,
minWidth: 40,
+ flexGrow: 1,
// Needed for android
padding: 0
},
icon: {
fill: palette.neutralLight5,
- height: spacing(4),
- width: spacing(4)
+ width: spacing(4),
+ height: spacing(4)
},
placeholderText: {
color: palette.neutralLight7
@@ -113,6 +115,7 @@ export type TextInputProps = RNTextInputProps & {
input: TextStyle
labelText: TextStyle
}>
+ iconProp?: Pick
hideInputAccessory?: boolean
}
@@ -132,6 +135,7 @@ export const TextInput = forwardRef(
styles: stylesProp,
label,
Icon,
+ iconProp,
clearable,
onClear,
startAdornment,
@@ -153,6 +157,7 @@ export const TextInput = forwardRef(
)
const labelAnimation = useRef(new Animated.Value(isLabelActive ? 16 : 18))
const borderFocusAnimation = useRef(new Animated.Value(isFocused ? 1 : 0))
+ const iconProps = { ...styles.icon, ...iconProp }
const hideInputAccessory =
(hideInputAccessoryProp ?? returnKeyType === 'search') ||
@@ -318,7 +323,7 @@ export const TextInput = forwardRef(
}
{...other}
/>
- {clearable ? (
+ {clearable && value ? (
(
right: spacing(2)
}}
>
-
) : Icon ? (
) : null}
{endAdornment ? (
diff --git a/apps/audius-client/packages/mobile/src/screens/chat-screen/ChatUserListScreen.tsx b/apps/audius-client/packages/mobile/src/screens/chat-screen/ChatUserListScreen.tsx
index 9f51543bc8b..488408f6d4d 100644
--- a/apps/audius-client/packages/mobile/src/screens/chat-screen/ChatUserListScreen.tsx
+++ b/apps/audius-client/packages/mobile/src/screens/chat-screen/ChatUserListScreen.tsx
@@ -25,7 +25,6 @@ import {
} from 'app/components/core'
import LoadingSpinner from 'app/components/loading-spinner'
import { makeStyles } from 'app/styles'
-import { useThemeColors } from 'app/utils/theme'
import { ChatUserListItem } from './ChatUserListItem'
@@ -64,14 +63,10 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
marginHorizontal: spacing(2),
marginBottom: spacing(2)
},
- searchIcon: {
- width: spacing(5),
- height: spacing(5)
- },
searchInputContainer: {
paddingRight: spacing(5),
paddingLeft: spacing(4),
- paddingVertical: spacing(5)
+ paddingVertical: spacing(6)
},
searchInputText: {
fontFamily: typography.fontByWeight.demiBold,
@@ -118,6 +113,10 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
emptyDescription: {
fontSize: typography.fontSize.large,
lineHeight: typography.fontSize.large * 1.3
+ },
+ icon: {
+ height: spacing(6),
+ width: spacing(6)
}
}))
@@ -154,7 +153,6 @@ export const ChatUserListScreen = (props: ChatUserListScreenProps) => {
}
} = props
const styles = useStyles()
- const palette = useThemeColors()
const [query, setQuery] = useState('')
const [hasQuery, setHasQuery] = useState(false)
const dispatch = useDispatch()
@@ -198,6 +196,10 @@ export const ChatUserListScreen = (props: ChatUserListScreenProps) => {
[setQuery]
)
+ const handleClear = useCallback(() => {
+ setQuery('')
+ }, [setQuery])
+
const handleLoadMore = useCallback(() => {
if (status === Status.LOADING || defaultUserList.loading || !hasMore) {
return
@@ -223,20 +225,17 @@ export const ChatUserListScreen = (props: ChatUserListScreenProps) => {
(
-
- )}
+ Icon={IconSearch}
styles={{
root: styles.searchInputContainer,
input: styles.searchInputText
}}
+ iconProp={styles.icon}
onChangeText={handleChange}
value={query}
inputAccessoryViewID='none'
+ clearable={true}
+ onClear={handleClear}
/>