chore: icon migration (#3521)

## 🎯 Goal

The icon set we used had a license that was blocking open source
distribution and so we're changing the entire icon set before rolling
out the next major.



## 🛠 Implementation details

<!-- Provide a description of the implementation -->

## 🎨 UI Changes

<!-- Add relevant screenshots -->

<details>
<summary>iOS</summary>


<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>


<details>
<summary>Android</summary>

<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>

## 🧪 Testing

<!-- Explain how this change can be tested (or why it can't be tested)
-->

## ☑️ Checklist

- [ ] I have signed the [Stream
CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform)
(required)
- [ ] PR targets the `develop` branch
- [ ] Documentation is updated
- [ ] New code is tested in main example apps, including all possible
scenarios
  - [ ] SampleApp iOS and Android
  - [ ] Expo iOS and Android

Author: isekovanic

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;