[IMPROVEMENT] Change "resend" icon position (#1048)

app/containers/message/Content.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text } from 'react-native';
+import { Text, View } from 'react-native';
 import PropTypes from 'prop-types';
 
 import I18n from '../../i18n';
@@ -12,26 +12,35 @@ const Content = React.memo((props) => {
 		return <Text style={styles.textInfo}>{getInfoMessage({ ...props })}</Text>;
 	}
 
+	let content = null;
+
 	if (props.tmid && !props.msg) {
-		return <Text style={styles.text}>{I18n.t('Sent_an_attachment')}</Text>;
+		content = <Text style={styles.text}>{I18n.t('Sent_an_attachment')}</Text>;
+	} else {
+		content = (
+			<Markdown
+				msg={props.msg}
+				baseUrl={props.baseUrl}
+				username={props.user.username}
+				isEdited={props.isEdited}
+				mentions={props.mentions}
+				channels={props.channels}
+				numberOfLines={props.tmid ? 1 : 0}
+				getCustomEmoji={props.getCustomEmoji}
+				useMarkdown={props.useMarkdown}
+			/>
+		);
 	}
 
 	return (
-		<Markdown
-			msg={props.msg}
-			baseUrl={props.baseUrl}
-			username={props.user.username}
-			isEdited={props.isEdited}
-			mentions={props.mentions}
-			channels={props.channels}
-			numberOfLines={props.tmid ? 1 : 0}
-			getCustomEmoji={props.getCustomEmoji}
-			useMarkdown={props.useMarkdown}
-		/>
+		<View style={props.isTemp && styles.temp}>
+			{content}
+		</View>
 	);
-}, (prevProps, nextProps) => prevProps.msg === nextProps.msg);
+}, (prevProps, nextProps) => prevProps.isTemp === nextProps.isTemp && prevProps.msg === nextProps.msg);
 
 Content.propTypes = {
+	isTemp: PropTypes.bool,
 	isInfo: PropTypes.bool,
 	isEdited: PropTypes.bool,
 	useMarkdown: PropTypes.bool,

app/containers/message/Message.js

@@ -4,7 +4,6 @@ import { View } from 'react-native';
 import Touchable from 'react-native-platform-touchable';
 
 import User from './User';
-import MessageError from './MessageError';
 import styles from './styles';
 import sharedStyles from '../../views/Styles';
 import RepliedThread from './RepliedThread';
@@ -45,7 +44,7 @@ const Message = React.memo((props) => {
 	if (props.isThreadReply || props.isThreadSequential || props.isInfo) {
 		const thread = props.isThreadReply ? <RepliedThread isTemp={props.isTemp} {...props} /> : null;
 		return (
-			<View style={[styles.container, props.style, props.isTemp && styles.temp]}>
+			<View style={[styles.container, props.style]}>
 				{thread}
 				<View style={[styles.flex, sharedStyles.alignItemsCenter]}>
 					<MessageAvatar small {...props} />
@@ -62,7 +61,7 @@ const Message = React.memo((props) => {
 		);
 	}
 	return (
-		<View style={[styles.container, props.style, props.isTemp && styles.temp]}>
+		<View style={[styles.container, props.style]}>
 			<View style={styles.flex}>
 				<MessageAvatar {...props} />
 				<View
@@ -86,8 +85,7 @@ Message.displayName = 'Message';
 const MessageTouchable = React.memo((props) => {
 	if (props.hasError) {
 		return (
-			<View style={styles.root}>
-				<MessageError {...props} />
+			<View>
 				<Message {...props} />
 			</View>
 		);

app/containers/message/MessageError.js

@@ -5,14 +5,15 @@ import PropTypes from 'prop-types';
 import { CustomIcon } from '../../lib/Icons';
 import { COLOR_DANGER } from '../../constants/colors';
 import styles from './styles';
+import { BUTTON_HIT_SLOP } from './utils';
 
 const MessageError = React.memo(({ hasError, onErrorPress }) => {
 	if (!hasError) {
 		return null;
 	}
 	return (
-		<Touchable onPress={onErrorPress} style={styles.errorButton}>
-			<CustomIcon name='circle-cross' color={COLOR_DANGER} size={20} />
+		<Touchable onPress={onErrorPress} style={styles.errorButton} hitSlop={BUTTON_HIT_SLOP}>
+			<CustomIcon name='warning' color={COLOR_DANGER} size={18} />
 		</Touchable>
 	);
 }, (prevProps, nextProps) => prevProps.hasError === nextProps.hasError);

app/containers/message/User.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { View, Text, StyleSheet } from 'react-native';
 import moment from 'moment';
 
+import MessageError from './MessageError';
 import sharedStyles from '../../views/Styles';
 import messageStyles from './styles';
 
@@ -31,9 +32,9 @@ const styles = StyleSheet.create({
 });
 
 const User = React.memo(({
-	isHeader, useRealName, author, alias, ts, timeFormat
+	isHeader, useRealName, author, alias, ts, timeFormat, hasError, ...props
 }) => {
-	if (isHeader) {
+	if (isHeader || hasError) {
 		const username = (useRealName && author.name) || author.username;
 		const aliasUsername = alias ? (<Text style={styles.alias}> @{username}</Text>) : null;
 		const time = moment(ts).format(timeFormat);
@@ -47,6 +48,7 @@ const User = React.memo(({
 					</Text>
 				</View>
 				<Text style={messageStyles.time}>{time}</Text>
+				{ hasError && <MessageError hasError={hasError} {...props} /> }
 			</View>
 		);
 	}
@@ -55,6 +57,7 @@ const User = React.memo(({
 
 User.propTypes = {
 	isHeader: PropTypes.bool,
+	hasError: PropTypes.bool,
 	useRealName: PropTypes.bool,
 	author: PropTypes.object,
 	alias: PropTypes.string,

app/containers/message/index.js

@@ -128,6 +128,9 @@ export default class MessageContainer extends React.Component {
 		const {
 			item, previousItem, broadcast, Message_GroupingPeriod
 		} = this.props;
+		if (this.hasError || (previousItem && previousItem.status === messagesStatus.ERROR)) {
+			return true;
+		}
 		if (previousItem && (
 			(previousItem.ts.toDateString() === item.ts.toDateString())
 			&& (previousItem.u.username === item.u.username)

app/containers/message/styles.js

@@ -114,7 +114,7 @@ export default StyleSheet.create({
 		color: COLOR_PRIMARY
 	},
 	errorButton: {
-		paddingHorizontal: 15,
+		paddingLeft: 10,
 		paddingVertical: 5
 	},
 	buttonContainer: {