stream-chat-react-native-core 9.0.0-beta.11 → 9.0.0-beta.12

package/src/components/AttachmentPicker/components/AttachmentTypePickerButton.tsx

@@ -42,7 +42,7 @@ export const AttachmentTypePickerButton = ({
 }: AttachmentTypePickerButtonProps) => {
   const { disableAttachmentPicker } = useAttachmentPickerContext();
   const ButtonIcon = useCallback(
-    (props: IconProps) => Icon && <Icon {...props} width={14} height={14} />,
+    (props: IconProps) => Icon && <Icon {...props} width={20} height={20} />,
     [Icon],
   );
 

package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx

@@ -5,8 +5,8 @@ import { CommandVariants } from 'stream-chat';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Flag, GiphyIcon, Mute, Sound, UserAdd, UserDelete } from '../../icons';
-import { Imgur } from '../../icons/Imgur';
-import { Lightning } from '../../icons/Lightning';
+import { Lightning } from '../../icons/bolt';
+import { Imgur } from '../../icons/imgur';
 
 export const SuggestionCommandIcon = ({ name }: { name: CommandVariants }) => {
   const {

package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
-import { Smile } from '../../icons/Smile';
+import { Smile } from '../../icons/emoji';
 import { primitives } from '../../theme';
 
 export type AutoCompleteSuggestionHeaderProps = {

package/src/components/ChannelList/hooks/useChannelActionItems.tsx

@@ -12,8 +12,8 @@ import { useIsDirectChat } from './useIsDirectChat';
 
 import { useTheme, useTranslationContext } from '../../../contexts';
 import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
-import { Archive, IconProps, Mute, BlockUser, Delete } from '../../../icons';
-import { ArrowBoxLeft } from '../../../icons/ArrowBoxLeft';
+import { Archive, IconProps, Mute, BlockUser, Delete, Sound } from '../../../icons';
+import { ArrowBoxLeft } from '../../../icons/leave';
 
 export type ChannelActionHandler = () => Promise<void> | void;
 
@@ -92,15 +92,18 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
         : muteActive
           ? unmuteChannel
           : muteChannel,
-      Icon: (props) => (
-        <Mute
-          width={20}
-          height={20}
-          {...props}
-          stroke={undefined}
-          fill={props.fill ?? props.stroke}
-        />
-      ),
+      Icon: (props) =>
+        muteActive ? (
+          <Sound width={20} height={20} {...props} />
+        ) : (
+          <Mute
+            width={20}
+            height={20}
+            {...props}
+            stroke={undefined}
+            fill={props.fill ?? props.stroke}
+          />
+        ),
       id: 'mute',
       label: isDirectChat
         ? muteActive

package/src/components/ChannelPreview/ChannelPreviewMessage.tsx

@@ -21,7 +21,7 @@ import { useChatContext } from '../../contexts/chatContext/ChatContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 
-import { PollIcon } from '../../icons/PollIcon';
+import { PollIcon } from '../../icons/poll';
 import { primitives } from '../../theme';
 import { MessageStatusTypes } from '../../utils/utils';
 import { ErrorBadge } from '../ui';

package/src/components/ChannelPreview/ChannelSwipableWrapper.tsx

@@ -10,10 +10,11 @@ import type { ChannelDetailsBottomSheetProps } from './ChannelDetailsBottomSheet
 
 import { useTheme } from '../../contexts';
 import { useSwipeRegistryContext } from '../../contexts/swipeableContext/SwipeRegistryContext';
-import { Archive, MenuPointHorizontal, Mute } from '../../icons';
+import { Archive, MenuPointHorizontal, Mute, Sound } from '../../icons';
 import { GetChannelActionItems } from '../ChannelList/hooks/useChannelActionItems';
 import { useChannelActionItems } from '../ChannelList/hooks/useChannelActionItems';
 import { useChannelActionItemsById } from '../ChannelList/hooks/useChannelActionItemsById';
+import { useChannelMuteActive } from '../ChannelList/hooks/useChannelMuteActive';
 import { useIsDirectChat } from '../ChannelList/hooks/useIsDirectChat';
 import {
   BottomSheetModal,
@@ -53,15 +54,18 @@ export const ChannelSwipableWrapper = ({
   const styles = useStyles();
 
   const isDirectChannel = useIsDirectChat(channel);
+  const muteActive = useChannelMuteActive(channel);
 
   const Icon = useCallback(
     () =>
       isDirectChannel ? (
         <Archive width={20} height={20} stroke={semantics.textOnAccent} />
+      ) : muteActive ? (
+        <Sound width={20} height={20} stroke={semantics.textOnAccent} />
       ) : (
         <Mute width={20} height={20} fill={semantics.textOnAccent} />
       ),
-    [isDirectChannel, semantics.textOnAccent],
+    [isDirectChannel, muteActive, semantics.textOnAccent],
   );
 
   const swipableActions = useMemo<SwipableActionItem[]>(() => {

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -9,7 +9,7 @@ import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../../hooks/useStateStore';
 import { Share as ShareIconDefault } from '../../../icons';
-import { ImageGrid } from '../../../icons/ImageGrid';
+import { ImageGrid } from '../../../icons/gallery';
 import { isFileSystemAvailable, isShareImageAvailable, NativeHandlers } from '../../../native';
 
 import { ImageGalleryState } from '../../../state-store/image-gallery-state-store';

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -11,7 +11,7 @@ import { useOverlayContext } from '../../../contexts/overlayContext/OverlayConte
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../../hooks/useStateStore';
-import { ChevronLeft } from '../../../icons/ChevronLeft';
+import { ChevronLeft } from '../../../icons/chevron-left';
 
 import { ImageGalleryState } from '../../../state-store/image-gallery-state-store';
 import { primitives } from '../../../theme';

package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx

@@ -6,8 +6,8 @@ import type { ImageGalleryVideoControlProps } from './types';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
 import { useStateStore } from '../../../hooks/useStateStore';
-import { Pause } from '../../../icons/Pause';
-import { Play } from '../../../icons/Play';
+import { Pause } from '../../../icons/pause-fill';
+import { Play } from '../../../icons/play-fill';
 import { IconProps } from '../../../icons/utils/base';
 import { VideoPlayerState } from '../../../state-store/video-player';
 import { primitives } from '../../../theme';

package/src/components/Message/MessageItemView/Headers/MessagePinnedHeader.tsx

@@ -8,7 +8,7 @@ import {
 } from '../../../../contexts/messageContext/MessageContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
-import { Pin } from '../../../../icons/Pin';
+import { Pin } from '../../../../icons/pin';
 import { primitives } from '../../../../theme';
 import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles';
 

package/src/components/Message/MessageItemView/Headers/MessageSavedForLaterHeader.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import { MessageContextValue } from '../../../../contexts/messageContext/MessageContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
-import { Bookmark } from '../../../../icons/Bookmark';
+import { Bookmark } from '../../../../icons/save';
 import { primitives } from '../../../../theme';
 import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles';
 

package/src/components/Message/MessageItemView/Headers/SentToChannelHeader.tsx

@@ -13,7 +13,7 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useThreadContext } from '../../../../contexts/threadContext/ThreadContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { useStableCallback } from '../../../../hooks';
-import { ArrowUpRight } from '../../../../icons/ArrowUpRight';
+import { ArrowUpRight } from '../../../../icons/arrow-up-right';
 import { primitives } from '../../../../theme';
 import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles';
 

package/src/components/Message/MessageItemView/MessageDeleted.tsx

@@ -11,7 +11,7 @@ import {
 } from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
-import { CircleBan } from '../../../icons/CircleBan';
+import { CircleBan } from '../../../icons/no-sign';
 import { components, primitives } from '../../../theme';
 
 type MessageDeletedComponentProps = {

package/src/components/Message/MessageItemView/MessageError.tsx

@@ -1,7 +1,35 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
+import { View, StyleSheet } from 'react-native';
+
+import { useTheme } from '../../../contexts';
+import { primitives } from '../../../theme';
 import { ErrorBadge } from '../../ui/Badge/ErrorBadge';
 
 export const MessageError = () => {
-  return <ErrorBadge size='sm' testID='message-error' />;
+  const styles = useStyles();
+
+  return (
+    <View style={styles.wrapper}>
+      <ErrorBadge size='sm' testID='message-error' />
+    </View>
+  );
+};
+
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        wrapper: {
+          borderRadius: primitives.radiusMax,
+          borderWidth: 2,
+          borderColor: semantics.badgeBorder,
+        },
+      }),
+    [semantics],
+  );
 };

package/src/components/Message/MessageItemView/MessageStatus.tsx

@@ -7,9 +7,9 @@ import {
   useMessageContext,
 } from '../../../contexts/messageContext/MessageContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Check } from '../../../icons/Check';
-import { CheckAll } from '../../../icons/CheckAll';
-import { Time } from '../../../icons/Time';
+import { Check } from '../../../icons/checkmark';
+import { CheckAll } from '../../../icons/checks';
+import { Time } from '../../../icons/clock';
 import { primitives } from '../../../theme';
 import { MessageStatusTypes } from '../../../utils/utils';
 import { useShouldUseOverlayStyles } from '../hooks/useShouldUseOverlayStyles';

package/src/components/Message/hooks/useMessageActions.tsx

@@ -25,8 +25,9 @@ import {
   Mute,
   Pin,
   Resend,
+  Sound,
   ThreadReply,
-  // Unpin,
+  Unpin,
   UnreadIndicator,
   UserDelete,
 } from '../../../icons';
@@ -330,8 +331,7 @@ export const useMessageActions = ({
     const unpinMessage: MessageActionType = {
       action: onTogglePinMessage,
       actionType: 'unpinMessage',
-      // TODO: V9: This icon does not exist yet, replace the old when when we get a new one
-      icon: <Pin width={20} height={20} stroke={semantics.textSecondary} />,
+      icon: <Unpin width={20} height={20} stroke={semantics.textSecondary} />,
       title: t('Unpin from Conversation'),
       type: 'standard',
     };
@@ -339,7 +339,11 @@ export const useMessageActions = ({
     const muteUser: MessageActionType = {
       action: onMuteUser,
       actionType: 'muteUser',
-      icon: <Mute fill={semantics.textSecondary} height={20} width={20} />,
+      icon: isMuted ? (
+        <Sound height={20} stroke={semantics.textSecondary} width={20} />
+      ) : (
+        <Mute fill={semantics.textSecondary} height={20} width={20} />
+      ),
       title: isMuted ? t('Unmute User') : t('Mute User'),
       type: 'standard',
     };

package/src/components/MessageInput/StopMessageStreamingButton.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
-import { Pressable } from 'react-native';
+import React, { useMemo } from 'react';
+import { Pressable, StyleSheet } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { CircleStop } from '../../icons';
+import { Stop } from '../../icons';
+import { primitives } from '../../theme';
 
 export type StopMessageStreamingButtonProps = {
   /** Function that opens attachment options bottom sheet */
@@ -18,17 +19,36 @@ export const StopMessageStreamingButton = (props: StopMessageStreamingButtonProp
       messageComposer: { stopMessageStreamingButton, stopMessageStreamingIcon },
     },
   } = useTheme();
+  const styles = useStyles();
 
   return (
     <Pressable
       hitSlop={{ bottom: 15, left: 15, right: 15, top: 15 }}
       onPress={onPress}
-      style={[stopMessageStreamingButton]}
+      style={[styles.stopStreamingButton, stopMessageStreamingButton]}
       testID='more-options-button'
     >
-      <CircleStop fill={semantics.accentPrimary} size={32} {...stopMessageStreamingIcon} />
+      <Stop fill={semantics.accentPrimary} size={24} {...stopMessageStreamingIcon} />
     </Pressable>
   );
 };
 
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        stopStreamingButton: {
+          borderWidth: 1,
+          borderRadius: primitives.radiusMax,
+          borderColor: semantics.accentPrimary,
+        },
+      }),
+    [semantics],
+  );
+};
+
 StopMessageStreamingButton.displayName = 'StopMessageStreamingButton{messageComposer}';