Merge branch 'develop' into chore.upgrade-rn-0.73.6

RocketChat · Apr 25, 2024 · d3ea621 · d3ea621
2 parents fa527aa + 7c44822
commit d3ea621
Show file tree

Hide file tree

Showing 292 changed files with 2,654 additions and 1,749 deletions.
diff --git a/app/containers/ActionSheet/ActionSheet.tsx b/app/containers/ActionSheet/ActionSheet.tsx
@@ -161,7 +161,7 @@ const ActionSheet = React.memo(
 						handleComponent={renderHandle}
 						enablePanDownToClose
 						style={{ ...styles.container, ...bottomSheet }}
-						backgroundStyle={{ backgroundColor: colors.focusedBackground }}
+						backgroundStyle={{ backgroundColor: colors.surfaceLight }}
 						onChange={index => index === -1 && onClose()}
 						// We need this to allow horizontal swipe gesture inside the bottom sheet like in reaction picker
 						enableContentPanningGesture={data?.enableContentPanningGesture ?? true}

diff --git a/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx b/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx
@@ -48,13 +48,13 @@ const FooterButtons = ({
 	return (
 		<View style={styles.footerButtonsContainer}>
 			<Button
-				style={[styles.buttonSeparator, { flex: 1, backgroundColor: cancelBackgroundColor || colors.cancelButton }]}
+				style={[styles.buttonSeparator, { flex: 1, backgroundColor: cancelBackgroundColor || colors.buttonBackgroundSecondaryDefault }]}
 				color={colors.backdropColor}
 				title={cancelTitle}
 				onPress={cancelAction}
 			/>
 			<Button
-				style={{ flex: 1, backgroundColor: confirmBackgroundColor || colors.dangerColor }}
+				style={{ flex: 1, backgroundColor: confirmBackgroundColor || colors.buttonBackgroundDangerDefault }}
 				title={confirmTitle}
 				onPress={confirmAction}
 				disabled={disabled}
@@ -100,12 +100,12 @@ const ActionSheetContentWithInputAndSubmit = ({
 		<View style={sharedStyles.containerScrollView} testID='action-sheet-content-with-input-and-submit'>
 			<>
 				<View style={styles.titleContainer}>
-					{iconName ? <CustomIcon name={iconName} size={32} color={iconColor || colors.dangerColor} /> : null}
-					<Text style={[styles.titleContainerText, { color: colors.passcodePrimary, paddingLeft: iconName ? 16 : 0 }]}>
+					{iconName ? <CustomIcon name={iconName} size={32} color={iconColor || colors.buttonBackgroundDangerDefault} /> : null}
+					<Text style={[styles.titleContainerText, { color: colors.fontDefault, paddingLeft: iconName ? 16 : 0 }]}>
 						{title}
 					</Text>
 				</View>
-				<Text style={[styles.subtitleText, { color: colors.titleText }]}>{description}</Text>
+				<Text style={[styles.subtitleText, { color: colors.fontTitlesLabels }]}>{description}</Text>
 				{customText}
 			</>
 			{showInput ? (
@@ -126,7 +126,7 @@ const ActionSheetContentWithInputAndSubmit = ({
 				/>
 			) : null}
 			<FooterButtons
-				confirmBackgroundColor={confirmBackgroundColor || colors.actionTintColor}
+				confirmBackgroundColor={confirmBackgroundColor || colors.fontHint}
 				cancelAction={onCancel || hideActionSheet}
 				confirmAction={() => onSubmit(inputValue)}
 				cancelTitle={i18n.t('Cancel')}

diff --git a/app/containers/ActionSheet/BottomSheetContent.tsx b/app/containers/ActionSheet/BottomSheetContent.tsx
@@ -27,9 +27,10 @@ const BottomSheetContent = React.memo(({ options, hasCancel, hide, children, onL
 		hasCancel ? (
 			<Touch
 				onPress={hide}
-				style={[styles.button, { backgroundColor: colors.auxiliaryBackground }]}
-				accessibilityLabel={I18n.t('Cancel')}>
-				<Text style={[styles.text, { color: colors.bodyText }]}>{I18n.t('Cancel')}</Text>
+				style={[styles.button, { backgroundColor: colors.surfaceHover }]}
+				accessibilityLabel={I18n.t('Cancel')}
+			>
+				<Text style={[styles.text, { color: colors.fontDefault }]}>{I18n.t('Cancel')}</Text>
 			</Touch>
 		) : null;
 
@@ -44,10 +45,10 @@ const BottomSheetContent = React.memo(({ options, hasCancel, hide, children, onL
 				keyExtractor={item => item.title}
 				bounces={false}
 				renderItem={renderItem}
-				style={{ backgroundColor: colors.focusedBackground }}
+				style={{ backgroundColor: colors.strokeExtraDark }}
 				keyboardDismissMode='interactive'
 				indicatorStyle='black'
-				contentContainerStyle={{ paddingBottom: bottom }}
+				contentContainerStyle={{ paddingBottom: bottom, backgroundColor: colors.surfaceLight }}
 				ItemSeparatorComponent={List.Separator}
 				ListHeaderComponent={List.Separator}
 				ListFooterComponent={renderFooter}

diff --git a/app/containers/ActionSheet/Handle.tsx b/app/containers/ActionSheet/Handle.tsx
@@ -9,7 +9,7 @@ export const Handle = React.memo(() => {
 	const { theme } = useTheme();
 	return (
 		<View style={styles.handle} testID='action-sheet-handle'>
-			<View style={[styles.handleIndicator, { backgroundColor: themes[theme].auxiliaryText }]} />
+			<View style={[styles.handleIndicator, { backgroundColor: themes[theme].fontSecondaryInfo }]} />
 		</View>
 	);
 });
diff --git a/app/containers/ActionSheet/Item.tsx b/app/containers/ActionSheet/Item.tsx
@@ -27,19 +27,19 @@ export const Item = React.memo(({ item, hide }: IActionSheetItem) => {
 		}
 	};
 
-	let textColor = colors.bodyText;
+	let color = colors.fontDefault;
 	if (item.danger) {
-		textColor = colors.dangerColor;
+		color = colors.fontDanger;
 	}
 	if (!enabled) {
-		textColor = colors.fontDisabled;
+		color = colors.fontDisabled;
 	}
 
 	return (
-		<Touch onPress={onPress} style={[styles.item, { backgroundColor: colors.focusedBackground }]} testID={item.testID}>
-			{item.icon ? <CustomIcon name={item.icon} size={20} color={textColor} /> : null}
+		<Touch onPress={onPress} style={[styles.item, { backgroundColor: colors.surfaceLight }]} testID={item.testID}>
+			{item.icon ? <CustomIcon name={item.icon} size={20} color={color} /> : null}
 			<View style={styles.titleContainer}>
-				<Text numberOfLines={1} style={[styles.title, { color: textColor, marginLeft: item.icon ? 16 : 0 }]}>
+				<Text numberOfLines={1} style={[styles.title, { color, marginLeft: item.icon ? 16 : 0 }]}>
 					{item.title}
 				</Text>
 			</View>

diff --git a/app/containers/ActivityIndicator.tsx b/app/containers/ActivityIndicator.tsx
@@ -27,7 +27,7 @@ const styles = StyleSheet.create({
 const RCActivityIndicator = ({ absolute, ...props }: IActivityIndicator): React.ReactElement => {
 	const { theme } = useTheme();
 	return (
-		<ActivityIndicator style={[styles.indicator, absolute && styles.absolute]} color={themes[theme].auxiliaryText} {...props} />
+		<ActivityIndicator style={[styles.indicator, absolute && styles.absolute]} color={themes[theme].fontSecondaryInfo} {...props} />
 	);
 };
 

diff --git a/app/containers/AppVersion.tsx b/app/containers/AppVersion.tsx
@@ -23,7 +23,7 @@ const styles = StyleSheet.create({
 
 const AppVersion = React.memo(({ theme }: { theme: TSupportedThemes }) => (
 	<View style={styles.container}>
-		<Text style={[styles.text, { color: themes[theme].auxiliaryText }]}>
+		<Text style={[styles.text, { color: themes[theme].fontSecondaryInfo }]}>
 			{I18n.t('Version_no', { version: '' })}
 			<Text style={styles.bold}>{getReadableVersion}</Text>
 		</Text>

diff --git a/app/containers/AudioPlayer/PlayButton.tsx b/app/containers/AudioPlayer/PlayButton.tsx
@@ -31,10 +31,10 @@ const Icon = ({ audioState, disabled }: { audioState: TAudioState; disabled: boo
 		customIconName = 'play-shape-filled';
 	}
 
-	return <CustomIcon name={customIconName} size={24} color={disabled ? colors.tintDisabled : colors.buttonFontPrimary} />;
+	return <CustomIcon name={customIconName} size={24} color={disabled ? colors.buttonBackgroundPrimaryDisabled : colors.buttonFontPrimary} />;
 };
 
-const PlayButton = ({ onPress, disabled = false, audioState }: IButton) => {
+const PlayButton = ({ onPress, disabled = false, audioState }: IButton): React.ReactElement => {
 	const { colors } = useTheme();
 
 	return (

diff --git a/app/containers/AudioPlayer/Seek.tsx b/app/containers/AudioPlayer/Seek.tsx
@@ -102,7 +102,7 @@ const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) =>
 		} as TextInputProps;
 	}, [timeLabel, duration, currentTime]);
 
-	const thumbColor = loaded ? colors.buttonBackgroundPrimaryDefault : colors.tintDisabled;
+	const thumbColor = loaded ? colors.buttonBackgroundPrimaryDefault : colors.buttonBackgroundPrimaryDisabled;
 
 	// TouchableNativeFeedback is avoiding do a long press message when seeking the audio
 	return (

diff --git a/app/containers/Avatar/AvatarWithEdit.tsx b/app/containers/Avatar/AvatarWithEdit.tsx
@@ -69,12 +69,11 @@ const AvatarWithEdit = ({
 				<Button
 					title={I18n.t('Edit')}
 					type='secondary'
-					backgroundColor={colors.editAndUploadButtonAvatar}
 					onPress={handleEdit}
 					testID='avatar-edit-button'
 					style={styles.editAvatarButton}
 					styleText={styles.textButton}
-					color={colors.titleText}
+					color={colors.fontTitlesLabels}
 					hitSlop={BUTTON_HIT_SLOP}
 				/>
 			) : null}

diff --git a/app/containers/BackgroundContainer/index.tsx b/app/containers/BackgroundContainer/index.tsx
@@ -36,8 +36,8 @@ const BackgroundContainer = ({ text, loading }: IBackgroundContainer): React.Rea
 	return (
 		<View style={styles.container}>
 			<ImageBackground source={{ uri: `message_empty_${theme}` }} style={styles.image} />
-			{text && !loading ? <Text style={[styles.text, { color: themes[theme].auxiliaryTintColor }]}>{text}</Text> : null}
-			{loading ? <ActivityIndicator style={styles.text} color={themes[theme].auxiliaryTintColor} /> : null}
+			{text && !loading ? <Text style={[styles.text, { color: themes[theme].fontHint }]}>{text}</Text> : null}
+			{loading ? <ActivityIndicator style={styles.text} color={themes[theme].fontHint} /> : null}
 		</View>
 	);
 };

diff --git a/app/containers/Button/index.tsx b/app/containers/Button/index.tsx
@@ -9,7 +9,7 @@ import ActivityIndicator from '../ActivityIndicator';
 interface IButtonProps extends PlatformTouchableProps {
 	title: string;
 	onPress: () => void;
-	type?: string;
+	type?: string; // primary | secondary
 	backgroundColor?: string;
 	loading?: boolean;
 	color?: string;
@@ -34,10 +34,10 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Button = ({
+const Button: React.FC<IButtonProps> = ({
 	type = 'primary',
-	disabled = false,
-	loading = false,
+	disabled,
+	loading,
 	fontSize = 16,
 	title,
 	onPress,
@@ -46,32 +46,29 @@ const Button = ({
 	style,
 	styleText,
 	...otherProps
-}: IButtonProps): React.ReactElement => {
+}) => {
 	const { colors } = useTheme();
 	const isPrimary = type === 'primary';
+	const isDisabled = disabled || loading;
 
-	let textColor = isPrimary ? colors.buttonText : colors.bodyText;
-	if (color) {
-		textColor = color;
-	}
+	const defaultBackgroundColor = isPrimary ? colors.buttonBackgroundPrimaryDefault : colors.buttonBackgroundSecondaryDefault;
+	const disabledBackgroundColor = isPrimary ? colors.buttonBackgroundPrimaryDisabled : colors.buttonBackgroundSecondaryDisabled;
+
+	const resolvedBackgroundColor = backgroundColor || defaultBackgroundColor;
+	const resolvedTextColor = color || (isPrimary ? colors.fontWhite : colors.fontDefault);
+
+	const containerStyle = [
+		styles.container,
+		{ backgroundColor: isDisabled ? disabledBackgroundColor : resolvedBackgroundColor },
+		isDisabled && backgroundColor ? styles.disabled : {},
+		style
+	];
+
+	const textStyle = [styles.text, { color: isDisabled ? colors.fontDisabled : resolvedTextColor, fontSize }, styleText];
 
 	return (
-		<Touchable
-			onPress={onPress}
-			disabled={disabled || loading}
-			style={[
-				styles.container,
-				backgroundColor ? { backgroundColor } : { backgroundColor: isPrimary ? colors.actionTintColor : colors.backgroundColor },
-				disabled && styles.disabled,
-				style
-			]}
-			accessibilityLabel={title}
-			{...otherProps}>
-			{loading ? (
-				<ActivityIndicator color={textColor} />
-			) : (
-				<Text style={[styles.text, { color: textColor, fontSize }, styleText]}>{title}</Text>
-			)}
+		<Touchable onPress={onPress} disabled={isDisabled} style={containerStyle} accessibilityLabel={title} {...otherProps}>
+			{loading ? <ActivityIndicator color={resolvedTextColor} /> : <Text style={textStyle}>{title}</Text>}
 		</Touchable>
 	);
 };

diff --git a/app/containers/CallHeader.tsx b/app/containers/CallHeader.tsx
@@ -30,11 +30,11 @@ export const CallHeader = ({ mic, cam, setCam, setMic, title, avatar, uid, name,
 
 	const handleColors = (enabled: boolean) => {
 		if (calling) {
-			if (enabled) return { button: colors.conferenceCallCallBackButton, icon: colors.gray300 };
-			return { button: 'transparent', icon: colors.gray100 };
+			if (enabled) return { button: colors.buttonBackgroundSecondaryDisabled, icon: colors.strokeExtraDark };
+			return { button: 'transparent', icon: colors.strokeLight };
 		}
-		if (enabled) return { button: colors.conferenceCallEnabledIconBackground, icon: colors.conferenceCallEnabledIcon };
-		return { button: 'transparent', icon: colors.conferenceCallDisabledIcon };
+		if (enabled) return { button: colors.strokeHighlight, icon: colors.surfaceLight };
+		return { button: 'transparent', icon: colors.strokeExtraDark };
 	};
 
 	return (
@@ -79,7 +79,7 @@ function useStyle() {
 		actionSheetHeaderTitle: {
 			fontSize: 14,
 			...sharedStyles.textBold,
-			color: colors.n900
+			color: colors.fontDefault
 		},
 		actionSheetHeaderButtons: { flex: 1, alignItems: 'center', flexDirection: 'row', justifyContent: 'flex-end' },
 		iconCallContainer: {
@@ -95,7 +95,7 @@ function useStyle() {
 		actionSheetUsername: {
 			fontSize: 16,
 			...sharedStyles.textBold,
-			color: colors.passcodePrimary,
+			color: colors.fontDefault,
 			flexShrink: 1
 		},
 		rowContainer: { flexDirection: 'row' },

diff --git a/app/containers/Check.tsx b/app/containers/Check.tsx
@@ -15,7 +15,7 @@ const styles = StyleSheet.create({
 
 const Check = React.memo(() => {
 	const { theme } = useTheme();
-	return <CustomIcon style={styles.icon} color={themes[theme].tintColor} size={22} name='check' />;
+	return <CustomIcon style={styles.icon} color={themes[theme].badgeBackgroundLevel2} size={22} name='check' />;
 });
 
 export default Check;
diff --git a/app/containers/Chip/index.tsx b/app/containers/Chip/index.tsx
@@ -49,23 +49,24 @@ const Chip = ({ avatar, text, onPress, testID, style }: IChip) => {
 			style={({ pressed }) => [
 				styles.pressable,
 				{
-					backgroundColor: pressed ? colors.bannerBackground : colors.auxiliaryBackground
+					backgroundColor: pressed ? colors.surfaceNeutral : colors.surfaceHover
 				},
 				style
 			]}
 			disabled={!onPress}
 			onPress={() => onPress?.()}
 			android_ripple={{
-				color: colors.bannerBackground
-			}}>
+				color: colors.surfaceNeutral
+			}}
+		>
 			<View style={styles.container}>
 				{avatar ? <Avatar text={avatar} size={28} style={styles.avatar} /> : null}
 				<View style={styles.textContainer}>
-					<Text style={[styles.name, { color: colors.bodyText }]} numberOfLines={1}>
+					<Text style={[styles.name, { color: colors.fontDefault }]} numberOfLines={1}>
 						{text}
 					</Text>
 				</View>
-				{onPress ? <CustomIcon name='close' size={16} color={colors.auxiliaryTintColor} /> : null}
+				{onPress ? <CustomIcon name='close' size={16} /> : null}
 			</View>
 		</Pressable>
 	);

diff --git a/app/containers/CollapsibleText/index.tsx b/app/containers/CollapsibleText/index.tsx
@@ -39,10 +39,10 @@ const CollapsibleText = ({ msg, style = [], linesToTruncate = 1 }: ICollapsibleT
 	if (truncatedText && showTruncated) {
 		return (
 			<Text testID={`collapsible-text-truncated-${m}`}>
-				<Text accessibilityLabel={truncatedText} style={[styles.text, { color: colors.bodyText }, ...style]}>
+				<Text accessibilityLabel={truncatedText} style={[styles.text, { color: colors.fontDefault }, ...style]}>
 					{`${truncatedText}... `}
 				</Text>
-				<Text onPress={() => setShowTruncated(false)} style={[styles.textInfo, { color: colors.actionTintColor }]}>
+				<Text onPress={() => setShowTruncated(false)} style={[styles.textInfo, { color: colors.fontHint }]}>
 					{I18n.t('Show_more')}
 				</Text>
 			</Text>
@@ -52,7 +52,7 @@ const CollapsibleText = ({ msg, style = [], linesToTruncate = 1 }: ICollapsibleT
 	return (
 		<Text
 			accessibilityLabel={m}
-			style={[styles.text, { color: colors.bodyText, height: !showTruncated ? undefined : 0 }, ...style]}
+			style={[styles.text, { color: colors.fontDefault, height: !showTruncated ? undefined : 0 }, ...style]}
 			testID={`collapsible-text-${m}`}
 			onTextLayout={event => {
 				const { lines } = event.nativeEvent;
@@ -67,13 +67,15 @@ const CollapsibleText = ({ msg, style = [], linesToTruncate = 1 }: ICollapsibleT
 				} else {
 					setShowTruncated(false);
 				}
-			}}>
+			}}
+		>
 			{m}
 			{truncatedText ? (
 				<Text
 					testID='collapsible-text-show-less'
 					onPress={() => setShowTruncated(true)}
-					style={[styles.textInfo, { color: colors.actionTintColor }]}>
+					style={[styles.textInfo, { color: colors.fontHint }]}
+				>
 					{` ${I18n.t('Show_less')}`}
 				</Text>
 			) : null}

diff --git a/app/containers/CustomIcon/index.tsx b/app/containers/CustomIcon/index.tsx
@@ -1,23 +1,25 @@
 import React from 'react';
 import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
-import { TextProps } from 'react-native';
+import type { IconProps } from 'react-native-vector-icons/Icon';
 
 import { mappedIcons } from './mappedIcons';
+import { useTheme } from '../../theme';
 
 const icoMoonConfig = require('./selection.json');
 
 export const IconSet = createIconSetFromIcoMoon(icoMoonConfig, 'custom', 'custom.ttf');
 
 export type TIconsName = keyof typeof mappedIcons;
 
-export interface ICustomIcon extends TextProps {
+export interface ICustomIcon extends IconProps {
 	name: TIconsName;
 	size: number;
-	color: string;
+	color?: string;
 }
 
-const CustomIcon = ({ name, size, color, style, ...props }: ICustomIcon) => (
-	// @ts-ignore TODO remove this after update @types/react-native to 0.65.0
-	<IconSet name={name} size={size} color={color} style={[{ lineHeight: size }, style]} {...props} />
-);
+const CustomIcon = ({ name, size, color, style, ...props }: ICustomIcon): React.ReactElement => {
+	const { colors } = useTheme();
+	return <IconSet name={name} size={size} color={color || colors.fontDefault} style={[{ lineHeight: size }, style]} {...props} />;
+};
+
 export { CustomIcon };