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

app/containers/ImageViewer/ImageViewer.tsx

@@ -114,7 +114,7 @@ export const ImageViewer = ({ uri = '', imageComponentType, width, height, ...pr
 	const { colors } = useTheme();
 
 	return (
-		<View style={[styles.flex, { width, height, backgroundColor: colors.surfaceRoom }]}>
+		<View style={[styles.flex, { width, height, backgroundColor: colors.surfaceNeutral }]}>
 			<GestureDetector gesture={gesture}>
 				<Animated.View onLayout={onLayout} style={[styles.flex, style]}>
 					<Component

app/containers/MessageActions/index.tsx

@@ -131,7 +131,7 @@ const MessageActions = React.memo(
 				}
 				const editOwn = isOwn(message);
 
-				if (!(permissions.hasEditPermission || (Message_AllowEditing && editOwn))) {
+				if (!(permissions.hasEditPermission || (Message_AllowEditing !== false && editOwn))) {
 					return false;
 				}
 				const blockEditInMinutes = Message_AllowEditing_BlockEditInMinutes;

app/containers/UIKit/VideoConferenceBlock/components/styles.ts

@@ -6,7 +6,7 @@ import sharedStyles from '../../../../views/Styles';
 export default function useStyle() {
 	const { colors } = useTheme();
 	const style = StyleSheet.create({
-		container: { height: 108, flex: 1, borderWidth: 1, borderRadius: 4, marginTop: 8, borderColor: colors.surfaceHover },
+		container: { height: 108, flex: 1, borderWidth: 1, borderRadius: 4, marginTop: 8, borderColor: colors.surfaceNeutral },
 		callInfoContainer: { flex: 1, alignItems: 'center', paddingLeft: 16, flexDirection: 'row' },
 		infoContainerText: {
 			fontSize: 12,
@@ -23,7 +23,7 @@ export default function useStyle() {
 		},
 		callToActionContainer: {
 			height: 48,
-			backgroundColor: colors.surfaceHover,
+			backgroundColor: colors.surfaceNeutral,
 			flexDirection: 'row',
 			alignItems: 'center',
 			paddingLeft: 16

app/containers/message/Components/OverlayComponent/index.tsx

@@ -19,7 +19,7 @@ const OverlayComponent = ({
 
 	return (
 		<>
-			<View style={[style, styles.blurView, { backgroundColor: colors.surfaceDark }]} />
+			<View style={[style, styles.blurView, { backgroundColor: colors.surfaceNeutral }]} />
 			<View style={[style, styles.blurIndicator]}>
 				{loading ? <RCActivityIndicator size={54} /> : <CustomIcon name={iconName} size={54} />}
 			</View>

app/containers/message/styles.ts

@@ -103,7 +103,8 @@ export default StyleSheet.create({
 		minHeight: isTablet ? 300 : 200,
 		borderRadius: 4,
 		borderWidth: 1,
-		overflow: 'hidden'
+		overflow: 'hidden',
+		borderColor: 'rgba(0, 0, 0, 0.1)'
 	},
 	imageBlurContainer: {
 		height: '100%'

app/lib/services/connect.ts

@@ -9,7 +9,7 @@ import protectedFunction from '../methods/helpers/protectedFunction';
 import database from '../database';
 import { twoFactor } from './twoFactor';
 import { store } from '../store/auxStore';
-import { loginRequest, setLoginServices, setUser } from '../../actions/login';
+import { loginRequest, logout, setLoginServices, setUser } from '../../actions/login';
 import sdk from './sdk';
 import I18n from '../../i18n';
 import { ICredentials, ILoggedUser, STATUSES } from '../../definitions';
@@ -46,6 +46,7 @@ let usersListener: any;
 let notifyAllListener: any;
 let rolesListener: any;
 let notifyLoggedListener: any;
+let logoutListener: any;
 
 function connect({ server, logoutOnError = false }: { server: string; logoutOnError?: boolean }): Promise<void> {
 	return new Promise<void>(resolve => {
@@ -89,6 +90,10 @@ function connect({ server, logoutOnError = false }: { server: string; logoutOnEr
 			notifyLoggedListener.then(stopListener);
 		}
 
+		if (logoutListener) {
+			logoutListener.then(stopListener);
+		}
+
 		unsubscribeRooms();
 
 		EventEmitter.emit('INQUIRY_UNSUBSCRIBE');
@@ -270,6 +275,8 @@ function connect({ server, logoutOnError = false }: { server: string; logoutOnEr
 			})
 		);
 
+		logoutListener = sdk.current.onStreamData('stream-force_logout', () => store.dispatch(logout(true)));
+
 		resolve();
 	});
 }

app/views/AttachmentView.tsx

@@ -121,20 +121,20 @@ const AttachmentView = (): React.ReactElement => {
 		const options: StackNavigationOptions = {
 			title: title || '',
 			headerTitleAlign: 'center',
-			headerTitleStyle: { color: colors.surfaceTint },
+			headerTitleStyle: { color: colors.fontDefault },
 			headerTintColor: colors.surfaceTint,
 			headerTitleContainerStyle: { flex: 1, maxWidth: undefined },
 			headerLeftContainerStyle: { flexGrow: undefined, flexBasis: undefined },
 			headerRightContainerStyle: { flexGrow: undefined, flexBasis: undefined },
 			headerLeft: () => (
-				<HeaderButton.CloseModal testID='close-attachment-view' navigation={navigation} color={colors.surfaceTint} />
+				<HeaderButton.CloseModal testID='close-attachment-view' navigation={navigation} color={colors.fontDefault} />
 			),
 			headerRight: () =>
 				Allow_Save_Media_to_Gallery && !isImageBase64(attachment.image_url) ? (
-					<HeaderButton.Download testID='save-image' onPress={handleSave} color={colors.surfaceTint} />
+					<HeaderButton.Download testID='save-image' onPress={handleSave} color={colors.fontDefault} />
 				) : null,
 			headerBackground: () => (
-				<HeaderBackground style={{ backgroundColor: colors.surfaceDark, shadowOpacity: 0, elevation: 0 }} />
+				<HeaderBackground style={{ backgroundColor: colors.surfaceNeutral, shadowOpacity: 0, elevation: 0 }} />
 			)
 		};
 		navigation.setOptions(options);

app/views/ShareView/Header.tsx

@@ -68,7 +68,7 @@ const Header = React.memo(({ room, thread }: IHeader) => {
 		icon = 'channel-private';
 	}
 
-	const textColor = themes[theme].surfaceTint;
+	const textColor = themes[theme].fontDefault;
 
 	let title;
 	if (thread?.id) {

app/views/ShareView/Preview.tsx

@@ -48,7 +48,7 @@ interface IIconPreview {
 
 const IconPreview = React.memo(({ iconName, title, description, theme, width, height, danger }: IIconPreview) => (
 	<ScrollView
-		style={{ backgroundColor: themes[theme].surfaceRoom }}
+		style={{ backgroundColor: themes[theme].surfaceNeutral }}
 		contentContainerStyle={[styles.fileContainer, { width, height }]}
 	>
 		<CustomIcon

app/views/ShareView/index.tsx

@@ -121,25 +121,25 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 		const options: StackNavigationOptions = {
 			headerTitle: () => <Header room={room} thread={thread} />,
 			headerTitleAlign: 'left',
-			headerTintColor: themes[theme].surfaceTint
+			headerTintColor: themes[theme].backdropColor
 		};
 
 		// if is share extension show default back button
 		if (!this.isShareExtension) {
 			options.headerLeft = () => (
-				<HeaderButton.CloseModal navigation={navigation} color={themes[theme].surfaceTint} testID='share-view-close' />
+				<HeaderButton.CloseModal navigation={navigation} color={themes[theme].fontDefault} testID='share-view-close' />
 			);
 		}
 
 		if (!attachments.length && !readOnly) {
 			options.headerRight = () => (
 				<HeaderButton.Container>
-					<HeaderButton.Item title={I18n.t('Send')} onPress={this.send} color={themes[theme].surfaceTint} />
+					<HeaderButton.Item title={I18n.t('Send')} onPress={this.send} color={themes[theme].fontDefault} />
 				</HeaderButton.Container>
 			);
 		}
 
-		options.headerBackground = () => <View style={[styles.container, { backgroundColor: themes[theme].surfaceDark }]} />;
+		options.headerBackground = () => <View style={[styles.container, { backgroundColor: themes[theme].surfaceNeutral }]} />;
 
 		navigation.setOptions(options);
 	};
@@ -405,7 +405,7 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 			);
 		}
 		return (
-			<SafeAreaView style={{ backgroundColor: themes[theme].surfaceRoom }}>
+			<SafeAreaView style={{ backgroundColor: themes[theme].backdropColor, flex: 1 }}>
 				<StatusBar barStyle='light-content' backgroundColor={themes[theme].surfaceDark} />
 				{this.renderContent()}
 			</SafeAreaView>