@ethora/chat-component-rn 26.8.1 → 26.8.3

package/src/components/Modals/UserSettingsModal/UserSettingsModal.tsx

@@ -1,18 +1,18 @@
-import React, { useCallback, useMemo } from 'react';
+/** @format */
 
-import {
-  ModalContainerFullScreen,
-  Viewider,
-  Label,
-  LabelData,
-  BorderedContainer,
-  CenterContainer,
-} from '../styledModalComponents';
-import ModalHeaderComponent from '../ModalHeaderComponent';
-import Button from '../../styled/Button';
+import React, { useCallback, useMemo } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { useDispatch } from 'react-redux';
+import { ModalContainerFullScreen } from '../styledModalComponents';
+import ModalHeaderComponent from '../ModalHeaderComponent';
+import { ArowDownIcon } from '../../../assets/icons';
 import { setActiveModal } from '../../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
+import { useChatSettingState } from '../../../hooks/useChatSettingState';
+import { chatTextStyle } from '../../../helpers/typography';
+import { useT } from '../../../i18n/useT';
+import { useTheme } from '../../../hooks/useTheme';
+import type { ChatTheme } from '../../../theme/theme';
 
 interface UserSettingsModalProps {
   handleCloseModal: any;
@@ -21,65 +21,91 @@ interface UserSettingsModalProps {
 const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
   handleCloseModal,
 }) => {
+  const t = useT();
+  const dispatch = useDispatch();
+  const { config } = useChatSettingState();
+  const theme = useTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+
   const options = useMemo(
     () => [
-      { value: 'Manage Data', key: MODAL_TYPES.MANAGE_DATA },
-      { value: 'Visiblility', key: MODAL_TYPES.VISIBILITY },
-      // { value: 'Profile Shares', key: MODAL_TYPES.PROFILE_SHARES },
-      // { value: 'Document Shares', key: MODAL_TYPES.DOCUMENT_SHARES },
-      // { value: 'Blocked Users', key: MODAL_TYPES.BLOCKED_USERS },
-      // { value: 'Referrals', key: MODAL_TYPES.REFERRALS },
+      { label: t('settings.manageData.title'), key: MODAL_TYPES.MANAGE_DATA },
+      { label: t('settings.visibility.title'), key: MODAL_TYPES.VISIBILITY },
     ],
-    []
+    [t]
   );
 
-  const dispatch = useDispatch();
-
-  const handleClick = useCallback((key: string) => {
-    dispatch(setActiveModal(key as any));
-  }, []);
+  const handleClick = useCallback(
+    (key: string) => {
+      dispatch(setActiveModal(key as any));
+    },
+    [dispatch]
+  );
 
   return (
-    <ModalContainerFullScreen>
+    <ModalContainerFullScreen style={styles.screen}>
       <ModalHeaderComponent
         handleCloseModal={handleCloseModal}
-        headerTitle={'Settings'}
+        headerTitle={t('settings.menu.title')}
+        titleStyle={chatTextStyle(config?.typography?.profile?.screenTitle)}
       />
-      <CenterContainer>
-        <BorderedContainer
-          style={{
-            padding: 16,
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 8,
-          }}
-        >
-          {options.map((option: { value: string; key: string }, index) => (
-            <>
-              <Button
-                variant="default"
-                style={{
-                  minHeight: 40,
-                  display: 'flex',
-                  flexDirection: 'column',
-                  gap: 2,
-                  width: '100%',
-                  justifyContent: 'center',
-                  borderRadius: 0,
-                  alignItems: 'flex-start',
-                }}
-                onPress={() => handleClick(option.key)}
-              >
-                <Label style={{ textAlign: 'center' }}>{option.value}</Label>
-                {[2, 3, 4].includes(index) && <LabelData>0</LabelData>}
-              </Button>
-              {index < 5 && <Viewider />}
-            </>
-          ))}
-        </BorderedContainer>
-      </CenterContainer>
+      {/* One card per entry, rather than a single bordered block with
+        * hairline dividers — the rows are separate destinations, and the
+        * design gives each its own surface. */}
+      <View style={styles.body}>
+        {options.map((option) => (
+          <TouchableOpacity
+            key={option.key}
+            testID={`settings-row-${option.key}`}
+            activeOpacity={0.7}
+            style={styles.card}
+            onPress={() => handleClick(option.key)}
+          >
+            <Text style={styles.label}>{option.label}</Text>
+            <ArowDownIcon
+              color={theme.textSecondary}
+              width={20}
+              height={20}
+              style={styles.chevron}
+            />
+          </TouchableOpacity>
+        ))}
+      </View>
     </ModalContainerFullScreen>
   );
 };
 
+const createStyles = (theme: ChatTheme) => StyleSheet.create({
+  screen: {
+    backgroundColor: theme.listBackground,
+  },
+  body: {
+    width: '100%',
+    padding: 12,
+    gap: 12,
+  },
+  card: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: theme.surface,
+    borderRadius: 20,
+    paddingHorizontal: 20,
+    paddingVertical: 22,
+    shadowColor: theme.shadow,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.06,
+    shadowRadius: 12,
+    elevation: 3,
+  },
+  label: {
+    fontSize: 17,
+    fontWeight: '500',
+    color: theme.text,
+  },
+  chevron: {
+    transform: [{ rotate: '-90deg' }],
+  },
+});
+
 export default UserSettingsModal;

package/src/components/Modals/styledModalComponents.tsx

@@ -6,7 +6,7 @@ import Button from '../styled/Button';
 export const ModalBackground = styled.View`
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.5);
+  background: ${({ theme }) => theme.overlay};
   flex: 1;
   justify-content: center;
   align-items: center;
@@ -20,14 +20,20 @@ export const CloseButton = styled.TouchableOpacity`
   border: none;
   font-size: 20px;
   cursor: pointer;
-  color: #888;
+  color: ${({ theme }) => theme.textMuted};
+`;
+
+/** The "×" glyph inside CloseButton — themed so it reads on dark surfaces. */
+export const CloseButtonText = styled.Text`
+  font-size: 24px;
+  color: ${({ theme }) => theme.text};
 `;
 
 export const ModalContainer = styled.View`
   // flex: 1;
   // width: 100%;
   // height: 100%;
-  background: white;
+  background: ${({ theme }) => theme.surface};
   padding: 32px 64px;
   box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
   display: flex;
@@ -39,12 +45,14 @@ export const ModalContainer = styled.View`
 `;
 
 export const ModalTitle = styled.Text`
+  color: ${({ theme }) => theme.text};
   font-size: 20px;
   margin: 0;
   font-weight: 400;
 `;
 
 export const ModalDescription = styled.Text`
+  color: ${({ theme }) => theme.text};
   font-size: 14px;
   margin: 0;
   font-weight: 400;
@@ -60,7 +68,7 @@ export const GroupContainer = styled.View`
 export const ModalContainerFullScreen = styled.View`
   width: 100%;
   height: 100%;
-  background-color: #fff;
+  background-color: ${({ theme }) => theme.surface};
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -85,9 +93,16 @@ export const HeaderContainer = styled.View`
    * 20px on an SE). Together that's status-bar + 8px above the back
    * button and 8px below — properly sized and properly centered. */
   padding: 8px 16px;
-  background-color: #fff;
-  border-bottom-width: 1px;
-  border-bottom-color: #f0f0f0;
+  background-color: ${({ theme }) => theme.surface};
+  /* Same card treatment as the room-list header: rounded bottom corners
+   * and a soft drop shadow instead of a hairline rule. */
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+  shadow-color: ${({ theme }) => theme.shadow};
+  shadow-offset: 0px 4px;
+  shadow-opacity: 0.06;
+  shadow-radius: 12px;
+  elevation: 4;
   z-index: 1;
   flex-direction: row;
   justify-content: space-between;
@@ -117,7 +132,7 @@ export const ProfileImage = styled.View`
   width: 120px;
   height: 120px;
   border-radius: 10000px;
-  border: 1px solid #f0f0f0;
+  border: 1px solid ${({ theme }) => theme.border};
 `;
 
 export const UserInfo = styled.View`
@@ -132,13 +147,13 @@ export const UserName = styled.Text<{
   fontSize?: number;
   fontWeight?: string;
 }>`
-  color: #141414;
+  color: ${({ theme }) => theme.text};
   font-size: ${({ fontSize }) => fontSize ?? 24}px;
   font-weight: ${({ fontWeight }) => fontWeight ?? 400};
 `;
 
 export const UserStatus = styled.Text`
-  color: #8c8c8c;
+  color: ${({ theme }) => theme.textSecondary};
   font-size: 16px;
   font-weight: 400;
 `;
@@ -146,20 +161,20 @@ export const UserStatus = styled.Text`
 export const BorderedContainer = styled.View`
   width: 100%;
   border-radius: 8px;
-  border: 1px solid #f0f0f0;
+  border: 1px solid ${({ theme }) => theme.border};
   display: flex;
   flex-direction: column;
   padding: 16px;
 `;
 
 export const LabelData = styled.Text`
-  color: #8c8c8c;
+  color: ${({ theme }) => theme.textSecondary};
   font-size: 14px;
   font-weight: 400;
 `;
 
 export const Label = styled.Text`
-  color: #141414;
+  color: ${({ theme }) => theme.text};
   font-size: 16px;
 `;
 
@@ -169,7 +184,7 @@ export const ActionButton = styled(Button)`
 
 export const EmptySection = styled.View`
   height: 200px;
-  border: 1px solid #f0f0f0;
+  border: 1px solid ${({ theme }) => theme.border};
   border-radius: 8px;
   width: 100%;
   display: flex;
@@ -178,11 +193,11 @@ export const EmptySection = styled.View`
 export const Viewider = styled.View`
   height: 1px;
   width: 100%;
-  background-color: #0052cd0d;
+  background-color: ${({ theme }) => theme.surfaceHighlight};
 `;
 
 export const Divider = styled.View`
   height: 1px;
   width: 100%;
-  background-color: #0052cd0d;
+  background-color: ${({ theme }) => theme.surfaceHighlight};
 `;

package/src/components/RoomComponents/ChatRoomItem.tsx

@@ -2,6 +2,8 @@ import React, { useCallback, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../roomStore';
 import { IMessage } from '../../types/types';
+import { useFileToken } from '../../hooks/useFileToken';
+import { appendFileToken } from '../../helpers/secureFileUrl';
 import { IConfig, IRoom } from '../../types/types';
 import { ProfileImagePlaceholder } from '../MainComponents/ProfileImagePlaceholder';
 import {
@@ -15,6 +17,8 @@ import Composing from '../styled/StyledInputComponents/Composing';
 import { Text, View } from 'react-native';
 import LastMessageItem from './LastMessageItem';
 import { LastRoomMessageText } from './styled/StyledRoomComponents';
+import { useTheme } from '../../hooks/useTheme';
+import { resolveTheme } from '../../theme/theme';
 
 interface ChatRoomItemProps {
   chat: IRoom;
@@ -29,6 +33,15 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
   isDriver,
   config,
 }) => {
+  // Rows can be rendered with an explicit `config` prop (tests, hosts
+  // composing their own list); honour its colours over the store's.
+  const storeTheme = useTheme();
+  const theme = useMemo(
+    () => (config ? resolveTheme(config) : storeTheme),
+    [config, storeTheme]
+  );
+  // Room icons can live on the membership-gated secure-files host.
+  const fileToken = useFileToken();
   const displayName = String(chat?.title || chat?.name || '').trim();
 
   // usersSet is the canonical name store — the same one Message.tsx
@@ -130,7 +143,13 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
 
   return (
     <ChatItem key={index}>
-      <ProfileImagePlaceholder name={displayName} icon={chat?.icon} active={false} />
+      <View pointerEvents="none">
+        <ProfileImagePlaceholder
+          name={displayName}
+          icon={appendFileToken(chat?.icon, fileToken)}
+          active={false}
+        />
+      </View>
       <View
         style={{
           flexDirection: 'column',
@@ -140,7 +159,9 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
           paddingVertical: 8,
           paddingRight: 8,
           borderBottomWidth: 1,
-          borderBottomColor: '#F0F0F0',
+          // `divider` reads against the list ground; the lighter border
+          // tone was paler than the ground itself, so the separators vanished.
+          borderBottomColor: theme.divider,
         }}
       >
         <View
@@ -155,7 +176,7 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
           {stamp ? (
             <UserCount
               style={{
-                color: '#8C8C8C',
+                color: theme.textSecondary,
                 fontSize: 12,
               }}
               text={stamp}
@@ -227,7 +248,7 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
             <View
               style={{
                 borderRadius: 8,
-                backgroundColor: config?.colors?.primary,
+                backgroundColor: theme.primary,
                 padding: 2,
                 minWidth: 24,
                 minHeight: 24,
@@ -240,7 +261,7 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
               <Text
                 style={{
                   // color: isChatActive ? "#141414" : "#fff",
-                  color: '#141414',
+                  color: theme.text,
                   fontSize: 14,
                   fontWeight: '600',
                 }}
@@ -251,8 +272,11 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
           ) : null}
         </View>
         {isDriver && (
+          // Darker than the list's own ground, otherwise the separator
+          // disappears into it — white and the old highlight hairline both
+          // did.
           <View
-            style={{ height: 1, backgroundColor: '#0052CD0D', marginTop: 8 }}
+            style={{ height: 1, backgroundColor: theme.divider, marginTop: 8 }}
           />
         )}
       </View>

package/src/components/RoomComponents/styled/LastAudioMessage.tsx

@@ -8,6 +8,7 @@ import { LastMessage } from '../../../types/types';
 import styled from 'styled-components/native';
 import { View } from 'react-native';
 import { PlayIcon } from '../../../assets/icons';
+import { useTheme } from '../../../hooks/useTheme';
 
 interface LastMessageEmojiProps extends Pick<LastMessage, 'user' | 'body'> {}
 
@@ -18,7 +19,7 @@ const PlayButton = styled.View`
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #d8ecff;
+  background-color: ${({ theme }) => (theme.dark ? theme.surfaceSecondary : '#d8ecff')};
   margin-top: 1px;
 `;
 
@@ -29,12 +30,13 @@ const AudioRow = styled.View`
 `;
 
 const LastAudioMessage: FC<LastMessageEmojiProps> = ({ user, body }) => {
+  const theme = useTheme();
   return (
     <LastRoomMessageContainer>
       <LastRoomMessageName numberOfLines={1}>{user?.name ?? ''}</LastRoomMessageName>
       <AudioRow>
         <PlayButton>
-          <PlayIcon width={10} height={10} color="#1F2937" />
+          <PlayIcon width={10} height={10} color={theme.dark ? theme.text : '#1F2937'} />
         </PlayButton>
         <LastRoomMessageText numberOfLines={1}>
           {body?.trim() ? body : 'audio'}

package/src/components/RoomComponents/styled/LastMessageFile.tsx

@@ -8,9 +8,19 @@ import {
 } from './StyledRoomComponents';
 import { FileIcon } from '../../../assets/icons';
 import { Image, View } from 'react-native';
+import { useFileToken } from '../../../hooks/useFileToken';
+import {
+  appendFileToken,
+  isSecureFileUrl,
+  requestFileTokenRecovery,
+} from '../../../helpers/secureFileUrl';
+import { getDisplayFileName } from '../../../helpers/getDisplayFileName';
 
 interface LastMessageFileProps
-  extends Pick<LastMessage, 'user' | 'originalName' | 'locationPreview'> {}
+  extends Pick<
+    LastMessage,
+    'user' | 'originalName' | 'fileName' | 'mimetype' | 'locationPreview'
+  > {}
 
 const fallbackImage =
   'https://as2.ftcdn.net/v2/jpg/02/51/95/53/1000_F_251955356_FAQH0U1y1TZw3ZcdPGybwUkH90a3VAhb.jpg';
@@ -18,9 +28,18 @@ const fallbackImage =
 const LastMessageFile: FC<LastMessageFileProps> = ({
   user,
   originalName,
+  fileName,
+  mimetype,
   locationPreview,
 }) => {
   const [imgSrc, setImgSrc] = useState(locationPreview);
+  const fileToken = useFileToken();
+  // Bug #40: prefer the sender's original name over the stored hash
+  // name; only fall back to the generic "file" label when neither is
+  // present at all (avoids a synthetic "media_<timestamp>.bin" here).
+  const displayName = originalName || fileName
+    ? getDisplayFileName({ originalName, fileName, mimetype })
+    : 'file';
 
   return (
     <LastRoomMessageContainer>
@@ -34,18 +53,23 @@ const LastMessageFile: FC<LastMessageFileProps> = ({
       >
         {imgSrc ? (
           <Image
-            source={{ uri: imgSrc }}
+            source={{ uri: appendFileToken(imgSrc, fileToken) }}
             style={{
               borderRadius: 16,
               width: 20,
               height: 20,
             }}
-            onError={() => setImgSrc(fallbackImage)}
+            onError={() => {
+              if (isSecureFileUrl(imgSrc)) {
+                requestFileTokenRecovery();
+              }
+              setImgSrc(fallbackImage);
+            }}
           />
         ) : (
           <FileIcon style={{ width: '20px', height: '20px' }} />
         )}
-        <LastRoomMessageText>{originalName || 'file'}</LastRoomMessageText>
+        <LastRoomMessageText>{displayName}</LastRoomMessageText>
       </View>
     </LastRoomMessageContainer>
   );

package/src/components/RoomComponents/styled/LastMessagePhoto.tsx

@@ -1,4 +1,6 @@
 import React, { FC } from 'react';
+import { useFileToken } from '../../../hooks/useFileToken';
+import { appendFileToken } from '../../../helpers/secureFileUrl';
 import styled from 'styled-components/native';
 import { LastMessage } from '../../../types/types';
 import {
@@ -9,6 +11,7 @@ import {
   ShadeWrapper,
 } from './StyledRoomComponents';
 import { View } from 'react-native';
+import { getDisplayFileName } from '../../../helpers/getDisplayFileName';
 
 const PhotoContainer = styled.View`
   position: relative;
@@ -23,13 +26,25 @@ const PhotoContainer = styled.View`
 `;
 
 interface LastMessagePhotoProps
-  extends Pick<LastMessage, 'user' | 'originalName' | 'locationPreview'> {}
+  extends Pick<
+    LastMessage,
+    'user' | 'originalName' | 'fileName' | 'mimetype' | 'locationPreview'
+  > {}
 
 const LastMessagePhoto: FC<LastMessagePhotoProps> = ({
   user,
   locationPreview,
   originalName,
+  fileName,
+  mimetype,
 }) => {
+  const fileToken = useFileToken();
+  // Bug #40: prefer the sender's original name over the stored hash
+  // name; only fall back to the generic "file" label when neither is
+  // present at all (avoids a synthetic "media_<timestamp>.bin" here).
+  const displayName = originalName || fileName
+    ? getDisplayFileName({ originalName, fileName, mimetype })
+    : 'file';
   return (
     <LastRoomMessageContainer>
       <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
@@ -42,10 +57,10 @@ const LastMessagePhoto: FC<LastMessagePhotoProps> = ({
       >
         <PhotoContainer>
           <ShadeWrapper>
-            <LastMessageImg src={locationPreview} />
+            <LastMessageImg src={appendFileToken(locationPreview, fileToken)} />
           </ShadeWrapper>
         </PhotoContainer>
-        <LastRoomMessageText>{originalName || 'file'}</LastRoomMessageText>
+        <LastRoomMessageText>{displayName}</LastRoomMessageText>
       </View>
     </LastRoomMessageContainer>
   );

package/src/components/RoomComponents/styled/LastMessageVideo.tsx

@@ -1,4 +1,6 @@
 import React, { FC } from 'react';
+import { useFileToken } from '../../../hooks/useFileToken';
+import { appendFileToken } from '../../../helpers/secureFileUrl';
 import styled from 'styled-components/native';
 import { LastMessage } from '../../../types/types';
 import {
@@ -8,6 +10,7 @@ import {
   ShadeWrapper,
 } from './StyledRoomComponents';
 import { Text, View } from 'react-native';
+import { getDisplayFileName } from '../../../helpers/getDisplayFileName';
 
 const VideoContainer = styled.View`
   position: relative;
@@ -38,13 +41,25 @@ const PlayButton = styled.View`
 `;
 
 interface LastMessageVideoProps
-  extends Pick<LastMessage, 'user' | 'location' | 'originalName'> {}
+  extends Pick<
+    LastMessage,
+    'user' | 'location' | 'originalName' | 'fileName' | 'mimetype'
+  > {}
 
 const LastMessageVideo: FC<LastMessageVideoProps> = ({
   user,
   location,
   originalName,
+  fileName,
+  mimetype,
 }) => {
+  const fileToken = useFileToken();
+  // Bug #40: prefer the sender's original name over the stored hash
+  // name; only fall back to the generic "file" label when neither is
+  // present at all (avoids a synthetic "media_<timestamp>.bin" here).
+  const displayName = originalName || fileName
+    ? getDisplayFileName({ originalName, fileName, mimetype })
+    : 'file';
   return (
     <LastRoomMessageContainer>
       <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
@@ -57,11 +72,11 @@ const LastMessageVideo: FC<LastMessageVideoProps> = ({
       >
         <VideoContainer>
           <ShadeWrapper>
-            <Thumbnail src={location} />
+            <Thumbnail src={appendFileToken(location, fileToken)} />
           </ShadeWrapper>
           <PlayButton><Text>▶</Text></PlayButton>
         </VideoContainer>
-        <LastRoomMessageText>{originalName || 'file'}</LastRoomMessageText>
+        <LastRoomMessageText>{displayName}</LastRoomMessageText>
       </View>
     </LastRoomMessageContainer>
   );

package/src/components/RoomComponents/styled/StyledRoomComponents.ts

@@ -12,9 +12,11 @@ export const LastRoomMessageContainer = styled.View`
 export const LastRoomMessageName = styled.Text`
   font-weight: 600;
   max-width: 190px;
+  color: ${({ theme }) => theme.text};
 `;
 
 export const LastRoomMessageText = styled.Text`
+  color: ${({ theme }) => theme.textSecondary};
   max-width: 190px;
   flex-shrink: 1;
   flex-wrap: nowrap;

package/src/components/Thread/ThreadWrapper.tsx

@@ -22,6 +22,7 @@ import { useSendMessage } from '../../hooks/useSendMessage';
 import { createMainMessageForThread } from '../../helpers/createMainMessageForThread';
 import { useRoomState } from '../../hooks/useRoomState';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { useTheme } from '../../hooks/useTheme';
 import {
   Animated,
   Text,
@@ -51,6 +52,7 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
 
   const { loading, roomsList, editAction, activeRoomJID } = useRoomState();
   const { config } = useChatSettingState();
+  const theme = useTheme();
   const { sendMessage: sendMs, sendMedia: sendMessageMedia, sendEditMessage, isLastMessageFromUserAndProcessing } = useSendMessage();
 
   const [isLoadingMore, setIsLoadingMore] = useState<boolean>(false);
@@ -179,6 +181,7 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
       {...panResponder.panHandlers}
       style={[
         styles.threadContainer,
+        { backgroundColor: theme.chatBackground },
         { transform: [{ translateX: slideAnim }] },
         // ...config?.chatRoomStyles,
       ]}
@@ -199,17 +202,15 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
       />
       <AlsoContainer onPress={() => setIsChecked((prev) => !prev)}>
         <AlsoCheckbox
-          accentColor={
-            isChecked ? config?.colors?.primary || '#0052CD' : '#fff'
-          }
+          accentColor={isChecked ? theme.primary : theme.surface}
           // checked={isChecked}
           // onPress={() => setIsChecked(!isChecked)}
         />
-        <Text>Also send to</Text>
+        <Text style={{ color: theme.text }}>Also send to</Text>
         <TouchableOpacity onPress={closeThread}>
           <Text
             style={{
-              color: config?.colors?.primary || '#0052CD',
+              color: theme.primary,
               fontWeight: 500,
             }}
           >