Merge branch 'develop' into chore.upgrade-wmdb

android/app/build.gradle

@@ -93,7 +93,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode VERSIONCODE as Integer
-        versionName "4.53.0"
+        versionName "4.54.0"
         vectorDrawables.useSupportLibrary = true
         if (!isFoss) {
             manifestPlaceholders = [BugsnagAPIKey: BugsnagAPIKey as String]

app/AppContainer.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, memo, useEffect } from 'react';
 import { NavigationContainer } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { connect } from 'react-redux';
 
 import { SetUsernameStackParamList, StackParamList } from './definitions/navigationTypes';
@@ -18,6 +18,8 @@ import ShareExtensionStack from './stacks/ShareExtensionStack';
 import { ThemeContext } from './theme';
 import { setCurrentScreen } from './lib/methods/helpers/log';
 
+const createStackNavigator = createNativeStackNavigator;
+
 // SetUsernameStack
 const SetUsername = createStackNavigator<SetUsernameStackParamList>();
 const SetUsernameStack = () => (
@@ -57,7 +59,7 @@ const App = memo(({ root, isMasterDetail }: { root: string; isMasterDetail: bool
 				}
 				Navigation.routeNameRef.current = currentRouteName;
 			}}>
-			<Stack.Navigator screenOptions={{ headerShown: false, animationEnabled: false }}>
+			<Stack.Navigator screenOptions={{ headerShown: false, animation: 'none' }}>
 				{root === RootEnum.ROOT_LOADING || root === RootEnum.ROOT_LOADING_SHARE_EXTENSION ? (
 					<Stack.Screen name='AuthLoading' component={AuthLoadingView} />
 				) : null}

app/containers/Button/Button.stories.tsx

@@ -23,6 +23,8 @@ export const DisabledButton = () => <Button disabled {...buttonProps} />;
 
 export const DisabledLoadingButton = () => <Button disabled loading {...buttonProps} />;
 
+export const SmallButton = () => <Button small {...buttonProps} />;
+
 export const CustomButton = () => (
 	<Button
 		{...buttonProps}

app/containers/Button/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleProp, StyleSheet, Text, TextStyle } from 'react-native';
+import { StyleProp, StyleSheet, Text, TextStyle, ViewStyle } from 'react-native';
 import Touchable, { PlatformTouchableProps } from 'react-native-platform-touchable';
 
 import { useTheme } from '../../theme';
@@ -14,16 +14,25 @@ interface IButtonProps extends PlatformTouchableProps {
 	loading?: boolean;
 	color?: string;
 	fontSize?: number;
+	style?: StyleProp<ViewStyle> | StyleProp<ViewStyle>[];
 	styleText?: StyleProp<TextStyle> | StyleProp<TextStyle>[];
+	small?: boolean;
 }
 
 const styles = StyleSheet.create({
 	container: {
+		marginBottom: 12,
+		borderRadius: 4
+	},
+	normalButton: {
 		paddingHorizontal: 14,
 		justifyContent: 'center',
-		height: 48,
-		borderRadius: 4,
-		marginBottom: 12
+		height: 48
+	},
+	smallButton: {
+		paddingHorizontal: 12,
+		paddingVertical: 8,
+		alignSelf: 'center'
 	},
 	text: {
 		...sharedStyles.textMedium,
@@ -45,6 +54,7 @@ const Button: React.FC<IButtonProps> = ({
 	color,
 	style,
 	styleText,
+	small,
 	...otherProps
 }) => {
 	const { colors } = useTheme();
@@ -58,13 +68,14 @@ const Button: React.FC<IButtonProps> = ({
 	const resolvedTextColor = color || (isPrimary ? colors.fontWhite : colors.fontDefault);
 
 	const containerStyle = [
+		small ? styles.smallButton : styles.normalButton,
 		styles.container,
 		{ backgroundColor: isDisabled ? disabledBackgroundColor : resolvedBackgroundColor },
 		isDisabled && backgroundColor ? styles.disabled : {},
 		style
 	];
 
-	const textStyle = [styles.text, { color: isDisabled ? colors.fontDisabled : resolvedTextColor, fontSize }, styleText];
+	const textStyle = [styles.text, { color: isDisabled ? colors.buttonPrimaryDisabled : resolvedTextColor, fontSize }, styleText];
 
 	return (
 		<Touchable

app/containers/HeaderButton/HeaderButtonContainer.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewProps } from 'react-native';
+
+import { isAndroid, isTablet } from '../../lib/methods/helpers';
 
 interface IHeaderButtonContainer {
 	children?: React.ReactElement | (React.ReactElement | null)[] | null;
 	left?: boolean;
+	onLayout?: ViewProps['onLayout'];
 }
 
 const styles = StyleSheet.create({
@@ -13,15 +16,18 @@ const styles = StyleSheet.create({
 		justifyContent: 'center'
 	},
 	left: {
-		marginLeft: 5
+		marginLeft: isTablet ? 5 : -5,
+		marginRight: isAndroid ? 25 : 0
 	},
 	right: {
-		marginRight: 5
+		marginRight: isTablet ? 5 : -5
 	}
 });
 
-const Container = ({ children, left = false }: IHeaderButtonContainer): React.ReactElement => (
-	<View style={[styles.container, left ? styles.left : styles.right]}>{children}</View>
+const Container = ({ children, left = false, onLayout }: IHeaderButtonContainer): React.ReactElement => (
+	<View style={[styles.container, left ? styles.left : styles.right]} onLayout={onLayout || undefined}>
+		{children}
+	</View>
 );
 
 Container.displayName = 'HeaderButton.Container';

app/containers/MessageActions/index.tsx

@@ -378,6 +378,17 @@ const MessageActions = React.memo(
 				const options: TActionSheetOptionsItem[] = [];
 				const videoConfBlock = message.t === 'videoconf';
 
+				// Edit
+				const isEditAllowed = allowEdit(message);
+				if (!videoConfBlock && (isOwn(message) || isEditAllowed)) {
+					options.push({
+						title: I18n.t('Edit'),
+						icon: 'edit',
+						onPress: () => handleEdit(message.id),
+						enabled: isEditAllowed
+					});
+				}
+
 				// Jump to message
 				const quoteMessageLink = getQuoteMessageLink(message.attachments);
 				if (quoteMessageLink && jumpToMessage) {
@@ -455,17 +466,6 @@ const MessageActions = React.memo(
 					onPress: () => handleShare(message)
 				});
 
-				// Edit
-				const isEditAllowed = allowEdit(message);
-				if (!videoConfBlock && (isOwn(message) || isEditAllowed)) {
-					options.push({
-						title: I18n.t('Edit'),
-						icon: 'edit',
-						onPress: () => handleEdit(message.id),
-						enabled: isEditAllowed
-					});
-				}
-
 				// Pin
 				if (Message_AllowPinning && !videoConfBlock) {
 					options.push({

app/containers/MessageComposer/components/ComposerInput.tsx

@@ -172,9 +172,11 @@ export const ComposerInput = memo(
 		};
 
 		const focus = () => {
-			if (inputRef.current) {
-				inputRef.current.focus();
-			}
+			setTimeout(() => {
+				if (inputRef.current) {
+					inputRef.current.focus();
+				}
+			}, 300);
 		};
 
 		const onChangeText: TextInputProps['onChangeText'] = text => {

app/views/RoomView/Separator.tsx → app/containers/MessageSeparator.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import moment from 'moment';
 
-import I18n from '../../i18n';
-import sharedStyles from '../Styles';
-import { themes } from '../../lib/constants';
-import { useTheme } from '../../theme';
+import I18n from '../i18n';
+import sharedStyles from '../views/Styles';
+import { themes } from '../lib/constants';
+import { useTheme } from '../theme';
 
 const styles = StyleSheet.create({
 	container: {
@@ -31,8 +31,13 @@ const styles = StyleSheet.create({
 	}
 });
 
-const DateSeparator = ({ ts, unread }: { ts: Date | string | null; unread: boolean }): React.ReactElement => {
+const MessageSeparator = ({ ts, unread }: { ts?: Date | string | null; unread?: boolean }): React.ReactElement | null => {
 	const { theme } = useTheme();
+
+	if (!ts && !unread) {
+		return null;
+	}
+
 	const date = ts ? moment(ts).format('LL') : null;
 	const unreadLine = { backgroundColor: themes[theme].buttonBackgroundDangerDefault };
 	const unreadText = { color: themes[theme].fontDanger };
@@ -62,4 +67,4 @@ const DateSeparator = ({ ts, unread }: { ts: Date | string | null; unread: boole
 	);
 };
 
-export default DateSeparator;
+export default MessageSeparator;

app/containers/RoomHeader/RoomHeader.tsx

@@ -8,6 +8,7 @@ import RoomTypeIcon from '../RoomTypeIcon';
 import { TUserStatus, IOmnichannelSource } from '../../definitions';
 import { useTheme } from '../../theme';
 import { useAppSelector } from '../../lib/hooks';
+import { isIOS } from '../../lib/methods/helpers';
 
 const HIT_SLOP = {
 	top: 5,
@@ -22,7 +23,6 @@ const getSubTitleSize = (scale: number) => SUBTITLE_SIZE * scale;
 
 const styles = StyleSheet.create({
 	container: {
-		flex: 1,
 		justifyContent: 'center'
 	},
 	titleContainer: {
@@ -75,6 +75,7 @@ interface IRoomHeader {
 	testID?: string;
 	sourceType?: IOmnichannelSource;
 	disabled?: boolean;
+	rightButtonsWidth?: number;
 }
 
 const SubTitle = React.memo(({ usersTyping, subtitle, renderFunc, scale }: TRoomHeaderSubTitle) => {
@@ -141,7 +142,8 @@ const Header = React.memo(
 		testID,
 		usersTyping = [],
 		sourceType,
-		disabled
+		disabled,
+		rightButtonsWidth = 0
 	}: IRoomHeader) => {
 		const { colors } = useTheme();
 		const portrait = height > width;
@@ -189,7 +191,8 @@ const Header = React.memo(
 				style={[
 					styles.container,
 					{
-						opacity: disabled ? 0.5 : 1
+						opacity: disabled ? 0.5 : 1,
+						width: width - rightButtonsWidth - (isIOS ? 60 : 80) - (isMasterDetail ? 350 : 0)
 					}
 				]}
 				disabled={disabled}

app/containers/RoomHeader/index.tsx

@@ -21,6 +21,7 @@ interface IRoomHeaderContainerProps {
 	sourceType?: IOmnichannelSource;
 	visitor?: IVisitor;
 	disabled?: boolean;
+	rightButtonsWidth?: number;
 }
 
 const RoomHeaderContainer = React.memo(
@@ -38,7 +39,8 @@ const RoomHeaderContainer = React.memo(
 		type,
 		sourceType,
 		visitor,
-		disabled
+		disabled,
+		rightButtonsWidth
 	}: IRoomHeaderContainerProps) => {
 		let subtitle: string | undefined;
 		let statusVisitor: TUserStatus | undefined;
@@ -89,6 +91,7 @@ const RoomHeaderContainer = React.memo(
 				onPress={onPress}
 				sourceType={sourceType}
 				disabled={disabled}
+				rightButtonsWidth={rightButtonsWidth}
 			/>
 		);
 	}

app/containers/TextInput/FormTextInput.tsx

@@ -15,12 +15,13 @@ const styles = StyleSheet.create({
 		paddingTop: 5
 	},
 	inputContainer: {
-		marginBottom: 10
+		marginBottom: 10,
+		gap: 4
 	},
 	label: {
-		marginBottom: 10,
-		fontSize: 14,
-		...sharedStyles.textSemibold
+		fontSize: 16,
+		lineHeight: 22,
+		...sharedStyles.textMedium
 	},
 	input: {
 		...sharedStyles.textRegular,

app/containers/UserGeneratedContentRules.tsx

@@ -15,14 +15,13 @@ const styles = StyleSheet.create({
 		marginHorizontal: 30
 	},
 	bottomContainerText: {
-		...sharedStyles.textRegular,
-		fontSize: 13,
+		...sharedStyles.textMedium,
+		fontSize: 14,
+		lineHeight: 22,
 		textAlign: 'center'
 	},
-	bottomContainerTextBold: {
-		...sharedStyles.textSemibold,
-		fontSize: 13,
-		textAlign: 'center'
+	bottomContainerTextUnderline: {
+		textDecorationLine: 'underline'
 	}
 });
 
@@ -40,22 +39,16 @@ const UGCRules = ({ styleContainer }: { styleContainer?: ViewStyle }) => {
 	};
 	return (
 		<View style={[styles.bottomContainer, styleContainer]}>
-			<Text style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo }]}>
-				{`${I18n.t('Onboarding_agree_terms')}\n`}
-				<Text
-					style={[styles.bottomContainerTextBold, { color: colors.strokeHighlight }]}
-					onPress={() => openContract('terms-of-service')}
-				>
-					{I18n.t('Terms_of_Service')}
-				</Text>{' '}
-				{I18n.t('and')}
-				<Text
-					style={[styles.bottomContainerTextBold, { color: colors.strokeHighlight }]}
-					onPress={() => openContract('privacy-policy')}
-				>
-					{' '}
-					{I18n.t('Privacy_Policy')}
-				</Text>
+			<Text style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo }]}>{I18n.t('Onboarding_agree_terms')}</Text>
+			<Text
+				style={[styles.bottomContainerTextUnderline, styles.bottomContainerText, { color: colors.fontInfo }]}
+				onPress={() => openContract('terms-of-service')}>
+				{I18n.t('Terms_of_Service')}
+			</Text>
+			<Text
+				style={[styles.bottomContainerTextUnderline, styles.bottomContainerText, { color: colors.fontInfo }]}
+				onPress={() => openContract('privacy-policy')}>
+				{I18n.t('Privacy_Policy')}
 			</Text>
 		</View>
 	);

app/containers/markdown/styles.ts

@@ -50,8 +50,8 @@ export default StyleSheet.create({
 		...sharedStyles.textRegular
 	},
 	customEmoji: {
-		width: 20,
-		height: 20
+		width: 15,
+		height: 15
 	},
 	customEmojiBig: {
 		width: 30,

app/containers/message/Message.stories.tsx

@@ -4,7 +4,7 @@ import { NavigationContainer } from '@react-navigation/native';
 
 import MessageComponent from './Message';
 import { E2E_MESSAGE_TYPE, messagesStatus, themes } from '../../lib/constants';
-import MessageSeparator from '../../views/RoomView/Separator';
+import MessageSeparator from '../MessageSeparator';
 import MessageContext from './Context';
 
 const _theme = 'light';
@@ -57,8 +57,7 @@ export default {
 							onDiscussionPress: () => {},
 							onReactionLongPress: () => {},
 							threadBadgeColor: themes.light.fontInfo
-						}}
-					>
+						}}>
 						<Story />
 					</MessageContext.Provider>
 				</ScrollView>