@ethora/chat-component-rn 26.8.2 → 26.8.4

package/src/components/MessageBubble/MessageInteractions.tsx

@@ -19,6 +19,7 @@ import {
 import * as Clipboard from 'expo-clipboard';
 import { useToast } from '../../context/ToastContext';
 import { useInteractionsOverlay } from './InteractionsOverlay';
+import { useTheme } from '../../hooks/useTheme';
 
 interface MessageInteractionsProps {
   isReply?: boolean;
@@ -50,6 +51,14 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
   const { showToast } = useToast();
   const { present, dismiss, originX, originY } = useInteractionsOverlay();
   const overlayId = useId();
+  const theme = useTheme();
+  const themedStyles = useMemo(
+    () => ({
+      menu: { backgroundColor: theme.surface, shadowColor: theme.shadow },
+      text: { color: theme.text },
+    }),
+    [theme]
+  );
 
   const config = useSelector(
     (state: RootState) => state.chatSettingStore.config
@@ -180,11 +189,13 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
       <View style={styles.overlayFill}>
         <Pressable style={StyleSheet.absoluteFill} onPress={closeMenu} />
         <View
-          style={[styles.contextMenu, localPosition]}
+          style={[styles.contextMenu, themedStyles.menu, localPosition]}
           onLayout={handleMenuLayout}
         >
           <MenuItem onPress={() => handleCopyMessage(message.body!)}>
-            <Text style={styles.menuText}>{MESSAGE_INTERACTIONS.COPY}</Text>
+            <Text style={[styles.menuText, themedStyles.text]}>
+              {MESSAGE_INTERACTIONS.COPY}
+            </Text>
             <MESSAGE_INTERACTIONS_ICONS.COPY />
           </MenuItem>
           {isUser && (
@@ -195,7 +206,7 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
                 <>
                   <Delimeter />
                   <MenuItem onPress={handleEditMessage}>
-                    <Text style={styles.menuText}>
+                    <Text style={[styles.menuText, themedStyles.text]}>
                       {MESSAGE_INTERACTIONS.EDIT}
                     </Text>
                     <MESSAGE_INTERACTIONS_ICONS.EDIT />
@@ -204,7 +215,9 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
               )}
               <Delimeter />
               <MenuItem onPress={handleDeleteMessage}>
-                <Text style={styles.menuText}>{MESSAGE_INTERACTIONS.DELETE}</Text>
+                <Text style={[styles.menuText, themedStyles.text]}>
+                  {MESSAGE_INTERACTIONS.DELETE}
+                </Text>
                 <MESSAGE_INTERACTIONS_ICONS.DELETE />
               </MenuItem>
             </>

package/src/components/MessageBubble/MessageReaction.tsx

@@ -3,6 +3,7 @@ import React, { FC, useMemo, useState } from 'react';
 import { View, Text, TouchableOpacity, Animated } from 'react-native';
 import styled from 'styled-components/native';
 import { ReactionMessage } from '../../types/types';
+import { useTheme } from '../../hooks/useTheme';
 
 const ReactionContainer = styled.View`
   flex-direction: row;
@@ -13,7 +14,8 @@ const ReactionContainer = styled.View`
 const ReactionBox = styled(TouchableOpacity)<{ active: boolean; color: string }>`
   padding: 4px 8px;
   border-radius: 20px;
-  background-color: ${({ active, color }) => (active ? color : '#ffffff')};
+  background-color: ${({ active, color, theme }) =>
+    active ? color : theme.surface};
   flex-direction: row;
   align-items: center;
   justify-content: center;
@@ -42,6 +44,7 @@ export const MessageReaction: FC<MessageReactionProps> = ({
   changeReaction,
   userName,
 }) => {
+  const theme = useTheme();
   const [tooltipEmoji, setTooltipEmoji] = useState<string | null>(null);
   const fadeAnim = new Animated.Value(0);
 
@@ -104,7 +107,7 @@ export const MessageReaction: FC<MessageReactionProps> = ({
                 style={{
                   fontSize: 14,
                   fontWeight: '600',
-                  color: isUserReacted ? '#fff' : color,
+                  color: isUserReacted ? theme.textOnPrimary : color,
                 }}
               >
                 {details.count}
@@ -128,7 +131,9 @@ export const MessageReaction: FC<MessageReactionProps> = ({
                     },
                   ],
                   opacity: fadeAnim,
-                  backgroundColor: '#333',
+                  // Inverted pill: text colour as ground, surface as ink,
+                  // so it stays high-contrast on both palettes.
+                  backgroundColor: theme.text,
                   borderRadius: 6,
                   paddingHorizontal: 10,
                   paddingVertical: 6,
@@ -136,7 +141,7 @@ export const MessageReaction: FC<MessageReactionProps> = ({
                   zIndex: 999,
                 }}
               >
-                <Text style={{ color: '#fff', fontSize: 12 }}>
+                <Text style={{ color: theme.surface, fontSize: 12 }}>
                   {details.users.join(', ')}
                 </Text>
               </Animated.View>

package/src/components/Modals/AddMembersModal/AddMembersModal.tsx

@@ -6,6 +6,7 @@ import { useXmppClient } from '../../../context/xmppProvider';
 import {
   ActionButton,
   CloseButton,
+  CloseButtonText,
   GroupContainer,
   ModalBackground,
   ModalContainer,
@@ -20,7 +21,6 @@ import { addRoomViaApi } from '../../../roomStore/roomsSlice';
 import { createRoomFromApi } from '../../../helpers/createRoomFromApi';
 import { useChatSettingState } from '../../../hooks/useChatSettingState';
 import { useAppDispatch } from '../../../hooks/hooks';
-import { Text } from 'react-native';
 import { useToast } from '../../../context/ToastContext';
 
 const AddMembersModal: React.FC = () => {
@@ -97,7 +97,7 @@ const AddMembersModal: React.FC = () => {
         <ModalBackground>
           <ModalContainer>
             <CloseButton onPress={handleCloseModal}>
-              <Text style={{ fontSize: 24 }}>&times;</Text>
+              <CloseButtonText>&times;</CloseButtonText>
             </CloseButton>
             <ModalTitle>Add New Member</ModalTitle>
             <GroupContainer

package/src/components/Modals/AttachSheet/AttachSheet.tsx

@@ -17,6 +17,7 @@ import {
 } from 'react-native';
 import { CameraIcon, DocumentIcon } from '../../../assets/icons';
 import { useChatSettingState } from '../../../hooks/useChatSettingState';
+import { useTheme } from '../../../hooks/useTheme';
 import { chatTextStyle } from '../../../helpers/typography';
 import { useT } from '../../../i18n/useT';
 import { getMediaLibrary } from '../../../helpers/mediaLibraryRuntime';
@@ -100,10 +101,17 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
   onGallery,
   onDocument,
   onPickMedia,
-  primaryColor = '#0052CD',
+  primaryColor,
 }) => {
   const { config } = useChatSettingState();
+  const theme = useTheme();
   const ts = config?.typography?.attachSheet;
+  const accent = primaryColor || theme.primary;
+  // Sheet chrome tints. Light keeps the historical iOS-ish greys (not in
+  // the palette); dark reads everything off the theme.
+  const chromeText = theme.dark ? theme.text : '#1C1C1E';
+  const chromeMuted = theme.dark ? theme.textSecondary : '#8A8A8E';
+  const chromeHairline = theme.dark ? theme.divider : '#EFEFF2';
   const t = useT();
   const pendingRef = useRef<(() => void) | null>(null);
   const runPending = () => {
@@ -326,7 +334,13 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
       onDismiss={Platform.OS === 'ios' ? runPending : undefined}
     >
       <Animated.View
-        style={[styles.backdrop, { opacity: backdropOpacity }]}
+        style={[
+          styles.backdrop,
+          {
+            opacity: backdropOpacity,
+            backgroundColor: theme.dark ? theme.overlay : 'rgba(15,15,20,0.45)',
+          },
+        ]}
       >
         <TouchableOpacity
           testID="attach-backdrop"
@@ -337,7 +351,11 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
         <Animated.View
           style={[
             styles.sheet,
-            { transform: [{ translateY: sheetTranslateY }] },
+            {
+              backgroundColor: theme.surface,
+              shadowColor: theme.shadow,
+              transform: [{ translateY: sheetTranslateY }],
+            },
           ]}
           {...sheetPan.panHandlers}
         >
@@ -346,12 +364,23 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
             style={styles.grabberArea}
             {...grabberPan.panHandlers}
           >
-            <View style={styles.grabber} />
+            <View
+              style={[
+                styles.grabber,
+                { backgroundColor: theme.dark ? theme.border : '#D9D9DE' },
+              ]}
+            />
           </View>
 
           {/* Photos & Videos ------------------------------------------------ */}
           <View style={styles.sectionHeader}>
-            <Text style={[styles.sectionTitle, chatTextStyle(ts?.title)]}>
+            <Text
+              style={[
+                styles.sectionTitle,
+                { color: chromeText },
+                chatTextStyle(ts?.title),
+              ]}
+            >
               {t('attach.photosAndVideos')}
             </Text>
             <TouchableOpacity
@@ -363,7 +392,7 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
               <Text
                 style={[
                   styles.sectionAction,
-                  { color: primaryColor },
+                  { color: accent },
                   chatTextStyle(ts?.viewLibrary),
                 ]}
               >
@@ -384,15 +413,21 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
               accessibilityRole="button"
               accessibilityLabel={t('attach.takePhoto')}
               activeOpacity={0.7}
-              style={styles.cameraTile}
+              style={[
+                styles.cameraTile,
+                {
+                  borderColor: theme.dark ? theme.border : '#E4E4E9',
+                  backgroundColor: theme.dark ? theme.surfaceSecondary : '#FAFAFC',
+                },
+              ]}
               onPress={trigger(onCamera)}
             >
-              <CameraIcon color="#8A8A8E" width={26} height={26} />
+              <CameraIcon color={chromeMuted} width={26} height={26} />
             </TouchableOpacity>
 
             {loadingRecents && recents.length === 0 && (
               <View style={styles.loadingTile}>
-                <ActivityIndicator color="#8A8A8E" />
+                <ActivityIndicator color={chromeMuted} />
               </View>
             )}
 
@@ -401,7 +436,7 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
                 key={item.id}
                 testID={`attach-recent-${item.id}`}
                 activeOpacity={0.8}
-                style={styles.thumbWrap}
+                style={[styles.thumbWrap, { backgroundColor: chromeHairline }]}
                 onPress={handleRecentPress(item)}
               >
                 <Image
@@ -419,7 +454,9 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
             ))}
           </ScrollView>
 
-          <View style={styles.rowsDivider} />
+          <View
+            style={[styles.rowsDivider, { backgroundColor: chromeHairline }]}
+          />
           {rows.map(({ id, label, Icon, handler }) => (
             <TouchableOpacity
               key={id}
@@ -429,9 +466,15 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
               onPress={trigger(handler)}
             >
               <View style={styles.rowIcon}>
-                <Icon color="#1C1C1E" width={20} height={20} />
+                <Icon color={chromeText} width={20} height={20} />
               </View>
-              <Text style={[styles.rowLabel, chatTextStyle(ts?.rowLabel)]}>
+              <Text
+                style={[
+                  styles.rowLabel,
+                  { color: chromeText },
+                  chatTextStyle(ts?.rowLabel),
+                ]}
+              >
                 {label}
               </Text>
             </TouchableOpacity>
@@ -443,18 +486,16 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
 };
 
 const styles = StyleSheet.create({
+  // Colours live inline (theme-dependent); only layout stays here.
   backdrop: {
     flex: 1,
-    backgroundColor: 'rgba(15,15,20,0.45)',
     justifyContent: 'flex-end',
   },
   sheet: {
-    backgroundColor: '#fff',
     borderTopLeftRadius: 24,
     borderTopRightRadius: 24,
     paddingTop: 4,
     paddingBottom: Platform.OS === 'ios' ? 32 : 20,
-    shadowColor: '#000',
     shadowOffset: { width: 0, height: -2 },
     shadowOpacity: 0.08,
     shadowRadius: 12,
@@ -469,7 +510,6 @@ const styles = StyleSheet.create({
     width: 40,
     height: 4,
     borderRadius: 2,
-    backgroundColor: '#D9D9DE',
   },
   sectionHeader: {
     flexDirection: 'row',
@@ -481,7 +521,6 @@ const styles = StyleSheet.create({
   sectionTitle: {
     fontSize: 17,
     fontWeight: '700',
-    color: '#1C1C1E',
   },
   sectionAction: {
     fontSize: 15,
@@ -497,8 +536,6 @@ const styles = StyleSheet.create({
     height: THUMB_SIZE,
     borderRadius: 16,
     borderWidth: 1,
-    borderColor: '#E4E4E9',
-    backgroundColor: '#FAFAFC',
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -513,7 +550,6 @@ const styles = StyleSheet.create({
     height: THUMB_SIZE,
     borderRadius: 16,
     overflow: 'hidden',
-    backgroundColor: '#EFEFF2',
   },
   thumb: {
     width: '100%',
@@ -521,7 +557,6 @@ const styles = StyleSheet.create({
   },
   rowsDivider: {
     height: StyleSheet.hairlineWidth,
-    backgroundColor: '#EFEFF2',
   },
   row: {
     flexDirection: 'row',
@@ -537,7 +572,6 @@ const styles = StyleSheet.create({
   rowLabel: {
     fontSize: 16,
     fontWeight: '500',
-    color: '#1C1C1E',
   },
 });
 

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"
             />