Fix/light theme issues

packages/react-native-hms/android/src/main/java/com/reactnativehmssdk/HMSDecoder.kt

@@ -487,10 +487,12 @@ object HMSDecoder {
   private fun getHmsAudioTrackSettings(hmsAudioTrackSettings: HMSAudioTrackSettings?): WritableMap {
     val settings: WritableMap = Arguments.createMap()
     if (hmsAudioTrackSettings != null) {
-      settings.putBoolean(
-        "useHardwareAcousticEchoCanceler",
-        hmsAudioTrackSettings.useHardwareAcousticEchoCanceler,
-      )
+      hmsAudioTrackSettings.useHardwareAcousticEchoCanceler?.let {
+        settings.putBoolean(
+          "useHardwareAcousticEchoCanceler",
+          it,
+        )
+      }
       settings.putString("initialState", hmsAudioTrackSettings.initialState.name)
     }
     return settings

packages/react-native-room-kit/example/android/app/build.gradle

@@ -136,8 +136,8 @@ android {
         applicationId "live.hms.rn"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 329
-        versionName "2.3.78"
+        versionCode 332
+        versionName "2.3.81"
         missingDimensionStrategy 'react-native-camera', 'general'
     }
     splits {

packages/react-native-room-kit/example/ios/RNExample.xcodeproj/project.pbxproj

@@ -486,7 +486,7 @@
 				CODE_SIGN_ENTITLEMENTS = RNExample/RNExample.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 331;
+				CURRENT_PROJECT_VERSION = 332;
 				DEVELOPMENT_TEAM = 5N85PP82A9;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = RNExample/Info.plist;
@@ -520,7 +520,7 @@
 				CODE_SIGN_ENTITLEMENTS = RNExample/RNExample.entitlements;
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 331;
+				CURRENT_PROJECT_VERSION = 332;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = 5N85PP82A9;
 				INFOPLIST_FILE = RNExample/Info.plist;
@@ -679,7 +679,7 @@
 				CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
 				CODE_SIGN_ENTITLEMENTS = RNExampleBroadcastUpload/RNExampleBroadcastUpload.entitlements;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 331;
+				CURRENT_PROJECT_VERSION = 332;
 				DEBUG_INFORMATION_FORMAT = dwarf;
 				DEVELOPMENT_TEAM = 5N85PP82A9;
 				GCC_C_LANGUAGE_STANDARD = gnu11;
@@ -721,7 +721,7 @@
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
 				COPY_PHASE_STRIP = NO;
-				CURRENT_PROJECT_VERSION = 331;
+				CURRENT_PROJECT_VERSION = 332;
 				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = 5N85PP82A9;

packages/react-native-room-kit/example/ios/RNExample/Info.plist

@@ -21,11 +21,11 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>2.3.80</string>
+	<string>2.3.81</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>331</string>
+	<string>332</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSRequiresIPhoneOS</key>

packages/react-native-room-kit/src/Icons/Leave/index.tsx

@@ -2,16 +2,22 @@ import React from 'react';
 import { Image, StyleSheet } from 'react-native';
 import type { ImageProps } from 'react-native';
 
+import { useHMSRoomStyle } from '../../hooks-util';
+
 interface LeaveIconProps extends Omit<ImageProps, 'source'> {}
 
 export const LeaveIcon: React.FC<LeaveIconProps> = ({
   style,
   ...restProps
 }) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
   return (
     <Image
       source={require('./assets/leave.png')}
-      style={[styles.icon, style]}
+      style={[styles.icon, iconStyles, style]}
       {...restProps}
     />
   );

packages/react-native-room-kit/src/Icons/WelcomeHand/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+interface WelcomeHandIconProps extends Omit<ImageProps, 'source'> {}
+
+export const WelcomeHandIcon: React.FC<WelcomeHandIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  return (
+    <Image
+      source={require('./assets/welcome-hand.png')}
+      style={[styles.icon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 64,
+    height: 64,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

packages/react-native-room-kit/src/Icons/index.ts

@@ -37,3 +37,4 @@ export * from './Hamburger';
 export * from './Stop';
 export * from './Eye';
 export * from './Search';
+export * from './WelcomeHand';

packages/react-native-room-kit/src/components/ChatAndParticipants/ChatAndParticipantsHeader.tsx

@@ -8,7 +8,6 @@ import {
   useShowChatAndParticipants,
 } from '../../hooks-util';
 import type { RootState } from '../../redux';
-import { COLORS } from '../../utils/theme';
 import { ChatBottomSheetTabs } from '../../utils/types';
 import { setActiveChatBottomSheetTab } from '../../redux/actions';
 
@@ -25,6 +24,9 @@ const _ChatAndParticipantsHeader: React.FC<WebrtcChatHeaderProps> = ({
   );
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    headerTitleWrapper: {
+      backgroundColor: theme.palette.surface_default,
+    },
     tab: {
       backgroundColor: theme.palette.surface_bright,
     },
@@ -67,7 +69,9 @@ const _ChatAndParticipantsHeader: React.FC<WebrtcChatHeaderProps> = ({
             : null}
         </Text>
       ) : (
-        <View style={styles.headerTitleWrapper}>
+        <View
+          style={[styles.headerTitleWrapper, hmsRoomStyles.headerTitleWrapper]}
+        >
           {visibleChatBottomSheetTabs.map((tab) => {
             const isActive = activeChatBottomSheetTab === tab;
 
@@ -118,7 +122,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     padding: 4,
     borderRadius: 8,
-    backgroundColor: COLORS.SURFACE.DEFAULT,
     marginRight: 16,
   },
   tab: {

packages/react-native-room-kit/src/components/HMSDangerButton.tsx

@@ -3,6 +3,7 @@ import type { StyleProp, ViewStyle } from 'react-native';
 
 import { useHMSRoomColorPalette, useHMSRoomStyleSheet } from '../hooks-util';
 import { HMSBaseButton } from './HMSBaseButton';
+import { COLORS } from '../utils/theme';
 
 export interface HMSDangerButtonProps {
   title: string;
@@ -34,7 +35,7 @@ export const HMSDangerButton: React.FC<HMSDangerButtonProps> = ({
       backgroundColor: theme.palette.alert_error_dim,
     },
     buttonText: {
-      color: theme.palette.alert_error_brighter,
+      color: COLORS.WHITE,
       fontFamily: `${typography.font_family}-SemiBold`,
     },
     disabledText: {

packages/react-native-room-kit/src/components/HMSHLSStreamLoading.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { View, ActivityIndicator, Text, StyleSheet } from 'react-native';
 import { useSelector } from 'react-redux';
 
-import { COLORS } from '../utils/theme';
+import { hexToRgbA } from '../utils/theme';
 import type { RootState } from '../redux';
 import { HMSLocalVideoView } from './HMSLocalVideoView';
 import { useHMSRoomColorPalette, useHMSRoomStyleSheet } from '../hooks-util';
@@ -22,13 +22,20 @@ export const HMSHLSStreamLoading = () => {
       color: theme.palette.on_surface_high,
       fontFamily: `${typography.font_family}-Regular`,
     },
+    backdropContainer: {
+      backgroundColor: theme.palette.background_dim
+        ? hexToRgbA(theme.palette.background_dim, 0.7)
+        : undefined,
+    },
   }));
 
   return (
     <View style={[styles.container, hmsRoomStyles.container]}>
       {isLocalVideoMuted ? null : <HMSLocalVideoView />}
 
-      <View style={styles.hlsLoaderContainer}>
+      <View
+        style={[styles.hlsLoaderContainer, hmsRoomStyles.backdropContainer]}
+      >
         <ActivityIndicator
           style={styles.hlsLoader}
           size={'large'}
@@ -52,7 +59,6 @@ const styles = StyleSheet.create({
     position: 'absolute',
     width: '100%',
     height: '100%',
-    backgroundColor: COLORS.LOADING_BACKDROP,
     zIndex: 5,
     alignItems: 'center',
     justifyContent: 'center',

packages/react-native-room-kit/src/components/HMSLiveIndicator.tsx

@@ -14,7 +14,7 @@ import {
   useShowChatAndParticipants,
 } from '../hooks-util';
 import { EyeIcon } from '../Icons';
-import { hexToRgbA } from '../utils/theme';
+import { COLORS, hexToRgbA } from '../utils/theme';
 import type { RootState } from '../redux';
 
 const _HMSLiveIndicator = () => {
@@ -31,7 +31,7 @@ const _HMSLiveIndicator = () => {
       backgroundColor: theme.palette.alert_error_default,
     },
     liveText: {
-      color: theme.palette.alert_error_brighter,
+      color: COLORS.WHITE,
       fontFamily: `${typograhy.font_family}-SemiBold`,
     },
     viewers: {

packages/react-native-room-kit/src/components/HMSManageLeave.tsx

@@ -10,6 +10,7 @@ import { PressableIcon } from './PressableIcon';
 import { BottomSheet } from './BottomSheet';
 import { StopIcon } from '../Icons';
 import { EndRoomModalContent } from './EndRoomModalContent';
+import { COLORS } from '../utils/theme';
 
 export const HMSManageLeave: React.FC<LeaveButtonProps> = (props) => {
   // TODO: read current meeting joined state
@@ -93,7 +94,7 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
       borderColor: theme.palette.alert_error_default,
     },
     icon: {
-      tintColor: theme.palette.alert_error_brighter,
+      tintColor: COLORS.WHITE,
     },
   }));
 

packages/react-native-room-kit/src/components/HMSPreviewHLSLiveIndicator.tsx

@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux';
 
 import type { RootState } from '../redux';
 import { useHMSRoomStyleSheet } from '../hooks-util';
+import { COLORS } from '../utils/theme';
 
 export const HMSPreviewHLSLiveIndicator = () => {
   const isHLSStreaming = useSelector(
@@ -15,10 +16,10 @@ export const HMSPreviewHLSLiveIndicator = () => {
       backgroundColor: theme.palette.alert_error_default,
     },
     circle: {
-      backgroundColor: theme.palette.on_surface_high,
+      backgroundColor: COLORS.WHITE,
     },
     text: {
-      color: theme.palette.on_surface_high,
+      color: COLORS.WHITE,
       fontFamily: `${typography.font_family}-SemiBold`,
     },
   }));

packages/react-native-room-kit/src/components/HMSPreviewJoinButton.tsx

@@ -6,7 +6,7 @@ import type { RootState } from '../redux';
 import { RadioIcon } from '../Icons';
 import {
   useHMSLayoutConfig,
-  useHMSRoomStyle,
+  useHMSRoomStyleSheet,
   useShouldGoLive,
 } from '../hooks-util';
 import { HMSPrimaryButton } from './HMSPrimaryButton';
@@ -36,8 +36,13 @@ export const HMSPreviewJoinButton: React.FC<HMSPreviewJoinButtonProps> = ({
 
   const shouldGoLive = useShouldGoLive();
 
-  const liveIconStyles = useHMSRoomStyle((theme) => ({
-    tintColor: theme.palette.on_primary_low,
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    disabledLiveIcon: {
+      tintColor: theme.palette.on_primary_low,
+    },
+    activeLiveIcon: {
+      tintColor: theme.palette.on_primary_high,
+    },
   }));
 
   const disabledJoin = userNameInvalid || loading;
@@ -54,7 +59,13 @@ export const HMSPreviewJoinButton: React.FC<HMSPreviewJoinButtonProps> = ({
       disabled={disabledJoin}
       leftComponent={
         shouldGoLive ? (
-          <RadioIcon style={disabledJoin ? liveIconStyles : null} />
+          <RadioIcon
+            style={
+              disabledJoin
+                ? hmsRoomStyles.disabledLiveIcon
+                : hmsRoomStyles.activeLiveIcon
+            }
+          />
         ) : null
       }
       style={styles.button}

packages/react-native-room-kit/src/components/HMSPreviewTile.tsx

@@ -26,7 +26,7 @@ export const HMSPreviewTile: React.FC = () => {
       backgroundColor: COLORS.EXTENDED.PURPLE,
     },
     avatarText: {
-      color: theme.palette.on_surface_high,
+      color: COLORS.WHITE,
       fontFamily: `${typography.font_family}-SemiBold`,
     },
   }));

packages/react-native-room-kit/src/components/HMSTextInput.tsx

@@ -52,7 +52,7 @@ export const HMSTextInput: React.FC<HMSTextInputProps> = ({
   const handleInputBlur = () => setInputFocused(false);
 
   const {
-    on_surface_low: onSurfaceLowColor,
+    on_surface_medium: onSurfaceMediumColor,
     on_surface_high: onSurfaceHighColor,
   } = useHMSRoomColorPalette();
 
@@ -91,7 +91,7 @@ export const HMSTextInput: React.FC<HMSTextInputProps> = ({
 
     // ICON STYLES
     sendIcon: {
-      tintColor: theme.palette.on_surface_low,
+      tintColor: theme.palette.on_surface_medium,
     },
     focusedSendIcon: {
       tintColor: theme.palette.on_surface_high,
@@ -123,7 +123,7 @@ export const HMSTextInput: React.FC<HMSTextInputProps> = ({
       autoCapitalize={resetProps.autoCapitalize ?? 'words'}
       autoCompleteType={resetProps.autoCompleteType ?? 'name'}
       placeholderTextColor={
-        resetProps.placeholderTextColor ?? onSurfaceLowColor
+        resetProps.placeholderTextColor ?? onSurfaceMediumColor
       }
       selectionColor={resetProps.selectionColor ?? onSurfaceHighColor}
       onFocus={resetProps.onFocus ?? handleInputFocus}

packages/react-native-room-kit/src/components/Participants/ParticipantsSeachInput.tsx

@@ -13,7 +13,7 @@ type ParticipantsSearchInputProps = {
 export const ParticipantsSearchInput: React.FC<
   ParticipantsSearchInputProps
 > = ({ searchText, setSearchText }) => {
-  const { on_surface_low: onSurfaceLowColor } = useHMSRoomColorPalette();
+  const { on_surface_medium: onSurfaceMediumColor } = useHMSRoomColorPalette();
 
   const textInputStyle = useHMSRoomStyle((theme) => ({
     backgroundColor: theme.palette.surface_default,
@@ -28,7 +28,7 @@ export const ParticipantsSearchInput: React.FC<
       style={styles.input}
       containerStyle={[styles.textInputContainer, textInputStyle]}
       focusedContainerStyle={[styles.focusedTextInputContainer, textInputStyle]}
-      placeholderTextColor={onSurfaceLowColor}
+      placeholderTextColor={onSurfaceMediumColor}
       leftIcon={<SearchIcon style={styles.searchIcon} />}
     />
   );

packages/react-native-room-kit/src/components/PeerVideoTile/AvatarView.tsx

@@ -33,7 +33,7 @@ export const _AvatarView: React.FC<AvatarViewProps> = ({
       backgroundColor: COLORS.EXTENDED.PURPLE,
     },
     avatarText: {
-      color: theme.palette.on_surface_high,
+      color: COLORS.WHITE,
       fontFamily: `${typography.font_family}-SemiBold`,
     },
   }));