@ethora/chat-component-rn 26.8.2 → 26.8.4

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

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

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

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

package/src/components/Modals/ModalHeaderComponent.tsx

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

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

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

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

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

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

@@ -26,6 +26,8 @@ import { postRoom } from '../../../networking/api-requests/rooms.api';
 import { useAppDispatch, useAppSelector } from '../../../hooks/hooks';
 import { useChatSettingState } from '../../../hooks/useChatSettingState';
 import { useToast } from '../../../context/ToastContext';
+import { useTheme } from '../../../hooks/useTheme';
+import type { ChatTheme } from '../../../theme/theme';
 
 interface NewChatModalProps {
   handleCloseModal?: () => void;
@@ -46,6 +48,8 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
   const { client } = useXmppClient();
   const { user } = useChatSettingState();
   const { showToast } = useToast();
+  const theme = useTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
 
   const [loading, setLoading] = useState<boolean>(false);
 
@@ -314,7 +318,7 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
             {pickedUri ? (
               <Image source={{ uri: pickedUri }} style={styles.pictureImage} />
             ) : (
-              <CameraIcon color="#FFFFFF" width={26} height={26} />
+              <CameraIcon color={theme.textOnPrimary} width={26} height={26} />
             )}
           </TouchableOpacity>
 
@@ -324,7 +328,7 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
             value={roomName}
             onChangeText={handleRoomNameChange}
             placeholder={t('modal.newChat.roomNamePlaceholder')}
-            placeholderTextColor="#8C8C8C"
+            placeholderTextColor={theme.textMuted}
             returnKeyType="next"
           />
           {!!errors.name && roomName.length > 0 && (
@@ -339,7 +343,7 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
             value={roomDescription}
             onChangeText={handleRoomDescriptionChange}
             placeholder={t('modal.newChat.descriptionPlaceholder')}
-            placeholderTextColor="#8C8C8C"
+            placeholderTextColor={theme.textMuted}
             multiline
           />
 
@@ -363,7 +367,7 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
               onPress={handleCreateRoom}
             >
               {loading ? (
-                <ActivityIndicator color="#FFFFFF" />
+                <ActivityIndicator color={theme.textOnPrimary} />
               ) : (
                 <Text style={styles.submitLabel}>
                   {t('modal.newChat.createButton')}
@@ -377,12 +381,12 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
+const createStyles = (theme: ChatTheme) => StyleSheet.create({
   backdrop: {
     flex: 1,
     // Opaque, per the design: the chat list behind stays hidden rather
     // than showing through a translucent dim.
-    backgroundColor: '#E9EDF2',
+    backgroundColor: theme.listBackground,
     alignItems: 'center',
     justifyContent: 'center',
     padding: 24,
@@ -391,9 +395,9 @@ const styles = StyleSheet.create({
     width: '100%',
     maxWidth: 380,
     borderRadius: 20,
-    backgroundColor: '#FFFFFF',
+    backgroundColor: theme.surface,
     padding: 20,
-    shadowColor: '#121219',
+    shadowColor: theme.shadow,
     shadowOffset: { width: 0, height: 8 },
     shadowOpacity: 0.08,
     shadowRadius: 24,
@@ -402,7 +406,7 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 17,
     fontWeight: '700',
-    color: '#141414',
+    color: theme.text,
     textAlign: 'center',
   },
   picture: {
@@ -421,11 +425,11 @@ const styles = StyleSheet.create({
   },
   input: {
     borderRadius: 12,
-    backgroundColor: '#F4F5F7',
+    backgroundColor: theme.surfaceSecondary,
     paddingHorizontal: 14,
     paddingVertical: 12,
     fontSize: 15,
-    color: '#141414',
+    color: theme.text,
     marginTop: 10,
   },
   textArea: {
@@ -433,7 +437,7 @@ const styles = StyleSheet.create({
     textAlignVertical: 'top',
   },
   error: {
-    color: '#E53935',
+    color: theme.danger,
     fontSize: 12,
     marginTop: 6,
     marginLeft: 4,
@@ -451,17 +455,17 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   cancel: {
-    backgroundColor: '#E7E8EA',
+    backgroundColor: theme.surfaceSecondary,
   },
   cancelLabel: {
     fontSize: 15,
     fontWeight: '500',
-    color: '#8C8C8C',
+    color: theme.textSecondary,
   },
   submitLabel: {
     fontSize: 15,
     fontWeight: '600',
-    color: '#FFFFFF',
+    color: theme.textOnPrimary,
   },
 });
 

package/src/components/Modals/ProfileHeader/ProfileMenu.tsx

@@ -13,6 +13,7 @@ import {
   View,
 } from 'react-native';
 import { MoreIcon } from '../../../assets/icons';
+import { useTheme } from '../../../hooks/useTheme';
 
 export interface ProfileMenuItem {
   key: string;
@@ -44,6 +45,7 @@ const ProfileMenu: React.FC<{
   items: ProfileMenuItem[];
   testIDPrefix?: string;
 }> = ({ items, testIDPrefix = 'chat-profile' }) => {
+  const theme = useTheme();
   const buttonRef = useRef<View>(null);
   const [open, setOpen] = useState(false);
   const [anchor, setAnchor] = useState({ top: DEFAULT_TOP, right: EDGE });
@@ -131,6 +133,8 @@ const ProfileMenu: React.FC<{
           style={[
             styles.card,
             {
+              backgroundColor: theme.surface,
+              shadowColor: theme.shadow,
               top: anchor.top,
               right: anchor.right,
               opacity: progress,
@@ -151,11 +155,19 @@ const ProfileMenu: React.FC<{
               key={item.key}
               testID={`${testIDPrefix}-menu-${item.key}`}
               activeOpacity={0.6}
-              style={[styles.row, index > 0 && styles.rowDivider]}
+              style={[
+                styles.row,
+                index > 0 && styles.rowDivider,
+                index > 0 && theme.dark && { borderTopColor: theme.divider },
+              ]}
               onPress={() => closeMenu(item.onPress)}
             >
               <Text
-                style={[styles.label, item.destructive && styles.destructive]}
+                style={[
+                  styles.label,
+                  { color: theme.text },
+                  item.destructive && { color: theme.danger },
+                ]}
               >
                 {item.label}
               </Text>
@@ -180,10 +192,8 @@ const styles = StyleSheet.create({
   card: {
     position: 'absolute',
     minWidth: 200,
-    backgroundColor: '#FFFFFF',
     borderRadius: 14,
     paddingVertical: 4,
-    shadowColor: '#121219',
     shadowOffset: { width: 0, height: 6 },
     shadowOpacity: 0.18,
     shadowRadius: 16,
@@ -199,14 +209,11 @@ const styles = StyleSheet.create({
   },
   rowDivider: {
     borderTopWidth: StyleSheet.hairlineWidth,
+    // Light hairline; swapped for theme.divider in dark mode.
     borderTopColor: '#EFEFF2',
   },
   label: {
     fontSize: 16,
-    color: '#141414',
-  },
-  destructive: {
-    color: '#E53935',
   },
   icon: {
     width: 22,

package/src/components/Modals/SelectUsersModal/SelectUsersModal.tsx

@@ -4,6 +4,7 @@ import { getActiveRoom, RootState } from '../../../roomStore';
 import {
   ActionButton,
   CloseButton,
+  CloseButtonText,
   GroupContainer,
   ModalBackground,
   ModalContainer,
@@ -15,7 +16,6 @@ import Loader from '../../styled/Loader';
 import { postAddRoomMember } from '../../../networking/api-requests/rooms.api';
 import { useToast } from '../../../context/ToastContext';
 import { updateRoom } from '../../../roomStore/roomsSlice';
-import { Text } from 'react-native';
 
 interface SelectUsersModalProps {
   /** Render the opener yourself (the chat profile uses an "Add Members"
@@ -92,8 +92,7 @@ const SelectUsersModal: React.FC<SelectUsersModalProps> = ({ trigger }) => {
         <ModalBackground>
           <ModalContainer>
             <CloseButton onPress={handleCloseModal}>
-              <Text style={{ fontSize: 24 }}>&times;</Text>
-              &times;
+              <CloseButtonText>&times;</CloseButtonText>
             </CloseButton>
             <GroupContainer
               style={{

package/src/components/Modals/SettingsModals/ManageDataModal/ManageDataModal.tsx

@@ -20,6 +20,7 @@ import {
   SharedSettingsStyledLabel,
 } from '../SharedStyledComponents';
 import { View } from 'react-native';
+import { useTheme } from '../../../../hooks/useTheme';
 
 interface ManageDataModalProps {
   handleCloseModal: any;
@@ -37,6 +38,7 @@ const ManageDataModal: React.FC<ManageDataModalProps> = ({
   handleCloseModal,
 }) => {
   const { config } = useSelector((state: RootState) => state.chatSettingStore);
+  const theme = useTheme();
 
   const handleDownloadClick = async () => {
     // const exportedData = await getExportMyData();
@@ -76,10 +78,10 @@ const ManageDataModal: React.FC<ManageDataModalProps> = ({
             </LabelData>
           </SharedSettingsSectionContainer>
           <SharedSettingsStyledButton
-            borderColor={config?.colors?.primary || '#0052CD'}
+            borderColor={theme.primary}
             onPress={handleDownloadClick}
             text="Download your data"
-            color={config?.colors?.primary || '#0052CD'}
+            color={theme.primary}
           />
         </SharedSettingsColumnContainer>
         <SharedSettingsColumnContainer>
@@ -93,10 +95,10 @@ const ManageDataModal: React.FC<ManageDataModalProps> = ({
             </SharedSettingsLabelData>
           </SharedSettingsSectionContainer>
           <SharedSettingsInfoPanel
-            bgColor={config?.colors?.secondary || '#F3F6FC'}
+            bgColor={config?.colors?.secondary || theme.surfaceHighlight}
           >
             <View>
-              <InfoIcon color={config?.colors?.primary || '#0052CD'} />
+              <InfoIcon color={theme.primary} />
             </View>
             <SharedSettingsInfoText>
               Due to the immutable nature of distributed ledger technology,
@@ -108,9 +110,9 @@ const ManageDataModal: React.FC<ManageDataModalProps> = ({
             </SharedSettingsInfoText>
           </SharedSettingsInfoPanel>
           <SharedSettingsStyledButton
-            borderColor="#E53935"
+            borderColor={theme.danger}
             text="Delete My Account"
-            color="#E53935"
+            color={theme.danger}
           />
         </SharedSettingsColumnContainer>
       </SharedSettingsCenterContainer>

package/src/components/Modals/SettingsModals/Referrals/Referrals.tsx

@@ -22,6 +22,7 @@ import { useSelector } from 'react-redux';
 import { RootState } from '../../../../roomStore';
 import { View, Text } from 'react-native';
 import Animated from 'react-native-reanimated';
+import { useTheme } from '../../../../hooks/useTheme';
 
 interface ReferralsModalProps {
   handleCloseModal: any;
@@ -31,6 +32,7 @@ const ReferralsModal: React.FC<ReferralsModalProps> = ({
   handleCloseModal,
 }) => {
   const { config } = useSelector((state: RootState) => state.chatSettingStore);
+  const theme = useTheme();
 
   return (
     <ModalContainerFullScreen>
@@ -45,7 +47,7 @@ const ReferralsModal: React.FC<ReferralsModalProps> = ({
           <SendCoinIcon style={{ width: 24, height: 24 }} />
           <SharedSettingsStyledLabel>and receive 25</SharedSettingsStyledLabel>
           <SendCoinIcon style={{ width: 24, height: 24 }} />
-          <Text>.</Text>
+          <Text style={{ color: theme.text }}>.</Text>
           <SharedSettingsStyledLabel>
             Send friends invite with your personal invitation code.
           </SharedSettingsStyledLabel>
@@ -55,7 +57,7 @@ const ReferralsModal: React.FC<ReferralsModalProps> = ({
             Your invitation code
           </SharedSettingsStyledLabel>
           <StyledInput
-            {...{ color: config?.colors?.primary || '' } as any}
+            {...{ color: config?.colors?.primary || theme.primary } as any}
             placeholder="Your invitation code"
             // label={'About'}
             // value={message}
@@ -71,7 +73,7 @@ const ReferralsModal: React.FC<ReferralsModalProps> = ({
             Or enter your referral code to earn coins
           </SharedSettingsStyledLabel>
           <StyledInput
-            {...{ color: config?.colors?.primary || '' } as any}
+            {...{ color: config?.colors?.primary || theme.primary } as any}
             placeholder="Your referral code"
             // label={'About'}
             // value={message}