@ethora/chat-component-rn 26.8.2 → 26.8.4

package/src/components/Modals/SettingsModals/SharedStyledComponents.ts

@@ -39,7 +39,7 @@ export const RowWrapper = styled.View`
 export const SharedSettingsLabelData = styled(Label)`
   font-size: 12px;
   text-align: start;
-  color: #8c8c8c;
+  color: ${({theme}) => theme.textSecondary};
 `;
 
 export const SharedSettingsStyledButton = styled(Button)<{
@@ -57,10 +57,10 @@ export const SharedSettingsStyledButton = styled(Button)<{
   border: 1px solid ${({borderColor}) => borderColor};
 `;
 
-export const SharedSettingsInfoPanel = styled.View<{bgColor: string | undefined}>`
+export const SharedSettingsInfoPanel = styled.View<{bgColor?: string}>`
   display: flex;
   align-items: flex-start;
-  background-color: ${({bgColor}) => bgColor};
+  background-color: ${({bgColor}) => bgColor || 'transparent'};
   padding: 16px;
   border-radius: 8px;
   gap: 8px;
@@ -68,7 +68,7 @@ export const SharedSettingsInfoPanel = styled.View<{bgColor: string | undefined}
 
 export const SharedSettingsInfoText = styled.Text`
   font-size: 12px;
-  color: #141414;
+  color: ${({theme}) => theme.text};
   display: flex;
   text-align: start;
 `;

package/src/components/Modals/SettingsModals/Visibility/RadioInput.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { useTheme } from '../../../../hooks/useTheme';
 
 interface RadioInputProps {
   option: { label: string; value?: boolean };
@@ -12,8 +13,10 @@ export const RadioInput: React.FC<RadioInputProps> = ({
   option,
   checked,
   onChange,
-  radioColor = '#0052CD',
+  radioColor,
 }) => {
+  const theme = useTheme();
+  const color = radioColor || theme.primary;
   return (
     <View style={styles.container}>
       <TouchableOpacity
@@ -25,12 +28,14 @@ export const RadioInput: React.FC<RadioInputProps> = ({
           style={[
             styles.radioCircle,
             {
-              borderColor: radioColor,
-              backgroundColor: checked ? radioColor : 'transparent',
+              borderColor: color,
+              backgroundColor: checked ? color : 'transparent',
             },
           ]}
         />
-        <Text style={styles.radioLabel}>{option.label}</Text>
+        <Text style={[styles.radioLabel, { color: theme.text }]}>
+          {option.label}
+        </Text>
       </TouchableOpacity>
     </View>
   );
@@ -54,6 +59,5 @@ const styles = StyleSheet.create({
   },
   radioLabel: {
     fontSize: 16,
-    color: '#333',
   },
 });

package/src/components/Modals/SettingsModals/Visibility/VisibilityModal.tsx

@@ -15,6 +15,7 @@ import {
   SharedSettingsStyledLabel,
 } from '../SharedStyledComponents';
 import { RadioInput } from './RadioInput';
+import { useTheme } from '../../../../hooks/useTheme';
 
 interface VisibilityModalProps {
   handleCloseModal: any;
@@ -24,9 +25,8 @@ const VisibilityModal: React.FC<VisibilityModalProps> = ({
   handleCloseModal,
 }) => {
   const dispatch = useDispatch();
-  const { user, config } = useSelector(
-    (state: RootState) => state.chatSettingStore
-  );
+  const { user } = useSelector((state: RootState) => state.chatSettingStore);
+  const theme = useTheme();
 
   const doUpdateUser = (user: User) => dispatch(setUser(user));
   const [isProfileOpen, setIsProfileOpen] = useState(user?.isProfileOpen);
@@ -78,7 +78,7 @@ const VisibilityModal: React.FC<VisibilityModalProps> = ({
             <RadioLabel>
               <RadioInput
                 option={{ label: 'Open (default)', value: isProfileOpen }}
-                radioColor={config?.colors?.primary}
+                radioColor={theme.primary}
                 checked={isProfileOpen === true}
                 onChange={() => setIsProfileOpen(true)}
               />
@@ -91,7 +91,7 @@ const VisibilityModal: React.FC<VisibilityModalProps> = ({
             <RadioLabel>
               <RadioInput
                 option={{ label: 'Restricted', value: isProfileOpen }}
-                radioColor={config?.colors?.primary}
+                radioColor={theme.primary}
                 checked={isProfileOpen === false}
                 onChange={() => setIsProfileOpen(false)}
               />
@@ -110,7 +110,7 @@ const VisibilityModal: React.FC<VisibilityModalProps> = ({
             <RadioLabel>
               <RadioInput
                 option={{ label: 'Full (default)', value: isAssetsOpen }}
-                radioColor={config?.colors?.primary}
+                radioColor={theme.primary}
                 checked={isAssetsOpen === true}
                 onChange={() => setIsAssetsOpen(true)}
               />
@@ -121,7 +121,7 @@ const VisibilityModal: React.FC<VisibilityModalProps> = ({
             <RadioLabel>
               <RadioInput
                 option={{ label: 'InViewidual', value: isAssetsOpen }}
-                radioColor={config?.colors?.primary}
+                radioColor={theme.primary}
                 checked={isAssetsOpen === false}
                 onChange={() => setIsAssetsOpen(false)}
               />

package/src/components/Modals/UserProfileModal/EditUserModal.tsx

@@ -10,6 +10,7 @@ import { updateUser } from '../../../roomStore/chatSettingsSlice';
 import { View } from 'react-native';
 import { pickImageAsset, PickedImage } from '../../../helpers/pickImageAsset';
 import { AddPhotoIcon } from '../../../assets/icons';
+import { useTheme } from '../../../hooks/useTheme';
 // import { actionUpdateUser } from '../actions';
 
 interface EditUserModalProps {
@@ -24,6 +25,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
   config,
 }) => {
   const dispatch = useDispatch();
+  const theme = useTheme();
 
   const [firstName, setFirstName] = useState(modalUser?.firstName || '');
   const [lastName, setLastName] = useState(modalUser?.lastName || '');
@@ -92,7 +94,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
             onPress={onSave}
             variant="outlined"
             style={{ width: 128 }}
-            color="#0052CD"
+            color={theme.primary}
             text="Save"
           />
         }

package/src/components/Modals/UserProfileModal/UserProfileModal.tsx

@@ -29,6 +29,8 @@ import { useT } from '../../../i18n/useT';
 import { useFileToken } from '../../../hooks/useFileToken';
 import { appendFileToken } from '../../../helpers/secureFileUrl';
 import { getIconColor } from '../../../helpers/getIconColor';
+import { useTheme } from '../../../hooks/useTheme';
+import type { ChatTheme } from '../../../theme/theme';
 import { chatTextStyle } from '../../../helpers/typography';
 import { getElementFont } from '../../../helpers/getElementFont';
 import { LANGUAGE_OPTIONS } from '../../../helpers/constants/LANGUAGE_OPTIONS';
@@ -107,6 +109,8 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
   const { showToast } = useToast();
   const { config, user, selectedUser, langSource } = useChatSettingState();
   const fileToken = useFileToken();
+  const theme = useTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
 
   const [isEditing, setIsEditing] = useState(false);
   const [files, setFiles] = useState<UserFile[]>([]);
@@ -349,12 +353,12 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
         ? heroActions.map((action) => ({
             key: action.key,
             label: action.label,
-            icon: action.icon('#141414'),
+            icon: action.icon(theme.text),
             destructive: action.key === 'logout',
             onPress: action.onPress,
           }))
         : [],
-    [isCollapsed, heroActions]
+    [isCollapsed, heroActions, theme.text]
   );
 
   if (isEditing) {
@@ -591,10 +595,10 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
+const createStyles = (theme: ChatTheme) => StyleSheet.create({
   screen: {
     position: 'relative',
-    backgroundColor: '#F2F3F5',
+    backgroundColor: theme.listBackground,
   },
   scroll: {
     width: '100%',
@@ -608,21 +612,21 @@ const styles = StyleSheet.create({
     gap: 12,
   },
   card: {
-    backgroundColor: '#FFFFFF',
+    backgroundColor: theme.surface,
     borderRadius: 14,
     padding: 16,
-    shadowColor: '#000',
+    shadowColor: theme.shadow,
     shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.05,
     shadowRadius: 4,
     elevation: 1,
   },
   cardLabel: {
-    color: '#8C8C8C',
+    color: theme.textSecondary,
     fontSize: 14,
   },
   cardValue: {
-    color: '#141414',
+    color: theme.text,
     fontSize: 16,
     marginTop: 4,
   },
@@ -644,7 +648,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     gap: 20,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#EFEFF2',
+    borderBottomColor: theme.border,
     marginBottom: 12,
   },
   tab: {
@@ -658,7 +662,7 @@ const styles = StyleSheet.create({
   tabLabel: {
     fontSize: 15,
     fontWeight: '500',
-    color: '#8C8C8C',
+    color: theme.textSecondary,
   },
   tabBadge: {
     minWidth: 20,
@@ -668,7 +672,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   tabBadgeText: {
-    color: '#FFFFFF',
+    color: theme.textOnPrimary,
     fontSize: 11,
     fontWeight: '600',
   },
@@ -680,7 +684,7 @@ const styles = StyleSheet.create({
   },
   languageLabel: {
     fontSize: 16,
-    color: '#141414',
+    color: theme.text,
   },
   check: {
     fontSize: 16,
@@ -696,7 +700,7 @@ const styles = StyleSheet.create({
     aspectRatio: 1,
     borderRadius: 10,
     overflow: 'hidden',
-    backgroundColor: '#EFEFF2',
+    backgroundColor: theme.surfaceSecondary,
   },
   mediaImage: {
     width: '100%',
@@ -713,11 +717,11 @@ const styles = StyleSheet.create({
   },
   documentName: {
     fontSize: 16,
-    color: '#141414',
+    color: theme.text,
   },
   documentDate: {
     fontSize: 13,
-    color: '#8C8C8C',
+    color: theme.textSecondary,
     marginTop: 2,
   },
 });

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

@@ -1,27 +1,67 @@
 /** @format */
 
 import React, { useCallback, useMemo } from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { useDispatch } from 'react-redux';
+import {
+  StyleSheet,
+  Switch,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
 import { ModalContainerFullScreen } from '../styledModalComponents';
 import ModalHeaderComponent from '../ModalHeaderComponent';
 import { ArowDownIcon } from '../../../assets/icons';
-import { setActiveModal } from '../../../roomStore/chatSettingsSlice';
+import {
+  setActiveModal,
+  setPushEnabled,
+  setThemePreference,
+} from '../../../roomStore/chatSettingsSlice';
+import type { RootState } from '../../../roomStore';
 import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
 import { useChatSettingState } from '../../../hooks/useChatSettingState';
 import { chatTextStyle } from '../../../helpers/typography';
+import { savePreferences } from '../../../helpers/preferencesStorage';
 import { useT } from '../../../i18n/useT';
+import { useTheme } from '../../../hooks/useTheme';
+import type { ChatTheme, ThemePreference } from '../../../theme/theme';
 
 interface UserSettingsModalProps {
   handleCloseModal: any;
 }
 
+const APPEARANCES: ThemePreference[] = ['light', 'dark', 'system'];
+
 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 themePreference = useSelector(
+    (s: RootState) => s.chatSettingStore.themePreference
+  );
+  const pushEnabled = useSelector(
+    (s: RootState) => s.chatSettingStore.pushEnabled
+  );
+
+  // What the picker shows before the user ever touched it: the host's
+  // config.dark, so the selected segment matches what is on screen.
+  const appearance: ThemePreference =
+    themePreference ??
+    (config?.dark === 'system' ? 'system' : config?.dark ? 'dark' : 'light');
+
+  const appearanceLabels: Record<ThemePreference, string> = useMemo(
+    () => ({
+      light: t('settings.appearance.light'),
+      dark: t('settings.appearance.dark'),
+      system: t('settings.appearance.system'),
+    }),
+    [t]
+  );
 
   const options = useMemo(
     () => [
@@ -38,6 +78,31 @@ const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
     [dispatch]
   );
 
+  const handleAppearance = useCallback(
+    (pref: ThemePreference) => {
+      dispatch(setThemePreference(pref));
+      savePreferences({ theme: pref });
+    },
+    [dispatch]
+  );
+
+  // The SDK acts on the flag itself (pushRegistration releases / restores
+  // the device-token registrations); the host is told so it can mirror
+  // the choice on any native push side it owns.
+  const onPushNotificationsToggle = config?.eventHandlers?.onPushNotificationsToggle;
+  const handlePush = useCallback(
+    (enabled: boolean) => {
+      dispatch(setPushEnabled(enabled));
+      savePreferences({ pushEnabled: enabled });
+      if (onPushNotificationsToggle) {
+        Promise.resolve(onPushNotificationsToggle(enabled)).catch((err) =>
+          console.warn('[settings] onPushNotificationsToggle failed', err)
+        );
+      }
+    },
+    [dispatch, onPushNotificationsToggle]
+  );
+
   return (
     <ModalContainerFullScreen style={styles.screen}>
       <ModalHeaderComponent
@@ -49,6 +114,51 @@ const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
         * hairline dividers — the rows are separate destinations, and the
         * design gives each its own surface. */}
       <View style={styles.body}>
+        {!config?.settings?.hideAppearance ? (
+          <View style={[styles.card, styles.stackCard]} testID="settings-appearance">
+            <Text style={styles.label}>{t('settings.appearance.title')}</Text>
+            <View style={styles.segmented} accessibilityRole="radiogroup">
+              {APPEARANCES.map((pref) => {
+                const selected = pref === appearance;
+                return (
+                  <TouchableOpacity
+                    key={pref}
+                    testID={`settings-appearance-${pref}`}
+                    accessibilityRole="radio"
+                    accessibilityState={{ selected }}
+                    activeOpacity={0.7}
+                    style={[styles.segment, selected && styles.segmentSelected]}
+                    onPress={() => handleAppearance(pref)}
+                  >
+                    <Text
+                      style={[styles.segmentLabel, selected && styles.segmentLabelSelected]}
+                    >
+                      {appearanceLabels[pref]}
+                    </Text>
+                  </TouchableOpacity>
+                );
+              })}
+            </View>
+          </View>
+        ) : null}
+
+        {!config?.settings?.hidePushToggle ? (
+          <View style={styles.card} testID="settings-notifications">
+            <View style={styles.switchText}>
+              <Text style={styles.label}>{t('settings.notifications.push')}</Text>
+              <Text style={styles.hint}>{t('settings.notifications.pushHint')}</Text>
+            </View>
+            <Switch
+              testID="settings-push-switch"
+              value={pushEnabled !== false}
+              onValueChange={handlePush}
+              trackColor={{ true: theme.primary, false: theme.surfaceSecondary }}
+              thumbColor={theme.surface}
+              ios_backgroundColor={theme.surfaceSecondary}
+            />
+          </View>
+        ) : null}
+
         {options.map((option) => (
           <TouchableOpacity
             key={option.key}
@@ -58,7 +168,12 @@ const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
             onPress={() => handleClick(option.key)}
           >
             <Text style={styles.label}>{option.label}</Text>
-            <ArowDownIcon color="#8C8C8C" width={20} height={20} style={styles.chevron} />
+            <ArowDownIcon
+              color={theme.textSecondary}
+              width={20}
+              height={20}
+              style={styles.chevron}
+            />
           </TouchableOpacity>
         ))}
       </View>
@@ -66,9 +181,9 @@ const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
+const createStyles = (theme: ChatTheme) => StyleSheet.create({
   screen: {
-    backgroundColor: '#E8EDF2',
+    backgroundColor: theme.listBackground,
   },
   body: {
     width: '100%',
@@ -79,20 +194,67 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    backgroundColor: '#FFFFFF',
+    backgroundColor: theme.surface,
     borderRadius: 20,
     paddingHorizontal: 20,
     paddingVertical: 22,
-    shadowColor: '#101828',
+    shadowColor: theme.shadow,
     shadowOffset: { width: 0, height: 4 },
     shadowOpacity: 0.06,
     shadowRadius: 12,
     elevation: 3,
   },
+  // Label above the control instead of beside it: three segments do not
+  // fit next to a label on narrow phones.
+  stackCard: {
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    gap: 14,
+  },
   label: {
     fontSize: 17,
     fontWeight: '500',
-    color: '#141414',
+    color: theme.text,
+  },
+  hint: {
+    marginTop: 4,
+    fontSize: 13,
+    lineHeight: 18,
+    color: theme.textSecondary,
+  },
+  switchText: {
+    flex: 1,
+    paddingRight: 16,
+  },
+  segmented: {
+    flexDirection: 'row',
+    backgroundColor: theme.surfaceSecondary,
+    borderRadius: 12,
+    padding: 3,
+    gap: 3,
+  },
+  segment: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 9,
+    borderRadius: 9,
+  },
+  segmentSelected: {
+    backgroundColor: theme.surface,
+    shadowColor: theme.shadow,
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.08,
+    shadowRadius: 3,
+    elevation: 2,
+  },
+  segmentLabel: {
+    fontSize: 15,
+    fontWeight: '500',
+    color: theme.textSecondary,
+  },
+  segmentLabelSelected: {
+    color: theme.text,
   },
   chevron: {
     transform: [{ rotate: '-90deg' }],

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};
 `;