@ethora/chat-component-rn 26.8.2 → 26.8.3

package/src/components/Modals/ChatProfileModal/ChatProfileModal.tsx

@@ -26,6 +26,8 @@ import { deleteRoom, updateRoom } from '../../../roomStore/roomsSlice';
 import Loader from '../../styled/Loader';
 import {
   AddNewIcon,
+  BellIcon,
+  BellOffIcon,
   DeleteIcon,
   EditIcon,
   LeaveIcon,
@@ -36,7 +38,9 @@ import { useChatSettingState } from '../../../hooks/useChatSettingState';
 import { chatTextStyle } from '../../../helpers/typography';
 import { getElementFont } from '../../../helpers/getElementFont';
 import { getIconColor } from '../../../helpers/getIconColor';
-import { deleteRoomMember } from '../../../networking/api-requests/rooms.api';
+import { useTheme } from '../../../hooks/useTheme';
+import type { ChatTheme } from '../../../theme/theme';
+import { deleteRoomMember, setRoomMuted } from '../../../networking/api-requests/rooms.api';
 import { RoomMember } from '../../../types/models/room.model';
 import { setActiveModal, setSelectedUser } from '../../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
@@ -96,6 +100,8 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
   const dispatch = useDispatch();
   const { client } = useXmppClient();
   const { user: stateUser, config } = useChatSettingState();
+  const theme = useTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
   const activeRoom = useSelector((state: RootState) => getActiveRoom(state));
   const fileToken = useFileToken();
 
@@ -355,8 +361,40 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
     return () => sub.remove();
   }, [isSearchOpen]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const muteInFlightRef = useRef(false);
+  const toggleMuted = async () => {
+    if (!activeRoom?.jid || !activeRoom?.name || muteInFlightRef.current) {return;}
+    const next = !activeRoom.muted;
+    muteInFlightRef.current = true;
+    dispatch(updateRoom({ jid: activeRoom.jid, updates: { muted: next } }));
+    try {
+      const confirmed = await setRoomMuted(activeRoom.name, next);
+      if (confirmed !== next) {
+        dispatch(updateRoom({ jid: activeRoom.jid, updates: { muted: confirmed } }));
+      }
+    } catch (error) {
+      dispatch(updateRoom({ jid: activeRoom.jid, updates: { muted: !next } }));
+      console.warn('[ethora-rn] mute toggle failed', error);
+      showToast({
+        id: Date.now().toString(),
+        title: 'Error',
+        message: t('toast.muteFailed'),
+        type: 'error',
+      });
+    } finally {
+      muteInFlightRef.current = false;
+    }
+  };
+
   const heroActions: HeroAction[] = useMemo(
     () => [
+      {
+        key: 'mute',
+        label: activeRoom?.muted ? t('action.muted') : t('action.unmuted'),
+        icon: (color: string) =>
+          activeRoom?.muted ? <BellOffIcon color={color} /> : <BellIcon color={color} />,
+        onPress: toggleMuted,
+      },
       {
         key: 'search',
         label: t('action.search'),
@@ -376,7 +414,7 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
         onPress: () => setIsReportOpen(true),
       },
     ],
-    [t, activeRoom?.jid] // eslint-disable-line react-hooks/exhaustive-deps
+    [t, activeRoom?.jid, activeRoom?.muted] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
   // "…" menu. Edit is the chat picture — the only chat detail this SDK can
@@ -388,7 +426,7 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
       items.push({
         key: 'edit',
         label: t('action.edit'),
-        icon: <EditIcon color="#141414" width={18} height={18} />,
+        icon: <EditIcon color={theme.text} width={18} height={18} />,
         onPress: onUpload,
       });
       if (hasIcon) {
@@ -406,14 +444,14 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
       items.push({
         key: 'search',
         label: t('action.search'),
-        icon: <SearchIcon color="#141414" width={18} height={18} />,
+        icon: <SearchIcon color={theme.text} width={18} height={18} />,
         onPress: openMemberSearch,
       });
     }
     items.push({
       key: 'report',
       label: t('action.report'),
-      icon: <ReportIcon color="#141414" width={18} height={18} />,
+      icon: <ReportIcon color={theme.text} width={18} height={18} />,
       onPress: () => setIsReportOpen(true),
     });
     if (canDeleteChat) {
@@ -426,7 +464,7 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
       });
     }
     return items;
-  }, [canEditIcon, canDeleteChat, hasIcon, isCollapsed, t]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [canEditIcon, canDeleteChat, hasIcon, isCollapsed, t, theme.text]); // eslint-disable-line react-hooks/exhaustive-deps
 
   if (!activeRoom) {
     return null;
@@ -547,7 +585,7 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
 
               {isSearchOpen && (
                 <View style={styles.searchRow}>
-                  <SearchIcon color="#8C8C8C" width={18} height={18} />
+                  <SearchIcon color={theme.textSecondary} width={18} height={18} />
                   <TextInput
                     testID="chat-profile-member-search"
                     ref={searchInputRef}
@@ -555,7 +593,7 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
                     value={memberQuery}
                     onChangeText={setMemberQuery}
                     placeholder={t('search.members')}
-                    placeholderTextColor="#8C8C8C"
+                    placeholderTextColor={theme.textMuted}
                     autoCorrect={false}
                     returnKeyType="search"
                   />
@@ -687,10 +725,10 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
+const createStyles = (theme: ChatTheme) => StyleSheet.create({
   screen: {
     position: 'relative',
-    backgroundColor: '#F2F3F5',
+    backgroundColor: theme.listBackground,
   },
   scroll: {
     width: '100%',
@@ -704,21 +742,21 @@ const styles = StyleSheet.create({
     gap: 12,
   },
   card: {
-    backgroundColor: '#FFFFFF',
+    backgroundColor: theme.surface,
     borderRadius: 14,
     padding: 16,
-    shadowColor: '#000',
+    shadowColor: theme.shadow,
     shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.05,
     shadowRadius: 4,
     elevation: 1,
   },
   cardLabel: {
-    color: '#8C8C8C',
+    color: theme.textSecondary,
     fontSize: 14,
   },
   cardValue: {
-    color: '#141414',
+    color: theme.text,
     fontSize: 16,
     marginTop: 4,
   },
@@ -729,12 +767,12 @@ const styles = StyleSheet.create({
     paddingBottom: 14,
     marginBottom: 10,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#EFEFF2',
+    borderBottomColor: theme.border,
   },
   addMembersLabel: {
     fontSize: 16,
     fontWeight: '500',
-    color: '#141414',
+    color: theme.text,
   },
   searchRow: {
     flexDirection: 'row',
@@ -744,24 +782,24 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
     height: 40,
     borderRadius: 12,
-    backgroundColor: '#F2F3F5',
+    backgroundColor: theme.surfaceSecondary,
   },
   searchInput: {
     flex: 1,
     fontSize: 15,
-    color: '#141414',
+    color: theme.text,
     padding: 0,
   },
   searchClose: {
     fontSize: 22,
     lineHeight: 24,
-    color: '#8C8C8C',
+    color: theme.textSecondary,
   },
   emptyMembers: {
     opacity: 0.6,
     textAlign: 'center',
     paddingVertical: 8,
-    color: '#141414',
+    color: theme.text,
   },
   memberRow: {
     flexDirection: 'row',
@@ -770,7 +808,7 @@ const styles = StyleSheet.create({
   },
   memberDivider: {
     borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: '#EFEFF2',
+    borderTopColor: theme.border,
   },
   memberMain: {
     flex: 1,
@@ -784,20 +822,20 @@ const styles = StyleSheet.create({
   memberName: {
     fontSize: 16,
     fontWeight: '600',
-    color: '#141414',
+    color: theme.text,
   },
   memberStatus: {
     fontSize: 13,
-    color: '#8C8C8C',
+    color: theme.textSecondary,
     marginTop: 2,
   },
   memberRole: {
     fontSize: 13,
-    color: '#8C8C8C',
+    color: theme.textSecondary,
     marginLeft: 8,
   },
   memberBanned: {
-    color: '#E53935',
+    color: theme.danger,
   },
   memberRemove: {
     marginLeft: 12,

package/src/components/Modals/ChatProfileModal/DeleteChatModal.tsx

@@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { getActiveRoom, RootState } from '../../../roomStore';
 import {
   CloseButton,
+  CloseButtonText,
   GroupContainer,
   ModalBackground,
   ModalContainer,
@@ -11,8 +12,8 @@ import {
 } from '../styledModalComponents';
 import { deleteRoom as deleteRoomApi } from '../../../networking/api-requests/rooms.api';
 import { deleteRoom as deleteRoomAction } from '../../../roomStore/roomsSlice';
-import { Text } from 'react-native';
 import { useToast } from '../../../context/ToastContext';
+import { useTheme } from '../../../hooks/useTheme';
 import { useT } from '../../../i18n/useT';
 
 interface DeleteChatModalProps {
@@ -26,6 +27,7 @@ const DeleteChatModal: React.FC<DeleteChatModalProps> = ({
 }) => {
   const dispatch = useDispatch();
   const { showToast } = useToast();
+  const theme = useTheme();
   const t = useT();
   const activeRoom = useSelector((state: RootState) => getActiveRoom(state));
 
@@ -59,7 +61,7 @@ const DeleteChatModal: React.FC<DeleteChatModalProps> = ({
       <ModalBackground>
         <ModalContainer>
           <CloseButton onPress={handleCloseModal}>
-            <Text style={{ fontSize: 24 }}>&times;</Text>
+            <CloseButtonText>&times;</CloseButtonText>
           </CloseButton>
           <ModalTitle>{t('modal.deleteChat.title')}</ModalTitle>
 
@@ -77,9 +79,9 @@ const DeleteChatModal: React.FC<DeleteChatModalProps> = ({
               style={{
                 width: '100%',
                 borderWidth: 1,
-                borderColor: 'red',
+                borderColor: theme.danger,
             }}
-              color="red"
+              color={theme.danger}
               unstyled
               variant="outlined"
             />

package/src/components/Modals/ChatProfileModal/ReportChatModal.tsx

@@ -1,6 +1,6 @@
 /** @format */
 
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import {
   ActivityIndicator,
   Modal,
@@ -17,6 +17,8 @@ import { useToast } from '../../../context/ToastContext';
 import { useT } from '../../../i18n/useT';
 import { getIconColor } from '../../../helpers/getIconColor';
 import { useChatSettingState } from '../../../hooks/useChatSettingState';
+import { useTheme } from '../../../hooks/useTheme';
+import type { ChatTheme } from '../../../theme/theme';
 
 /**
  * Category ids go to `POST /v1/chats/reports/{chatName}` as-is; the labels
@@ -50,6 +52,8 @@ const ReportChatModal: React.FC<ReportChatModalProps> = ({
   const [details, setDetails] = useState('');
   const [sending, setSending] = useState(false);
   const primary = getIconColor(config);
+  const theme = useTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
 
   const close = () => {
     setCategory(null);
@@ -130,7 +134,7 @@ const ReportChatModal: React.FC<ReportChatModalProps> = ({
               testID="report-details"
               style={styles.input}
               placeholder={t('modal.report.otherDetails')}
-              placeholderTextColor="#8C8C8C"
+              placeholderTextColor={theme.textMuted}
               value={details}
               onChangeText={setDetails}
               multiline
@@ -155,7 +159,7 @@ const ReportChatModal: React.FC<ReportChatModalProps> = ({
               onPress={submit}
             >
               {sending ? (
-                <ActivityIndicator color="#FFFFFF" />
+                <ActivityIndicator color={theme.textOnPrimary} />
               ) : (
                 <Text style={styles.submitLabel}>{t('action.send')}</Text>
               )}
@@ -167,10 +171,10 @@ const ReportChatModal: React.FC<ReportChatModalProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
+const createStyles = (theme: ChatTheme) => StyleSheet.create({
   backdrop: {
     flex: 1,
-    backgroundColor: 'rgba(15,15,20,0.45)',
+    backgroundColor: theme.overlay,
     alignItems: 'center',
     justifyContent: 'center',
     padding: 24,
@@ -178,13 +182,13 @@ const styles = StyleSheet.create({
   card: {
     width: '100%',
     borderRadius: 16,
-    backgroundColor: '#FFFFFF',
+    backgroundColor: theme.surface,
     padding: 20,
   },
   title: {
     fontSize: 18,
     fontWeight: '600',
-    color: '#141414',
+    color: theme.text,
     marginBottom: 16,
   },
   categories: {
@@ -197,21 +201,21 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     borderRadius: 20,
     borderWidth: 1,
-    borderColor: '#E4E4E9',
+    borderColor: theme.border,
   },
   categoryLabel: {
     fontSize: 14,
-    color: '#141414',
+    color: theme.text,
   },
   input: {
     marginTop: 16,
     minHeight: 80,
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: '#E4E4E9',
+    borderColor: theme.border,
     padding: 12,
     fontSize: 14,
-    color: '#141414',
+    color: theme.text,
     textAlignVertical: 'top',
   },
   buttons: {
@@ -227,17 +231,17 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   cancel: {
-    backgroundColor: '#F2F2F7',
+    backgroundColor: theme.surfaceSecondary,
   },
   cancelLabel: {
     fontSize: 16,
     fontWeight: '500',
-    color: '#141414',
+    color: theme.text,
   },
   submitLabel: {
     fontSize: 16,
     fontWeight: '600',
-    color: '#FFFFFF',
+    color: theme.textOnPrimary,
   },
 });
 

package/src/components/Modals/FilePreviewModal/FilePreviewModal.tsx

@@ -8,6 +8,7 @@ import {
 import { SaveIcon } from '../../../assets/icons';
 import ModalHeaderComponent from '../ModalHeaderComponent';
 import { useChatSettingState } from '../../../hooks/useChatSettingState';
+import { useTheme } from '../../../hooks/useTheme';
 import { chatTextStyle } from '../../../helpers/typography';
 import { useDispatch, useSelector } from 'react-redux';
 import Button from '../../styled/Button';
@@ -122,6 +123,10 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
   const dispatch = useDispatch();
   const { showToast } = useToast();
   const { config } = useChatSettingState();
+  const theme = useTheme();
+  // Info / audio cards: light keeps its warm tint (not in the palette),
+  // dark sits them on the secondary surface.
+  const cardBackground = theme.dark ? theme.surfaceSecondary : '#FFF8ED';
 
   // Cache the SAF directory the user granted so saving several documents
   // in a row doesn't re-prompt for a folder every time (Android only).
@@ -335,11 +340,11 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
               width: '100%',
               padding: 20,
               gap: 12,
-              backgroundColor: '#FFF8ED',
+              backgroundColor: cardBackground,
               borderRadius: 16,
             }}
           >
-            <Text style={{ fontSize: 16, fontWeight: '600' }}>
+            <Text style={{ fontSize: 16, fontWeight: '600', color: theme.text }}>
               Voice message
             </Text>
             <AudioMessage
@@ -372,11 +377,11 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
               width: '100%',
               padding: 20,
               gap: 12,
-              backgroundColor: '#FFF8ED',
+              backgroundColor: cardBackground,
               borderRadius: 16,
             }}
           >
-            <Text style={{ fontSize: 16, fontWeight: '600' }}>
+            <Text style={{ fontSize: 16, fontWeight: '600', color: theme.text }}>
               {displayFileName}
             </Text>
             <AudioMessage
@@ -409,19 +414,19 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
         return (
           <View
             style={{
-              backgroundColor: '#FFF8ED',
+              backgroundColor: cardBackground,
               borderRadius: 16,
               padding: 20,
               gap: 8,
             }}
           >
-            <Text style={{ fontSize: 16, fontWeight: '600' }}>
+            <Text style={{ fontSize: 16, fontWeight: '600', color: theme.text }}>
               {displayFileName}
             </Text>
-            <Text style={{ color: '#666' }}>
+            <Text style={{ color: theme.textSecondary }}>
               {activeFile.mimetype || 'unknown type'}
             </Text>
-            <Text style={{ marginTop: 8 }}>
+            <Text style={{ marginTop: 8, color: theme.text }}>
               This file format can't be previewed inline. Tap the save icon
               above to download it.
             </Text>
@@ -440,7 +445,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
         rightMenu={
           <>
             <Button onPress={saveClick}>
-              <SaveIcon />
+              <SaveIcon color={theme.textSecondary} />
             </Button>
           </>
         }

package/src/components/Modals/ModalHeaderComponent.tsx

@@ -10,6 +10,7 @@ import { Text, StyleProp, TextStyle } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { resolveHeaderHeight } from '../../helpers/headerLayout';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { useTheme } from '../../hooks/useTheme';
 
 interface ModalHeaderComponentProps {
   handleCloseModal?: any;
@@ -34,6 +35,7 @@ const ModalHeaderComponent: React.FC<ModalHeaderComponentProps> = ({
   // (notch / Dynamic Island / nothing).
   const insets = useSafeAreaInsets();
   const { config } = useChatSettingState();
+  const theme = useTheme();
   // Same band height as the in-chat header, sitting BELOW the status-bar
   // inset. Total = inset + band; paddingTop carries the inset and the band
   // is the content area (centered via HeaderContainer's align-items:center),
@@ -52,8 +54,13 @@ const ModalHeaderComponent: React.FC<ModalHeaderComponentProps> = ({
           leftMenu
         ) : (
           <>
-            <Button EndIcon={<BackIcon />} onPress={handleCloseModal} />
-            <Text style={titleStyle}>{headerTitle ?? 'Go back'}</Text>
+            <Button
+              EndIcon={<BackIcon color={theme.textSecondary} />}
+              onPress={handleCloseModal}
+            />
+            <Text style={[{ color: theme.text }, titleStyle]}>
+              {headerTitle ?? 'Go back'}
+            </Text>
           </>
         )}
       </HeaderLeft>

package/src/components/Modals/ModalWrapper/ModalWrapper.tsx

@@ -1,6 +1,7 @@
 import { FC, useRef, useState } from 'react';
 import {
   CloseButton,
+  CloseButtonText,
   GroupContainer,
   ModalBackground,
   ModalContainer,
@@ -9,9 +10,10 @@ import {
 } from '../styledModalComponents';
 import { TextareaInput } from '../../styled/StyledInputComponents/StyledInputComponents';
 import Button from '../../styled/Button';
-import { Modal, Text, TextInput, View, StyleSheet } from 'react-native';
+import { Modal, TextInput, View, StyleSheet } from 'react-native';
 import { useChatSettingState } from '../../../hooks/useChatSettingState';
 import { getIconColor } from '../../../helpers/getIconColor';
+import { useTheme } from '../../../hooks/useTheme';
 
 interface ModalWrapperProps {
   iconTitle?: any;
@@ -47,6 +49,7 @@ export const ModalWrapper: FC<ModalWrapperProps> = ({
 }) => {
   const textareaRef = useRef<TextInput>(null);
   const { config } = useChatSettingState();
+  const theme = useTheme();
 
   // const handleInput = () => {
   //   const textarea = textareaRef.current;
@@ -59,7 +62,7 @@ export const ModalWrapper: FC<ModalWrapperProps> = ({
   const inner = (
     <>
       <CloseButton onPress={handleCloseModal}>
-        <Text style={{ fontSize: 24 }}>&times;</Text>
+        <CloseButtonText>&times;</CloseButtonText>
       </CloseButton>
       {IconTitle ? <IconTitle /> : <ModalTitle>{title}</ModalTitle>}
       {description && <ModalDescription>{description}</ModalDescription>}
@@ -87,7 +90,7 @@ export const ModalWrapper: FC<ModalWrapperProps> = ({
             // White label on the filled (e.g. red Delete) button. Button
             // applies an inline `color: color || 'black'` that overrides
             // the filled-variant white, so pass it explicitly.
-            color="#FFFFFF"
+            color={theme.textOnPrimary}
             style={{
               width: '100%',
               backgroundColor: backgroundColorButton,
@@ -115,7 +118,14 @@ export const ModalWrapper: FC<ModalWrapperProps> = ({
           // their own bounded View instead — never full-screen (#14).
           // (Upstream also shrank this modal; this keeps that intent while
           // adding the white filled-button label via `inner` below.)
-          <View style={styles.compactDialog}>{inner}</View>
+          <View
+            style={[
+              styles.compactDialog,
+              { backgroundColor: theme.surface, shadowColor: theme.shadow },
+            ]}
+          >
+            {inner}
+          </View>
         ) : (
           <ModalContainer style={{ maxWidth: 640 }}>{inner}</ModalContainer>
         )}
@@ -129,11 +139,9 @@ const styles = StyleSheet.create({
     width: '85%',
     maxWidth: 360,
     alignSelf: 'center',
-    backgroundColor: '#fff',
     borderRadius: 16,
     padding: 24,
     gap: 16,
-    shadowColor: '#000',
     shadowOffset: { width: 0, height: 4 },
     shadowOpacity: 0.2,
     shadowRadius: 12,

package/src/components/Modals/NewChatModal/ModalContent.tsx

@@ -3,6 +3,7 @@ import { PickedImage } from '../../../helpers/pickImageAsset';
 import {
   ModalContainer,
   CloseButton,
+  CloseButtonText,
   ModalTitle,
   GroupContainer,
 } from '../styledModalComponents';
@@ -13,7 +14,6 @@ import UsersList from '../../UsersList/UsersList';
 import { ProfileImagePlaceholder } from '../../MainComponents/ProfileImagePlaceholder';
 import { ChatAccessOption } from '../../../types/types';
 import { AddPhotoIcon } from '../../../assets/icons';
-import { Text } from 'react-native';
 
 type ModalContentProps = {
   activeTab: '0' | '1' | null;
@@ -58,7 +58,7 @@ const ModalContent: React.FC<ModalContentProps> = ({
   return (
     <ModalContainer>
       <CloseButton onPress={handleCloseModal}>
-        <Text style={{ fontSize: 24 }}>&times;</Text>
+        <CloseButtonText>&times;</CloseButtonText>
       </CloseButton>
       {activeTab === '0' && (
         <>