Room item layout (#771)

__tests__/RoomItem.js

@@ -1,40 +0,0 @@
-import {View} from 'react-native';
-import { Provider } from 'react-redux';
-
-import { createStore, combineReducers } from 'redux';
-
-const reducers = combineReducers({login:() => ({user: {}}), settings:() => ({}), meteor: () => ({ connected: true })});
-const store = createStore(reducers);
-
-import React from 'react';
-import RoomItem from '../app/presentation/RoomItem';
-
-// Note: test renderer must be required after react-native.
-import renderer from 'react-test-renderer';
-
-const date = '2017-10-10T10:00:00Z';
-const onPress = () => {};
-
-it('renders correctly', () => {
-	expect(renderer.create(<Provider store={store}><View><RoomItem onPress={onPress} type="d" _updatedAt={date} name="name" baseUrl="baseUrl" /></View></Provider>).toJSON()).toMatchSnapshot();
-});
-
-it('render unread', () => {
-	expect(renderer.create(<Provider store={store}><View><RoomItem onPress={onPress} type="d" _updatedAt={date} name="name" unread={1} /></View></Provider>).toJSON()).toMatchSnapshot();
-});
-
-it('render unread +999', () => {
-	expect(renderer.create(<Provider store={store}><View><RoomItem onPress={onPress} type="d" _updatedAt={date} name="name" unread={1000} /></View></Provider>).toJSON()).toMatchSnapshot();
-});
-
-it('render no icon', () => {
-	expect(renderer.create(<Provider store={store}><View><RoomItem onPress={onPress} type="X" _updatedAt={date} name="name" /></View></Provider>).toJSON()).toMatchSnapshot();
-});
-
-it('render private group', () => {
-	expect(renderer.create(<Provider store={store}><View><RoomItem onPress={onPress} type="g" _updatedAt={date} name="private-group" /> </View></Provider>).toJSON()).toMatchSnapshot();
-});
-
-it('render channel', () => {
-	expect(renderer.create(<Provider store={store}><View><RoomItem onPress={onPress} type="c" _updatedAt={date} name="general" /></View></Provider>).toJSON()).toMatchSnapshot();
-});

__tests__/__snapshots__/RoomItem.js.snap

@@ -1,38 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`render channel 1`] = `
-<View>
-  View
-</View>
-`;
-
-exports[`render no icon 1`] = `
-<View>
-  View
-</View>
-`;
-
-exports[`render private group 1`] = `
-<View>
-  View
-   
-</View>
-`;
-
-exports[`render unread +999 1`] = `
-<View>
-  View
-</View>
-`;
-
-exports[`render unread 1`] = `
-<View>
-  View
-</View>
-`;
-
-exports[`renders correctly 1`] = `
-<View>
-  View
-</View>
-`;

app/constants/colors.js

@@ -1,9 +1,16 @@
 import { isIOS } from '../utils/deviceInfo';
 
 export const COLOR_DANGER = '#f5455c';
-export const COLOR_BUTTON_PRIMARY = '#1d74f5';
+export const COLOR_SUCCESS = '#2de0a5';
-export const COLOR_TEXT = '#292E35';
+export const COLOR_PRIMARY = '#1d74f5';
+export const COLOR_WHITE = '#fff';
+export const COLOR_BUTTON_PRIMARY = COLOR_PRIMARY;
+export const COLOR_TITLE = '#0C0D0F';
+export const COLOR_TEXT = '#2F343D';
+export const COLOR_TEXT_DESCRIPTION = '#9ca2a8';
 export const COLOR_SEPARATOR = '#A7A7AA';
+export const COLOR_BACKGROUND_CONTAINER = '#f3f4f5';
+export const COLOR_BORDER = '#e1e5e8';
 export const STATUS_COLORS = {
 	online: '#2de0a5',
 	busy: COLOR_DANGER,
@@ -12,5 +19,5 @@ export const STATUS_COLORS = {
 };
 
 export const HEADER_BACKGROUND = isIOS ? '#f8f8f8' : '#2F343D';
-export const HEADER_TITLE = isIOS ? '#0C0D0F' : '#FFF';
+export const HEADER_TITLE = isIOS ? COLOR_TITLE : COLOR_WHITE;
-export const HEADER_BACK = isIOS ? '#1d74f5' : '#FFF';
+export const HEADER_BACK = isIOS ? COLOR_PRIMARY : COLOR_WHITE;

app/containers/ConnectionBadge.js

@@ -7,6 +7,10 @@ import PropTypes from 'prop-types';
 
 import I18n from '../i18n';
 import debounce from '../utils/debounce';
+import sharedStyles from '../views/Styles';
+import {
+	COLOR_BACKGROUND_CONTAINER, COLOR_DANGER, COLOR_SUCCESS, COLOR_WHITE
+} from '../constants/colors';
 
 const styles = StyleSheet.create({
 	container: {
@@ -14,25 +18,25 @@ const styles = StyleSheet.create({
 		position: 'absolute',
 		top: 0,
 		height: 41,
-		backgroundColor: '#F7F8FA',
+		backgroundColor: COLOR_BACKGROUND_CONTAINER,
 		flexDirection: 'row',
 		alignItems: 'center',
 		justifyContent: 'center',
 		elevation: 4
 	},
 	text: {
-		color: '#fff',
+		color: COLOR_WHITE,
 		fontSize: 15,
-		fontWeight: 'normal'
+		...sharedStyles.textRegular
 	},
 	textConnecting: {
-		color: '#9EA2A8'
+		...sharedStyles.textColorDescription
 	},
 	containerConnected: {
-		backgroundColor: '#2de0a5'
+		backgroundColor: COLOR_SUCCESS
 	},
 	containerOffline: {
-		backgroundColor: '#f5455c'
+		backgroundColor: COLOR_DANGER
 	},
 	activityIndicator: {
 		marginRight: 15

app/containers/EmojiPicker/styles.js

@@ -1,8 +1,9 @@
 import { StyleSheet } from 'react-native';
+import { COLOR_PRIMARY, COLOR_WHITE } from '../../constants/colors';
 
 export default StyleSheet.create({
 	background: {
-		backgroundColor: '#fff'
+		backgroundColor: COLOR_WHITE
 	},
 	container: {
 		flex: 1
@@ -27,7 +28,7 @@ export default StyleSheet.create({
 		left: 0,
 		right: 0,
 		height: 2,
-		backgroundColor: '#007aff',
+		backgroundColor: COLOR_PRIMARY,
 		bottom: 0
 	},
 	tabLine: {

app/containers/HeaderButton.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Text } from 'react-native';
 import HeaderButtons, { HeaderButton, Item } from 'react-navigation-header-buttons';
 
 import { CustomIcon } from '../lib/Icons';
 import { isIOS } from '../utils/deviceInfo';
+import { COLOR_PRIMARY, COLOR_WHITE } from '../constants/colors';
 
-const color = isIOS ? '#1D74F5' : '#FFF';
+const color = isIOS ? COLOR_PRIMARY : COLOR_WHITE;
 export const headerIconSize = 23;
 
 const CustomHeaderButton = React.memo(props => (
@@ -60,5 +60,3 @@ LegalButton.propTypes = {
 };
 
 export { Item };
-
-export default () => <Text>a</Text>;

app/containers/MessageBox/Recording.js

@@ -10,6 +10,7 @@ import styles from './styles';
 import I18n from '../../i18n';
 import { isIOS, isAndroid } from '../../utils/deviceInfo';
 import { CustomIcon } from '../../lib/Icons';
+import { COLOR_SUCCESS, COLOR_DANGER } from '../../constants/colors';
 
 export const _formatTime = function(seconds) {
 	let minutes = Math.floor(seconds / 60);
@@ -130,7 +131,7 @@ export default class extends React.PureComponent {
 					>
 						<CustomIcon
 							size={22}
-							color='#f5455c'
+							color={COLOR_DANGER}
 							name='cross'
 						/>
 					</BorderlessButton>
@@ -143,7 +144,7 @@ export default class extends React.PureComponent {
 					>
 						<CustomIcon
 							size={22}
-							color='#2de0a5'
+							color={COLOR_SUCCESS}
 							name='check'
 						/>
 					</BorderlessButton>

app/containers/MessageBox/ReplyPreview.js

@@ -6,17 +6,21 @@ import { connect } from 'react-redux';
 
 import Markdown from '../message/Markdown';
 import { CustomIcon } from '../../lib/Icons';
+import sharedStyles from '../../views/Styles';
+import {
+	COLOR_PRIMARY, COLOR_BACKGROUND_CONTAINER, COLOR_TEXT_DESCRIPTION, COLOR_WHITE
+} from '../../constants/colors';
 
 const styles = StyleSheet.create({
 	container: {
 		flexDirection: 'row',
 		marginTop: 10,
-		backgroundColor: '#fff'
+		backgroundColor: COLOR_WHITE
 	},
 	messageContainer: {
 		flex: 1,
 		marginHorizontal: 10,
-		backgroundColor: '#F3F4F5',
+		backgroundColor: COLOR_BACKGROUND_CONTAINER,
 		paddingHorizontal: 15,
 		paddingVertical: 10,
 		borderRadius: 4
@@ -26,15 +30,17 @@ const styles = StyleSheet.create({
 		alignItems: 'center'
 	},
 	username: {
-		color: '#1D74F5',
+		color: COLOR_PRIMARY,
 		fontSize: 16,
-		fontWeight: '500'
+		...sharedStyles.textMedium
 	},
 	time: {
-		color: '#9EA2A8',
 		fontSize: 12,
 		lineHeight: 16,
-		marginLeft: 5
+		marginLeft: 6,
+		...sharedStyles.textColorDescription,
+		...sharedStyles.textRegular,
+		fontWeight: '300'
 	},
 	close: {
 		marginRight: 10
@@ -79,7 +85,7 @@ export default class ReplyPreview extends Component {
 					</View>
 					<Markdown msg={message.msg} customEmojis={customEmojis} baseUrl={baseUrl} username={username} />
 				</View>
-				<CustomIcon name='cross' color='#9ea2a8' size={20} style={styles.close} onPress={this.close} />
+				<CustomIcon name='cross' color={COLOR_TEXT_DESCRIPTION} size={20} style={styles.close} onPress={this.close} />
 			</View>
 		);
 	}

app/containers/MessageBox/UploadModal.js

@@ -12,8 +12,9 @@ import Button from '../Button';
 import I18n from '../../i18n';
 import sharedStyles from '../../views/Styles';
 import { isIOS } from '../../utils/deviceInfo';
+import { COLOR_PRIMARY, COLOR_BACKGROUND_CONTAINER, COLOR_WHITE } from '../../constants/colors';
 
-const cancelButtonColor = '#f7f8fa';
+const cancelButtonColor = COLOR_BACKGROUND_CONTAINER;
 
 const styles = StyleSheet.create({
 	modal: {
@@ -25,11 +26,13 @@ const styles = StyleSheet.create({
 		paddingTop: 16
 	},
 	title: {
+		fontSize: 14,
+		...sharedStyles.textColorTitle,
 		...sharedStyles.textBold
 	},
 	container: {
 		height: 430,
-		backgroundColor: '#ffffff',
+		backgroundColor: COLOR_WHITE,
 		flexDirection: 'column'
 	},
 	scrollView: {
@@ -46,7 +49,7 @@ const styles = StyleSheet.create({
 		flexDirection: 'row',
 		justifyContent: 'space-between',
 		padding: 16,
-		backgroundColor: '#f7f8fa'
+		backgroundColor: COLOR_BACKGROUND_CONTAINER
 	},
 	button: {
 		marginBottom: 0
@@ -149,15 +152,15 @@ export default class UploadModal extends Component {
 					underlayColor={cancelButtonColor}
 					activeOpacity={0.5}
 				>
-					<Text style={[styles.androidButtonText, { ...sharedStyles.textBold, color: '#1d74f5' }]}>{I18n.t('Cancel')}</Text>
+					<Text style={[styles.androidButtonText, { ...sharedStyles.textBold, color: COLOR_PRIMARY }]}>{I18n.t('Cancel')}</Text>
 				</TouchableHighlight>
 				<TouchableHighlight
 					onPress={this.submit}
-					style={[styles.androidButton, { backgroundColor: '#1d74f5' }]}
+					style={[styles.androidButton, { backgroundColor: COLOR_PRIMARY }]}
-					underlayColor='#1d74f5'
+					underlayColor={COLOR_PRIMARY}
 					activeOpacity={0.5}
 				>
-					<Text style={[styles.androidButtonText, { ...sharedStyles.textMedium, color: '#fff' }]}>{I18n.t('Send')}</Text>
+					<Text style={[styles.androidButtonText, { ...sharedStyles.textMedium, color: COLOR_WHITE }]}>{I18n.t('Send')}</Text>
 				</TouchableHighlight>
 			</View>
 		);

app/containers/MessageBox/index.js

@@ -31,12 +31,11 @@ import I18n from '../../i18n';
 import ReplyPreview from './ReplyPreview';
 import { CustomIcon } from '../../lib/Icons';
 import debounce from '../../utils/debounce';
+import { COLOR_PRIMARY, COLOR_TEXT_DESCRIPTION } from '../../constants/colors';
 
 const MENTIONS_TRACKING_TYPE_USERS = '@';
 const MENTIONS_TRACKING_TYPE_EMOJIS = ':';
 
-const BLUE_COLOR = '#1D74F5';
-
 const onlyUnique = function onlyUnique(value, index, self) {
 	return self.indexOf(({ _id }) => value._id === _id) === index;
 };
@@ -241,7 +240,7 @@ export default class MessageBox extends Component {
 				>
 					<CustomIcon
 						size={22}
-						color={BLUE_COLOR}
+						color={COLOR_PRIMARY}
 						name='cross'
 					/>
 				</BorderlessButton>
@@ -258,7 +257,7 @@ export default class MessageBox extends Component {
 				>
 					<CustomIcon
 						size={22}
-						color={BLUE_COLOR}
+						color={COLOR_PRIMARY}
 						name='emoji'
 					/>
 				</BorderlessButton>
@@ -273,7 +272,7 @@ export default class MessageBox extends Component {
 				>
 					<CustomIcon
 						size={22}
-						color={BLUE_COLOR}
+						color={COLOR_PRIMARY}
 						name='keyboard'
 					/>
 				</BorderlessButton>
@@ -294,7 +293,7 @@ export default class MessageBox extends Component {
 					accessibilityLabel={I18n.t('Send message')}
 					accessibilityTraits='button'
 				>
-					<CustomIcon name='send1' size={23} color={BLUE_COLOR} />
+					<CustomIcon name='send1' size={23} color={COLOR_PRIMARY} />
 				</BorderlessButton>
 			);
 			return icons;
@@ -308,7 +307,7 @@ export default class MessageBox extends Component {
 				accessibilityLabel={I18n.t('Send audio message')}
 				accessibilityTraits='button'
 			>
-				<CustomIcon name='mic' size={23} color={BLUE_COLOR} />
+				<CustomIcon name='mic' size={23} color={COLOR_PRIMARY} />
 			</BorderlessButton>
 		);
 		icons.push(
@@ -320,7 +319,7 @@ export default class MessageBox extends Component {
 				accessibilityLabel={I18n.t('Message actions')}
 				accessibilityTraits='button'
 			>
-				<CustomIcon name='plus' size={23} color={BLUE_COLOR} />
+				<CustomIcon name='plus' size={23} color={COLOR_PRIMARY} />
 			</BorderlessButton>
 		);
 		return icons;
@@ -648,7 +647,7 @@ export default class MessageBox extends Component {
 			onPress={() => this.onPressMention(item)}
 		>
 			<Text style={styles.fixedMentionAvatar}>{item.username}</Text>
-			<Text>{item.username === 'here' ? I18n.t('Notify_active_in_this_room') : I18n.t('Notify_all_in_this_room')}</Text>
+			<Text style={styles.mentionText}>{item.username === 'here' ? I18n.t('Notify_active_in_this_room') : I18n.t('Notify_all_in_this_room')}</Text>
 		</TouchableOpacity>
 	)
 
@@ -691,7 +690,7 @@ export default class MessageBox extends Component {
 				{trackingType === MENTIONS_TRACKING_TYPE_EMOJIS
 					? [
 						this.renderMentionEmoji(item),
-						<Text key='mention-item-name'>:{ item.name || item }:</Text>
+						<Text key='mention-item-name' style={styles.mentionText}>:{ item.name || item }:</Text>
 					]
 					: [
 						<Avatar
@@ -703,7 +702,7 @@ export default class MessageBox extends Component {
 							baseUrl={baseUrl}
 							user={user}
 						/>,
-						<Text key='mention-item-name'>{ item.username || item.name }</Text>
+						<Text key='mention-item-name' style={styles.mentionText}>{ item.username || item.name }</Text>
 					]
 				}
 			</TouchableOpacity>
@@ -782,7 +781,7 @@ export default class MessageBox extends Component {
 							underlineColorAndroid='transparent'
 							defaultValue=''
 							multiline
-							placeholderTextColor='#9ea2a8'
+							placeholderTextColor={COLOR_TEXT_DESCRIPTION}
 							testID='messagebox-input'
 						/>
 						{this.rightButtons}

app/containers/MessageBox/styles.js

@@ -1,29 +1,33 @@
 import { StyleSheet } from 'react-native';
 
 import { isIOS } from '../../utils/deviceInfo';
+import sharedStyles from '../../views/Styles';
+import {
+	COLOR_BORDER, COLOR_SEPARATOR, COLOR_BACKGROUND_CONTAINER, COLOR_WHITE
+} from '../../constants/colors';
 
 const MENTION_HEIGHT = 50;
 
 export default StyleSheet.create({
 	textBox: {
-		backgroundColor: '#fff',
+		backgroundColor: COLOR_WHITE,
 		flex: 0,
 		alignItems: 'center',
-		borderTopWidth: 1,
+		borderTopWidth: StyleSheet.hairlineWidth,
-		borderTopColor: '#D8D8D8',
+		borderTopColor: COLOR_SEPARATOR,
 		zIndex: 2
 	},
 	composer: {
-		backgroundColor: '#fff',
+		backgroundColor: COLOR_WHITE,
 		flexDirection: 'column',
-		borderTopColor: '#e1e5e8',
+		borderTopColor: COLOR_SEPARATOR,
-		borderTopWidth: 1
+		borderTopWidth: StyleSheet.hairlineWidth
 	},
 	textArea: {
 		flexDirection: 'row',
 		alignItems: 'center',
 		flexGrow: 0,
-		backgroundColor: '#fff'
+		backgroundColor: COLOR_WHITE
 	},
 	textBoxInput: {
 		textAlignVertical: 'center',
@@ -37,7 +41,8 @@ export default StyleSheet.create({
 		paddingRight: 0,
 		fontSize: 17,
 		letterSpacing: 0,
-		color: '#2f343d'
+		...sharedStyles.textColorNormal,
+		...sharedStyles.textRegular
 	},
 	editing: {
 		backgroundColor: '#fff5df'
@@ -53,9 +58,9 @@ export default StyleSheet.create({
 	},
 	mentionItem: {
 		height: MENTION_HEIGHT,
-		backgroundColor: '#F7F8FA',
+		backgroundColor: COLOR_BACKGROUND_CONTAINER,
 		borderTopWidth: 1,
-		borderTopColor: '#ECECEC',
+		borderTopColor: COLOR_BORDER,
 		flexDirection: 'row',
 		alignItems: 'center',
 		paddingHorizontal: 5
@@ -72,18 +77,25 @@ export default StyleSheet.create({
 		textAlign: 'center'
 	},
 	fixedMentionAvatar: {
-		fontWeight: 'bold',
 		textAlign: 'center',
-		width: 46
+		width: 46,
+		fontSize: 14,
+		...sharedStyles.textBold,
+		...sharedStyles.textColorNormal
+	},
+	mentionText: {
+		fontSize: 14,
+		...sharedStyles.textRegular,
+		...sharedStyles.textColorNormal
 	},
 	emojiKeyboardContainer: {
 		flex: 1,
-		borderTopColor: '#ECECEC',
+		borderTopColor: COLOR_BORDER,
 		borderTopWidth: 1
 	},
 	iphoneXArea: {
 		height: 50,
-		backgroundColor: '#fff',
+		backgroundColor: COLOR_WHITE,
 		position: 'absolute',
 		bottom: 0,
 		left: 0,

app/containers/SearchBox.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import I18n from '../i18n';
 import { isIOS } from '../utils/deviceInfo';
 import { CustomIcon } from '../lib/Icons';
+import sharedStyles from '../views/Styles';
 
 const styles = StyleSheet.create({
 	container: {
@@ -28,7 +29,8 @@ const styles = StyleSheet.create({
 		fontSize: 17,
 		marginLeft: 8,
 		paddingTop: 0,
-		paddingBottom: 0
+		paddingBottom: 0,
+		...sharedStyles.textRegular
 	}
 });
 

app/containers/StatusBar.js

@@ -3,13 +3,13 @@ import { StatusBar as StatusBarRN } from 'react-native';
 import PropTypes from 'prop-types';
 
 import { isIOS } from '../utils/deviceInfo';
-import { HEADER_BACKGROUND } from '../constants/colors';
+import { HEADER_BACKGROUND, COLOR_WHITE } from '../constants/colors';
 
 const HEADER_BAR_STYLE = isIOS ? 'dark-content' : 'light-content';
 
 const StatusBar = React.memo(({ light }) => {
 	if (light) {
-		return <StatusBarRN backgroundColor='#FFF' barStyle='dark-content' animated />;
+		return <StatusBarRN backgroundColor={COLOR_WHITE} barStyle='dark-content' animated />;
 	}
 	return <StatusBarRN backgroundColor={HEADER_BACKGROUND} barStyle={HEADER_BAR_STYLE} animated />;
 });

app/containers/TextInput.js

@@ -6,7 +6,9 @@ import PropTypes from 'prop-types';
 import { BorderlessButton } from 'react-native-gesture-handler';
 
 import sharedStyles from '../views/Styles';
-import { COLOR_DANGER, COLOR_TEXT } from '../constants/colors';
+import {
+	COLOR_DANGER, COLOR_TEXT_DESCRIPTION, COLOR_TEXT, COLOR_BORDER
+} from '../constants/colors';
 import { CustomIcon } from '../lib/Icons';
 
 const styles = StyleSheet.create({
@@ -15,22 +17,21 @@ const styles = StyleSheet.create({
 	},
 	label: {
 		marginBottom: 10,
-		color: COLOR_TEXT,
 		fontSize: 14,
-		fontWeight: '700'
+		...sharedStyles.textSemibold,
+		...sharedStyles.textColorNormal
 	},
 	input: {
 		...sharedStyles.textRegular,
+		...sharedStyles.textColorNormal,
 		height: 48,
-		fontSize: 17,
+		fontSize: 16,
-		color: '#9EA2A8',
-		letterSpacing: 0,
 		paddingLeft: 14,
 		paddingRight: 14,
-		borderWidth: 1.5,
+		borderWidth: 1,
 		borderRadius: 2,
 		backgroundColor: 'white',
-		borderColor: '#E7EBF2'
+		borderColor: COLOR_BORDER
 	},
 	inputIconLeft: {
 		paddingLeft: 45
@@ -59,10 +60,10 @@ const styles = StyleSheet.create({
 		right: 15
 	},
 	icon: {
-		color: '#2F343D'
+		color: COLOR_TEXT
 	},
 	password: {
-		color: '#9ea2a8'
+		color: COLOR_TEXT_DESCRIPTION
 	}
 });
 
@@ -144,7 +145,7 @@ export default class RCTextInput extends React.PureComponent {
 						testID={testID}
 						accessibilityLabel={placeholder}
 						placeholder={placeholder}
-						placeholderTextColor='#9ea2a8'
+						placeholderTextColor={COLOR_TEXT_DESCRIPTION}
 						contentDescription={placeholder}
 						{...inputProps}
 					/>

app/containers/message/Audio.js

@@ -11,6 +11,8 @@ import equal from 'deep-equal';
 
 import Markdown from './Markdown';
 import { CustomIcon } from '../../lib/Icons';
+import sharedStyles from '../../views/Styles';
+import { COLOR_BACKGROUND_CONTAINER, COLOR_BORDER, COLOR_PRIMARY } from '../../constants/colors';
 
 const styles = StyleSheet.create({
 	audioContainer: {
@@ -18,9 +20,11 @@ const styles = StyleSheet.create({
 		flexDirection: 'row',
 		alignItems: 'center',
 		height: 56,
-		backgroundColor: '#f7f8fa',
+		backgroundColor: COLOR_BACKGROUND_CONTAINER,
+		borderColor: COLOR_BORDER,
+		borderWidth: 1,
 		borderRadius: 4,
-		marginBottom: 10
+		marginBottom: 6
 	},
 	playPauseButton: {
 		width: 56,
@@ -28,7 +32,7 @@ const styles = StyleSheet.create({
 		backgroundColor: 'transparent'
 	},
 	playPauseImage: {
-		color: '#1D74F5'
+		color: COLOR_PRIMARY
 	},
 	slider: {
 		flex: 1,
@@ -37,8 +41,8 @@ const styles = StyleSheet.create({
 	duration: {
 		marginRight: 16,
 		fontSize: 14,
-		fontWeight: '500',
+		...sharedStyles.textColorNormal,
-		color: '#54585e'
+		...sharedStyles.textRegular
 	},
 	thumbStyle: {
 		width: 12,
@@ -169,8 +173,8 @@ export default class Audio extends React.Component {
 							easing: Easing.linear,
 							delay: 0
 						}}
-						thumbTintColor='#1d74f5'
+						thumbTintColor={COLOR_PRIMARY}
-						minimumTrackTintColor='#1d74f5'
+						minimumTrackTintColor={COLOR_PRIMARY}
 						onValueChange={value => this.setState({ currentTime: value })}
 						thumbStyle={styles.thumbStyle}
 					/>

app/containers/message/Image.js

@@ -7,6 +7,7 @@ import equal from 'deep-equal';
 import PhotoModal from './PhotoModal';
 import Markdown from './Markdown';
 import styles from './styles';
+import { COLOR_WHITE } from '../../constants/colors';
 
 export default class extends Component {
 	static propTypes = {
@@ -71,7 +72,7 @@ export default class extends Component {
 					onPress={() => this.onPressButton()}
 					onActiveStateChange={this.isPressed}
 					style={styles.imageContainer}
-					underlayColor='#fff'
+					underlayColor={COLOR_WHITE}
 				>
 					<FastImage
 						style={[styles.image, isPressed && { opacity: 0.5 }]}

app/containers/message/Markdown.js

@@ -8,6 +8,9 @@ import styles from './styles';
 import CustomEmoji from '../EmojiPicker/CustomEmoji';
 import MarkdownEmojiPlugin from './MarkdownEmojiPlugin';
 
+import sharedStyles from '../../views/Styles';
+import { COLOR_BACKGROUND_CONTAINER, COLOR_BORDER, COLOR_PRIMARY } from '../../constants/colors';
+
 // Support <http://link|Text>
 const formatText = text => text.replace(
 	new RegExp('(?:<|<)((?:https|http):\\/\\/[^\\|]+)\\|(.+?)(?=>|>)(?:>|>)', 'gm'),
@@ -92,26 +95,29 @@ export default class Markdown extends React.Component {
 				style={{
 					paragraph: styles.paragraph,
 					text: {
-						color: '#0C0D0F',
 						fontSize: 16,
-						letterSpacing: 0.1
+						...sharedStyles.textColorNormal,
+						...sharedStyles.textRegular
 					},
 					codeInline: {
+						...sharedStyles.textRegular,
 						...codeFontFamily,
 						borderWidth: 1,
-						backgroundColor: '#f8f8f8',
+						backgroundColor: COLOR_BACKGROUND_CONTAINER,
 						borderRadius: 4
 					},
 					codeBlock: {
+						...sharedStyles.textRegular,
 						...codeFontFamily,
-						backgroundColor: '#f8f8f8',
+						backgroundColor: COLOR_BACKGROUND_CONTAINER,
-						borderColor: '#cccccc',
+						borderColor: COLOR_BORDER,
 						borderWidth: 1,
 						borderRadius: 4,
 						padding: 4
 					},
 					link: {
-						color: '#1D74F5'
+						color: COLOR_PRIMARY,
+						...sharedStyles.textRegular
 					},
 					...style
 				}}

app/containers/message/Message.js

@@ -23,6 +23,7 @@ import styles from './styles';
 import I18n from '../../i18n';
 import messagesStatus from '../../constants/messagesStatus';
 import { CustomIcon } from '../../lib/Icons';
+import { COLOR_DANGER, COLOR_TEXT_DESCRIPTION, COLOR_WHITE } from '../../constants/colors';
 
 const SYSTEM_MESSAGES = [
 	'r',
@@ -271,7 +272,7 @@ export default class Message extends PureComponent {
 		const { onErrorPress } = this.props;
 		return (
 			<BorderlessButton onPress={onErrorPress} style={styles.errorButton}>
-				<CustomIcon name='circle-cross' color='red' size={20} />
+				<CustomIcon name='circle-cross' color={COLOR_DANGER} size={20} />
 			</BorderlessButton>
 		);
 	}
@@ -281,7 +282,7 @@ export default class Message extends PureComponent {
 			user, onReactionLongPress, onReactionPress, customEmojis, baseUrl
 		} = this.props;
 		const reacted = reaction.usernames.findIndex(item => item.value === user.username) !== -1;
-		const underlayColor = reacted ? '#fff' : '#e1e5e8';
+		const underlayColor = reacted ? COLOR_WHITE : COLOR_TEXT_DESCRIPTION;
 		return (
 			<LongPressGestureHandler
 				key={reaction.emoji}
@@ -341,7 +342,7 @@ export default class Message extends PureComponent {
 					onPress={replyBroadcast}
 					style={styles.broadcastButton}
 					activeOpacity={0.5}
-					underlayColor='#fff'
+					underlayColor={COLOR_WHITE}
 				>
 					<CustomIcon name='back' size={20} style={styles.broadcastButtonIcon} />
 					<Text style={styles.broadcastButtonText}>{I18n.t('Reply')}</Text>

app/containers/message/PhotoModal.js

@@ -8,6 +8,9 @@ import Modal from 'react-native-modal';
 import ImageViewer from 'react-native-image-zoom-viewer';
 import { responsive } from 'react-native-responsive-ui';
 
+import sharedStyles from '../../views/Styles';
+import { COLOR_WHITE } from '../../constants/colors';
+
 const styles = StyleSheet.create({
 	imageWrapper: {
 		flex: 1
@@ -18,16 +21,16 @@ const styles = StyleSheet.create({
 		marginVertical: 10
 	},
 	title: {
-		color: '#ffffff',
+		color: COLOR_WHITE,
 		textAlign: 'center',
 		fontSize: 16,
-		fontWeight: '600'
+		...sharedStyles.textSemibold
 	},
 	description: {
-		color: '#ffffff',
+		color: COLOR_WHITE,
 		textAlign: 'center',
 		fontSize: 14,
-		fontWeight: '500'
+		...sharedStyles.textMedium
 	},
 	indicatorContainer: {
 		alignItems: 'center',

app/containers/message/ReactionsModal.js

@@ -8,6 +8,8 @@ import Modal from 'react-native-modal';
 import Emoji from './Emoji';
 import I18n from '../../i18n';
 import { CustomIcon } from '../../lib/Icons';
+import sharedStyles from '../../views/Styles';
+import { COLOR_WHITE } from '../../constants/colors';
 
 const styles = StyleSheet.create({
 	titleContainer: {
@@ -16,18 +18,20 @@ const styles = StyleSheet.create({
 		paddingVertical: 10
 	},
 	title: {
-		color: '#ffffff',
+		color: COLOR_WHITE,
 		textAlign: 'center',
 		fontSize: 16,
-		fontWeight: '600'
+		...sharedStyles.textSemibold
 	},
 	reactCount: {
-		color: '#dddddd',
+		color: COLOR_WHITE,
-		fontSize: 10
+		fontSize: 13,
+		...sharedStyles.textRegular
 	},
 	peopleReacted: {
-		color: '#ffffff',
+		color: COLOR_WHITE,
-		fontWeight: '500'
+		fontSize: 14,
+		...sharedStyles.textMedium
 	},
 	peopleItemContainer: {
 		flex: 1,
@@ -51,7 +55,7 @@ const styles = StyleSheet.create({
 		position: 'absolute',
 		left: 0,
 		top: 10,
-		color: '#ffffff'
+		color: COLOR_WHITE
 	}
 });
 const standardEmojiStyle = { fontSize: 20 };

app/containers/message/Reply.js

@@ -6,15 +6,19 @@ import { RectButton } from 'react-native-gesture-handler';
 
 import Markdown from './Markdown';
 import openLink from '../../utils/openLink';
+import sharedStyles from '../../views/Styles';
+import { COLOR_BACKGROUND_CONTAINER, COLOR_BORDER, COLOR_WHITE } from '../../constants/colors';
 
 const styles = StyleSheet.create({
 	button: {
 		flex: 1,
 		flexDirection: 'row',
 		alignItems: 'center',
-		marginTop: 15,
+		marginTop: 6,
 		alignSelf: 'flex-end',
-		backgroundColor: '#f3f4f5',
+		backgroundColor: COLOR_BACKGROUND_CONTAINER,
+		borderColor: COLOR_BORDER,
+		borderWidth: 1,
 		borderRadius: 4
 	},
 	attachmentContainer: {
@@ -30,16 +34,16 @@ const styles = StyleSheet.create({
 	},
 	author: {
 		flex: 1,
-		color: '#0C0D0F',
 		fontSize: 16,
-		fontWeight: '500',
+		...sharedStyles.textColorNormal,
-		marginRight: 10
+		...sharedStyles.textMedium
 	},
 	time: {
 		fontSize: 12,
-		fontWeight: 'normal',
+		marginLeft: 10,
-		color: '#9ea2a8',
+		...sharedStyles.textColorDescription,
-		marginLeft: 5
+		...sharedStyles.textRegular,
+		fontWeight: '300'
 	},
 	fieldsContainer: {
 		flex: 1,
@@ -51,7 +55,14 @@ const styles = StyleSheet.create({
 		padding: 10
 	},
 	fieldTitle: {
-		fontWeight: 'bold'
+		fontSize: 14,
+		...sharedStyles.textColorNormal,
+		...sharedStyles.textSemibold
+	},
+	fieldValue: {
+		fontSize: 14,
+		...sharedStyles.textColorNormal,
+		...sharedStyles.textRegular
 	},
 	marginTop: {
 		marginTop: 4
@@ -121,7 +132,7 @@ const Reply = ({
 				{attachment.fields.map(field => (
 					<View key={field.title} style={[styles.fieldContainer, { width: field.short ? '50%' : '100%' }]}>
 						<Text style={styles.fieldTitle}>{field.title}</Text>
-						<Text>{field.value}</Text>
+						<Text style={styles.fieldValue}>{field.value}</Text>
 					</View>
 				))}
 			</View>
@@ -133,7 +144,7 @@ const Reply = ({
 			onPress={() => onPress(attachment, baseUrl, user)}
 			style={[styles.button, index > 0 && styles.marginTop]}
 			activeOpacity={0.5}
-			underlayColor='#fff'
+			underlayColor={COLOR_WHITE}
 		>
 			<View style={styles.attachmentContainer}>
 				{renderTitle()}

app/containers/message/Url.js

@@ -5,6 +5,10 @@ import FastImage from 'react-native-fast-image';
 import { RectButton } from 'react-native-gesture-handler';
 
 import openLink from '../../utils/openLink';
+import sharedStyles from '../../views/Styles';
+import {
+	COLOR_BACKGROUND_CONTAINER, COLOR_BORDER, COLOR_PRIMARY, COLOR_WHITE
+} from '../../constants/colors';
 
 const styles = StyleSheet.create({
 	button: {
@@ -14,8 +18,8 @@ const styles = StyleSheet.create({
 		flex: 1,
 		flexDirection: 'column',
 		borderRadius: 4,
-		backgroundColor: '#F3F4F5',
+		backgroundColor: COLOR_BACKGROUND_CONTAINER,
-		borderColor: '#F3F4F5',
+		borderColor: COLOR_BORDER,
 		borderWidth: 1
 	},
 	textContainer: {
@@ -26,14 +30,14 @@ const styles = StyleSheet.create({
 		alignItems: 'flex-start'
 	},
 	title: {
-		fontWeight: '500',
+		color: COLOR_PRIMARY,
-		color: '#1D74F5',
+		fontSize: 16,
-		fontSize: 16
+		...sharedStyles.textMedium
 	},
 	description: {
-		marginTop: 5,
 		fontSize: 16,
-		color: '#0C0D0F'
+		...sharedStyles.textColorDescription,
+		...sharedStyles.textRegular
 	},
 	marginTop: {
 		marginTop: 4
@@ -58,7 +62,7 @@ const Url = ({ url, index }) => {
 			onPress={() => onPress(url.url)}
 			style={[styles.button, index > 0 && styles.marginTop, styles.container]}
 			activeOpacity={0.5}
-			underlayColor='#fff'
+			underlayColor={COLOR_WHITE}
 		>
 			{url.image ? <FastImage source={{ uri: url.image }} style={styles.image} resizeMode={FastImage.resizeMode.cover} /> : null}
 			<View style={styles.textContainer}>

app/containers/message/User.js

@@ -3,18 +3,19 @@ import PropTypes from 'prop-types';
 import { View, Text, StyleSheet } from 'react-native';
 import moment from 'moment';
 
+import sharedStyles from '../../views/Styles';
+
 const styles = StyleSheet.create({
 	container: {
 		flex: 1,
 		flexDirection: 'row',
-		alignItems: 'center',
+		alignItems: 'center'
-		marginBottom: 2
 	},
 	username: {
-		color: '#0C0D0F',
-		fontWeight: '600',
 		fontSize: 16,
-		lineHeight: 22
+		lineHeight: 22,
+		...sharedStyles.textColorNormal,
+		...sharedStyles.textMedium
 	},
 	titleContainer: {
 		flex: 1,
@@ -23,16 +24,16 @@ const styles = StyleSheet.create({
 	},
 	alias: {
 		fontSize: 14,
-		color: '#9EA2A8',
+		...sharedStyles.textColorDescription,
-		paddingLeft: 6,
+		...sharedStyles.textRegular
-		lineHeight: 16
 	},
 	time: {
 		fontSize: 12,
-		color: '#9EA2A8',
 		paddingLeft: 10,
-		fontWeight: '300',
+		lineHeight: 22,
-		lineHeight: 16
+		...sharedStyles.textColorDescription,
+		...sharedStyles.textRegular,
+		fontWeight: '300'
 	}
 });
 
@@ -64,10 +65,10 @@ export default class User extends React.PureComponent {
 		return (
 			<View style={styles.container}>
 				<View style={styles.titleContainer}>
-					<Text style={styles.username}>
+					<Text style={styles.username} numberOfLines={1}>
 						{alias || username}
-					</Text>
 						{aliasUsername}
+					</Text>
 				</View>
 				<Text style={styles.time}>{time}</Text>
 			</View>

app/containers/message/Video.js

@@ -9,6 +9,7 @@ import Markdown from './Markdown';
 import openLink from '../../utils/openLink';
 import { isIOS } from '../../utils/deviceInfo';
 import { CustomIcon } from '../../lib/Icons';
+import { COLOR_WHITE } from '../../constants/colors';
 
 const SUPPORTED_TYPES = ['video/quicktime', 'video/mp4', ...(isIOS ? [] : ['video/webm', 'video/3gp', 'video/mkv'])];
 const isTypeSupported = type => SUPPORTED_TYPES.indexOf(type) !== -1;
@@ -19,7 +20,7 @@ const styles = StyleSheet.create({
 		borderRadius: 4,
 		height: 150,
 		backgroundColor: '#1f2329',
-		marginBottom: 10,
+		marginBottom: 6,
 		alignItems: 'center',
 		justifyContent: 'center'
 	},
@@ -80,7 +81,7 @@ export default class Video extends React.PureComponent {
 						style={styles.button}
 						onPress={() => this.open()}
 						activeOpacity={0.5}
-						underlayColor='#fff'
+						underlayColor={COLOR_WHITE}
 					>
 						<CustomIcon
 							name='play'

app/containers/message/styles.js

@@ -1,5 +1,8 @@
 import { StyleSheet } from 'react-native';
 
+import sharedStyles from '../../views/Styles';
+import { COLOR_BORDER, COLOR_PRIMARY, COLOR_WHITE } from '../../constants/colors';
+
 export default StyleSheet.create({
 	root: {
 		flexDirection: 'row'
@@ -27,8 +30,9 @@ export default StyleSheet.create({
 	},
 	textInfo: {
 		fontStyle: 'italic',
-		color: '#a0a0a0',
+		fontSize: 16,
-		fontSize: 16
+		...sharedStyles.textColorDescription,
+		...sharedStyles.textRegular
 	},
 	editing: {
 		backgroundColor: '#fff5df'
@@ -39,37 +43,37 @@ export default StyleSheet.create({
 	},
 	temp: { opacity: 0.3 },
 	marginTop: {
-		marginTop: 10
+		marginTop: 6
 	},
 	reactionsContainer: {
 		flexDirection: 'row',
 		flexWrap: 'wrap',
-		marginTop: 10
+		marginTop: 6
 	},
 	reactionButton: {
-		marginRight: 10,
+		marginRight: 6,
-		marginBottom: 10,
+		marginBottom: 6,
 		borderRadius: 2
 	},
 	reactionContainer: {
 		flexDirection: 'row',
 		justifyContent: 'center',
 		alignItems: 'center',
-		borderRadius: 4,
+		borderRadius: 2,
-		borderWidth: 1.5,
+		borderWidth: 1,
-		borderColor: '#e1e5e8',
+		borderColor: COLOR_BORDER,
 		height: 28,
-		minWidth: 46
+		minWidth: 46.3
 	},
 	reactedContainer: {
-		borderColor: '#1d74f580'
+		borderColor: COLOR_PRIMARY
 	},
 	reactionCount: {
 		fontSize: 14,
 		marginLeft: 3,
 		marginRight: 8.5,
-		fontWeight: '600',
+		color: COLOR_PRIMARY,
-		color: '#1D74F5'
+		...sharedStyles.textSemibold
 	},
 	reactionEmoji: {
 		fontSize: 13,
@@ -84,7 +88,7 @@ export default StyleSheet.create({
 		marginTop: 4
 	},
 	addReaction: {
-		color: '#1D74F5'
+		color: COLOR_PRIMARY
 	},
 	errorButton: {
 		paddingHorizontal: 15,
@@ -98,30 +102,30 @@ export default StyleSheet.create({
 		flexDirection: 'row',
 		alignItems: 'center',
 		justifyContent: 'center',
-		backgroundColor: '#1d74f5',
+		backgroundColor: COLOR_PRIMARY,
 		borderRadius: 4
 	},
 	broadcastButtonIcon: {
-		color: '#fff',
+		color: COLOR_WHITE,
 		marginRight: 11
 	},
 	broadcastButtonText: {
-		color: '#fff',
+		color: COLOR_WHITE,
 		fontSize: 14,
-		fontWeight: '500'
+		...sharedStyles.textMedium
 	},
 	mention: {
+		...sharedStyles.textMedium,
 		color: '#0072FE',
-		fontWeight: '500',
 		padding: 5,
 		backgroundColor: '#E8F2FF'
 	},
 	mentionLoggedUser: {
-		color: '#fff',
+		color: COLOR_WHITE,
-		backgroundColor: '#1D74F5'
+		backgroundColor: COLOR_PRIMARY
 	},
 	mentionAll: {
-		color: '#fff',
+		color: COLOR_WHITE,
 		backgroundColor: '#FF5B5A'
 	},
 	paragraph: {
@@ -135,7 +139,7 @@ export default StyleSheet.create({
 	imageContainer: {
 		flex: 1,
 		flexDirection: 'column',
-		borderColor: '#F3F4F5',
+		borderColor: COLOR_BORDER,
 		borderWidth: 1,
 		borderRadius: 4
 	},
@@ -144,7 +148,7 @@ export default StyleSheet.create({
 		maxWidth: 400,
 		minHeight: 200,
 		borderRadius: 4,
-		marginBottom: 10
+		marginBottom: 6
 	},
 	inlineImage: {
 		width: 300,
@@ -153,6 +157,7 @@ export default StyleSheet.create({
 	},
 	edited: {
 		fontSize: 14,
-		color: '#9EA2A8'
+		...sharedStyles.textColorDescription,
+		...sharedStyles.textRegular
 	}
 });

app/i18n/locales/en.js

@@ -349,7 +349,7 @@ export default {
 	Yesterday: 'Yesterday',
 	You_are_in_preview_mode: 'You are in preview mode',
 	You_are_offline: 'You are offline',
-	You_can_search_using_RegExp_eg: 'You can search using RegExp. e.g. `/^text$/i`',
+	You_can_search_using_RegExp_eg: 'You can use RegExp. e.g. `/^text$/i`',
 	You_colon: 'You: ',
 	you_were_mentioned: 'you were mentioned',
 	you: 'you',

app/i18n/locales/pt-BR.js

@@ -346,7 +346,7 @@ export default {
 	Yesterday: 'Ontem',
 	You_are_in_preview_mode: 'Está é uma prévia do canal',
 	You_are_offline: 'Você está offline',
-	You_can_search_using_RegExp_eg: 'Você pode pesquisar usando expressões regulares, por exemplo `/^text$/i`',
+	You_can_search_using_RegExp_eg: 'Você pode usar expressões regulares, por exemplo `/^text$/i`',
 	You_colon: 'Você: ',
 	you_were_mentioned: 'você foi mencionado',
 	you: 'você',

app/lib/methods/helpers/normalizeMessage.js

@@ -18,7 +18,12 @@ function normalizeAttachments(msg) {
 }
 
 export default (msg) => {
-	if (!msg) { return; }
+	/**
+	 * 2019-03-29: Realm object properties are *always* optional, but `u.username` is required
+	 * https://realm.io/docs/javascript/latest/#to-one-relationships
+	 */
+	if (!msg || !msg.u || !msg.u.username) { return; }
+
 	msg = normalizeAttachments(msg);
 	msg.reactions = msg.reactions || [];
 	// TODO: api problems

app/presentation/RoomItem.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import moment from 'moment';
 import PropTypes from 'prop-types';
-import { View, Text, StyleSheet } from 'react-native';
+import {
+	View, Text, StyleSheet, PixelRatio
+} from 'react-native';
 import { connect } from 'react-redux';
 import { emojify } from 'react-emojione';
 import { RectButton } from 'react-native-gesture-handler';
@@ -10,29 +12,34 @@ import Avatar from '../containers/Avatar';
 import Status from '../containers/Status';
 import RoomTypeIcon from '../containers/RoomTypeIcon';
 import I18n from '../i18n';
-import { isIOS } from '../utils/deviceInfo';
+import sharedStyles from '../views/Styles';
+import { COLOR_SEPARATOR, COLOR_PRIMARY, COLOR_WHITE } from '../constants/colors';
+
+export const ROW_HEIGHT = 75 * PixelRatio.getFontScale();
 
 const styles = StyleSheet.create({
 	container: {
 		flexDirection: 'row',
 		alignItems: 'center',
-		marginHorizontal: 15
+		marginLeft: 14,
+		height: ROW_HEIGHT
 	},
 	centerContainer: {
 		flex: 1,
-		height: '100%'
+		paddingVertical: 10,
+		paddingRight: 14,
+		borderBottomWidth: StyleSheet.hairlineWidth,
+		borderColor: COLOR_SEPARATOR
 	},
 	title: {
 		flex: 1,
-		fontSize: 18,
+		fontSize: 17,
-		color: '#0C0D0F',
+		lineHeight: 20,
-		fontWeight: '400',
+		...sharedStyles.textColorNormal,
-		marginRight: 5,
+		...sharedStyles.textMedium
-		paddingTop: 0,
-		paddingBottom: 0
 	},
 	alert: {
-		fontWeight: '600'
+		...sharedStyles.textSemibold
 	},
 	row: {
 		flex: 1,
@@ -41,35 +48,34 @@ const styles = StyleSheet.create({
 	},
 	titleContainer: {
 		width: '100%',
-		marginTop: isIOS ? 5 : 2,
 		flexDirection: 'row',
 		alignItems: 'center',
 		justifyContent: 'center'
 	},
 	date: {
-		fontSize: 14,
+		fontSize: 13,
-		color: '#9EA2A8',
+		marginLeft: 4,
-		fontWeight: 'normal',
+		...sharedStyles.textColorDescription,
-		paddingTop: 0,
+		...sharedStyles.textRegular
-		paddingBottom: 0
 	},
 	updateAlert: {
-		color: '#1D74F5',
+		color: COLOR_PRIMARY,
-		fontWeight: '700'
+		...sharedStyles.textSemibold
 	},
 	unreadNumberContainer: {
 		minWidth: 23,
 		padding: 3,
 		borderRadius: 4,
-		backgroundColor: '#1D74F5',
+		backgroundColor: COLOR_PRIMARY,
 		alignItems: 'center',
-		justifyContent: 'center'
+		justifyContent: 'center',
+		marginLeft: 10
 	},
 	unreadNumberText: {
-		color: '#fff',
+		color: COLOR_WHITE,
 		overflow: 'hidden',
-		fontSize: 14,
+		fontSize: 13,
-		fontWeight: '500',
+		...sharedStyles.textRegular,
 		letterSpacing: 0.56
 	},
 	status: {
@@ -78,12 +84,13 @@ const styles = StyleSheet.create({
 	},
 	markdownText: {
 		flex: 1,
-		color: '#9EA2A8',
+		fontSize: 14,
-		fontSize: 15,
+		lineHeight: 17,
-		fontWeight: 'normal'
+		...sharedStyles.textRegular,
+		...sharedStyles.textColorDescription
 	},
 	markdownTextAlert: {
-		color: '#0C0D0F'
+		...sharedStyles.textColorNormal
 	},
 	avatar: {
 		marginRight: 10
@@ -110,25 +117,22 @@ const renderNumber = (unread, userMentions) => {
 	);
 };
 
-const attrs = ['name', 'unread', 'userMentions', 'StoreLastMessage', 'alert', 'type'];
+const attrs = ['name', 'unread', 'userMentions', 'showLastMessage', 'alert', 'type'];
 @connect(state => ({
 	user: {
 		id: state.login.user && state.login.user.id,
 		username: state.login.user && state.login.user.username,
 		token: state.login.user && state.login.user.token
-	},
+	}
-	StoreLastMessage: state.settings.Store_Last_Message,
-	baseUrl: state.settings.Site_Url || state.server ? state.server.server : ''
 }))
 export default class RoomItem extends React.Component {
 	static propTypes = {
 		type: PropTypes.string.isRequired,
 		name: PropTypes.string.isRequired,
 		baseUrl: PropTypes.string.isRequired,
-		StoreLastMessage: PropTypes.bool,
+		showLastMessage: PropTypes.bool,
 		_updatedAt: PropTypes.string,
 		lastMessage: PropTypes.object,
-		favorite: PropTypes.bool,
 		alert: PropTypes.bool,
 		unread: PropTypes.number,
 		userMentions: PropTypes.number,
@@ -172,10 +176,10 @@ export default class RoomItem extends React.Component {
 
 	get lastMessage() {
 		const {
-			lastMessage, type, StoreLastMessage, user
+			lastMessage, type, showLastMessage, user
 		} = this.props;
 
-		if (!StoreLastMessage) {
+		if (!showLastMessage) {
 			return '';
 		}
 		if (!lastMessage) {
@@ -214,14 +218,14 @@ export default class RoomItem extends React.Component {
 
 	formatDate = date => moment(date).calendar(null, {
 		lastDay: `[${ I18n.t('Yesterday') }]`,
-		sameDay: 'HH:mm',
+		sameDay: 'h:mm A',
 		lastWeek: 'dddd',
 		sameElse: 'MMM D'
 	})
 
 	render() {
 		const {
-			favorite, unread, userMentions, name, _updatedAt, alert, testID, height, onPress
+			unread, userMentions, name, _updatedAt, alert, testID, height, onPress
 		} = this.props;
 
 		const date = this.formatDate(_updatedAt);
@@ -249,7 +253,7 @@ export default class RoomItem extends React.Component {
 				testID={testID}
 			>
 				<View
-					style={[styles.container, favorite && styles.favorite, height && { height }]}
+					style={[styles.container, height && { height }]}
 					accessibilityLabel={accessibilityLabel}
 				>
 					{this.avatar}

app/presentation/UserItem.js

@@ -6,13 +6,14 @@ import PropTypes from 'prop-types';
 
 import Avatar from '../containers/Avatar';
 import Touch from '../utils/touch';
-import { isIOS } from '../utils/deviceInfo';
 import { CustomIcon } from '../lib/Icons';
+import sharedStyles from '../views/Styles';
+import { COLOR_PRIMARY, COLOR_WHITE } from '../constants/colors';
 
 const styles = StyleSheet.create({
 	button: {
 		height: 54,
-		backgroundColor: '#fff'
+		backgroundColor: COLOR_WHITE
 	},
 	container: {
 		flexDirection: 'row'
@@ -23,23 +24,23 @@ const styles = StyleSheet.create({
 	},
 	textContainer: {
 		flex: 1,
-		flexDirection: 'column'
+		flexDirection: 'column',
+		justifyContent: 'center'
 	},
 	name: {
-		fontSize: 18,
+		fontSize: 17,
-		color: '#0C0D0F',
+		...sharedStyles.textMedium,
-		marginTop: isIOS ? 6 : 3,
+		...sharedStyles.textColorNormal
-		marginBottom: 1,
-		textAlign: 'left'
 	},
 	username: {
 		fontSize: 14,
-		color: '#9EA2A8'
+		...sharedStyles.textRegular,
+		...sharedStyles.textColorDescription
 	},
 	icon: {
 		marginHorizontal: 15,
 		alignSelf: 'center',
-		color: '#1D74F5'
+		color: COLOR_PRIMARY
 	}
 });
 

app/utils/touch/index.ios.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import { TouchableHighlight } from 'react-native';
 import PropTypes from 'prop-types';
+import { COLOR_WHITE } from '../../constants/colors';
 
 const Touch = ({ children, onPress, ...props }) => (
 	<TouchableHighlight
-		underlayColor='#FFFFFF'
+		underlayColor={COLOR_WHITE}
 		activeOpacity={0.5}
 		onPress={onPress}
 		{...props}

app/views/CreateChannelView.js

@@ -20,6 +20,7 @@ import { showErrorAlert } from '../utils/info';
 import { isAndroid } from '../utils/deviceInfo';
 import { CustomHeaderButtons, Item } from '../containers/HeaderButton';
 import StatusBar from '../containers/StatusBar';
+import { COLOR_TEXT_DESCRIPTION, COLOR_WHITE } from '../constants/colors';
 
 const styles = StyleSheet.create({
 	container: {
@@ -28,7 +29,7 @@ const styles = StyleSheet.create({
 	},
 	list: {
 		width: '100%',
-		backgroundColor: '#FFFFFF'
+		backgroundColor: COLOR_WHITE
 	},
 	separator: {
 		marginLeft: 60
@@ -39,22 +40,23 @@ const styles = StyleSheet.create({
 	input: {
 		height: 54,
 		paddingHorizontal: 18,
-		color: '#9EA2A8',
+		fontSize: 17,
-		backgroundColor: '#fff',
+		...sharedStyles.textRegular,
-		fontSize: 18
+		...sharedStyles.textColorNormal,
+		backgroundColor: COLOR_WHITE
 	},
 	swithContainer: {
 		height: 54,
-		backgroundColor: '#fff',
+		backgroundColor: COLOR_WHITE,
 		alignItems: 'center',
 		justifyContent: 'space-between',
 		flexDirection: 'row',
 		paddingHorizontal: 18
 	},
 	label: {
-		color: '#0C0D0F',
+		fontSize: 17,
-		fontSize: 18,
+		...sharedStyles.textMedium,
-		fontWeight: '500'
+		...sharedStyles.textColorNormal
 	},
 	invitedHeader: {
 		marginTop: 18,
@@ -64,14 +66,15 @@ const styles = StyleSheet.create({
 		alignItems: 'center'
 	},
 	invitedTitle: {
-		color: '#2F343D',
+		fontSize: 18,
-		fontSize: 22,
+		...sharedStyles.textSemibold,
-		fontWeight: 'bold',
+		...sharedStyles.textColorNormal,
 		lineHeight: 41
 	},
 	invitedCount: {
-		color: '#9EA2A8',
+		fontSize: 14,
-		fontSize: 15
+		...sharedStyles.textRegular,
+		...sharedStyles.textColorDescription
 	}
 });
 
@@ -347,6 +350,7 @@ export default class CreateChannelView extends LoggedView {
 								value={channelName}
 								onChangeText={this.onChangeText}
 								placeholder={I18n.t('Channel_Name')}
+								placeholderTextColor={COLOR_TEXT_DESCRIPTION}
 								returnKeyType='done'
 								testID='create-channel-name'
 								autoCorrect={false}

app/views/LegalView.js

@@ -13,7 +13,7 @@ import I18n from '../i18n';
 import DisclosureIndicator from '../containers/DisclosureIndicator';
 import { CloseModalButton } from '../containers/HeaderButton';
 import StatusBar from '../containers/StatusBar';
-import { COLOR_SEPARATOR } from '../constants/colors';
+import { COLOR_SEPARATOR, COLOR_WHITE } from '../constants/colors';
 
 const styles = StyleSheet.create({
 	container: {
@@ -22,7 +22,7 @@ const styles = StyleSheet.create({
 	},
 	scroll: {
 		marginTop: 35,
-		backgroundColor: '#fff',
+		backgroundColor: COLOR_WHITE,
 		borderColor: COLOR_SEPARATOR,
 		borderTopWidth: StyleSheet.hairlineWidth,
 		borderBottomWidth: StyleSheet.hairlineWidth
@@ -36,7 +36,7 @@ const styles = StyleSheet.create({
 	item: {
 		width: '100%',
 		height: 48,
-		backgroundColor: '#fff',
+		backgroundColor: COLOR_WHITE,
 		paddingLeft: 20,
 		paddingRight: 10,
 		flexDirection: 'row',
@@ -45,7 +45,7 @@ const styles = StyleSheet.create({
 	},
 	text: {
 		...sharedStyles.textMedium,
-		color: '#0c0d0f',
+		...sharedStyles.textColorNormal,
 		fontSize: 18
 	}
 });

app/views/LoginSignupView.js

@@ -17,7 +17,7 @@ import Button from '../containers/Button';
 import I18n from '../i18n';
 import { LegalButton } from '../containers/HeaderButton';
 import StatusBar from '../containers/StatusBar';
-import { COLOR_SEPARATOR } from '../constants/colors';
+import { COLOR_SEPARATOR, COLOR_BORDER } from '../constants/colors';
 
 const styles = StyleSheet.create({
 	container: {
@@ -33,7 +33,7 @@ const styles = StyleSheet.create({
 	serviceButtonContainer: {
 		borderRadius: 2,
 		borderWidth: 1,
-		borderColor: '#e1e5e8',
+		borderColor: COLOR_BORDER,
 		width: '100%',
 		height: 48,
 		flexDirection: 'row',
@@ -50,8 +50,8 @@ const styles = StyleSheet.create({
 	},
 	serviceText: {
 		...sharedStyles.textRegular,
-		fontSize: 16,
+		...sharedStyles.textColorNormal,
-		color: '#2f343d'
+		fontSize: 16
 	},
 	serviceName: {
 		...sharedStyles.textBold

app/views/LoginView.js

@@ -18,6 +18,7 @@ import I18n from '../i18n';
 import { loginRequest as loginRequestAction } from '../actions/login';
 import { LegalButton } from '../containers/HeaderButton';
 import StatusBar from '../containers/StatusBar';
+import { COLOR_PRIMARY } from '../constants/colors';
 
 const styles = StyleSheet.create({
 	buttonsContainer: {
@@ -31,12 +32,12 @@ const styles = StyleSheet.create({
 	},
 	dontHaveAccount: {
 		...sharedStyles.textRegular,
-		color: '#9ea2a8',
+		...sharedStyles.textColorDescription,
 		fontSize: 13
 	},
 	createAccount: {
 		...sharedStyles.textSemibold,
-		color: '#1d74f5',
+		color: COLOR_PRIMARY,
 		fontSize: 13
 	},
 	loginTitle: {

app/views/MentionedMessagesView/index.js

@@ -93,7 +93,7 @@ export default class MentionedMessagesView extends LoggedView {
 
 	renderEmpty = () => (
 		<View style={styles.listEmptyContainer} testID='mentioned-messages-view'>
-			<Text>{I18n.t('No_mentioned_messages')}</Text>
+			<Text style={styles.noDataFound}>{I18n.t('No_mentioned_messages')}</Text>
 		</View>
 	)
 
@@ -101,7 +101,6 @@ export default class MentionedMessagesView extends LoggedView {
 		const { user, customEmojis, baseUrl } = this.props;
 		return (
 			<Message
-				style={styles.message}
 				customEmojis={customEmojis}
 				baseUrl={baseUrl}
 				user={user}

app/views/MentionedMessagesView/styles.js

@@ -1,17 +1,22 @@
 import { StyleSheet } from 'react-native';
 
+import sharedStyles from '../Styles';
+import { COLOR_WHITE } from '../../constants/colors';
+
 export default StyleSheet.create({
 	list: {
 		flex: 1,
-		backgroundColor: '#ffffff'
+		backgroundColor: COLOR_WHITE
-	},
-	message: {
-		transform: [{ scaleY: 1 }]
 	},
 	listEmptyContainer: {
 		flex: 1,
 		alignItems: 'center',
 		justifyContent: 'center',
-		backgroundColor: '#ffffff'
+		backgroundColor: COLOR_WHITE
+	},
+	noDataFound: {
+		fontSize: 14,
+		...sharedStyles.textRegular,
+		...sharedStyles.textColorNormal
 	}
 });

app/views/NewMessageView.js

@@ -20,6 +20,7 @@ import SearchBox from '../containers/SearchBox';
 import { CustomIcon } from '../lib/Icons';
 import { CloseModalButton } from '../containers/HeaderButton';
 import StatusBar from '../containers/StatusBar';
+import { COLOR_PRIMARY, COLOR_WHITE } from '../constants/colors';
 
 const styles = StyleSheet.create({
 	safeAreaView: {
@@ -34,17 +35,18 @@ const styles = StyleSheet.create({
 	},
 	createChannelContainer: {
 		height: 47,
-		backgroundColor: '#fff',
+		backgroundColor: COLOR_WHITE,
 		flexDirection: 'row',
 		alignItems: 'center'
 	},
 	createChannelIcon: {
-		color: '#1D74F5',
+		color: COLOR_PRIMARY,
 		marginHorizontal: 18
 	},
 	createChannelText: {
-		color: '#1D74F5',
+		color: COLOR_PRIMARY,
-		fontSize: 18
+		fontSize: 17,
+		...sharedStyles.textRegular
 	}
 });
 

app/views/NewServerView.js

@@ -16,9 +16,9 @@ import I18n from '../i18n';
 import { verticalScale, moderateScale } from '../utils/scaling';
 import KeyboardView from '../presentation/KeyboardView';
 import { isIOS, isNotch } from '../utils/deviceInfo';
-// import { LIGHT_HEADER } from '../constants/headerOptions';
 import { CustomIcon } from '../lib/Icons';
 import StatusBar from '../containers/StatusBar';
+import { COLOR_PRIMARY } from '../constants/colors';
 
 const styles = StyleSheet.create({
 	image: {
@@ -29,9 +29,9 @@ const styles = StyleSheet.create({
 	},
 	title: {
 		...sharedStyles.textBold,
+		...sharedStyles.textColorNormal,
 		fontSize: moderateScale(22),
 		letterSpacing: 0,
-		color: '#2F343D',
 		alignSelf: 'center'
 	},
 	inputContainer: {
@@ -40,9 +40,9 @@ const styles = StyleSheet.create({
 	},
 	input: {
 		...sharedStyles.textRegular,
+		...sharedStyles.textColorDescription,
 		fontSize: 17,
 		letterSpacing: 0,
-		color: '#9EA2A8',
 		paddingTop: 14,
 		paddingBottom: 14,
 		paddingLeft: 16,
@@ -162,7 +162,7 @@ export default class NewServerView extends LoggedView {
 				<CustomIcon
 					name='back'
 					size={30}
-					color='#1D74F5'
+					color={COLOR_PRIMARY}
 				/>
 			</TouchableOpacity>
 		);

app/views/OnboardingView/index.js

@@ -18,6 +18,7 @@ import { isIOS, isNotch } from '../../utils/deviceInfo';
 import EventEmitter from '../../utils/events';
 import { CustomIcon } from '../../lib/Icons';
 import StatusBar from '../../containers/StatusBar';
+import { COLOR_PRIMARY, COLOR_WHITE } from '../../constants/colors';
 
 @connect(state => ({
 	currentServer: state.server.server,
@@ -125,7 +126,7 @@ export default class OnboardingView extends LoggedView {
 					<CustomIcon
 						name='cross'
 						size={30}
-						color='#1D74F5'
+						color={COLOR_PRIMARY}
 					/>
 				</TouchableOpacity>
 			);
@@ -144,7 +145,7 @@ export default class OnboardingView extends LoggedView {
 					<Button
 						type='secondary'
 						title={I18n.t('Connect_to_a_server')}
-						icon={<CustomIcon name='permalink' size={30} color='#1D74F5' />}
+						icon={<CustomIcon name='permalink' size={30} color={COLOR_PRIMARY} />}
 						onPress={this.connectServer}
 						testID='connect-server-button'
 					/>
@@ -159,7 +160,7 @@ export default class OnboardingView extends LoggedView {
 					<Button
 						type='primary'
 						title={I18n.t('Create_a_new_workspace')}
-						icon={<CustomIcon name='plus' size={30} color='#fff' />}
+						icon={<CustomIcon name='plus' size={30} color={COLOR_WHITE} />}
 						onPress={this.createWorkspace}
 						testID='create-workspace-button'
 					/>

app/views/OnboardingView/styles.js

@@ -2,23 +2,24 @@ import { StyleSheet } from 'react-native';
 
 import { verticalScale, moderateScale } from '../../utils/scaling';
 import sharedStyles from '../Styles';
+import { COLOR_PRIMARY, COLOR_BORDER, COLOR_WHITE } from '../../constants/colors';
 
 const colors = {
-	backgroundPrimary: '#1D74F5',
+	backgroundPrimary: COLOR_PRIMARY,
 	backgroundSecondary: 'white',
 
 	textColorPrimary: 'white',
-	textColorSecondary: '#1D74F5',
+	textColorSecondary: COLOR_PRIMARY,
 
-	borderColorPrimary: '#1D74F5',
+	borderColorPrimary: COLOR_PRIMARY,
-	borderColorSecondary: '#E1E5E8'
+	borderColorSecondary: COLOR_BORDER
 };
 
 export default StyleSheet.create({
 	container: {
 		flex: 1,
 		flexDirection: 'column',
-		backgroundColor: '#fff'
+		backgroundColor: COLOR_WHITE
 	},
 	onboarding: {
 		alignSelf: 'center',
@@ -31,9 +32,9 @@ export default StyleSheet.create({
 	},
 	title: {
 		...sharedStyles.textBold,
+		...sharedStyles.textColorNormal,
 		letterSpacing: 0,
 		fontSize: moderateScale(24),
-		color: '#2F343D',
 		alignSelf: 'center',
 		marginBottom: verticalScale(8)
 	},
@@ -67,7 +68,7 @@ export default StyleSheet.create({
 	},
 	buttonSubtitle: {
 		...sharedStyles.textRegular,
-		color: '#9EA2A8',
+		...sharedStyles.textColorDescription,
 		fontSize: 15
 	},
 	buttonIconContainer: {

app/views/PinnedMessagesView/index.js

@@ -131,7 +131,7 @@ export default class PinnedMessagesView extends LoggedView {
 
 	renderEmpty = () => (
 		<View style={styles.listEmptyContainer} testID='pinned-messages-view'>
-			<Text>{I18n.t('No_pinned_messages')}</Text>
+			<Text style={styles.noDataFound}>{I18n.t('No_pinned_messages')}</Text>
 		</View>
 	)
 
@@ -139,7 +139,6 @@ export default class PinnedMessagesView extends LoggedView {
 		const { user, customEmojis, baseUrl } = this.props;
 		return (
 			<Message
-				style={styles.message}
 				customEmojis={customEmojis}
 				baseUrl={baseUrl}
 				user={user}

app/views/PinnedMessagesView/styles.js

@@ -1,17 +1,22 @@
 import { StyleSheet } from 'react-native';
 
+import sharedStyles from '../Styles';
+import { COLOR_WHITE } from '../../constants/colors';
+
 export default StyleSheet.create({
 	list: {
 		flex: 1,
-		backgroundColor: '#ffffff'
+		backgroundColor: COLOR_WHITE
-	},
-	message: {
-		transform: [{ scaleY: 1 }]
 	},
 	listEmptyContainer: {
 		flex: 1,
 		alignItems: 'center',
 		justifyContent: 'center',
-		backgroundColor: '#ffffff'
+		backgroundColor: COLOR_WHITE
+	},
+	noDataFound: {
+		fontSize: 14,
+		...sharedStyles.textRegular,
+		...sharedStyles.textColorNormal
 	}
 });

app/views/ProfileView/index.js

@@ -26,6 +26,7 @@ import { setUser as setUserAction } from '../../actions/login';
 import { CustomIcon } from '../../lib/Icons';
 import { DrawerButton } from '../../containers/HeaderButton';
 import StatusBar from '../../containers/StatusBar';
+import { COLOR_TEXT } from '../../constants/colors';
 
 @connect(state => ({
 	user: {
@@ -290,12 +291,12 @@ export default class ProfileView extends LoggedView {
 					key: 'profile-view-reset-avatar'
 				})}
 				{this.renderAvatarButton({
-					child: <CustomIcon name='upload' size={30} />,
+					child: <CustomIcon name='upload' size={30} color={COLOR_TEXT} />,
 					onPress: () => this.pickImage(),
 					key: 'profile-view-upload-avatar'
 				})}
 				{this.renderAvatarButton({
-					child: <CustomIcon name='permalink' size={30} />,
+					child: <CustomIcon name='permalink' size={30} color={COLOR_TEXT} />,
 					onPress: () => this.setAvatar({ url: avatarUrl, data: avatarUrl, service: 'url' }),
 					disabled: !avatarUrl,
 					key: 'profile-view-avatar-url-button'

app/views/RoomActionsView/index.js

@@ -23,6 +23,7 @@ import scrollPersistTaps from '../../utils/scrollPersistTaps';
 import { CustomIcon } from '../../lib/Icons';
 import DisclosureIndicator from '../../containers/DisclosureIndicator';
 import StatusBar from '../../containers/StatusBar';
+import { COLOR_WHITE } from '../../constants/colors';
 
 const renderSeparator = () => <View style={styles.separator} />;
 
@@ -403,7 +404,7 @@ export default class RoomActionsView extends LoggedView {
 	renderTouchableItem = (subview, item) => (
 		<Touch
 			onPress={() => this.onPressTouchable(item)}
-			underlayColor='#FFFFFF'
+			underlayColor={COLOR_WHITE}
 			activeOpacity={0.5}
 			accessibilityLabel={item.name}
 			accessibilityTraits='button'
@@ -443,6 +444,7 @@ export default class RoomActionsView extends LoggedView {
 			<SafeAreaView style={styles.container} testID='room-actions-view' forceInset={{ bottom: 'never' }}>
 				<StatusBar />
 				<SectionList
+					contentContainerStyle={styles.contentContainer}
 					style={styles.container}
 					stickySectionHeadersEnabled={false}
 					sections={this.sections}

app/views/RoomActionsView/styles.js

@@ -1,13 +1,20 @@
 import { StyleSheet } from 'react-native';
-import { COLOR_SEPARATOR } from '../../constants/colors';
+import {
+	COLOR_SEPARATOR, COLOR_BORDER, COLOR_DANGER, COLOR_WHITE
+} from '../../constants/colors';
+
+import sharedStyles from '../Styles';
 
 export default StyleSheet.create({
+	contentContainer: {
+		paddingBottom: 30
+	},
 	container: {
 		flex: 1,
 		backgroundColor: '#F6F7F9'
 	},
 	sectionItem: {
-		backgroundColor: '#ffffff',
+		backgroundColor: COLOR_WHITE,
 		paddingVertical: 16,
 		flexDirection: 'row',
 		alignItems: 'center'
@@ -17,13 +24,19 @@ export default StyleSheet.create({
 	},
 	sectionItemIcon: {
 		width: 56,
-		textAlign: 'center'
+		textAlign: 'center',
+		...sharedStyles.textColorNormal
 	},
 	sectionItemName: {
-		flex: 1
+		flex: 1,
+		fontSize: 14,
+		...sharedStyles.textColorNormal,
+		...sharedStyles.textRegular
 	},
 	sectionItemDescription: {
-		color: '#ccc'
+		fontSize: 14,
+		...sharedStyles.textColorDescription,
+		...sharedStyles.textRegular
 	},
 	separator: {
 		height: StyleSheet.hairlineWidth,
@@ -34,24 +47,27 @@ export default StyleSheet.create({
 		backgroundColor: '#F6F7F9'
 	},
 	sectionSeparatorBorder: {
-		borderColor: '#EBEDF1',
+		borderColor: COLOR_BORDER,
 		borderTopWidth: 1
 	},
 	textColorDanger: {
-		color: '#f5455c'
+		color: COLOR_DANGER
 	},
 	avatar: {
-		marginHorizontal: 10
+		marginHorizontal: 16
 	},
 	roomTitleContainer: {
 		flex: 1
 	},
 	roomTitle: {
-		fontSize: 16
+		fontSize: 16,
+		...sharedStyles.textColorNormal,
+		...sharedStyles.textMedium
 	},
 	roomDescription: {
-		fontSize: 12,
+		fontSize: 13,
-		color: '#ccc'
+		...sharedStyles.textColorDescription,
+		...sharedStyles.textRegular
 	},
 	roomTitleRow: {
 		flexDirection: 'row',

app/views/RoomFilesView/index.js

@@ -87,7 +87,7 @@ export default class RoomFilesView extends LoggedView {
 
 	renderEmpty = () => (
 		<View style={styles.listEmptyContainer} testID='room-files-view'>
-			<Text>{I18n.t('No_files')}</Text>
+			<Text style={styles.noDataFound}>{I18n.t('No_files')}</Text>
 		</View>
 	)
 
@@ -110,7 +110,6 @@ export default class RoomFilesView extends LoggedView {
 
 		return (
 			<Message
-				style={styles.message}
 				customEmojis={customEmojis}
 				baseUrl={baseUrl}
 				user={user}

app/views/RoomFilesView/styles.js

@@ -1,17 +1,22 @@
 import { StyleSheet } from 'react-native';
 
+import sharedStyles from '../Styles';
+import { COLOR_WHITE } from '../../constants/colors';
+
 export default StyleSheet.create({
 	list: {
 		flex: 1,
-		backgroundColor: '#ffffff'
+		backgroundColor: COLOR_WHITE
-	},
-	message: {
-		transform: [{ scaleY: 1 }]
 	},
 	listEmptyContainer: {
 		flex: 1,
 		alignItems: 'center',
 		justifyContent: 'center',
-		backgroundColor: '#ffffff'
+		backgroundColor: COLOR_WHITE
+	},
+	noDataFound: {
+		fontSize: 14,
+		...sharedStyles.textRegular,
+		...sharedStyles.textColorNormal
 	}
 });

app/views/RoomInfoEditView/styles.js

@@ -1,6 +1,7 @@
 import { StyleSheet } from 'react-native';
 
 import { COLOR_DANGER, COLOR_SEPARATOR } from '../../constants/colors';
+import sharedStyles from '../Styles';
 
 export default StyleSheet.create({
 	buttonInverted: {
@@ -29,10 +30,14 @@ export default StyleSheet.create({
 	},
 	switchLabelPrimary: {
 		fontSize: 16,
-		paddingBottom: 6
+		paddingBottom: 6,
+		...sharedStyles.textRegular,
+		...sharedStyles.textColorNormal
 	},
 	switchLabelSecondary: {
-		fontSize: 12
+		fontSize: 12,
+		...sharedStyles.textRegular,
+		...sharedStyles.textColorNormal
 	},
 	switch: {
 		alignSelf: 'center'
@@ -44,7 +49,8 @@ export default StyleSheet.create({
 		marginVertical: 20
 	},
 	broadcast: {
-		fontWeight: 'bold',
+		textAlign: 'center',
-		textAlign: 'center'
+		...sharedStyles.textSemibold,
+		...sharedStyles.textColorNormal
 	}
 });

app/views/RoomInfoView/index.js

@@ -195,7 +195,7 @@ export default class RoomInfoView extends LoggedView {
 						<View style={styles.rolesContainer}>
 							{roles.map(role => (
 								<View style={styles.roleBadge} key={role}>
-									<Text>{ allRoles[role] }</Text>
+									<Text style={styles.role}>{ allRoles[role] }</Text>
 								</View>
 							))}
 						</View>

app/views/RoomInfoView/styles.js

@@ -1,20 +1,21 @@
 import { StyleSheet } from 'react-native';
 
+import sharedStyles from '../Styles';
+import { COLOR_BACKGROUND_CONTAINER, COLOR_WHITE } from '../../constants/colors';
+
 export default StyleSheet.create({
 	container: {
 		flex: 1,
-		backgroundColor: '#ffffff'
+		backgroundColor: COLOR_WHITE
 	},
 	scroll: {
 		flex: 1,
 		flexDirection: 'column',
-		backgroundColor: '#ffffff',
+		backgroundColor: COLOR_WHITE,
 		padding: 10
 	},
 	item: {
 		padding: 10,
-		// borderColor: '#EBEDF1',
-		// borderTopWidth: StyleSheet.hairlineWidth,
 		justifyContent: 'center'
 	},
 	avatarContainer: {
@@ -31,12 +32,9 @@ export default StyleSheet.create({
 		flexDirection: 'row'
 	},
 	roomTitle: {
-		fontSize: 18
+		fontSize: 18,
-	},
+		...sharedStyles.textColorNormal,
-	roomDescription: {
+		...sharedStyles.textMedium
-		fontSize: 14,
-		color: '#ccc',
-		paddingTop: 10
 	},
 	roomTitleRow: {
 		flexDirection: 'row',
@@ -48,11 +46,15 @@ export default StyleSheet.create({
 		right: -4
 	},
 	itemLabel: {
-		fontWeight: '600',
+		marginBottom: 10,
-		marginBottom: 10
+		fontSize: 14,
+		...sharedStyles.textColorNormal,
+		...sharedStyles.textMedium
 	},
 	itemContent: {
-		color: '#ccc'
+		fontSize: 14,
+		...sharedStyles.textColorDescription,
+		...sharedStyles.textRegular
 	},
 	itemContent__empty: {
 		fontStyle: 'italic'
@@ -62,10 +64,15 @@ export default StyleSheet.create({
 		flexWrap: 'wrap'
 	},
 	roleBadge: {
-		padding: 8,
+		padding: 6,
-		backgroundColor: '#ddd',
+		backgroundColor: COLOR_BACKGROUND_CONTAINER,
 		borderRadius: 2,
-		marginRight: 5,
+		marginRight: 6,
-		marginBottom: 5
+		marginBottom: 6
+	},
+	role: {
+		fontSize: 14,
+		...sharedStyles.textColorNormal,
+		...sharedStyles.textRegular
 	}
 });

app/views/RoomMembersView/styles.js

@@ -1,10 +1,10 @@
 import { StyleSheet } from 'react-native';
-import { COLOR_SEPARATOR } from '../../constants/colors';
+import { COLOR_SEPARATOR, COLOR_WHITE } from '../../constants/colors';
 
 export default StyleSheet.create({
 	list: {
 		flex: 1,
-		backgroundColor: '#ffffff'
+		backgroundColor: COLOR_WHITE
 	},
 	item: {
 		flexDirection: 'row',
@@ -15,39 +15,11 @@ export default StyleSheet.create({
 	avatar: {
 		marginRight: 16
 	},
-	status: {
-		bottom: -2,
-		right: -2,
-		borderWidth: 2,
-		borderRadius: 12,
-		width: 12,
-		height: 12
-	},
 	separator: {
 		height: StyleSheet.hairlineWidth,
 		backgroundColor: COLOR_SEPARATOR,
 		marginLeft: 60
 	},
-	username: {
-		flex: 1,
-		fontSize: 16,
-		color: '#444'
-	},
-	searchBoxView: {
-		backgroundColor: '#eee'
-	},
-	searchBox: {
-		backgroundColor: '#fff',
-		margin: 5,
-		borderRadius: 5,
-		padding: 5,
-		paddingLeft: 10,
-		color: '#aaa'
-	},
-	headerButton: {
-		marginRight: 9,
-		alignItems: 'flex-end'
-	},
 	loading: {
 		flex: 1
 	}

app/views/RoomView/Header/Icon.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { StyleSheet } from 'react-native';
 import PropTypes from 'prop-types';
 
-import { STATUS_COLORS } from '../../../constants/colors';
+import { STATUS_COLORS, COLOR_TEXT_DESCRIPTION, COLOR_WHITE } from '../../../constants/colors';
 import { CustomIcon } from '../../../lib/Icons';
 import Status from '../../../containers/Status/Status';
 import { isIOS } from '../../../utils/deviceInfo';
@@ -14,7 +14,7 @@ const styles = StyleSheet.create({
 		width: ICON_SIZE,
 		height: ICON_SIZE,
 		marginRight: 8,
-		color: isIOS ? '#9EA2A8' : '#fff'
+		color: isIOS ? COLOR_TEXT_DESCRIPTION : COLOR_WHITE
 	},
 	status: {
 		marginRight: 8

app/views/RoomView/Header/index.js

@@ -12,8 +12,9 @@ import sharedStyles from '../../Styles';
 import { isIOS } from '../../../utils/deviceInfo';
 import { headerIconSize } from '../../../containers/HeaderButton';
 import Icon from './Icon';
+import { COLOR_TEXT_DESCRIPTION, HEADER_TITLE, COLOR_WHITE } from '../../../constants/colors';
 
-const TITLE_SIZE = 18;
+const TITLE_SIZE = 16;
 const styles = StyleSheet.create({
 	container: {
 		flex: 1,
@@ -25,7 +26,7 @@ const styles = StyleSheet.create({
 	},
 	title: {
 		...sharedStyles.textSemibold,
-		color: isIOS ? '#0C0D0F' : '#fff',
+		color: HEADER_TITLE,
 		fontSize: TITLE_SIZE
 	},
 	scroll: {
@@ -33,13 +34,12 @@ const styles = StyleSheet.create({
 	},
 	typing: {
 		...sharedStyles.textRegular,
-		color: isIOS ? '#9EA2A8' : '#fff',
+		color: isIOS ? COLOR_TEXT_DESCRIPTION : COLOR_WHITE,
 		fontSize: 12,
 		marginBottom: 2
 	},
 	typingUsers: {
-		...sharedStyles.textSemibold,
+		...sharedStyles.textSemibold
-		fontWeight: '600'
 	}
 });
 

app/views/RoomView/List.js

@@ -11,6 +11,7 @@ import RocketChat from '../../lib/rocketchat';
 import log from '../../utils/log';
 import EmptyRoom from './EmptyRoom';
 import ScrollBottomButton from './ScrollBottomButton';
+import { isNotch } from '../../utils/deviceInfo';
 
 @responsive
 export class List extends React.Component {
@@ -83,7 +84,7 @@ export class List extends React.Component {
 
 	scrollToBottom = () => {
 		requestAnimationFrame(() => {
-			this.list.scrollToOffset({ offset: -100 });
+			this.list.scrollToOffset({ offset: isNotch ? -90 : -60 });
 		});
 	}
 
@@ -116,6 +117,7 @@ export class List extends React.Component {
 					data={messages}
 					extraData={this.state}
 					renderItem={({ item, index }) => renderRow(item, messages[index + 1])}
+					contentContainerStyle={styles.contentContainer}
 					style={styles.list}
 					onScroll={this.handleScroll}
 					inverted

app/views/RoomView/Separator.js

@@ -2,7 +2,10 @@ import React from 'react';
 import { View, StyleSheet, Text } from 'react-native';
 import PropTypes from 'prop-types';
 import moment from 'moment';
+
 import I18n from '../../i18n';
+import sharedStyles from '../Styles';
+import { COLOR_DANGER, COLOR_TEXT_DESCRIPTION } from '../../constants/colors';
 
 const styles = StyleSheet.create({
 	container: {
@@ -13,29 +16,29 @@ const styles = StyleSheet.create({
 		marginHorizontal: 14
 	},
 	line: {
-		backgroundColor: '#9ea2a8',
+		backgroundColor: COLOR_TEXT_DESCRIPTION,
 		height: 1,
 		flex: 1
 	},
 	text: {
-		color: '#9ea2a8',
 		fontSize: 14,
-		fontWeight: '600'
+		...sharedStyles.textMedium,
+		...sharedStyles.textColorDescription
 	},
 	unreadLine: {
-		backgroundColor: '#f5455c'
+		backgroundColor: COLOR_DANGER
 	},
 	unreadText: {
-		color: '#f5455c'
+		color: COLOR_DANGER
 	},
 	marginLeft: {
-		marginLeft: 15
+		marginLeft: 14
 	},
 	marginRight: {
-		marginRight: 15
+		marginRight: 14
 	},
 	marginHorizontal: {
-		marginHorizontal: 15
+		marginHorizontal: 14
 	}
 });
 

app/views/RoomView/UploadProgress.js

@@ -11,7 +11,10 @@ import RocketChat from '../../lib/rocketchat';
 import log from '../../utils/log';
 import I18n from '../../i18n';
 import { CustomIcon } from '../../lib/Icons';
-import { COLOR_SEPARATOR } from '../../constants/colors';
+import {
+	COLOR_SEPARATOR, COLOR_PRIMARY, COLOR_BACKGROUND_CONTAINER, COLOR_TEXT_DESCRIPTION, COLOR_DANGER
+} from '../../constants/colors';
+import sharedStyles from '../Styles';
 
 const styles = StyleSheet.create({
 	container: {
@@ -21,7 +24,7 @@ const styles = StyleSheet.create({
 		maxHeight: 246
 	},
 	item: {
-		backgroundColor: '#F1F2F4',
+		backgroundColor: COLOR_BACKGROUND_CONTAINER,
 		height: 54,
 		borderBottomWidth: StyleSheet.hairlineWidth,
 		borderColor: COLOR_SEPARATOR,
@@ -40,19 +43,20 @@ const styles = StyleSheet.create({
 	descriptionText: {
 		fontSize: 16,
 		lineHeight: 20,
-		color: '#54585E'
+		...sharedStyles.textColorDescription,
+		...sharedStyles.textRegular
 	},
 	progress: {
 		position: 'absolute',
 		bottom: 0,
-		backgroundColor: '#1D74F5',
+		backgroundColor: COLOR_PRIMARY,
 		height: 3
 	},
 	tryAgainButtonText: {
-		color: '#1D74F5',
+		color: COLOR_PRIMARY,
 		fontSize: 16,
-		fontWeight: '500',
+		lineHeight: 20,
-		lineHeight: 20
+		...sharedStyles.textMedium
 	}
 });
 
@@ -144,11 +148,11 @@ export default class UploadProgress extends Component {
 			return (
 				[
 					<View key='row' style={styles.row}>
-						<CustomIcon name='file-generic' size={20} color='#9EA2A8' />
+						<CustomIcon name='file-generic' size={20} color={COLOR_TEXT_DESCRIPTION} />
 						<Text style={[styles.descriptionContainer, styles.descriptionText]} ellipsizeMode='tail' numberOfLines={1}>
 							{I18n.t('Uploading')} {item.name}
 						</Text>
-						<CustomIcon name='cross' size={20} color='#9EA2A8' onPress={() => this.cancelUpload(item)} />
+						<CustomIcon name='cross' size={20} color={COLOR_TEXT_DESCRIPTION} onPress={() => this.cancelUpload(item)} />
 					</View>,
 					<View key='progress' style={[styles.progress, { width: (window.width * item.progress) / 100 }]} />
 				]
@@ -156,14 +160,14 @@ export default class UploadProgress extends Component {
 		}
 		return (
 			<View style={styles.row}>
-				<CustomIcon name='warning' size={20} color='#FF5050' />
+				<CustomIcon name='warning' size={20} color={COLOR_DANGER} />
 				<View style={styles.descriptionContainer}>
 					<Text style={styles.descriptionText}>{I18n.t('Error_uploading')} {item.name}</Text>
 					<TouchableOpacity onPress={() => this.tryAgain(item)}>
 						<Text style={styles.tryAgainButtonText}>{I18n.t('Try_again')}</Text>
 					</TouchableOpacity>
 				</View>
-				<CustomIcon name='cross' size={20} color='#9EA2A8' onPress={() => this.deleteUpload(item)} />
+				<CustomIcon name='cross' size={20} color={COLOR_TEXT_DESCRIPTION} onPress={() => this.deleteUpload(item)} />
 			</View>
 		);
 	}

app/views/RoomView/index.js

@@ -30,6 +30,7 @@ import { CustomHeaderButtons, Item } from '../../containers/HeaderButton';
 import RoomHeaderView from './Header';
 import StatusBar from '../../containers/StatusBar';
 import Separator from './Separator';
+import { COLOR_WHITE } from '../../constants/colors';
 
 @connect(state => ({
 	user: {
@@ -350,7 +351,7 @@ export default class RoomView extends LoggedView {
 						onPress={this.joinRoom}
 						style={styles.joinRoomButton}
 						activeOpacity={0.5}
-						underlayColor='#fff'
+						underlayColor={COLOR_WHITE}
 					>
 						<Text style={styles.joinRoomText} testID='room-view-join-button'>{I18n.t('Join')}</Text>
 					</RectButton>
@@ -360,14 +361,14 @@ export default class RoomView extends LoggedView {
 		if (this.isReadOnly()) {
 			return (
 				<View style={styles.readOnly} key='room-view-read-only'>
-					<Text>{I18n.t('This_room_is_read_only')}</Text>
+					<Text style={styles.previewMode}>{I18n.t('This_room_is_read_only')}</Text>
 				</View>
 			);
 		}
 		if (this.isBlocked()) {
 			return (
 				<View style={styles.readOnly} key='room-view-block'>
-					<Text>{I18n.t('This_room_is_blocked')}</Text>
+					<Text style={styles.previewMode}>{I18n.t('This_room_is_blocked')}</Text>
 				</View>
 			);
 		}

app/views/RoomView/styles.js

@@ -1,11 +1,14 @@
 import { StyleSheet } from 'react-native';
-import { COLOR_SEPARATOR } from '../../constants/colors';
+import {
+	COLOR_SEPARATOR, COLOR_PRIMARY, COLOR_WHITE, COLOR_TEXT_DESCRIPTION
+} from '../../constants/colors';
+
+import sharedStyles from '../Styles';
 
 export default StyleSheet.create({
-	typing: { fontWeight: 'bold', paddingHorizontal: 15, height: 25 },
 	container: {
 		flex: 1,
-		backgroundColor: '#fff'
+		backgroundColor: COLOR_WHITE
 	},
 	safeAreaView: {
 		flex: 1
@@ -13,22 +16,17 @@ export default StyleSheet.create({
 	list: {
 		flex: 1
 	},
+	contentContainer: {
+		paddingTop: 10
+	},
 	separator: {
 		height: 1,
 		backgroundColor: COLOR_SEPARATOR
 	},
-	bannerContainer: {
-		backgroundColor: 'orange'
-	},
-	bannerText: {
-		margin: 5,
-		textAlign: 'center',
-		color: '#a00'
-	},
 	loadingMore: {
 		textAlign: 'center',
 		padding: 15,
-		color: '#ccc'
+		color: COLOR_TEXT_DESCRIPTION
 	},
 	readOnly: {
 		justifyContent: 'flex-end',
@@ -57,17 +55,17 @@ export default StyleSheet.create({
 		flexDirection: 'row',
 		alignItems: 'center',
 		justifyContent: 'center',
-		backgroundColor: '#1d74f5',
+		backgroundColor: COLOR_PRIMARY,
-		borderRadius: 4
+		borderRadius: 2
 	},
 	joinRoomText: {
-		color: '#fff',
+		color: COLOR_WHITE,
 		fontSize: 14,
-		fontWeight: '500'
+		...sharedStyles.textMedium
 	},
 	previewMode: {
 		fontSize: 16,
-		fontWeight: '500',
+		...sharedStyles.textMedium,
-		color: '#0C0D0F'
+		...sharedStyles.textColorNormal
 	}
 });

app/views/RoomsListView/Header/Header.android.js

@@ -6,6 +6,8 @@ import PropTypes from 'prop-types';
 import { TextInput } from 'react-native-gesture-handler';
 
 import I18n from '../../../i18n';
+import sharedStyles from '../../Styles';
+import { COLOR_WHITE } from '../../../constants/colors';
 
 const styles = StyleSheet.create({
 	container: {
@@ -18,14 +20,16 @@ const styles = StyleSheet.create({
 	},
 	server: {
 		fontSize: 20,
-		color: '#FFF'
+		color: COLOR_WHITE,
+		...sharedStyles.textRegular
 	},
 	serverSmall: {
 		fontSize: 16
 	},
 	updating: {
 		fontSize: 14,
-		color: '#FFF'
+		color: COLOR_WHITE,
+		...sharedStyles.textRegular
 	},
 	disclosure: {
 		marginLeft: 9,

app/views/RoomsListView/Header/Header.ios.js

@@ -5,6 +5,8 @@ import {
 import PropTypes from 'prop-types';
 
 import I18n from '../../../i18n';
+import sharedStyles from '../../Styles';
+import { COLOR_PRIMARY } from '../../../constants/colors';
 
 const styles = StyleSheet.create({
 	container: {
@@ -17,11 +19,13 @@ const styles = StyleSheet.create({
 	},
 	title: {
 		fontSize: 14,
-		color: '#0C0D0F'
+		...sharedStyles.textColorTitle,
+		...sharedStyles.textRegular
 	},
 	server: {
 		fontSize: 12,
-		color: '#1D74F5'
+		color: COLOR_PRIMARY,
+		...sharedStyles.textRegular
 	},
 	disclosure: {
 		marginLeft: 3,

app/views/RoomsListView/Search/index.js

@@ -1,46 +0,0 @@
-import React from 'react';
-import { View, TextInput } from 'react-native';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-
-import { setSearch as setSearchAction } from '../../../actions/rooms';
-import styles from './styles';
-import I18n from '../../../i18n';
-
-@connect(null, dispatch => ({
-	setSearch: searchText => dispatch(setSearchAction(searchText))
-}))
-export default class RoomsListSearchView extends React.Component {
-	static propTypes = {
-		setSearch: PropTypes.func
-	}
-
-	componentDidMount() {
-		this.inputSearch.focus();
-	}
-
-	onSearchChangeText(text) {
-		const { setSearch } = this.props;
-		setSearch(text.trim());
-	}
-
-	render() {
-		return (
-			<View style={styles.header} testID='rooms-list-view-header'>
-				<TextInput
-					ref={inputSearch => this.inputSearch = inputSearch}
-					underlineColorAndroid='transparent'
-					style={styles.inputSearch}
-					onChangeText={text => this.onSearchChangeText(text)}
-					returnKeyType='search'
-					placeholder={I18n.t('Search')}
-					placeholderTextColor='#eee'
-					clearButtonMode='while-editing'
-					blurOnSubmit
-					autoCorrect={false}
-					autoCapitalize='none'
-				/>
-			</View>
-		);
-	}
-}

app/views/RoomsListView/Search/styles.js

@@ -1,15 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export default StyleSheet.create({
-	header: {
-		zIndex: 2,
-		flexDirection: 'row',
-		alignItems: 'center',
-		flex: 1
-	},
-	inputSearch: {
-		flex: 1,
-		fontSize: 18,
-		color: '#fff'
-	}
-});

app/views/RoomsListView/index.js

@@ -12,7 +12,7 @@ import SearchBox from '../../containers/SearchBox';
 import ConnectionBadge from '../../containers/ConnectionBadge';
 import database from '../../lib/realm';
 import RocketChat from '../../lib/rocketchat';
-import RoomItem from '../../presentation/RoomItem';
+import RoomItem, { ROW_HEIGHT } from '../../presentation/RoomItem';
 import styles from './styles';
 import LoggedView from '../View';
 import log from '../../utils/log';
@@ -34,10 +34,9 @@ import RoomsListHeaderView from './Header';
 import { DrawerButton, CustomHeaderButtons, Item } from '../../containers/HeaderButton';
 import StatusBar from '../../containers/StatusBar';
 
-const ROW_HEIGHT = 70;
 const SCROLL_OFFSET = 56;
 
-const shouldUpdateProps = ['searchText', 'loadingServer', 'showServerDropdown', 'showSortDropdown', 'sortBy', 'groupByType', 'showFavorites', 'showUnread', 'useRealName', 'appState'];
+const shouldUpdateProps = ['searchText', 'loadingServer', 'showServerDropdown', 'showSortDropdown', 'sortBy', 'groupByType', 'showFavorites', 'showUnread', 'useRealName', 'StoreLastMessage', 'appState'];
 const getItemLayout = (data, index) => ({ length: ROW_HEIGHT, offset: ROW_HEIGHT * index, index });
 const keyExtractor = item => item.rid;
 
@@ -54,7 +53,8 @@ const keyExtractor = item => item.rid;
 	showFavorites: state.sortPreferences.showFavorites,
 	showUnread: state.sortPreferences.showUnread,
 	useRealName: state.settings.UI_Use_Real_Name,
-	appState: state.app.ready && state.app.foreground ? 'foreground' : 'background'
+	appState: state.app.ready && state.app.foreground ? 'foreground' : 'background',
+	StoreLastMessage: state.settings.Store_Last_Message
 }), dispatch => ({
 	toggleSortDropdown: () => dispatch(toggleSortDropdownAction()),
 	openSearchHeader: () => dispatch(openSearchHeaderAction()),
@@ -108,6 +108,7 @@ export default class RoomsListView extends LoggedView {
 		showFavorites: PropTypes.bool,
 		showUnread: PropTypes.bool,
 		useRealName: PropTypes.bool,
+		StoreLastMessage: PropTypes.bool,
 		// appState: PropTypes.string,
 		toggleSortDropdown: PropTypes.func,
 		openSearchHeader: PropTypes.func,
@@ -469,7 +470,9 @@ export default class RoomsListView extends LoggedView {
 	)
 
 	renderItem = ({ item }) => {
-		const { useRealName, userId, baseUrl } = this.props;
+		const {
+			useRealName, userId, baseUrl, StoreLastMessage
+		} = this.props;
 		const id = item.rid.replace(userId, '').trim();
 
 		return (
@@ -485,6 +488,7 @@ export default class RoomsListView extends LoggedView {
 				id={id}
 				type={item.t}
 				baseUrl={baseUrl}
+				showLastMessage={StoreLastMessage}
 				onPress={() => this._onPressItem(item)}
 				testID={`rooms-list-view-item-${ item.name }`}
 				height={ROW_HEIGHT}
@@ -492,8 +496,6 @@ export default class RoomsListView extends LoggedView {
 		);
 	}
 
-	renderSeparator = () => <View style={styles.separator} />
-
 	renderSectionHeader = header => (
 		<View style={styles.groupTitleContainer}>
 			<Text style={styles.groupTitle}>{I18n.t(header)}</Text>
@@ -520,7 +522,6 @@ export default class RoomsListView extends LoggedView {
 					keyExtractor={keyExtractor}
 					style={styles.list}
 					renderItem={this.renderItem}
-					ItemSeparatorComponent={this.renderSeparator}
 					ListHeaderComponent={() => this.renderSectionHeader(header)}
 					getItemLayout={getItemLayout}
 					enableEmptySections
@@ -547,7 +548,6 @@ export default class RoomsListView extends LoggedView {
 					keyExtractor={keyExtractor}
 					style={styles.list}
 					renderItem={this.renderItem}
-					ItemSeparatorComponent={this.renderSeparator}
 					getItemLayout={getItemLayout}
 					enableEmptySections
 					removeClippedSubviews
@@ -590,7 +590,6 @@ export default class RoomsListView extends LoggedView {
 					keyExtractor={keyExtractor}
 					style={styles.list}
 					renderItem={this.renderItem}
-					ItemSeparatorComponent={this.renderSeparator}
 					ListHeaderComponent={this.renderListHeader}
 					getItemLayout={getItemLayout}
 					enableEmptySections

app/views/RoomsListView/styles.js

@@ -1,30 +1,19 @@
 import { StyleSheet } from 'react-native';
 import { isIOS } from '../../utils/deviceInfo';
-import { COLOR_SEPARATOR } from '../../constants/colors';
+import {
+	COLOR_SEPARATOR, COLOR_TEXT, COLOR_PRIMARY, COLOR_WHITE
+} from '../../constants/colors';
+
+import sharedStyles from '../Styles';
 
 export default StyleSheet.create({
 	container: {
 		flex: 1,
-		backgroundColor: isIOS ? '#FFF' : '#E1E5E8'
+		backgroundColor: isIOS ? COLOR_WHITE : '#E1E5E8'
-	},
-	separator: {
-		height: StyleSheet.hairlineWidth,
-		backgroundColor: COLOR_SEPARATOR,
-		marginLeft: 73
 	},
 	list: {
 		width: '100%',
-		backgroundColor: '#FFFFFF'
+		backgroundColor: COLOR_WHITE
-	},
-	emptyView: {
-		flexGrow: 1,
-		alignItems: 'stretch',
-		justifyContent: 'center'
-	},
-	emptyText: {
-		textAlign: 'center',
-		fontSize: 18,
-		color: '#ccc'
 	},
 	actionButtonIcon: {
 		fontSize: 20,
@@ -39,7 +28,7 @@ export default StyleSheet.create({
 		borderBottomWidth: StyleSheet.hairlineWidth,
 		borderColor: COLOR_SEPARATOR,
 		alignItems: 'center',
-		backgroundColor: isIOS ? '#fff' : '#54585E',
+		backgroundColor: isIOS ? COLOR_WHITE : '#54585E',
 		flexDirection: 'row'
 	},
 	sortToggleContainerClose: {
@@ -48,14 +37,14 @@ export default StyleSheet.create({
 		width: '100%'
 	},
 	sortToggleText: {
-		color: '#9EA2A8',
 		fontSize: 15,
-		fontWeight: 'normal',
 		flex: 1,
-		marginLeft: 15
+		marginLeft: 15,
+		...sharedStyles.textColorDescription,
+		...sharedStyles.textRegular
 	},
 	dropdownContainer: {
-		backgroundColor: '#fff',
+		backgroundColor: COLOR_WHITE,
 		width: '100%',
 		position: 'absolute',
 		top: 0
@@ -69,10 +58,10 @@ export default StyleSheet.create({
 		alignItems: 'center'
 	},
 	sortItemText: {
-		color: '#54585E',
 		fontSize: 18,
-		fontWeight: 'normal',
+		flex: 1,
-		flex: 1
+		...sharedStyles.textColorNormal,
+		...sharedStyles.textRegular
 	},
 	backdrop: {
 		...StyleSheet.absoluteFill,
@@ -88,39 +77,37 @@ export default StyleSheet.create({
 		width: 22,
 		height: 22,
 		marginHorizontal: 15,
-		// resizeMode: 'contain',
+		...sharedStyles.textColorDescription
-		// justifyContent: 'center',
-		color: '#9ea2a8'
 	},
 	groupTitleContainer: {
 		paddingHorizontal: 15,
 		paddingTop: 17,
 		paddingBottom: 10,
-		backgroundColor: isIOS ? '#fff' : '#E1E5E8'
+		backgroundColor: isIOS ? COLOR_WHITE : '#9ea2a8'
 	},
 	groupTitle: {
-		color: isIOS ? '#2F343D' : '#54585E',
+		color: isIOS ? COLOR_TEXT : '#54585E',
 		fontSize: isIOS ? 22 : 15,
-		fontWeight: 'bold',
 		letterSpacing: 0.27,
 		flex: 1,
-		lineHeight: isIOS ? 41 : 24
+		lineHeight: isIOS ? 41 : 24,
+		...sharedStyles.textBold
 	},
 	serverHeader: {
 		justifyContent: 'space-between'
 	},
 	serverHeaderText: {
-		color: '#9EA2A8',
 		fontSize: 15,
-		fontWeight: 'normal',
+		marginLeft: 15,
-		marginLeft: 15
+		...sharedStyles.textColorDescription,
+		...sharedStyles.textRegular
 	},
 	serverHeaderAdd: {
-		color: isIOS ? '#1D74F5' : '#FFF',
+		color: isIOS ? COLOR_PRIMARY : COLOR_WHITE,
 		fontSize: 15,
-		fontWeight: 'normal',
 		marginRight: 15,
-		paddingVertical: 10
+		paddingVertical: 10,
+		...sharedStyles.textRegular
 	},
 	serverItem: {
 		height: 68
@@ -143,15 +130,18 @@ export default StyleSheet.create({
 		justifyContent: 'center'
 	},
 	serverName: {
-		fontSize: 18, fontWeight: '600', color: '#0C0D0F'
+		fontSize: 18,
+		...sharedStyles.textColorNormal,
+		...sharedStyles.textSemibold
 	},
 	serverUrl: {
 		fontSize: 15,
-		color: '#9EA2A8'
+		...sharedStyles.textColorDescription,
+		...sharedStyles.textRegular
 	},
 	checkIcon: {
 		marginHorizontal: 15,
-		color: '#1d74f5'
+		color: COLOR_PRIMARY
 	},
 	serverSeparator: {
 		height: StyleSheet.hairlineWidth,

app/views/SearchMessagesView/index.js

@@ -92,7 +92,7 @@ export default class SearchMessagesView extends LoggedView {
 
 	renderEmpty = () => (
 		<View style={styles.listEmptyContainer}>
-			<Text>{I18n.t('No_results_found')}</Text>
+			<Text style={styles.noDataFound}>{I18n.t('No_results_found')}</Text>
 		</View>
 	)
 
@@ -100,7 +100,6 @@ export default class SearchMessagesView extends LoggedView {
 		const { user, customEmojis, baseUrl } = this.props;
 		return (
 			<Message
-				style={styles.message}
 				customEmojis={customEmojis}
 				baseUrl={baseUrl}
 				user={user}

app/views/SearchMessagesView/styles.js

@@ -1,10 +1,12 @@
 import { StyleSheet } from 'react-native';
-import { COLOR_SEPARATOR } from '../../constants/colors';
+import { COLOR_SEPARATOR, COLOR_WHITE } from '../../constants/colors';
+
+import sharedStyles from '../Styles';
 
 export default StyleSheet.create({
 	container: {
 		flex: 1,
-		backgroundColor: '#fff'
+		backgroundColor: COLOR_WHITE
 	},
 	searchContainer: {
 		padding: 20,
@@ -12,10 +14,7 @@ export default StyleSheet.create({
 	},
 	list: {
 		flex: 1,
-		backgroundColor: '#ffffff'
+		backgroundColor: COLOR_WHITE
-	},
-	message: {
-		transform: [{ scaleY: 1 }]
 	},
 	divider: {
 		width: '100%',
@@ -27,6 +26,11 @@ export default StyleSheet.create({
 		flex: 1,
 		alignItems: 'center',
 		justifyContent: 'flex-start',
-		backgroundColor: '#ffffff'
+		backgroundColor: COLOR_WHITE
+	},
+	noDataFound: {
+		fontSize: 14,
+		...sharedStyles.textRegular,
+		...sharedStyles.textColorNormal
 	}
 });

app/views/SelectedUsersView.js

@@ -23,6 +23,7 @@ import SearchBox from '../containers/SearchBox';
 import sharedStyles from './Styles';
 import { Item, CustomHeaderButtons } from '../containers/HeaderButton';
 import StatusBar from '../containers/StatusBar';
+import { COLOR_WHITE } from '../constants/colors';
 
 const styles = StyleSheet.create({
 	safeAreaView: {
@@ -30,7 +31,7 @@ const styles = StyleSheet.create({
 		backgroundColor: isIOS ? '#F7F8FA' : '#E1E5E8'
 	},
 	header: {
-		backgroundColor: '#fff'
+		backgroundColor: COLOR_WHITE
 	},
 	separator: {
 		marginLeft: 60
@@ -132,7 +133,6 @@ export default class SelectedUsersView extends LoggedView {
 				setLoadingInvite(true);
 				await RocketChat.addUsersToRoom(rid);
 				navigation.pop();
-				// Navigation.pop(componentId);
 			} catch (e) {
 				log('RoomActions Add User', e);
 			} finally {

app/views/SidebarView/SidebarItem.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { RectButton } from 'react-native-gesture-handler';
 
 import styles from './styles';
+import { COLOR_TEXT } from '../../constants/colors';
 
 const Item = React.memo(({
 	left, text, onPress, testID, current
@@ -12,7 +13,7 @@ const Item = React.memo(({
 		key={testID}
 		testID={testID}
 		onPress={onPress}
-		underlayColor='#292E35'
+		underlayColor={COLOR_TEXT}
 		activeOpacity={0.1}
 		style={[styles.item, current && styles.itemCurrent]}
 	>

app/views/SidebarView/index.js

@@ -19,6 +19,7 @@ import { getReadableVersion } from '../../utils/deviceInfo';
 import { CustomIcon } from '../../lib/Icons';
 import styles from './styles';
 import SidebarItem from './SidebarItem';
+import { COLOR_TEXT } from '../../constants/colors';
 
 const keyExtractor = item => item.id;
 
@@ -163,21 +164,21 @@ export default class Sidebar extends Component {
 			<React.Fragment>
 				<SidebarItem
 					text={I18n.t('Chats')}
-					left={<CustomIcon name='chat' size={20} color='#292E35' />}
+					left={<CustomIcon name='chat' size={20} color={COLOR_TEXT} />}
 					onPress={() => this.sidebarNavigate('RoomsListView')}
 					testID='sidebar-chats'
 					current={activeItemKey === 'ChatsStack'}
 				/>
 				<SidebarItem
 					text={I18n.t('Profile')}
-					left={<CustomIcon name='user' size={20} color='#292E35' />}
+					left={<CustomIcon name='user' size={20} color={COLOR_TEXT} />}
 					onPress={() => this.sidebarNavigate('ProfileView')}
 					testID='sidebar-profile'
 					current={activeItemKey === 'ProfileStack'}
 				/>
 				<SidebarItem
 					text={I18n.t('Settings')}
-					left={<CustomIcon name='cog' size={20} color='#292E35' />}
+					left={<CustomIcon name='cog' size={20} color={COLOR_TEXT} />}
 					onPress={() => this.sidebarNavigate('SettingsView')}
 					testID='sidebar-settings'
 					current={activeItemKey === 'SettingsStack'}
@@ -185,7 +186,7 @@ export default class Sidebar extends Component {
 				<Separator key='separator-logout' />
 				<SidebarItem
 					text={I18n.t('Logout')}
-					left={<CustomIcon name='sign-out' size={20} color='#292E35' />}
+					left={<CustomIcon name='sign-out' size={20} color={COLOR_TEXT} />}
 					onPress={this.logout}
 					testID='sidebar-logout'
 				/>
@@ -219,7 +220,7 @@ export default class Sidebar extends Component {
 				<ScrollView style={styles.container} {...scrollPersistTaps}>
 					<RectButton
 						onPress={this.toggleStatus}
-						underlayColor='#292E35'
+						underlayColor={COLOR_TEXT}
 						activeOpacity={0.1}
 						testID='sidebar-toggle-status'
 						style={styles.header}
@@ -234,7 +235,7 @@ export default class Sidebar extends Component {
 						<View style={styles.headerTextContainer}>
 							<View style={styles.headerUsername}>
 								<StatusContainer style={styles.status} size={12} id={user.id} />
-								<Text numberOfLines={1}>{user.username}</Text>
+								<Text numberOfLines={1} style={styles.username}>{user.username}</Text>
 							</View>
 							<Text style={styles.currentServerText} numberOfLines={1}>{Site_Name}</Text>
 						</View>

app/views/SidebarView/styles.js

@@ -1,10 +1,12 @@
 import { StyleSheet } from 'react-native';
-import { COLOR_SEPARATOR } from '../../constants/colors';
+import { COLOR_SEPARATOR, COLOR_WHITE } from '../../constants/colors';
+
+import sharedStyles from '../Styles';
 
 export default StyleSheet.create({
 	container: {
 		flex: 1,
-		backgroundColor: '#fff'
+		backgroundColor: COLOR_WHITE
 	},
 	item: {
 		flexDirection: 'row',
@@ -23,8 +25,9 @@ export default StyleSheet.create({
 	},
 	itemText: {
 		marginVertical: 16,
-		fontWeight: 'bold',
+		fontSize: 14,
-		color: '#292E35'
+		...sharedStyles.textSemibold,
+		...sharedStyles.textColorNormal
 	},
 	separator: {
 		borderBottomWidth: StyleSheet.hairlineWidth,
@@ -45,9 +48,14 @@ export default StyleSheet.create({
 		flexDirection: 'row',
 		alignItems: 'center'
 	},
+	username: {
+		fontSize: 14,
+		...sharedStyles.textColorNormal,
+		...sharedStyles.textMedium
+	},
 	headerIcon: {
 		paddingHorizontal: 10,
-		color: '#292E35'
+		...sharedStyles.textColorNormal
 	},
 	avatar: {
 		marginHorizontal: 10
@@ -56,14 +64,16 @@ export default StyleSheet.create({
 		marginRight: 5
 	},
 	currentServerText: {
-		fontWeight: 'bold'
+		fontSize: 14,
+		...sharedStyles.textColorNormal,
+		...sharedStyles.textSemibold
 	},
 	version: {
-		marginHorizontal: 5,
+		marginHorizontal: 10,
-		marginBottom: 5,
+		marginBottom: 10,
-		fontWeight: '600',
+		fontSize: 13,
-		color: '#292E35',
+		...sharedStyles.textColorNormal,
-		fontSize: 13
+		...sharedStyles.textSemibold
 	},
 	inverted: {
 		transform: [{ scaleY: -1 }]

app/views/StarredMessagesView/index.js

@@ -137,7 +137,7 @@ export default class StarredMessagesView extends LoggedView {
 
 	renderEmpty = () => (
 		<View style={styles.listEmptyContainer} testID='starred-messages-view'>
-			<Text>{I18n.t('No_starred_messages')}</Text>
+			<Text style={styles.noDataFound}>{I18n.t('No_starred_messages')}</Text>
 		</View>
 	)
 
@@ -145,7 +145,6 @@ export default class StarredMessagesView extends LoggedView {
 		const { user, customEmojis, baseUrl } = this.props;
 		return (
 			<Message
-				style={styles.message}
 				customEmojis={customEmojis}
 				baseUrl={baseUrl}
 				user={user}

app/views/StarredMessagesView/styles.js

@@ -1,17 +1,22 @@
 import { StyleSheet } from 'react-native';
 
+import sharedStyles from '../Styles';
+import { COLOR_WHITE } from '../../constants/colors';
+
 export default StyleSheet.create({
 	list: {
 		flex: 1,
-		backgroundColor: '#ffffff'
+		backgroundColor: COLOR_WHITE
-	},
-	message: {
-		transform: [{ scaleY: 1 }]
 	},
 	listEmptyContainer: {
 		flex: 1,
 		alignItems: 'center',
 		justifyContent: 'center',
-		backgroundColor: '#ffffff'
+		backgroundColor: COLOR_WHITE
+	},
+	noDataFound: {
+		fontSize: 14,
+		...sharedStyles.textRegular,
+		...sharedStyles.textColorNormal
 	}
 });

app/views/Styles.js

@@ -1,9 +1,8 @@
 import { StyleSheet, Platform } from 'react-native';
 
 import {
-	COLOR_DANGER, COLOR_BUTTON_PRIMARY, COLOR_SEPARATOR
+	COLOR_DANGER, COLOR_BUTTON_PRIMARY, COLOR_SEPARATOR, COLOR_TEXT, COLOR_TEXT_DESCRIPTION, COLOR_TITLE
 } from '../constants/colors';
-import { isIOS } from '../utils/deviceInfo';
 
 export default StyleSheet.create({
 	container: {
@@ -11,27 +10,8 @@ export default StyleSheet.create({
 		flex: 1
 	},
 	containerScrollView: {
-		padding: 15
+		padding: 15,
-	},
+		paddingBottom: 30
-	label: {
-		lineHeight: 40,
-		height: 40,
-		fontSize: 16,
-		marginBottom: 5,
-		color: 'white'
-	},
-	label_white: {
-		lineHeight: 40,
-		height: 40,
-		fontSize: 16,
-		marginBottom: 5,
-		color: '#2f343d'
-	},
-	label_error: {
-		color: COLOR_DANGER,
-		flexGrow: 1,
-		paddingHorizontal: 0,
-		marginBottom: 20
 	},
 	buttonContainerLastChild: {
 		marginBottom: 40
@@ -42,11 +22,6 @@ export default StyleSheet.create({
 		marginBottom: 20,
 		borderRadius: 2
 	},
-	buttonContainer_white: {
-		paddingVertical: 15,
-		backgroundColor: '#1d74f5',
-		marginBottom: 20
-	},
 	buttonContainer_inverted: {
 		paddingVertical: 15,
 		marginBottom: 0
@@ -56,11 +31,6 @@ export default StyleSheet.create({
 		color: 'white',
 		fontWeight: '700'
 	},
-	button_white: {
-		textAlign: 'center',
-		color: 'white',
-		fontWeight: '700'
-	},
 	button_inverted: {
 		textAlign: 'center',
 		color: '#414852',
@@ -79,85 +49,6 @@ export default StyleSheet.create({
 		left: 0,
 		top: 0
 	},
-	switchContainer: {
-		flexDirection: 'row',
-		justifyContent: 'flex-start',
-		alignItems: 'center',
-		paddingHorizontal: 0,
-		paddingBottom: 5
-	},
-	switchLabel: {
-		fontSize: 16,
-		color: '#2f343d',
-		paddingHorizontal: 10
-	},
-	switchDescription: {
-		fontSize: 16,
-		color: '#9ea2a8'
-	},
-	disabledButton: {
-		backgroundColor: '#e1e5e8'
-	},
-	enabledButton: {
-		backgroundColor: '#1d74f5'
-	},
-	link: {
-		fontWeight: 'bold',
-		color: COLOR_BUTTON_PRIMARY
-	},
-	loginTermsText: {
-		marginBottom: 20,
-		color: '#414852',
-		fontSize: 13,
-		fontWeight: '700'
-	},
-	validText: {
-		color: 'green'
-	},
-	invalidText: {
-		color: COLOR_DANGER
-	},
-	validatingText: {
-		color: '#aaa'
-	},
-	oauthButton: {
-		width: 50,
-		height: 50,
-		alignItems: 'center',
-		justifyContent: 'center',
-		margin: 4,
-		borderRadius: 2
-	},
-	facebookButton: {
-		backgroundColor: '#3b5998'
-	},
-	githubButton: {
-		backgroundColor: '#4c4c4c'
-	},
-	gitlabButton: {
-		backgroundColor: '#373d47'
-	},
-	googleButton: {
-		backgroundColor: '#dd4b39'
-	},
-	linkedinButton: {
-		backgroundColor: '#1b86bc'
-	},
-	meteorButton: {
-		backgroundColor: '#de4f4f'
-	},
-	twitterButton: {
-		backgroundColor: '#02acec'
-	},
-	closeOAuth: {
-		position: 'absolute',
-		left: 5,
-		top: isIOS ? 20 : 0,
-		backgroundColor: 'transparent'
-	},
-	oAuthModal: {
-		margin: 0
-	},
 	status: {
 		position: 'absolute',
 		bottom: -3,
@@ -165,6 +56,10 @@ export default StyleSheet.create({
 		borderWidth: 3,
 		borderColor: '#fff'
 	},
+	link: {
+		fontWeight: 'bold',
+		color: COLOR_BUTTON_PRIMARY
+	},
 	alignItemsFlexEnd: {
 		alignItems: 'flex-end'
 	},
@@ -180,12 +75,12 @@ export default StyleSheet.create({
 	loginTitle: {
 		fontSize: 20,
 		marginVertical: 15,
-		color: '#2f343d',
+		color: COLOR_TITLE,
 		lineHeight: 28
 	},
 	loginSubtitle: {
 		fontSize: 16,
-		color: '#54585e',
+		color: COLOR_TITLE,
 		lineHeight: 20,
 		marginBottom: 15
 	},
@@ -269,6 +164,15 @@ export default StyleSheet.create({
 			}
 		})
 	},
+	textColorTitle: {
+		color: COLOR_TITLE
+	},
+	textColorNormal: {
+		color: COLOR_TEXT
+	},
+	textColorDescription: {
+		color: COLOR_TEXT_DESCRIPTION
+	},
 	inputLastChild: {
 		marginBottom: 15
 	}

ios/Podfile

@@ -13,7 +13,7 @@ target 'RocketChatRN' do
     'Core',
     'RCTActionSheet',
     'RCTAnimation',
-    'RCTGeolocation',
+#    'RCTGeolocation',
     'RCTImage',
     'RCTLinkingIOS',
     'RCTNetwork',

ios/Podfile.lock

@@ -15,8 +15,6 @@ PODS:
     - React/Core
   - React/RCTBlob (0.58.6):
     - React/Core
-  - React/RCTGeolocation (0.58.6):
-    - React/Core
   - React/RCTImage (0.58.6):
     - React/Core
     - React/RCTNetwork
@@ -51,7 +49,6 @@ DEPENDENCIES:
   - React/Core (from `../node_modules/react-native`)
   - React/RCTActionSheet (from `../node_modules/react-native`)
   - React/RCTAnimation (from `../node_modules/react-native`)
-  - React/RCTGeolocation (from `../node_modules/react-native`)
   - React/RCTImage (from `../node_modules/react-native`)
   - React/RCTLinkingIOS (from `../node_modules/react-native`)
   - React/RCTNetwork (from `../node_modules/react-native`)
@@ -96,6 +93,6 @@ SPEC CHECKSUMS:
   RSKImageCropper: 98296ad26b41753f796b6898d015509598f13d97
   yoga: 32d7ef1081951e9a35a4c72a7be797598b138a48
 
-PODFILE CHECKSUM: ad284b28235f7bcda110a24095b5e2b5718cf7e2
+PODFILE CHECKSUM: cef0a3df130baa205d9d4dcbf8ecc923f8f744cb
 
 COCOAPODS: 1.6.0

ios/Pods/Headers/Private/React/RCTLocationObserver.h

@@ -1 +0,0 @@
-../../../../../node_modules/react-native/Libraries/Geolocation/RCTLocationObserver.h

ios/Pods/Headers/Public/React/RCTLocationObserver.h

@@ -1 +0,0 @@
-../../../../../node_modules/react-native/Libraries/Geolocation/RCTLocationObserver.h

ios/Pods/Manifest.lock

@@ -15,8 +15,6 @@ PODS:
     - React/Core
   - React/RCTBlob (0.58.6):
     - React/Core
-  - React/RCTGeolocation (0.58.6):
-    - React/Core
   - React/RCTImage (0.58.6):
     - React/Core
     - React/RCTNetwork
@@ -51,7 +49,6 @@ DEPENDENCIES:
   - React/Core (from `../node_modules/react-native`)
   - React/RCTActionSheet (from `../node_modules/react-native`)
   - React/RCTAnimation (from `../node_modules/react-native`)
-  - React/RCTGeolocation (from `../node_modules/react-native`)
   - React/RCTImage (from `../node_modules/react-native`)
   - React/RCTLinkingIOS (from `../node_modules/react-native`)
   - React/RCTNetwork (from `../node_modules/react-native`)
@@ -96,6 +93,6 @@ SPEC CHECKSUMS:
   RSKImageCropper: 98296ad26b41753f796b6898d015509598f13d97
   yoga: 32d7ef1081951e9a35a4c72a7be797598b138a48
 
-PODFILE CHECKSUM: ad284b28235f7bcda110a24095b5e2b5718cf7e2
+PODFILE CHECKSUM: cef0a3df130baa205d9d4dcbf8ecc923f8f744cb
 
 COCOAPODS: 1.6.0

storybook/stories/Channels/DirectMessage.js

@@ -1,90 +0,0 @@
-import React from 'react';
-import { ScrollView } from 'react-native';
-
-import RoomItem from '../../../app/presentation/RoomItem';
-
-const date = '2017-10-10T10:00:00Z';
-const baseUrl = 'https://open.rocket.chat';
-
-export default (
-	<ScrollView>
-		<RoomItem
-			type='d'
-			name='rocket.cat'
-			_updatedAt={date}
-			baseUrl={baseUrl}
-		/>
-		<RoomItem
-			type='d'
-			unread={0}
-			alert
-			_updatedAt={date}
-			name='rocket.cat'
-			baseUrl={baseUrl}
-		/>
-		<RoomItem
-			type='d'
-			unread={1}
-			_updatedAt={date}
-			name='rocket.cat'
-			baseUrl={baseUrl}
-		/>
-		<RoomItem
-			type='d'
-			unread={9}
-			alert
-			_updatedAt={date}
-			name="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
-			baseUrl={baseUrl}
-		/>
-		<RoomItem
-			type='d'
-			unread={99}
-			_updatedAt={date}
-			name="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
-			baseUrl={baseUrl}
-		/>
-		<RoomItem
-			type='d'
-			unread={100}
-			userMentions={0}
-			_updatedAt={date}
-			name="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
-			baseUrl={baseUrl}
-		/>
-		<RoomItem
-			type='d'
-			unread={100000}
-			userMentions={0}
-			_updatedAt={date}
-			name="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
-			baseUrl={baseUrl}
-		/>
-		<RoomItem
-			type='d'
-			unread={100000}
-			userMentions={1}
-			_updatedAt={date}
-			name="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
-			baseUrl={baseUrl}
-		/>
-		<RoomItem
-			type='d'
-			name='W'
-			_updatedAt={date}
-			unread={-100}
-		/>
-		<RoomItem
-			type='d'
-			name='WW'
-			_updatedAt={date}
-			unread={-100}
-		/>
-		<RoomItem
-			type='d'
-			name=''
-			_updatedAt={date}
-			unread={-100}
-		/>
-	</ScrollView>
-);

storybook/stories/Message.js

@@ -57,7 +57,7 @@ export default (
 			msg='Different user'
 			author={{
 				...author,
-				username: 'rocket.cat'
+				username: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum'
 			}}
 		/>
 		<Message msg='This is the third message' header={false} />
@@ -69,6 +69,14 @@ export default (
 
 		<Separator title='With alias' />
 		<Message msg='Message' alias='Diego Mello' />
+		<Message
+			msg='Message'
+			author={{
+				...author,
+				username: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum'
+			}}
+			alias='Diego Mello'
+		/>
 
 		<Separator title='Edited' />
 		<Message msg='Message' edited />
@@ -229,12 +237,35 @@ export default (
 				audio_url: '/file-upload/c4wcNhrbXJLBvAJtN/1535569819516.aac'
 			}]}
 		/>
+		<Message msg='First message' header={false} />
+		<Message
+			attachments={[{
+				title: 'This is a title',
+				description: 'This is a description',
+				audio_url: '/file-upload/c4wcNhrbXJLBvAJtN/1535569819516.aac'
+			}]}
+			header={false}
+		/>
+		<Message
+			attachments={[{
+				title: 'This is a title',
+				audio_url: '/file-upload/c4wcNhrbXJLBvAJtN/1535569819516.aac'
+			}]}
+			header={false}
+		/>
+		<Message
+			attachments={[{
+				title: 'This is a title',
+				audio_url: '/file-upload/c4wcNhrbXJLBvAJtN/1535569819516.aac'
+			}]}
+			header={false}
+		/>
 
 		<Separator title='Message with reply' />
 		<Message
 			msg="I'm fine!"
 			attachments={[{
-				author_name: 'This is a long title and i\'ll break',
+				author_name: 'I\'m a very long long title and I\'ll break',
 				ts: date,
 				timeFormat: 'LT',
 				text: 'How are you?'

storybook/stories/RoomItem.js

@@ -0,0 +1,115 @@
+import React from 'react';
+import { ScrollView } from 'react-native';
+// import moment from 'moment';
+
+import RoomItemComponent from '../../app/presentation/RoomItem';
+import StoriesSeparator from './StoriesSeparator';
+
+const date = '2017-10-10T10:00:00Z';
+const baseUrl = 'https://open.rocket.chat';
+
+const RoomItem = props => (
+	<RoomItemComponent
+		type='d'
+		name='rocket.cat'
+		_updatedAt={date}
+		baseUrl={baseUrl}
+		{...props}
+	/>
+);
+
+export default (
+	<ScrollView>
+		<StoriesSeparator title='Basic' />
+		<RoomItem />
+
+		<StoriesSeparator title='User' />
+		<RoomItem name='diego.mello' />
+		<RoomItem
+			name="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
+		/>
+
+		<StoriesSeparator title='Type' />
+		<RoomItem type='d' />
+		<RoomItem type='c' />
+		<RoomItem type='p' />
+		<RoomItem type='l' />
+		<RoomItem type='&' />
+
+		{/* We can't add date stories because it breaks jest snapshots
+		<StoriesSeparator title='Date' />
+		<RoomItem
+			_updatedAt={moment()}
+		/>
+		<RoomItem
+			_updatedAt={moment().subtract(1, 'day')}
+		/>
+		<RoomItem
+			_updatedAt={moment().subtract(5, 'day')}
+		/>
+		<RoomItem
+			_updatedAt={moment().subtract(30, 'day')}
+		/> */}
+
+		<StoriesSeparator title='Alerts' />
+		<RoomItem alert />
+		<RoomItem alert unread={1} />
+		<RoomItem alert unread={1000} />
+		<RoomItem alert unread={1} userMentions={1} />
+		<RoomItem alert unread={1000} userMentions={1} />
+
+		<StoriesSeparator title='Last Message' />
+		<RoomItem
+			showLastMessage
+		/>
+		<RoomItem
+			showLastMessage
+			lastMessage={{
+				u: {
+					username: 'rocket.chat'
+				},
+				msg: '2'
+			}}
+		/>
+		<RoomItem
+			showLastMessage
+			lastMessage={{
+				u: {
+					username: 'diego.mello'
+				},
+				msg: '1'
+			}}
+		/>
+		<RoomItem
+			showLastMessage
+			lastMessage={{
+				u: {
+					username: 'diego.mello'
+				},
+				msg: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries'
+			}}
+		/>
+		<RoomItem
+			showLastMessage
+			alert
+			unread={1}
+			lastMessage={{
+				u: {
+					username: 'diego.mello'
+				},
+				msg: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries'
+			}}
+		/>
+		<RoomItem
+			showLastMessage
+			alert
+			unread={1000}
+			lastMessage={{
+				u: {
+					username: 'diego.mello'
+				},
+				msg: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries'
+			}}
+		/>
+	</ScrollView>
+);

storybook/stories/index.js

@@ -4,14 +4,26 @@ import { Provider } from 'react-redux';
 import { createStore, combineReducers } from 'redux';
 import { storiesOf } from '@storybook/react-native';
 
-import DirectMessage from './Channels/DirectMessage';
+import RoomItem from './RoomItem';
 import Avatar from './Avatar';
 import Message from './Message';
 
-const reducers = combineReducers({ settings: () => ({}), login: () => ({ user: {} }), meteor: () => ({ connected: true }) });
+const reducers = combineReducers({
+	settings: () => ({}),
+	login: () => ({
+		user: {
+			username: 'diego.mello'
+		}
+	}),
+	meteor: () => ({ connected: true })
+});
 const store = createStore(reducers);
 
-storiesOf('Avatar', module).addDecorator(story => <Provider store={store}>{story()}</Provider>).add('avatar', () => Avatar);
+storiesOf('Avatar', module)
-storiesOf('Channel Cell', module).addDecorator(story => <Provider store={store}>{story()}</Provider>).add('Direct Messages', () => DirectMessage);
+	.addDecorator(story => <Provider store={store}>{story()}</Provider>)
+	.add('avatar', () => Avatar);
+storiesOf('RoomItem', module)
+	.addDecorator(story => <Provider store={store}>{story()}</Provider>)
+	.add('list', () => RoomItem);
 storiesOf('Message', module)
 	.add('list', () => Message);