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

package/lib/typescript/utils/i18n/Streami18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Streami18n.d.ts","sourceRoot":"","sources":["../../../../src/utils/i18n/Streami18n.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Streami18n.d.ts","sourceRoot":"","sources":["../../../../src/utils/i18n/Streami18n.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "9.0.0-beta.10",
+  "version": "9.0.0-beta.12",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/Attachment/Audio/AudioAttachment.tsx

@@ -15,6 +15,7 @@ import {
 import { PlayPauseButton } from './PlayPauseButton';
 
 import { useTheme } from '../../../contexts';
+import { useStableCallback } from '../../../hooks';
 import { useStateStore } from '../../../hooks';
 import { useAudioPlayer } from '../../../hooks/useAudioPlayer';
 import {
@@ -28,6 +29,7 @@ import { AudioPlayerState } from '../../../state-store/audio-player';
 import { primitives } from '../../../theme';
 import { AudioConfig } from '../../../types/types';
 import { ProgressControl } from '../../ProgressControl/ProgressControl';
+import { StableDurationLabel } from '../../ProgressControl/StableDurationLabel';
 import { WaveProgressBar } from '../../ProgressControl/WaveProgressBar';
 import { SpeedSettingsButton } from '../../ui/SpeedSettingsButton';
 
@@ -36,6 +38,16 @@ const ONE_SECOND_IN_MILLISECONDS = 1000;
 
 dayjs.extend(duration);
 
+const getAudioDurationLabel = (durationInMilliseconds: number) => {
+  if (!durationInMilliseconds) {
+    return '00:00';
+  }
+
+  return durationInMilliseconds / ONE_HOUR_IN_MILLISECONDS >= 1
+    ? dayjs.duration(durationInMilliseconds, 'milliseconds').format('HH:mm:ss')
+    : dayjs.duration(durationInMilliseconds, 'milliseconds').format('mm:ss');
+};
+
 export type AudioAttachmentType = AudioConfig &
   Pick<
     StreamAudioAttachment | StreamVoiceRecordingAttachment,
@@ -131,7 +143,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
 
   /** This is for Native CLI Apps */
   const handleLoad = (payload: VideoPayloadData) => {
-    // If the attachment is a voice recording, we rely on the duration from the attachment as the one from the react-native-video is incorrect.
+    // Voice recordings already carry the canonical duration in the attachment payload.
     if (isVoiceRecording) {
       return;
     }
@@ -157,18 +169,14 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
     await audioPlayer.stop();
   };
 
-  const dragStart = () => {
+  const dragStart = useStableCallback(() => {
     audioPlayer.pause();
-  };
-
-  const dragProgress = (currentProgress: number) => {
-    audioPlayer.progress = currentProgress;
-  };
+  });
 
-  const dragEnd = async (currentProgress: number) => {
+  const dragEnd = useStableCallback(async (currentProgress: number) => {
     const positionInSeconds = (currentProgress * duration) / ONE_SECOND_IN_MILLISECONDS;
     await audioPlayer.seek(positionInSeconds);
-  };
+  });
 
   const onSpeedChangeHandler = async () => {
     await audioPlayer.changePlaybackRate();
@@ -192,14 +200,13 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
     },
   } = useTheme();
 
+  const maxDurationLabel = useMemo(() => getAudioDurationLabel(duration), [duration]);
+
+  const remainingDuration = useMemo(() => Math.max(duration - position, 0), [duration, position]);
+
   const progressDuration = useMemo(
-    () =>
-      position
-        ? position / ONE_HOUR_IN_MILLISECONDS >= 1
-          ? dayjs.duration(position, 'milliseconds').format('HH:mm:ss')
-          : dayjs.duration(position, 'milliseconds').format('mm:ss')
-        : dayjs.duration(duration, 'milliseconds').format('mm:ss'),
-    [duration, position],
+    () => getAudioDurationLabel(remainingDuration || duration),
+    [duration, remainingDuration],
   );
 
   return (
@@ -246,23 +253,21 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
           indicator
         ) : (
           <View style={[styles.audioInfo, audioInfo]}>
-            <Text
-              style={[
-                styles.progressDurationText,
-                { color: isPlaying ? semantics.accentPrimary : semantics.textSecondary },
-                progressDurationText,
-                stylesProps?.durationText,
-              ]}
-            >
-              {progressDuration}
-            </Text>
+            <StableDurationLabel
+              accessibilityLabel='Progress Duration'
+              reserveLabel={maxDurationLabel}
+              label={progressDuration}
+              style={[styles.progressDurationText, progressDurationText, stylesProps?.durationText]}
+              visibleStyle={{
+                color: isPlaying ? semantics.accentPrimary : semantics.textSecondary,
+              }}
+            />
             {!hideProgressBar && (
               <View style={[styles.progressControlContainer, progressControlContainer]}>
                 {item.waveform_data ? (
                   <WaveProgressBar
                     isPlaying={isPlaying}
                     onEndDrag={dragEnd}
-                    onProgressDrag={dragProgress}
                     onStartDrag={dragStart}
                     progress={progress}
                     waveformData={item.waveform_data}
@@ -344,6 +349,7 @@ const useStyles = () => {
       },
       progressDurationText: {
         color: semantics.textPrimary,
+        fontVariant: ['tabular-nums'],
         fontSize: primitives.typographyFontSizeXs,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightTight,

package/src/components/Attachment/Audio/PlayPauseButton.tsx

@@ -2,8 +2,8 @@ import React, { useMemo } from 'react';
 import { Pressable, PressableProps, StyleProp, StyleSheet, ViewStyle } from 'react-native';
 
 import { useTheme } from '../../../contexts';
-import { Pause } from '../../../icons/Pause';
-import { Play } from '../../../icons/Play';
+import { Pause } from '../../../icons/pause-fill';
+import { Play } from '../../../icons/play-fill';
 import { primitives } from '../../../theme';
 import { buttonSizes } from '../../ui/Button/constants';
 

package/src/components/Attachment/FileIcon.tsx

@@ -2,16 +2,16 @@ import React from 'react';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
-import { Audio } from '../../icons/Audio';
-import { Code } from '../../icons/Code';
-import { DOC } from '../../icons/DOC';
-import { OtherFileIcon } from '../../icons/OtherFileIcon';
-import { PDF } from '../../icons/PDF';
-import { Presentation } from '../../icons/Presentation';
-import { SpreadSheet } from '../../icons/SpreadSheet';
+import { Audio } from '../../icons/filetype-audio-xl';
+import { Code } from '../../icons/filetype-code-xl';
+import { ZIP } from '../../icons/filetype-compression-xl';
+import { OtherFileIcon } from '../../icons/filetype-other-xl';
+import { PDF } from '../../icons/filetype-pdf-xl';
+import { Presentation } from '../../icons/filetype-presentation-xl';
+import { SpreadSheet } from '../../icons/filetype-spreadsheet-xl';
+import { DOC } from '../../icons/filetype-text-xl';
+import { Video } from '../../icons/filetype-video-xl';
 import type { IconProps } from '../../icons/utils/base';
-import { Video } from '../../icons/Video';
-import { ZIP } from '../../icons/ZIP';
 
 // https://www.iana.org/assignments/media-types/media-types.xhtml#audio
 const audioFileTypes = [

package/src/components/Attachment/Gallery.tsx

@@ -327,14 +327,7 @@ const GalleryThumbnail = ({
           });
         }
       }}
-      style={({ pressed }) => [
-        styles.imageContainer,
-        {
-          opacity: pressed ? 0.8 : 1,
-          flex: thumbnail.flex,
-        },
-        imageContainer,
-      ]}
+      style={[styles.imageContainer, { flex: thumbnail.flex }, imageContainer]}
       testID={`gallery-${invertedDirections ? 'row' : 'column'}-${colIndex}-item-${rowIndex}`}
       {...additionalPressableProps}
     >

package/src/components/Attachment/Giphy/Giphy.tsx

@@ -17,7 +17,8 @@ import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 
 import { EyeOpen } from '../../../icons/EyeOpen';
-import { primitives } from '../../../theme';
+import { components, primitives } from '../../../theme';
+import { Button } from '../../ui/';
 
 export type GiphyPropsWithContext = Pick<
   MessageContextValue,
@@ -46,14 +47,7 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
   const {
     theme: {
       messageItemView: {
-        giphy: {
-          actionButtonContainer,
-          actionButton,
-          actionButtonText,
-          container,
-          giphyHeaderText,
-          header,
-        },
+        giphy: { actionButtonContainer, actionButton, container, giphyHeaderText, header },
       },
       semantics,
     },
@@ -68,7 +62,10 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
   }
 
   return actions ? (
-    <View style={[styles.container, container]} testID='giphy-action-attachment'>
+    <View
+      style={[styles.container, styles.actionContainer, container]}
+      testID='giphy-action-attachment'
+    >
       <View style={[styles.header, header]}>
         <EyeOpen height={16} width={16} fill={semantics.chatTextOutgoing} />
         <Text style={[styles.headerText, giphyHeaderText]}>{t('Only visible to you')}</Text>
@@ -76,33 +73,23 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
       <GiphyImage attachment={attachment} giphyVersion={giphyVersion} preview />
       <View style={[styles.actionButtonContainer, actionButtonContainer]}>
         {actions.map((action) => {
+          const isPrimaryAction = action.text === 'Send';
           return (
-            <Pressable
+            <Button
               key={action.value}
+              variant={isPrimaryAction ? 'primary' : 'secondary'}
+              type='ghost'
+              size='sm'
+              testID={`${action.value}-action-button`}
               onPress={() => {
                 if (action?.name && action?.value && handleAction) {
                   handleAction(action.name, action.value);
                 }
               }}
+              iconOnly={false}
+              label={action.text}
               style={[styles.actionButton, actionButton]}
-              testID={`${action.value}-action-button`}
-            >
-              <Text
-                numberOfLines={1}
-                style={[
-                  styles.actionButtonText,
-                  {
-                    color:
-                      action.text === 'Send'
-                        ? semantics.buttonPrimaryText
-                        : semantics.buttonSecondaryText,
-                  },
-                  actionButtonText,
-                ]}
-              >
-                {action.text}
-              </Text>
-            </Pressable>
+            />
           );
         })}
       </View>
@@ -225,20 +212,19 @@ const useStyles = () => {
         overflow: 'hidden',
       },
       actionButtonContainer: {
+        alignSelf: 'center',
         flexDirection: 'row',
         gap: primitives.spacingXs,
-      },
-      actionButton: {
-        alignItems: 'center',
-        flex: 1,
+        paddingHorizontal: primitives.spacingXxs,
         justifyContent: 'center',
-        paddingVertical: primitives.spacingSm,
       },
-      actionButtonText: {
-        fontSize: primitives.typographyFontSizeMd,
-        fontWeight: primitives.typographyFontWeightSemiBold,
-        lineHeight: primitives.typographyLineHeightNormal,
-        color: semantics.buttonSecondaryText,
+      actionContainer: {},
+      actionButton: {
+        alignSelf: 'flex-start',
+        flexGrow: 0,
+        flexShrink: 0,
+        width: undefined,
+        minHeight: components.buttonHitTargetMinHeight,
       },
       header: {
         alignItems: 'center',

package/src/components/Attachment/UrlPreview/URLPreview.tsx

@@ -24,7 +24,7 @@ import {
   useMessagesContext,
 } from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Link } from '../../../icons/Link';
+import { Link } from '../../../icons/link';
 import { primitives } from '../../../theme';
 import { FileTypes } from '../../../types/types';
 import { makeImageCompatibleUrl } from '../../../utils/utils';

package/src/components/Attachment/UrlPreview/URLPreviewCompact.tsx

@@ -24,7 +24,7 @@ import {
   useMessagesContext,
 } from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Link } from '../../../icons/Link';
+import { Link } from '../../../icons/link';
 import { primitives } from '../../../theme';
 import { FileTypes } from '../../../types/types';
 import { makeImageCompatibleUrl } from '../../../utils/utils';

package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx

@@ -13,7 +13,7 @@ import { useMessageInputContext } from '../../../../contexts/messageInputContext
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { useViewport } from '../../../../hooks/useViewport';
-import { Plus } from '../../../../icons/Plus';
+import { Plus } from '../../../../icons/plus';
 import { NativeHandlers } from '../../../../native';
 import { primitives } from '../../../../theme';
 import type { File } from '../../../../types/types';

package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx

@@ -223,6 +223,7 @@ export const AttachmentFilePicker = (props: AttachmentPickerContentProps) => {
 };
 
 export type { AttachmentPickerContentProps } from './AttachmentPickerGenericContent';
+export { AttachmentPickerGenericContent } from './AttachmentPickerGenericContent';
 
 export const AttachmentPickerContent = (props: AttachmentPickerContentProps) => {
   const { height } = props;

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 ? (
-        <Mute width={20} height={20} fill={semantics.textOnAccent} />
-      ) : (
         <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[]>(() => {
@@ -74,7 +78,7 @@ export const ChannelSwipableWrapper = ({
       },
     ];
 
-    const extraItem = isDirectChannel ? channelActionsById.mute : channelActionsById.archive;
+    const extraItem = isDirectChannel ? channelActionsById.archive : channelActionsById.mute;
 
     if (extraItem) {
       const { id, action } = extraItem;

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/Message.tsx

@@ -248,7 +248,6 @@ export type MessagePropsWithContext = Pick<
  * each individual Message component.
  */
 const MessageWithContext = (props: MessagePropsWithContext) => {
-  const [isErrorInMessage, setIsErrorInMessage] = useState(false);
   const [showMessageReactions, setShowMessageReactions] = useState<boolean>(false);
   const [selectedReaction, setSelectedReaction] = useState<string | undefined>(undefined);
   const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false);
@@ -391,7 +390,6 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     }
     const quotedMessage = message.quoted_message;
     if (error) {
-      setIsErrorInMessage(true);
       /**
        * If its a Blocked message, we don't do anything as per specs.
        */
@@ -634,7 +632,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
           deleteMessage,
           dismissOverlay,
           editMessage,
-          error: isErrorInMessage,
+          error: errorOrFailed,
           flagMessage,
           isMyMessage,
           isThreadMessage,

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';