Composer layout tweaked (#464)

* Composer layout tweaked

* Fix localization error

* Bump version to 1.3.2

android/app/build.gradle

@@ -102,7 +102,7 @@ android {
         minSdkVersion 21
         targetSdkVersion 27
         versionCode VERSIONCODE as Integer
-        versionName "1.3.1"
+        versionName "1.3.2"
         ndk {
             abiFilters "armeabi-v7a", "x86"
         }

app/containers/MessageBox/Recording.js

@@ -4,6 +4,8 @@ import {
 	View, SafeAreaView, Platform, PermissionsAndroid, Text
 } from 'react-native';
 import { AudioRecorder, AudioUtils } from 'react-native-audio';
+import { BorderlessButton } from 'react-native-gesture-handler';
+
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import styles from './styles';
 import I18n from '../../i18n';
@@ -119,24 +121,32 @@ export default class extends React.PureComponent {
 				testID='messagebox-recording'
 				style={styles.textBox}
 			>
-				<View style={[styles.textArea, { backgroundColor: '#F6F7F9' }]}>
-					<Icon
-						style={[styles.actionButtons, { color: 'red' }]}
-						name='clear'
-						key='clear'
+				<View style={styles.textArea}>
+					<BorderlessButton
+						onPress={this.cancelAudioMessage}
 						accessibilityLabel={I18n.t('Cancel_recording')}
 						accessibilityTraits='button'
-						onPress={this.cancelAudioMessage}
-					/>
+						style={styles.actionButton}
+					>
+						<Icon
+							size={22}
+							color='#f5455c'
+							name='clear'
+						/>
+					</BorderlessButton>
 					<Text key='currentTime' style={styles.textBoxInput}>{currentTime}</Text>
-					<Icon
-						style={[styles.actionButtons, { color: 'green' }]}
-						name='check'
-						key='check'
+					<BorderlessButton
+						onPress={this.finishAudioMessage}
 						accessibilityLabel={I18n.t('Finish_recording')}
 						accessibilityTraits='button'
-						onPress={this.finishAudioMessage}
-					/>
+						style={styles.actionButton}
+					>
+						<Icon
+							size={22}
+							color='#2de0a5'
+							name='check'
+						/>
+					</BorderlessButton>
 				</View>
 			</SafeAreaView>);
 	}

app/containers/MessageBox/index.js

 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	View, TextInput, FlatList, Text, TouchableOpacity, Alert
+	View, TextInput, FlatList, Text, TouchableOpacity, Alert, Image
 } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import { connect } from 'react-redux';
 import { emojify } from 'react-emojione';
 import { KeyboardAccessoryView } from 'react-native-keyboard-input';
 import ImagePicker from 'react-native-image-crop-picker';
+import { BorderlessButton } from 'react-native-gesture-handler';
 
 import { userTyping as userTypingAction } from '../../actions/room';
 import {
@@ -17,7 +18,6 @@ import {
 } from '../../actions/messages';
 import RocketChat from '../../lib/rocketchat';
 import styles from './styles';
-import MyIcon from '../icons';
 import database from '../../lib/realm';
 import Avatar from '../Avatar';
 import CustomEmoji from '../EmojiPicker/CustomEmoji';
@@ -182,35 +182,52 @@ export default class MessageBox extends React.PureComponent {
 
 		if (editing) {
 			return (
-				<Icon
-					style={styles.actionButtons}
-					name='close'
+				<BorderlessButton
+					onPress={this.editCancel}
 					accessibilityLabel={I18n.t('Cancel_editing')}
 					accessibilityTraits='button'
-					onPress={() => this.editCancel()}
+					style={styles.actionButton}
 					testID='messagebox-cancel-editing'
-				/>
+				>
+					<Icon
+						size={22}
+						color='#1d74f5'
+						name='close'
+					/>
+				</BorderlessButton>
 			);
 		}
 		return !showEmojiKeyboard
 			? (
-				<Icon
-					style={styles.actionButtons}
-					onPress={() => this.openEmoji()}
+				<BorderlessButton
+					onPress={this.openEmoji}
 					accessibilityLabel={I18n.t('Open_emoji_selector')}
 					accessibilityTraits='button'
-					name='mood'
+					style={styles.actionButton}
 					testID='messagebox-open-emoji'
-				/>)
+				>
+					<Icon
+						size={22}
+						color='#1d74f5'
+						name='mood'
+					/>
+				</BorderlessButton>
+			)
 			: (
-				<Icon
-					onPress={() => this.closeEmoji()}
-					style={styles.actionButtons}
+				<BorderlessButton
+					onPress={this.closeEmoji}
 					accessibilityLabel={I18n.t('Close_emoji_selector')}
 					accessibilityTraits='button'
-					name='keyboard'
+					style={styles.actionButton}
 					testID='messagebox-close-emoji'
-				/>);
+				>
+					<Icon
+						size={22}
+						color='#1d74f5'
+						name='keyboard'
+					/>
+				</BorderlessButton>
+			);
 	}
 
 	get rightButtons() {
@@ -218,35 +235,44 @@ export default class MessageBox extends React.PureComponent {
 		const icons = [];
 
 		if (text) {
-			icons.push(<MyIcon
-				style={[styles.actionButtons, { color: '#1D74F5' }]}
-				name='send'
-				key='sendIcon'
-				accessibilityLabel={I18n.t('Send message')}
-				accessibilityTraits='button'
-				onPress={() => this.submit(text)}
-				testID='messagebox-send-message'
-			/>);
+			icons.push(
+				<BorderlessButton
+					key='send-message'
+					onPress={() => this.submit(text)}
+					style={styles.actionButton}
+					testID='messagebox-send-message'
+					accessibilityLabel={I18n.t('Send message')}
+					accessibilityTraits='button'
+				>
+					<Image source={{ uri: 'composer_send' }} style={{ width: 23, height: 23 }} />
+				</BorderlessButton>
+			);
 			return icons;
 		}
-		icons.push(<Icon
-			style={[styles.actionButtons, { color: '#1D74F5', paddingHorizontal: 10 }]}
-			name='mic'
-			key='micIcon'
-			accessibilityLabel={I18n.t('Send audio message')}
-			accessibilityTraits='button'
-			onPress={() => this.recordAudioMessage()}
-			testID='messagebox-send-audio'
-		/>);
-		icons.push(<MyIcon
-			style={[styles.actionButtons, { color: '#2F343D', fontSize: 16 }]}
-			name='plus'
-			key='fileIcon'
-			accessibilityLabel={I18n.t('Message actions')}
-			accessibilityTraits='button'
-			onPress={this.toggleFilesActions}
-			testID='messagebox-actions'
-		/>);
+		icons.push(
+			<BorderlessButton
+				key='audio-message'
+				onPress={this.recordAudioMessage}
+				style={styles.actionButton}
+				testID='messagebox-send-audio'
+				accessibilityLabel={I18n.t('Send audio message')}
+				accessibilityTraits='button'
+			>
+				<Image source={{ uri: 'composer_mic' }} style={{ width: 16, height: 23 }} />
+			</BorderlessButton>
+		);
+		icons.push(
+			<BorderlessButton
+				key='file-message'
+				onPress={this.toggleFilesActions}
+				style={styles.actionButton}
+				testID='messagebox-actions'
+				accessibilityLabel={I18n.t('Message actions')}
+				accessibilityTraits='button'
+			>
+				<Image source={{ uri: 'composer_plus' }} style={{ width: 18, height: 18 }} />
+			</BorderlessButton>
+		);
 		return icons;
 	}
 
@@ -653,7 +679,7 @@ export default class MessageBox extends React.PureComponent {
 							underlineColorAndroid='transparent'
 							defaultValue=''
 							multiline
-							placeholderTextColor='#9EA2A8'
+							placeholderTextColor='#9ea2a8'
 							testID='messagebox-input'
 						/>
 						{this.rightButtons}

app/containers/MessageBox/styles.js

@@ -25,25 +25,26 @@ export default StyleSheet.create({
 	},
 	textBoxInput: {
 		textAlignVertical: 'center',
-		maxHeight: 120,
+		maxHeight: 242,
 		flexGrow: 1,
 		width: 1,
 		// paddingVertical: 12, needs to be paddingTop/paddingBottom because of iOS/Android's TextInput differences on rendering
 		paddingTop: 12,
 		paddingBottom: 12,
 		paddingLeft: 0,
-		paddingRight: 0
+		paddingRight: 0,
+		fontSize: 17,
+		letterSpacing: 0,
+		color: '#2f343d'
 	},
 	editing: {
 		backgroundColor: '#fff5df'
 	},
-	actionButtons: {
-		color: '#2F343D',
-		fontSize: 20,
-		textAlign: 'center',
-		padding: 15,
-		paddingHorizontal: 12,
-		flex: 0
+	actionButton: {
+		alignItems: 'center',
+		justifyContent: 'center',
+		width: 60,
+		height: 56
 	},
 	mentionList: {
 		maxHeight: MENTION_HEIGHT * 4

app/containers/icons.js

-import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
-import iconConfig from '../icons.json';
-
-export default createIconSetFromIcoMoon(iconConfig);