@ethora/chat-component-rn 26.8.2 → 26.8.3

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,12 +93,12 @@ 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;
+  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: #101828;
+  shadow-color: ${({ theme }) => theme.shadow};
   shadow-offset: 0px 4px;
   shadow-opacity: 0.06;
   shadow-radius: 12px;
@@ -124,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`
@@ -139,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;
 `;
@@ -153,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;
 `;
 
@@ -176,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;
@@ -185,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

@@ -17,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;
@@ -31,6 +33,13 @@ 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();
@@ -150,9 +159,9 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
           paddingVertical: 8,
           paddingRight: 8,
           borderBottomWidth: 1,
-          // Reads against the list's #E8EDF2 ground; #F0F0F0 was lighter
-          // than the ground itself, so the row separators vanished.
-          borderBottomColor: '#C6CFDA',
+          // `divider` reads against the list ground; the lighter border
+          // tone was paler than the ground itself, so the separators vanished.
+          borderBottomColor: theme.divider,
         }}
       >
         <View
@@ -167,7 +176,7 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
           {stamp ? (
             <UserCount
               style={{
-                color: '#8C8C8C',
+                color: theme.textSecondary,
                 fontSize: 12,
               }}
               text={stamp}
@@ -239,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,
@@ -252,7 +261,7 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
               <Text
                 style={{
                   // color: isChatActive ? "#141414" : "#fff",
-                  color: '#141414',
+                  color: theme.text,
                   fontSize: 14,
                   fontWeight: '600',
                 }}
@@ -263,11 +272,11 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
           ) : null}
         </View>
         {isDriver && (
-          // Darker than the list's own ground (#E8EDF2), otherwise the
-          // separator disappears into it — white and the old #0052CD0D
-          // hairline both did.
+          // 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: '#C6CFDA', 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/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,
             }}
           >

package/src/components/Toast/Toast.tsx

@@ -32,7 +32,7 @@ const ToastContainer = styled(Animated.View)<{ type: string }>`
   border-radius: 6px;
   margin-bottom: 8px;
   width: 240px;
-  shadow-color: #000;
+  shadow-color: ${({ theme }) => theme.shadow};
   shadow-offset: 0px 2px;
   shadow-opacity: 0.2;
   shadow-radius: 4px;

package/src/components/styled/AudioMessage.tsx

@@ -17,7 +17,7 @@ import {
 import * as FileSystem from 'expo-file-system/legacy';
 import { WebView, WebViewMessageEvent } from 'react-native-webview';
 import { PauseIcon, PlayIcon } from '../../assets/icons';
-import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { useTheme } from '../../hooks/useTheme';
 import { getIosAudioPlaybackCacheExtension } from '../../helpers/mimeToExtension';
 import { pushLog as devPushLog } from '../../utils/devLogger';
 
@@ -319,7 +319,7 @@ const AudioMessage = ({
   fileName,
   originalName,
 }: AudioMessageProps) => {
-  const { config } = useChatSettingState();
+  const theme = useTheme();
   const soundRef = useRef<AudioPlayer | null>(null);
   // expo-audio delivers progress through an event subscription instead of
   // expo-av's `onPlaybackStatusUpdate` callback argument, so the handle has
@@ -339,7 +339,10 @@ const AudioMessage = ({
   const [position, setPosition] = useState(0);
   const [duration, setDuration] = useState(0);
   const [webViewEnabled, setWebViewEnabled] = useState(false);
-  const primaryColor = config?.colors?.primary || '#0A84FF';
+  const primaryColor = theme.primary;
+  const onPrimary = theme.textOnPrimary;
+  const trackStyle = { backgroundColor: theme.border };
+  const timeStyle = { color: theme.textSecondary };
 
   const clearLoadingGuard = () => {
     if (loadingTimerRef.current) {
@@ -760,19 +763,19 @@ const AudioMessage = ({
           activeOpacity={0.85}
         >
           {isLoading ? (
-            <ActivityIndicator size="small" color="#fff" />
+            <ActivityIndicator size="small" color={onPrimary} />
           ) : (
             <View style={styles.iconWrap}>
               {isPlaying ? (
-                <PauseIcon width={18} height={18} color="#fff" />
+                <PauseIcon width={18} height={18} color={onPrimary} />
               ) : (
-                <PlayIcon width={18} height={18} color="#fff" />
+                <PlayIcon width={18} height={18} color={onPrimary} />
               )}
             </View>
           )}
         </TouchableOpacity>
         <View style={styles.progressContainer}>
-          <View style={styles.progressTrack}>
+          <View style={[styles.progressTrack, trackStyle]}>
             <View
               style={[
                 styles.progressFill,
@@ -781,12 +784,12 @@ const AudioMessage = ({
             />
           </View>
           <View style={styles.progressRow}>
-            <Text style={styles.time}>
+            <Text style={[styles.time, timeStyle]}>
               {playbackError ? 'Audio unavailable' : formatTime(position)}
             </Text>
             {/* Always render the right slot (empty until known) so the row
                 never reflows when the duration appears after decoding. */}
-            <Text style={styles.time}>
+            <Text style={[styles.time, timeStyle]}>
               {!playbackError && duration > 0 ? formatTime(duration) : ''}
             </Text>
           </View>

package/src/components/styled/Button.tsx

@@ -1,5 +1,5 @@
-import React, { ReactElement, ReactNode } from 'react';
-import styled from 'styled-components/native';
+import React, { ReactElement, ReactNode, useContext } from 'react';
+import styled, { ThemeContext } from 'styled-components/native';
 import {
   TouchableOpacity,
   View,
@@ -20,10 +20,10 @@ const CustomButton = styled(TouchableOpacity)<{
   variant?: 'default' | 'filled' | 'outlined';
 }>`
   border-width: ${({ variant }) => (variant === 'outlined' ? 1 : 0)}px;
-  border-color: ${({ borderColor }) => borderColor || '#0052CD'};
+  border-color: ${({ borderColor, theme }) => borderColor || theme.primary};
   border-radius: 20px;
-  background-color: ${({ variant, backgroundColor }) =>
-    variant === 'filled' ? backgroundColor || '#0052CD' : 'transparent'};
+  background-color: ${({ variant, backgroundColor, theme }) =>
+    variant === 'filled' ? backgroundColor || theme.primary : 'transparent'};
   flex-direction: row;
   justify-content: center;
   align-items: center;
@@ -38,8 +38,10 @@ const ButtonText = styled.Text<{
   variant?: 'default' | 'filled' | 'outlined';
   backgroundColor?: string;
 }>`
-  color: ${({ variant, backgroundColor }) =>
-    variant === 'filled' ? '#FFFFFF' : backgroundColor || '#0052CD'};
+  color: ${({ variant, backgroundColor, theme }) =>
+    variant === 'filled'
+      ? theme.textOnPrimary
+      : backgroundColor || theme.primary};
   font-size: ${PixelRatio.getFontScale() * 14}px;
   font-weight: bold;
 `;
@@ -83,6 +85,11 @@ const Button: React.FC<ButtonProps> = ({
   accessibilityLabel,
 }) => {
   const iconOnly = !loading && !children && !text && !StartIcon && !!EndIcon;
+  // Theme from the styled ThemeProvider. `useContext` (not styled's
+  // `useTheme`) so rendering outside the provider — isolated tests — does
+  // not throw; the inline label colour then falls back to the historical
+  // black.
+  const theme = useContext(ThemeContext);
 
   return (
     <CustomButton
@@ -100,7 +107,7 @@ const Button: React.FC<ButtonProps> = ({
       {!loading && children}
       {!loading && !children && typeof text !== 'undefined' && (
         <ButtonText
-          style={[{ color: color || 'black' }]}
+          style={[{ color: color || theme?.text || 'black' }]}
           variant={variant}
           backgroundColor={backgroundColor}
         >

package/src/components/styled/DateLabel.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components/native';
 import { Line } from './StyledComponents';
 import { Text } from 'react-native';
-import { getDateLabelColor } from '../../helpers/getDateLabelColor';
+import { useTheme } from '../../hooks/useTheme';
 import { useT, useUiLocale } from '../../i18n/useT';
 
 interface DateLabelProps {
@@ -71,12 +71,16 @@ const DateLabel: React.FC<DateLabelProps> = ({ date, colors }) => {
     label = date.toLocaleDateString(uiLocale, options);
   }
 
-  const textColor = getDateLabelColor({ colors });
+  // Theme-aware: dark mode ignores the light-only `colors` knobs (the
+  // theme already folds `colors.dateLabel` / `colors.primary` in light).
+  const theme = useTheme();
+  const textColor = theme.dateLabel;
+  const bgColor = theme.dark ? theme.surfaceSecondary : colors?.secondary;
 
   return (
     <Container>
       <Line />
-      <StyledDateLabel bgColor={colors?.secondary}>
+      <StyledDateLabel bgColor={bgColor}>
         <StyledDateText color={textColor}>{label}</StyledDateText>
       </StyledDateLabel>
       <Line />

package/src/components/styled/MediaModal.tsx

@@ -1,7 +1,8 @@
 /** @format */
 
-import React from 'react';
-import { View, Modal, StyleSheet, ViewStyle, Text } from 'react-native';
+import React from "react";
+import { View, Modal, StyleSheet, ViewStyle, Text } from "react-native";
+import { useTheme } from "../../hooks/useTheme";
 
 interface OverlayProps {
   children?: React.ReactNode;
@@ -9,18 +10,23 @@ interface OverlayProps {
   style?: ViewStyle;
 }
 
-export const Overlay = ({ children, visible, style }: OverlayProps) => (
-  <Modal
-    transparent={true}
-    animationType="fade"
-    visible={visible}
-    onRequestClose={() => {
-      // Implement logic to close the modal if needed
-    }}
-  >
-    <View style={[styles.modal, style]}>{children}</View>
-  </Modal>
-);
+export const Overlay = ({ children, visible, style }: OverlayProps) => {
+  const theme = useTheme();
+  return (
+    <Modal
+      transparent={true}
+      animationType="fade"
+      visible={visible}
+      onRequestClose={() => {
+        // Implement logic to close the modal if needed
+      }}
+    >
+      <View style={[styles.modal, { backgroundColor: theme.surface }, style]}>
+        {children}
+      </View>
+    </Modal>
+  );
+};
 
 export const StyledModal = ({
   children,
@@ -34,22 +40,21 @@ export const StyledModal = ({
 
 const styles = StyleSheet.create({
   overlay: {
-    backgroundColor: 'rgba(0, 0, 0, 0.75)',
+    backgroundColor: "rgba(0, 0, 0, 0.75)",
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
+    justifyContent: "center",
+    alignItems: "center",
     zIndex: 999, // Use zIndex for stacking, although this won't work in all cases, Android uses elevation.
     elevation: 999, // Added to give the overlay layer a higher stacking context on Android.
   },
   modal: {
     flex: 1,
-    width: '100%',
-    height: '100%',
-    backgroundColor: 'white',
+    width: "100%",
+    height: "100%",
+    backgroundColor: "white",
     padding: 0,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
   },
-})
-
+});