chore: remove STATUS_COLORS

app/containers/RoomTypeIcon/OmnichannelRoomIcon.tsx

@@ -2,10 +2,10 @@ import React, { useState } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { SvgUri } from 'react-native-svg';
 
-import { OmnichannelSourceType, IOmnichannelSource } from '../../definitions';
-import { STATUS_COLORS } from '../../lib/constants';
+import { OmnichannelSourceType, IOmnichannelSource, TUserStatus } from '../../definitions';
 import { useAppSelector } from '../../lib/hooks';
 import { CustomIcon, TIconsName } from '../CustomIcon';
+import { useUserStatusColor } from '../../lib/hooks/useUserStatusColor';
 
 interface IIconMap {
 	[key: string]: TIconsName;
@@ -24,7 +24,7 @@ interface IOmnichannelRoomIconProps {
 	size: number;
 	type: string;
 	style?: StyleProp<ViewStyle>;
-	status?: string;
+	status?: TUserStatus;
 	sourceType?: IOmnichannelSource;
 }
 
@@ -33,15 +33,9 @@ export const OmnichannelRoomIcon = ({ size, style, sourceType, status }: IOmnich
 	const [svgError, setSvgError] = useState(false);
 	const baseUrl = useAppSelector(state => state.server?.server);
 	const connected = useAppSelector(state => state.meteor?.connected);
+	const userStatusColor = useUserStatusColor(status || 'offline');
 
-	const customIcon = (
-		<CustomIcon
-			name={iconMap[sourceType?.type || 'other']}
-			size={size}
-			style={style}
-			color={STATUS_COLORS[status || 'offline']}
-		/>
-	);
+	const customIcon = <CustomIcon name={iconMap[sourceType?.type || 'other']} size={size} style={style} color={userStatusColor} />;
 
 	if (!svgError && sourceType?.type === OmnichannelSourceType.APP && sourceType.id && sourceType.sidebarIcon && connected) {
 		return (
@@ -49,7 +43,7 @@ export const OmnichannelRoomIcon = ({ size, style, sourceType, status }: IOmnich
 				<SvgUri
 					height={size}
 					width={size}
-					color={STATUS_COLORS[status || 'offline']}
+					color={userStatusColor}
 					uri={`${baseUrl}/api/apps/public/${sourceType.id}/get-sidebar-icon?icon=${sourceType.sidebarIcon}`}
 					style={style}
 					onError={() => setSvgError(true)}

app/containers/Status/Status.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 import { StyleProp, TextStyle } from 'react-native';
 
+import { useTheme } from '../../theme';
 import { CustomIcon, IconSet, TIconsName } from '../CustomIcon';
-import { STATUS_COLORS } from '../../lib/constants';
 import { IStatusComponentProps } from './definition';
+import { useUserStatusColor } from '../../lib/hooks/useUserStatusColor';
 
 const Status = React.memo(({ style, status = 'offline', size = 32, ...props }: IStatusComponentProps) => {
+	const { colors } = useTheme();
+	const userStatusColor = useUserStatusColor(status);
+
 	const name: TIconsName = `status-${status}`;
 	const isNameValid = IconSet.hasIcon(name);
 	const iconName = isNameValid ? name : 'status-offline';
@@ -20,11 +24,11 @@ const Status = React.memo(({ style, status = 'offline', size = 32, ...props }: I
 
 	return (
 		<CustomIcon
+			{...props}
 			style={calculatedStyle}
 			size={size}
 			name={iconName}
-			color={STATUS_COLORS[status] ?? STATUS_COLORS.offline}
-			{...props}
+			color={userStatusColor ?? colors.userPresenceOffline}
 		/>
 	);
 });

app/containers/Status/definition.ts

@@ -1,8 +1,8 @@
-import { TextProps } from 'react-native';
+import type { IconProps } from 'react-native-vector-icons/Icon';
 
 import { TUserStatus } from '../../definitions';
 
-export interface IStatus extends TextProps {
+export interface IStatus extends IconProps {
 	id: string;
 	size: number;
 	status?: TUserStatus | null;

app/lib/constants/colors.ts

@@ -1,14 +1,5 @@
 export const BACKGROUND_PUSH_COLOR = '#F5455C';
 
-export const STATUS_COLORS: any = {
-	online: '#2de0a5',
-	busy: '#f5455c',
-	away: '#ffd21f',
-	offline: '#cbced1',
-	loading: '#9ea2a8',
-	disabled: '#F38C39'
-};
-
 export const SWITCH_TRACK_COLOR = {
 	false: '#f5455c',
 	true: '#2de0a5'
@@ -114,6 +105,7 @@ const newColors = {
 	buttonFontSuccess: '#FFFFFF',
 	buttonSuccessDisabled: '#FFFFFF'
 };
+
 const newColorsDark = {
 	surfaceLight: '#262931',
 	surfaceTint: '#1F2329',

app/lib/hooks/useUserStatusColor.ts

@@ -0,0 +1,11 @@
+import { capitalize } from 'lodash';
+
+import { useTheme } from '../../theme';
+import type { TColors } from '../../theme';
+import type { TUserStatus } from '../../definitions';
+
+export const useUserStatusColor = (status: TUserStatus): keyof TColors => {
+	const { colors } = useTheme();
+	const key = `userPresence${capitalize(status)}` as keyof TColors;
+	return colors[key] as keyof TColors;
+};

app/views/RoomsListView/index.tsx

@@ -44,7 +44,7 @@ import {
 	isTablet,
 	compareServerVersion
 } from '../../lib/methods/helpers';
-import { E2E_BANNER_TYPE, DisplayMode, SortBy, MAX_SIDEBAR_WIDTH, themes, STATUS_COLORS, colors } from '../../lib/constants';
+import { E2E_BANNER_TYPE, DisplayMode, SortBy, MAX_SIDEBAR_WIDTH, themes, colors } from '../../lib/constants';
 import { Services } from '../../lib/services';
 import { SupportedVersionsExpired } from '../../containers/SupportedVersions';
 
@@ -436,7 +436,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 				return <HeaderButton.BadgeWarn color={colors[theme].dangerColor} />;
 			}
 			if (notificationPresenceCap) {
-				return <HeaderButton.BadgeWarn color={STATUS_COLORS.disabled} />;
+				return <HeaderButton.BadgeWarn color={colors[theme].userPresenceDisabled} />;
 			}
 			return null;
 		};

app/views/SidebarView/index.tsx

@@ -13,7 +13,7 @@ import I18n from '../../i18n';
 import scrollPersistTaps from '../../lib/methods/helpers/scrollPersistTaps';
 import userPreferences from '../../lib/methods/userPreferences';
 import { CustomIcon } from '../../containers/CustomIcon';
-import { NOTIFICATION_PRESENCE_CAP, STATUS_COLORS, themes } from '../../lib/constants';
+import { NOTIFICATION_PRESENCE_CAP, themes } from '../../lib/constants';
 import { TSupportedThemes, withTheme } from '../../theme';
 import { getUserSelector } from '../../selectors/login';
 import SafeAreaView from '../../containers/SafeAreaView';
@@ -286,7 +286,7 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 
 		let right: React.ReactElement | undefined = <CustomIcon name='edit' size={20} color={themes[theme!].fontTitlesLabels} />;
 		if (notificationPresenceCap) {
-			right = <View style={[styles.customStatusDisabled, { backgroundColor: STATUS_COLORS.disabled }]} />;
+			right = <View style={[styles.customStatusDisabled, { backgroundColor: themes[theme!].userPresenceDisabled }]} />;
 		} else if (Presence_broadcast_disabled) {
 			right = undefined;
 		}