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

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