fix: unmute actions

Author: isekovanic

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

@@ -12,7 +12,7 @@ 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 { Archive, IconProps, Mute, BlockUser, Delete, Sound } from '../../../icons';
 import { ArrowBoxLeft } from '../../../icons/ArrowBoxLeft';
 
 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/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/Message/hooks/useMessageActions.tsx

@@ -25,6 +25,7 @@ import {
   Mute,
   Pin,
   Resend,
+  Sound,
   ThreadReply,
   Unpin,
   UnreadIndicator,
@@ -338,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',
     };