@ethora/chat-component-rn 26.8.1 → 26.8.3

package/src/components/MainComponents/ChatWrapper.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useEffect, useMemo, useState} from 'react';
+import React, {FC, useEffect, useMemo, useRef, useState} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import ChatRoom from './ChatRoom';
 import {
@@ -28,17 +28,20 @@ import {
   setIsLoading,
   setLastViewedTimestamp,
 } from '../../roomStore/roomsSlice';
-import {refresh} from '../../networking/apiClient';
+import {refreshAuthTokensQuietly} from '../../networking/authRefresh';
 import RoomList from './RoomList';
 import {StyledLoaderWrapper} from '../styled/StyledComponents';
 import Modal from '../Modals/Modal/Modal';
 import ThreadWrapper from '../Thread/ThreadWrapper';
 import {ModalWrapper} from '../Modals/ModalWrapper/ModalWrapper';
 import {useChatSettingState} from '../../hooks/useChatSettingState';
+import {useTheme} from '../../hooks/useTheme';
+import { usePendingNotification } from '../../hooks/usePendingNotification';
 import {DeviceEventEmitter, Pressable, Text, View} from 'react-native';
 import {pushLog as devPushLog} from '../../utils/devLogger';
 import {normalizeRoomJid} from '../../helpers/normalizeRoomJid';
 import {buildSeedRoom} from '../../helpers/buildSeedRoom';
+import {shallowEqual} from '../../helpers/shallowEqual';
 import {InteractionsOverlayProvider} from '../MessageBubble/InteractionsOverlay';
 
 interface ChatWrapperProps {
@@ -65,6 +68,9 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
     client: storedClient,
   } = useChatSettingState();
 
+  usePendingNotification();
+  const theme = useTheme();
+
   const [isInited, setInited] = useState(false);
   const [showModal, setShowModal] = useState(false);
   const [errorMsg, setErrorMsg] = useState<string | null>(null);
@@ -186,6 +192,23 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
     dispatch(addRoom({roomData: buildSeedRoom(seededRoomJID)}));
   }, [seededRoomJID, seededRoomMissing, dispatch]);
 
+  // Presentational config flags (e.g. `disableHeader`) can change while the
+  // chat stays mounted — sync them to redux whenever `config` actually
+  // changes, not just at init. Kept separate from the init effect below so
+  // toggling a flag doesn't re-run client/token setup. Guarded with a
+  // shallow-equal check (not just the `config` reference) because hosts
+  // commonly pass an inline object literal (`<Chat config={{...}}/>`) that
+  // is a new reference on every render even when nothing in it changed —
+  // dispatching unconditionally there would re-render every config
+  // consumer (ChatRoom, modals, ...) on every host render.
+  const lastSyncedConfigRef = useRef<IConfig | undefined>(undefined);
+  useEffect(() => {
+    if (config && !shallowEqual(lastSyncedConfigRef.current, config)) {
+      lastSyncedConfigRef.current = config;
+      dispatch(setConfig(config));
+    }
+  }, [config, dispatch]);
+
   useEffect(() => {
     if (roomJID) {
       dispatch(
@@ -195,6 +218,16 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
       );
     }
 
+    // Top-up rotation after the client is up. Deduped inside
+    // `refreshAuthTokensQuietly`, so it can no longer race the 401
+    // interceptor into a second, parallel rotation — which the backend
+    // would read as reuse. Never rejects, hence no `.catch` here.
+    const ensureFreshTokens = () => {
+      if (config?.refreshTokens?.enabled) {
+        refreshAuthTokensQuietly();
+      }
+    };
+
     const initXmmpClient = async () => {
       // Only sync config to redux if we have one — passing `undefined`
       // wipes whatever XmppProvider already set up.
@@ -285,14 +318,7 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
             devPushLog('warn', 'initializeClient failed (legacy path)', err);
           }
           setInited(true);
-          if (config?.refreshTokens?.enabled) {
-            // refresh() is fire-and-forget but rejects on bad
-            // refreshToken / network — surface via .catch instead of
-            // leaving the rejection unhandled (was bug #4, id:2).
-            refresh().catch((err) =>
-              console.warn('refresh failed', err)
-            );
-          }
+          ensureFreshTokens();
         } else if (storedClient) {
           devPushLog('rn', 'ChatWrapper: reusing storedClient');
           setClient(storedClient);
@@ -307,11 +333,7 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
               .catch((err: unknown) => console.warn('getRoomsStanza failed', err));
           }
           setInited(true);
-          if (config?.refreshTokens?.enabled) {
-            refresh().catch((err) =>
-              console.warn('refresh failed', err)
-            );
-          }
+          ensureFreshTokens();
         } else if (client) {
           devPushLog('rn', 'ChatWrapper: reusing provider client');
           if (!activeRoomJID) {
@@ -328,11 +350,7 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
             console.warn('getChatsPrivateStoreRequestStanza failed', err)
           );
           setInited(true);
-          if (config?.refreshTokens?.enabled) {
-            refresh().catch((err) =>
-              console.warn('refresh failed', err)
-            );
-          }
+          ensureFreshTokens();
         }
 
         dispatch(setIsLoading({loading: false}));
@@ -421,7 +439,7 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
           <View
             style={{
               padding: 20,
-              backgroundColor: '#fff',
+              backgroundColor: theme.surface,
               borderRadius: 12,
               maxWidth: 320,
               alignItems: 'stretch',
@@ -431,11 +449,11 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
                 fontSize: 16,
                 fontWeight: '600',
                 marginBottom: 8,
-                color: '#222',
+                color: theme.text,
               }}>
               Connection error
             </Text>
-            <Text style={{fontSize: 13, color: '#444', marginBottom: 16}}>
+            <Text style={{fontSize: 13, color: theme.textSecondary, marginBottom: 16}}>
               {errorMsg ?? 'Something went wrong while connecting to chat.'}
             </Text>
             <Pressable
@@ -452,10 +470,10 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
                 paddingVertical: 10,
                 paddingHorizontal: 16,
                 borderRadius: 6,
-                backgroundColor: pressed ? '#0040A0' : '#0052CD',
+                backgroundColor: pressed ? '#0040A0' : theme.primary,
                 alignItems: 'center',
               })}>
-              <Text style={{color: '#fff', fontWeight: '600'}}>Retry</Text>
+              <Text style={{color: theme.textOnPrimary, fontWeight: '600'}}>Retry</Text>
             </Pressable>
           </View>
         </Overlay>
@@ -505,7 +523,7 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
                 title="Delete Message"
                 description="Are you sure you want to delete this message?"
                 buttonText="Delete"
-                backgroundColorButton="#E53935"
+                backgroundColorButton={theme.danger}
                 handleClick={handleDeleteClick}
                 handleCloseModal={handleCloseDeleteModal}
                 compact

package/src/components/MainComponents/LanguageSelectorModal.tsx

@@ -24,6 +24,7 @@ import {
 import { useT } from '../../i18n/useT';
 import { toBaseLanguage } from '../../i18n/strings';
 import { getIconColor } from '../../helpers/getIconColor';
+import { useTheme } from '../../hooks/useTheme';
 
 const TEXT_PRIMARY = '#141414';
 const TEXT_MUTED = '#8C8C8C';
@@ -73,6 +74,7 @@ export const LanguageSelectorModal: FC<{
   const dispatch = useDispatch();
   const t = useT();
   const { config, langSource, translateMode } = useChatSettingState();
+  const theme = useTheme();
 
   const translates = config?.translates;
   const effectiveMode = resolveTranslateMode(translates, translateMode);
@@ -97,16 +99,34 @@ export const LanguageSelectorModal: FC<{
     >
       {/* Backdrop closes on tap; the card swallows the press so a tap
           inside it doesn't dismiss. */}
-      <Pressable style={styles.backdrop} onPress={onClose}>
-        <Pressable style={styles.card} onPress={() => {}}>
-          <Text style={styles.title}>{t('language.select')}</Text>
+      <Pressable
+        style={[
+          styles.backdrop,
+          // Keep the historical 0.4 scrim in light; the dark palette's
+          // heavier overlay is needed to separate the card from the ground.
+          theme.dark && { backgroundColor: theme.overlay },
+        ]}
+        onPress={onClose}
+      >
+        <Pressable
+          style={[styles.card, { backgroundColor: theme.surface }]}
+          onPress={() => {}}
+        >
+          <Text style={[styles.title, { color: theme.text }]}>
+            {t('language.select')}
+          </Text>
 
           {showModeSwitcher && (
             <View style={styles.section}>
-              <Text style={styles.sectionLabel}>
+              <Text style={[styles.sectionLabel, { color: theme.textSecondary }]}>
                 {t('translation.modeLabel')}
               </Text>
-              <View style={styles.segmented}>
+              <View
+                style={[
+                  styles.segmented,
+                  { backgroundColor: theme.surfaceSecondary },
+                ]}
+              >
                 {(['auto', 'manual'] as const).map((mode) => {
                   const selected = effectiveMode === mode;
                   return (
@@ -118,12 +138,15 @@ export const LanguageSelectorModal: FC<{
                       style={[
                         styles.segment,
                         selected && styles.segmentSelected,
+                        selected && { backgroundColor: theme.surface },
                       ]}
                     >
                       <Text
                         style={[
                           styles.segmentText,
+                          { color: theme.textSecondary },
                           selected && styles.segmentTextSelected,
+                          selected && { color: theme.text },
                         ]}
                       >
                         {mode === 'auto'
@@ -139,7 +162,9 @@ export const LanguageSelectorModal: FC<{
 
           {showLanguageList && (
             <View style={styles.section}>
-              <Text style={styles.sectionLabel}>{t('language.select')}</Text>
+              <Text style={[styles.sectionLabel, { color: theme.textSecondary }]}>
+                {t('language.select')}
+              </Text>
               <ScrollView style={styles.list}>
                 {LANGUAGE_OPTIONS.map((option) => {
                   // Compare on the base language so a reader on "fr" still
@@ -153,11 +178,12 @@ export const LanguageSelectorModal: FC<{
                       accessibilityRole="radio"
                       accessibilityState={{ selected }}
                       onPress={() => selectLanguage(option.id)}
-                      style={styles.listRow}
+                      style={[styles.listRow, { borderBottomColor: theme.border }]}
                     >
                       <Text
                         style={[
                           styles.listRowText,
+                          { color: theme.text },
                           selected && styles.listRowTextSelected,
                         ]}
                       >

package/src/components/MainComponents/LoginWrapper.tsx

@@ -36,6 +36,7 @@ const LoginWrapper: React.FC<LoginWrapperProps> = ({...props}) => {
         ...authData.data.user,
         token: authData.data.token,
         refreshToken: authData.data.refreshToken,
+        fileToken: (authData.data as any).fileToken || '',
       };
     } catch (error) {
       console.error('Login failed:', error);

package/src/components/MainComponents/MediaMessage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { IMessage } from '../../types/types';
 import FileDownload from '../styled/UnsupportedType';
 import CustomMessageImage from '../styled/MessageImage';
@@ -11,10 +11,13 @@ import {
   Text,
   View,
 } from 'react-native';
-import { deriveDisplayFilename, isLikelyAudio } from '../../helpers/mimeToExtension';
+import { isLikelyAudio } from '../../helpers/mimeToExtension';
+import { getDisplayFileName } from '../../helpers/getDisplayFileName';
 import { FileIcon, PlayIcon } from '../../assets/icons';
 import { defaultMediaDims } from '../../helpers/mediaDimensions';
-import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { useFileToken } from '../../hooks/useFileToken';
+import { appendFileToken } from '../../helpers/secureFileUrl';
+import { useTheme } from '../../hooks/useTheme';
 
 interface MediaMessageProps {
   mimeType?: string;
@@ -49,23 +52,37 @@ const PendingMediaMessage: React.FC<{
   isUser: boolean;
   size?: string;
 }> = ({ fileName, mimeType, previewUri, isUser, size }) => {
-  const { config } = useChatSettingState();
+  const theme = useTheme();
   const statusLabel = getPendingStatusLabel(mimeType);
   const isImage = mimeType?.startsWith('image/');
   const isVideo = mimeType?.startsWith('video/');
   const isAudio =
     mimeType?.startsWith('audio/') ||
     mimeType?.includes('application/octet-stream');
-  const primaryColor = config?.colors?.primary || '#0A84FF';
+  const primaryColor = theme.primary;
+  // Colour overrides only; layout stays in the static StyleSheet below.
+  const t = useMemo(
+    () => ({
+      card: { backgroundColor: theme.surfaceSecondary },
+      preview: { backgroundColor: theme.surfaceHighlight },
+      text: { color: theme.text },
+      secondary: { color: theme.textSecondary },
+      track: { backgroundColor: theme.border },
+      pill: { backgroundColor: theme.surface },
+    }),
+    [theme]
+  );
 
   if (isImage && previewUri) {
     return (
-      <View style={styles.pendingImageWrapper}>
+      <View style={[styles.pendingImageWrapper, t.card]}>
         <Image
           source={{ uri: previewUri }}
           style={styles.pendingImage}
           resizeMode="cover"
         />
+        {/* Scrim + white label sit on top of the image itself, so they
+            stay hard-coded: they must read on the photo, not the theme. */}
         <View style={styles.pendingImageOverlay}>
           <ActivityIndicator size="small" color="#FFFFFF" />
           <Text style={styles.pendingOverlayText}>{statusLabel}</Text>
@@ -76,32 +93,34 @@ const PendingMediaMessage: React.FC<{
 
   if (isVideo) {
     return (
-      <View style={styles.pendingVideoCard}>
-        <View style={styles.pendingVideoPreview}>
+      <View style={[styles.pendingVideoCard, t.card]}>
+        <View style={[styles.pendingVideoPreview, t.preview]}>
           <View style={styles.pendingVideoIcon}>
             <PlayIcon width={24} height={24} />
           </View>
-          <ActivityIndicator size="small" color="#5B6B8C" />
+          <ActivityIndicator size="small" color={theme.textSecondary} />
         </View>
-        <Text style={styles.pendingVideoLabel}>{fileName}</Text>
-        <Text style={styles.pendingVideoStatus}>{statusLabel}</Text>
+        <Text style={[styles.pendingVideoLabel, t.text]}>{fileName}</Text>
+        <Text style={[styles.pendingVideoStatus, t.secondary]}>
+          {statusLabel}
+        </Text>
       </View>
     );
   }
 
   if (isAudio) {
     return (
-      <View style={styles.pendingAudioCard}>
+      <View style={[styles.pendingAudioCard, t.card]}>
         <View
           style={[
             styles.pendingAudioButton,
             { backgroundColor: primaryColor },
           ]}
         >
-          <PlayIcon width={18} height={18} color="#fff" />
+          <PlayIcon width={18} height={18} color={theme.textOnPrimary} />
         </View>
         <View style={styles.pendingAudioContent}>
-          <View style={styles.pendingAudioTrack}>
+          <View style={[styles.pendingAudioTrack, t.track]}>
             <View
               style={[
                 styles.pendingAudioTrackFill,
@@ -110,10 +129,12 @@ const PendingMediaMessage: React.FC<{
             />
           </View>
           <View style={styles.pendingAudioMeta}>
-            <Text style={styles.pendingAudioTime}>0:00</Text>
-            <View style={styles.pendingAudioStatusPill}>
-              <ActivityIndicator size="small" color="#5B6B8C" />
-              <Text style={styles.pendingAudioStatusText}>{statusLabel}</Text>
+            <Text style={[styles.pendingAudioTime, t.secondary]}>0:00</Text>
+            <View style={[styles.pendingAudioStatusPill, t.pill]}>
+              <ActivityIndicator size="small" color={theme.textSecondary} />
+              <Text style={[styles.pendingAudioStatusText, t.secondary]}>
+                {statusLabel}
+              </Text>
             </View>
           </View>
         </View>
@@ -136,22 +157,27 @@ const PendingMediaMessage: React.FC<{
 
 const MediaMessage: React.FC<MediaMessageProps> = ({
   mimeType,
-  location,
-  messageText,
+  location: rawLocation,
+  messageText: rawMessageText,
   message,
   isUser,
 }) => {
+  const fileToken = useFileToken();
+  const theme = useTheme();
+  const location = appendFileToken(rawLocation, fileToken);
+  const messageText = appendFileToken(rawMessageText, fileToken);
+
   if (mimeType) {
-    const displayName = deriveDisplayFilename({
-      fileName: message?.fileName,
+    const displayName = getDisplayFileName({
       originalName: (message as any)?.originalName,
-      url: location || messageText,
-      mime: mimeType,
+      fileName: message?.fileName,
+      location: rawLocation || rawMessageText,
+      mimetype: mimeType,
     });
     const isAudioPayload = isLikelyAudio(
       mimeType,
       displayName,
-      location,
+      rawLocation,
       {
         duration: (message as any)?.duration,
         waveForm: (message as any)?.waveForm,
@@ -174,7 +200,12 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
         return (
           <CustomMessageImage
             fileName={displayName}
+            originalName={(message as any)?.originalName}
+            // Full-size original: opened by the preview modal.
             fileURL={location || messageText || ''}
+            // ...and the thumbnail the bubble actually renders, which is
+            // what the web client shows too.
+            locationPreview={messageText}
             mimetype={mimeType}
           />
         );
@@ -182,7 +213,13 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
         return (
           <CustomMessageVideo
             fileName={displayName}
+            originalName={(message as any)?.originalName}
             fileURL={location || ''}
+            // `messageText` is the message's locationPreview — the poster
+            // frame the backend generated for this video. Handing it over
+            // lets the bubble render as a still + play badge instead of
+            // mounting a video surface per row (see VideoMessage).
+            previewURL={messageText}
             mimetype={mimeType}
           />
         );
@@ -245,7 +282,7 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
       }
     }
   }
-  return <Text>Unsupported media type</Text>;
+  return <Text style={{ color: theme.text }}>Unsupported media type</Text>;
 };
 
 export default MediaMessage;

package/src/components/MainComponents/MessageContainer.tsx

@@ -1,5 +1,6 @@
 import React, { FC, Fragment, useMemo } from 'react';
 import { IConfig, IMessage } from '../../types/types';
+import { isOwnMessage } from '../../helpers/isOwnMessage';
 import DateLabel from '../styled/DateLabel';
 import SystemMessage from './SystemMessage';
 import NewMessageLabel from '../styled/NewMessageLabel';
@@ -46,7 +47,10 @@ export const MessageContainer: FC<MessageContainerProps> = ({
   isReply,
   className,
 }) => {
-  const isUser = message.user.id === walletAddress;
+  // Bug #41: `message.user.id === walletAddress` used to treat two
+  // empty/undefined ids as a match, briefly rendering catch-up messages
+  // from other users as our own. isOwnMessage() never does that.
+  const isUser = isOwnMessage(message, walletAddress);
 
   const messageDate = new Date(message.date);
 

package/src/components/MainComponents/MessageList.tsx

@@ -28,6 +28,9 @@ import Loader from '../styled/Loader';
 import { ArowDownIcon } from '../../assets/icons';
 import CustomTypingIndicator from '../styled/StyledInputComponents/CustomTypingIndicator';
 import { getIconColor } from '../../helpers/getIconColor';
+import { getChatBackgroundColor } from '../../helpers/getChatBackground';
+import { useTheme } from '../../hooks/useTheme';
+import { isOwnMessage } from '../../helpers/isOwnMessage';
 
 interface MessageListProps<TMessage extends IMessage> {
   CustomMessage?: React.ComponentType<{
@@ -53,6 +56,15 @@ interface MessageListProps<TMessage extends IMessage> {
   config?: IConfig;
   isReply: boolean;
   activeMessage?: IMessage;
+  /**
+   * Fired whenever the "read up to" boundary changes: `null` while the
+   * user is at the bottom (everything is read), or the timestamp of the
+   * newest message they'd actually seen when they scrolled away from it.
+   * Lets the host mark only what was actually viewed as read instead of
+   * stamping "now" on unmount/leave, which would wrongly clear unread
+   * messages the user scrolled up and never got back down to.
+   */
+  onReadBoundaryChange?: (boundaryTs: number | null) => void;
 }
 
 const MessageList = <TMessage extends IMessage>({
@@ -66,9 +78,11 @@ const MessageList = <TMessage extends IMessage>({
   loading,
   isReply,
   activeMessage,
+  onReadBoundaryChange,
 }: MessageListProps<TMessage>) => {
   const { composing, messages, composingList } = useRoomState(roomJID)
     .room! as IRoom;
+  const theme = useTheme();
   const [isUserAtBottom, setIsUserAtBottom] = useState(true);
   const [showNewMessageIndicator, setShowNewMessageIndicator] = useState(false);
   const [isLoadingMore, setIsLoadingMore] = useState(false);
@@ -332,6 +346,7 @@ const MessageList = <TMessage extends IMessage>({
         // counter so the badge disappears with the arrow.
         setUnreadWhileScrolledUp(0);
         newestSeenTsRef.current = null;
+        onReadBoundaryChange?.(null);
       } else {
         isUserAtBottomRef.current = false;
         if (hasUserScrolledRef.current) {
@@ -349,11 +364,12 @@ const MessageList = <TMessage extends IMessage>({
             },
             0
           );
+          onReadBoundaryChange?.(newestSeenTsRef.current);
         }
         setIsUserAtBottom(false);
       }
     },
-    [memoizedMessages]
+    [memoizedMessages, onReadBoundaryChange]
   );
 
   // Keep the badge in sync with messages that arrive while the user is
@@ -382,6 +398,7 @@ const MessageList = <TMessage extends IMessage>({
     setIsUserAtBottom(true);
     setUnreadWhileScrolledUp(0);
     newestSeenTsRef.current = null;
+    onReadBoundaryChange?.(null);
     scrollToBottom();
   };
 
@@ -392,6 +409,8 @@ const MessageList = <TMessage extends IMessage>({
     setIsUserAtBottom(true);
     setUnreadWhileScrolledUp(0);
     newestSeenTsRef.current = null;
+    onReadBoundaryChange?.(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [roomJID]);
 
   const BackgroundImage = useMemo(() => {
@@ -413,7 +432,7 @@ const MessageList = <TMessage extends IMessage>({
     <View
       style={[
         styles.container,
-        { backgroundColor: config?.backgroundChat?.color || '#F3F6FC' },
+        { backgroundColor: getChatBackgroundColor(config) },
       ]}
     >
       <View style={styles.backgroundImageContainer}>{BackgroundImage}</View>
@@ -422,7 +441,7 @@ const MessageList = <TMessage extends IMessage>({
           {CustomMessage && (
             <CustomMessage
               message={activeMessage}
-              isUser={activeMessage.user.id === user.walletAddress}
+              isUser={isOwnMessage(activeMessage, user)}
               isReply={isReply}
             />
           )}
@@ -442,7 +461,9 @@ const MessageList = <TMessage extends IMessage>({
         onLayout={handleLayout}
         inverted={true}
         keyboardShouldPersistTaps="handled"
-        keyboardDismissMode="interactive"
+        keyboardDismissMode={
+          config?.keepKeyboardOpenOnScroll ? 'none' : 'interactive'
+        }
         contentContainerStyle={styles.flatListContent}
         ListFooterComponent={
           loading && memoizedMessages.length > 15 ? (
@@ -454,16 +475,24 @@ const MessageList = <TMessage extends IMessage>({
         <TouchableOpacity
           style={[
             styles.newMessageIndicator,
-            { backgroundColor: getIconColor(config) },
+            {
+              backgroundColor: getIconColor(config),
+              shadowColor: theme.shadow,
+            },
           ]}
           onPress={handleNewMessageIndicatorPress}
         >
           {/* White chevron on the saturated FAB. The icon's default
               color is white, which was invisible against the previous
               light `secondary` background — hence "no icon". */}
-          <ArowDownIcon color="#FFFFFF" width={22} height={22} />
+          <ArowDownIcon color={theme.textOnPrimary} width={22} height={22} />
           {unreadWhileScrolledUp > 0 && (
-            <View style={styles.newMessageBadge}>
+            <View
+              style={[
+                styles.newMessageBadge,
+                { backgroundColor: theme.danger, borderColor: theme.surface },
+              ]}
+            >
               <Text style={styles.newMessageBadgeText}>
                 {unreadWhileScrolledUp > 99 ? '99+' : unreadWhileScrolledUp}
               </Text>