chore: icon migration

examples/SampleApp/src/components/AddMembersBottomSheet.tsx

@@ -12,13 +12,13 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import {
   BottomSheetModal,
   Checkmark,
-  Close,
   StreamBottomSheetModalFlatList,
   UserAvatar,
   useStableCallback,
   useTheme,
 } from 'stream-chat-react-native';
 
+import { Close } from '../icons/Close';
 import { CircleClose } from '../icons/CircleClose';
 import { usePaginatedUsers } from '../hooks/usePaginatedUsers';
 
@@ -159,7 +159,7 @@ export const AddMembersBottomSheet = React.memo(
 
     const initialLoadComplete = initialResults !== null;
 
-    const emptyComponent = useMemo(() => {
+    const EmptyComponent = useCallback(() => {
       if (loading && !initialLoadComplete) {
         return (
           <View style={styles.emptyState}>
@@ -248,7 +248,7 @@ export const AddMembersBottomSheet = React.memo(
             keyExtractor={keyExtractor}
             keyboardDismissMode='interactive'
             keyboardShouldPersistTaps='handled'
-            ListEmptyComponent={emptyComponent}
+            ListEmptyComponent={EmptyComponent}
             onEndReached={loadMore}
             renderItem={renderItem}
             contentContainerStyle={styles.listContent}

examples/SampleApp/src/components/AllMembersBottomSheet.tsx

@@ -3,7 +3,6 @@ import { Pressable, StyleSheet, Text, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import {
   BottomSheetModal,
-  Close,
   StreamBottomSheetModalFlatList,
   UserAdd,
   useStableCallback,
@@ -12,6 +11,7 @@ import {
 
 import { ContactDetailBottomSheet } from './ContactDetailBottomSheet';
 import { MemberListItem } from './MemberListItem';
+import { Close } from '../icons/Close';
 
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import type { Channel, ChannelMemberResponse } from 'stream-chat';

examples/SampleApp/src/components/BottomTabs.tsx

@@ -13,6 +13,7 @@ import type { BottomTabBarProps } from '@react-navigation/bottom-tabs';
 import type { Route } from '@react-navigation/native';
 import { DraftsTab } from '../icons/DraftsTab';
 import { RemindersTab } from '../icons/ReminderTab';
+import { useLegacyColors } from '../theme/useLegacyColors';
 
 const styles = StyleSheet.create({
   notification: {
@@ -84,11 +85,8 @@ type TabProps = Pick<BottomTabBarProps, 'navigation' | 'state'> & {
 
 const Tab = (props: TabProps) => {
   const { navigation, state, route, index } = props;
-  const {
-    theme: {
-      colors: { black, grey },
-    },
-  } = useTheme();
+  useTheme();
+  const { black, grey } = useLegacyColors();
   const tab = getTab(route.name);
 
   const isFocused = state.index === index;
@@ -130,11 +128,8 @@ const Tab = (props: TabProps) => {
 
 export const BottomTabs: React.FC<BottomTabBarProps> = (props) => {
   const { navigation, state } = props;
-  const {
-    theme: {
-      colors: { white },
-    },
-  } = useTheme();
+  useTheme();
+  const { white } = useLegacyColors();
   const { bottom } = useSafeAreaInsets();
 
   return (

examples/SampleApp/src/components/ChannelInfoOverlay.tsx

@@ -7,7 +7,6 @@ import Animated from 'react-native-reanimated';
 import {
   CircleClose,
   Delete,
-  User,
   UserMinus,
   useTheme,
   useViewport,
@@ -24,6 +23,8 @@ import { Archive } from '../icons/Archive';
 import { useChannelInfoOverlayActions } from '../hooks/useChannelInfoOverlayActions';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { Pin } from '../icons/Pin.tsx';
+import { User } from '../icons/User';
+import { useLegacyColors } from '../theme/useLegacyColors';
 
 import type { ConfirmationData } from './ConfirmationBottomSheet';
 
@@ -102,11 +103,9 @@ export const ChannelInfoOverlay = (props: ChannelInfoOverlayProps) => {
   const { channel, clientId, membership, navigation } = data || {};
 
   const {
-    theme: {
-      colors: { accent_red, black, grey },
-      semantics,
-    },
+    theme: { semantics },
   } = useTheme();
+  const { accent_red, black, grey } = useLegacyColors();
 
   // magic number 8 used as fontSize is 16 so assuming average character width of half
   const maxWidth = channel

examples/SampleApp/src/components/ChatScreenHeader.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { Image, StyleSheet, TouchableOpacity } from 'react-native';
 import { CompositeNavigationProp, useNavigation } from '@react-navigation/native';
-import { useChatContext, useTheme } from 'stream-chat-react-native';
+import { useChatContext } from 'stream-chat-react-native';
 
 import { RoundButton } from './RoundButton';
 import { ScreenHeader } from './ScreenHeader';
 
 import { useAppContext } from '../context/AppContext';
 import { NewDirectMessageIcon } from '../icons/NewDirectMessageIcon';
+import { useLegacyColors } from '../theme/useLegacyColors';
 
 import type { DrawerNavigationProp } from '@react-navigation/drawer';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
@@ -29,11 +30,7 @@ type ChatScreenHeaderNavigationProp = CompositeNavigationProp<
 >;
 
 export const ChatScreenHeader: React.FC<{ title?: string }> = ({ title = 'Stream Chat' }) => {
-  const {
-    theme: {
-      colors: { accent_blue },
-    },
-  } = useTheme();
+  const { accent_blue } = useLegacyColors();
 
   const navigation = useNavigation<ChatScreenHeaderNavigationProp>();
   const { chatClient } = useAppContext();

examples/SampleApp/src/components/ContactDetailBottomSheet.tsx

@@ -4,7 +4,6 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import {
   BottomSheetModal,
   CircleBan,
-  MessageIcon,
   useChatContext,
   useStableCallback,
   useTheme,
@@ -13,6 +12,7 @@ import {
 
 import { ListItem } from './ListItem';
 
+import { Message } from '../icons/Message';
 import { Mute } from '../icons/Mute';
 import { getUserActivityStatus } from '../utils/getUserActivityStatus';
 
@@ -120,7 +120,7 @@ export const ContactDetailBottomSheet = React.memo(
           </View>
 
           <ListItem
-            icon={<MessageIcon height={20} width={20} pathFill={semantics.textPrimary} />}
+            icon={<Message height={20} width={20} fill={semantics.textPrimary} />}
             label='Send Direct Message'
             onPress={sendDirectMessage}
           />

examples/SampleApp/src/components/DraftsList.tsx

@@ -11,6 +11,7 @@ import { useCallback, useEffect, useMemo } from 'react';
 import dayjs from 'dayjs';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
 import { ChannelResponse, DraftMessage, DraftResponse, MessageResponseBase } from 'stream-chat';
+import { useLegacyColors } from '../theme/useLegacyColors';
 
 export type DraftItemProps = {
   type?: 'channel' | 'thread';
@@ -22,11 +23,8 @@ export type DraftItemProps = {
 };
 
 export const DraftItem = ({ type, channel, date, message, thread }: DraftItemProps) => {
-  const {
-    theme: {
-      colors: { grey },
-    },
-  } = useTheme();
+  useTheme();
+  const { grey } = useLegacyColors();
   const navigation = useNavigation();
   const { client } = useChatContext();
   const messagePreviewText = useMessagePreviewText({ message });

examples/SampleApp/src/components/EditGroupBottomSheet.tsx

@@ -13,11 +13,11 @@ import {
   BottomSheetModal,
   ChannelAvatar,
   Checkmark,
-  Close,
   useStableCallback,
   useTheme,
 } from 'stream-chat-react-native';
 
+import { Close } from '../icons/Close';
 import type { Channel } from 'stream-chat';
 
 type EditGroupBottomSheetProps = {

examples/SampleApp/src/components/LocationSharing/CreateLocationModal.tsx

@@ -25,6 +25,7 @@ import {
   useTranslationContext,
 } from 'stream-chat-react-native';
 import MapView, { MapMarker, Marker } from 'react-native-maps';
+import { useLegacyColors } from '../../theme/useLegacyColors';
 
 type LiveLocationCreateModalProps = {
   visible: boolean;
@@ -47,11 +48,8 @@ export const LiveLocationCreateModal = ({
   const messageComposer = useMessageComposer();
   const { width, height } = useWindowDimensions();
   const { client } = useChatContext();
-  const {
-    theme: {
-      colors: { accent_blue, grey, grey_whisper },
-    },
-  } = useTheme();
+  useTheme();
+  const { accent_blue, grey, grey_whisper } = useLegacyColors();
   const { t } = useTranslationContext();
   const mapRef = useRef<MapView | null>(null);
   const markerRef = useRef<MapMarker | null>(null);

examples/SampleApp/src/components/LocationSharing/MessageLocation.tsx

@@ -16,6 +16,7 @@ import {
 } from 'stream-chat-react-native';
 import MapView, { MapMarker, Marker } from 'react-native-maps';
 import { SharedLocationResponse, StreamChat } from 'stream-chat';
+import { useLegacyColors } from '../../theme/useLegacyColors';
 
 const MessageLocationFooter = ({
   client,
@@ -26,11 +27,8 @@ const MessageLocationFooter = ({
 }) => {
   const { channel } = useChannelContext();
   const { end_at, user_id } = shared_location;
-  const {
-    theme: {
-      colors: { grey },
-    },
-  } = useTheme();
+  useTheme();
+  const { grey } = useLegacyColors();
   const liveLocationActive = end_at && new Date(end_at) > new Date();
   const endedAtDate = end_at ? new Date(end_at) : null;
   const formattedEndedAt = endedAtDate ? endedAtDate.toLocaleString() : '';
@@ -79,12 +77,8 @@ const MessageLocationComponent = ({
 
   const { width, height } = useWindowDimensions();
   const aspect_ratio = width / height;
-
-  const {
-    theme: {
-      colors: { accent_blue },
-    },
-  } = useTheme();
+  useTheme();
+  const { accent_blue } = useLegacyColors();
 
   const region = useMemo(() => {
     const latitudeDelta = 0.1;

examples/SampleApp/src/components/MenuDrawer.tsx

@@ -1,13 +1,15 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Image, StyleSheet, Text, TouchableOpacity, Pressable, View } from 'react-native';
-import { Edit, User, useTheme } from 'stream-chat-react-native';
+import { Edit, useTheme } from 'stream-chat-react-native';
 
 import { useAppContext } from '../context/AppContext';
 import { SecretMenu } from './SecretMenu.tsx';
 
 import type { DrawerContentComponentProps } from '@react-navigation/drawer';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { Group } from '../icons/Group.tsx';
+import { User } from '../icons/User';
+import { useLegacyColors } from '../theme/useLegacyColors';
 
 export const styles = StyleSheet.create({
   avatar: {
@@ -49,12 +51,8 @@ export const styles = StyleSheet.create({
 export const MenuDrawer = ({ navigation }: DrawerContentComponentProps) => {
   const [secretMenuPressCounter, setSecretMenuPressCounter] = useState(0);
   const [secretMenuVisible, setSecretMenuVisible] = useState(false);
-
-  const {
-    theme: {
-      colors: { black, grey, white },
-    },
-  } = useTheme();
+  useTheme();
+  const { black, grey, white } = useLegacyColors();
 
   useEffect(() => {
     if (!secretMenuVisible && secretMenuPressCounter >= 7) {

examples/SampleApp/src/components/MessageSearch/MessageSearchList.tsx

@@ -5,6 +5,7 @@ import dayjs from 'dayjs';
 import calendar from 'dayjs/plugin/calendar';
 import { Spinner, useTheme, useViewport, UserAvatar } from 'stream-chat-react-native';
 import { DEFAULT_PAGINATION_LIMIT } from '../../utils/constants';
+import { useLegacyColors } from '../../theme/useLegacyColors';
 
 import type { MessageResponse } from 'stream-chat';
 
@@ -72,10 +73,10 @@ export const MessageSearchList: React.FC<MessageSearchListProps> = React.forward
     } = props;
     const {
       theme: {
-        colors: { black, grey, white_snow },
         semantics,
       },
     } = useTheme();
+    const { black, grey, white_snow } = useLegacyColors();
     const { vw } = useViewport();
     const navigation =
       useNavigation<NavigationProp<StackNavigatorParamList, 'ChannelListScreen'>>();

examples/SampleApp/src/components/NetworkDownIndicator.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { Spinner, useTheme } from 'stream-chat-react-native';
+import { useLegacyColors } from '../theme/useLegacyColors';
 
 const styles = StyleSheet.create({
   networkDownContainer: {
@@ -23,11 +24,8 @@ const styles = StyleSheet.create({
 export const NetworkDownIndicator: React.FC<{ titleSize: 'small' | 'large' }> = ({
   titleSize = 'small',
 }) => {
-  const {
-    theme: {
-      colors: { black },
-    },
-  } = useTheme();
+  useTheme();
+  const { black } = useLegacyColors();
 
   return (
     <View style={styles.networkDownContainer} testID='network-down-indicator'>

examples/SampleApp/src/components/NewDirectMessagingSendButton.tsx

@@ -17,6 +17,7 @@ import { NewDirectMessagingScreenNavigationProp } from '../screens/NewDirectMess
 import { useUserSearchContext } from '../context/UserSearchContext';
 import { useAppContext } from '../context/AppContext';
 import { SendUp } from '../icons/SendUp';
+import { useLegacyColors } from '../theme/useLegacyColors';
 
 type NewDirectMessagingSendButtonPropsWithContext = Pick<
   MessageInputContextValue,
@@ -29,10 +30,10 @@ const SendButtonWithContext = (props: NewDirectMessagingSendButtonPropsWithConte
   const { disabled = false, giphyActive, sendMessage } = props;
   const {
     theme: {
-      colors: { accent_blue, grey_gainsboro },
       messageComposer: { sendButton },
     },
   } = useTheme();
+  const { accent_blue, grey_gainsboro } = useLegacyColors();
 
   return (
     <TouchableOpacity

examples/SampleApp/src/components/OverlayBackdrop.tsx

@@ -1,17 +1,15 @@
 import React from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
 import { useTheme } from 'stream-chat-react-native';
+import { useLegacyColors } from '../theme/useLegacyColors';
 
 type OverlayBackdropProps = {
   style?: StyleProp<ViewStyle>;
 };
 
 export const OverlayBackdrop = (props: OverlayBackdropProps): React.ReactNode => {
   const { style = {} } = props;
-  const {
-    theme: {
-      colors: { overlay },
-    },
-  } = useTheme();
+  useTheme();
+  const { overlay } = useLegacyColors();
   return <View style={[{ backgroundColor: overlay }, style]} />;
 };

examples/SampleApp/src/components/Reminders/ReminderBanner.tsx

@@ -6,17 +6,15 @@ import {
   useTranslationContext,
   useStateStore,
 } from 'stream-chat-react-native';
+import { useLegacyColors } from '../../theme/useLegacyColors';
 
 const reminderStateSelector = (state: ReminderState) => ({
   timeLeftMs: state.timeLeftMs,
 });
 
 export const ReminderBanner = (item: ReminderResponse) => {
-  const {
-    theme: {
-      colors: { accent_blue, accent_red },
-    },
-  } = useTheme();
+  useTheme();
+  const { accent_blue, accent_red } = useLegacyColors();
   const { t } = useTranslationContext();
   const { message_id } = item;
   const reminder = useMessageReminder(message_id);