From f80d56a53e6f2c48c4ed5751194a10cc87af569e Mon Sep 17 00:00:00 2001
From: Rodrigo Nascimento <rodrigoknascimento@gmail.com>
Date: Thu, 10 Aug 2017 17:26:11 -0300
Subject: [PATCH] Search and room icons layout improvements

---
 app/components/RoomItem.js | 20 +++++++++++---------
 app/views/roomsList.js     | 29 ++++++++++++++++++++++-------
 2 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/app/components/RoomItem.js b/app/components/RoomItem.js
index aff83299..492b37fd 100644
--- a/app/components/RoomItem.js
+++ b/app/components/RoomItem.js
@@ -1,7 +1,6 @@
 import React from 'react';
 
-import Ionicons from 'react-native-vector-icons/Ionicons';
-import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import PropTypes from 'prop-types';
 import { View, Text, StyleSheet } from 'react-native';
 
@@ -25,12 +24,14 @@ const styles = StyleSheet.create({
 	},
 	roomItem: {
 		flexGrow: 1,
-		fontSize: 20
+		fontSize: 20,
+		color: '#444'
 	},
 	icon: {
-		fontSize: 20,
-		height: 22,
-		width: 22
+		fontSize: 18,
+		marginTop: 5,
+		marginRight: 5,
+		color: '#aaa'
 	}
 });
 
@@ -41,13 +42,14 @@ export default class RoomItem extends React.PureComponent {
 	get icon() {
 		const icon = {
 			d: 'at',
-			c: 'hashtag',
-			p: 'md-lock'
+			c: 'pound',
+			p: 'lock',
+			l: 'account'
 		}[this.props.item.t];
 		if (!icon) {
 			return null;
 		}
-		return ['p'].includes(this.props.item.t) ? <Ionicons name={icon} style={styles.icon} /> : <FontAwesome name={icon} style={styles.icon} />;
+		return <MaterialCommunityIcons name={icon} style={styles.icon} />;
 	}
 	renderNumber = (item) => {
 		if (item.unread) {
diff --git a/app/views/roomsList.js b/app/views/roomsList.js
index e8476e96..5879191a 100644
--- a/app/views/roomsList.js
+++ b/app/views/roomsList.js
@@ -42,6 +42,19 @@ const styles = StyleSheet.create({
 		fontSize: 20,
 		height: 22,
 		color: 'white'
+	},
+	searchBoxView: {
+		// borderBottomWidth: 1,
+		// borderBottomColor:
+		backgroundColor: '#eee',
+	},
+	searchBox: {
+		backgroundColor: '#fff',
+		margin: 5,
+		borderRadius: 5,
+		padding: 5,
+		paddingLeft: 10,
+		color: '#aaa'
 	}
 });
 
@@ -235,13 +248,15 @@ export default class RoomsListView extends React.Component {
 	);
 
 	renderSearchBar = () => (
-		<TextInput
-			style={styles.searchBox}
-			value={this.state.searchText}
-			onChangeText={this.onSearchChangeText}
-			returnKeyType='search'
-			placeholder='Search'
-		/>
+		<View style={styles.searchBoxView}>
+			<TextInput
+				style={styles.searchBox}
+				value={this.state.searchText}
+				onChangeText={this.onSearchChangeText}
+				returnKeyType='search'
+				placeholder='Search'
+			/>
+		</View>
 	);
 
 	renderList = () => {