[IMPROVEMENT] Unified header UX

app/constants/colors.js

@@ -1,5 +1,3 @@
-import { isIOS, isAndroid } from '../utils/deviceInfo';
-
 export const STATUS_COLORS = {
 	online: '#2de0a5',
 	busy: '#f5455c',
@@ -8,7 +6,7 @@ export const STATUS_COLORS = {
 };
 
 export const SWITCH_TRACK_COLOR = {
-	false: isAndroid ? '#f5455c' : null,
+	false: '#f5455c',
 	true: '#2de0a5'
 };
 
@@ -34,11 +32,11 @@ export const themes = {
 		separatorColor: '#cbcbcc',
 		navbarBackground: '#ffffff',
 		headerBorder: '#B2B2B2',
-		headerBackground: isIOS ? '#f8f8f8' : '#2f343d',
+		headerBackground: '#EEEFF1',
 		headerSecondaryBackground: '#ffffff',
-		headerTintColor: isAndroid ? '#ffffff' : '#1d74f5',
-		headerTitleColor: isAndroid ? '#ffffff' : '#0d0e12',
-		headerSecondaryText: isAndroid ? '#9ca2a8' : '#1d74f5',
+		headerTintColor: '#6C727A',
+		headerTitleColor: '#0C0D0F',
+		headerSecondaryText: '#1d74f5',
 		toastBackground: '#0C0D0F',
 		videoBackground: '#1f2329',
 		favoriteBackground: '#ffbb00',
@@ -63,7 +61,7 @@ export const themes = {
 		chatComponentBackground: '#192132',
 		auxiliaryBackground: '#07101e',
 		bannerBackground: '#0e1f38',
-		titleText: '#FFFFFF',
+		titleText: '#f9f9f9',
 		bodyText: '#e8ebed',
 		backdropColor: '#000000',
 		dangerColor: '#f5455c',
@@ -80,9 +78,9 @@ export const themes = {
 		headerBorder: '#2F3A4B',
 		headerBackground: '#0b182c',
 		headerSecondaryBackground: '#0b182c',
-		headerTintColor: isAndroid ? '#ffffff' : '#1d74f5',
-		headerTitleColor: '#FFFFFF',
-		headerSecondaryText: isAndroid ? '#9297a2' : '#1d74f5',
+		headerTintColor: '#f9f9f9',
+		headerTitleColor: '#f9f9f9',
+		headerSecondaryText: '#9297a2',
 		toastBackground: '#0C0D0F',
 		videoBackground: '#1f2329',
 		favoriteBackground: '#ffbb00',
@@ -124,9 +122,9 @@ export const themes = {
 		headerBorder: '#323232',
 		headerBackground: '#0d0d0d',
 		headerSecondaryBackground: '#0d0d0d',
-		headerTintColor: isAndroid ? '#ffffff' : '#1e9bfe',
+		headerTintColor: '#f9f9f9',
 		headerTitleColor: '#f9f9f9',
-		headerSecondaryText: isAndroid ? '#b2b8c6' : '#1e9bfe',
+		headerSecondaryText: '#b2b8c6',
 		toastBackground: '#0C0D0F',
 		videoBackground: '#1f2329',
 		favoriteBackground: '#ffbb00',

app/containers/DisclosureIndicator.js

@@ -17,7 +17,7 @@ const styles = StyleSheet.create({
 export const DisclosureImage = React.memo(({ theme }) => (
 	<CustomIcon
 		name='chevron-right'
-		color={themes[theme].auxiliaryTintColor}
+		color={themes[theme].auxiliaryText}
 		size={20}
 	/>
 ));

app/containers/Header/index.js

@@ -20,6 +20,11 @@ export const getHeaderHeight = (isLandscape) => {
 	return 56;
 };
 
+export const getHeaderTitlePosition = insets => ({
+	left: 60 + insets.left,
+	right: 80 + insets.right
+});
+
 const styles = StyleSheet.create({
 	container: {
 		height: headerHeight,

app/containers/HeaderButton.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { HeaderButtons, HeaderButton, Item } from 'react-navigation-header-buttons';
 
 import { CustomIcon } from '../lib/Icons';
-import { isIOS, isAndroid } from '../utils/deviceInfo';
+import { isIOS } from '../utils/deviceInfo';
 import { themes } from '../constants/colors';
 import I18n from '../i18n';
 import { withTheme } from '../theme';
@@ -15,11 +15,7 @@ const CustomHeaderButton = React.memo(withTheme(({ theme, ...props }) => (
 		{...props}
 		IconComponent={CustomIcon}
 		iconSize={headerIconSize}
-		color={
-			isAndroid
-				? themes[theme].headerTitleColor
-				: themes[theme].headerTintColor
-		}
+		color={themes[theme].headerTintColor}
 	/>
 )));
 
@@ -32,7 +28,7 @@ export const CustomHeaderButtons = React.memo(props => (
 
 export const DrawerButton = React.memo(({ navigation, testID, ...otherProps }) => (
 	<CustomHeaderButtons left>
-		<Item title='drawer' iconName='customize' onPress={navigation.toggleDrawer} testID={testID} {...otherProps} />
+		<Item title='drawer' iconName='menu_hamburguer' onPress={navigation.toggleDrawer} testID={testID} {...otherProps} />
 	</CustomHeaderButtons>
 ));
 

app/containers/SearchBox.js

@@ -47,7 +47,7 @@ const styles = StyleSheet.create({
 
 const CancelButton = (onCancelPress, theme) => (
 	<Touchable onPress={onCancelPress} style={styles.cancel}>
-		<Text style={[styles.cancelText, { color: themes[theme].tintColor }]}>{I18n.t('Cancel')}</Text>
+		<Text style={[styles.cancelText, { color: themes[theme].headerTintColor }]}>{I18n.t('Cancel')}</Text>
 	</Touchable>
 );
 

app/containers/StatusBar.js

@@ -2,13 +2,12 @@ import React from 'react';
 import { StatusBar as StatusBarRN } from 'react-native';
 import PropTypes from 'prop-types';
 
-import { isIOS } from '../utils/deviceInfo';
 import { themes } from '../constants/colors';
 
 const StatusBar = React.memo(({ theme, barStyle, backgroundColor }) => {
 	if (!barStyle) {
 		barStyle = 'light-content';
-		if (theme === 'light' && isIOS) {
+		if (theme === 'light') {
 			barStyle = 'dark-content';
 		}
 	}

app/i18n/locales/en.js

@@ -543,6 +543,7 @@ export default {
 	Video_call: 'Video call',
 	View_Original: 'View Original',
 	Voice_call: 'Voice call',
+	Waiting_for_network: 'Waiting for network...',
 	Websocket_disabled: 'Websocket is disabled for this server.\n{{contact}}',
 	Welcome: 'Welcome',
 	What_are_you_doing_right_now: 'What are you doing right now?',

app/i18n/locales/pt-BR.js

@@ -479,6 +479,7 @@ export default {
 	Verify_your_email_for_the_code_we_sent: 'Verifique em seu e-mail o código que enviamos',
 	Video_call: 'Chamada de vídeo',
 	Voice_call: 'Chamada de voz',
+	Waiting_for_network: 'Aguardando rede...',
 	Websocket_disabled: 'Websocket está desativado para esse servidor.\n{{contact}}',
 	Welcome: 'Bem vindo',
 	Whats_your_2fa: 'Qual seu código de autenticação?',

app/views/RoomView/Header/Header.js

@@ -6,28 +6,20 @@ import {
 
 import I18n from '../../../i18n';
 import sharedStyles from '../../Styles';
-import { isAndroid, isTablet } from '../../../utils/deviceInfo';
 import Icon from './Icon';
 import { themes } from '../../../constants/colors';
 import Markdown from '../../../containers/markdown';
 
-const androidMarginLeft = isTablet ? 0 : 4;
-
 const TITLE_SIZE = 16;
 const styles = StyleSheet.create({
 	container: {
 		flex: 1,
-		marginRight: isAndroid ? 15 : 5,
-		marginLeft: isAndroid ? androidMarginLeft : -10,
 		justifyContent: 'center'
 	},
 	titleContainer: {
 		alignItems: 'center',
 		flexDirection: 'row'
 	},
-	threadContainer: {
-		marginRight: isAndroid ? 20 : undefined
-	},
 	title: {
 		...sharedStyles.textSemibold,
 		fontSize: TITLE_SIZE
@@ -36,7 +28,6 @@ const styles = StyleSheet.create({
 		alignItems: 'center'
 	},
 	subtitle: {
-		marginRight: -16,
 		...sharedStyles.textRegular,
 		fontSize: 12
 	},
@@ -87,12 +78,8 @@ SubTitle.propTypes = {
 };
 
 const HeaderTitle = React.memo(({
-	title, tmid, prid, scale, connecting, theme
+	title, tmid, prid, scale, theme
 }) => {
-	if (connecting) {
-		title = I18n.t('Connecting');
-	}
-
 	if (!tmid && !prid) {
 		return (
 			<Text
@@ -122,7 +109,6 @@ HeaderTitle.propTypes = {
 	tmid: PropTypes.string,
 	prid: PropTypes.string,
 	scale: PropTypes.number,
-	connecting: PropTypes.bool,
 	theme: PropTypes.string
 };
 
@@ -147,7 +133,7 @@ const Header = React.memo(({
 			style={styles.container}
 			disabled={tmid}
 		>
-			<View style={[styles.titleContainer, tmid && styles.threadContainer]}>
+			<View style={styles.titleContainer}>
 				<Icon type={prid ? 'discussion' : type} status={status} roomUserId={roomUserId} theme={theme} />
 				<HeaderTitle
 					title={title}

app/views/RoomView/Header/Icon.js

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import { STATUS_COLORS, themes } from '../../../constants/colors';
 import { CustomIcon } from '../../../lib/Icons';
 import Status from '../../../containers/Status/Status';
-import { isAndroid } from '../../../utils/deviceInfo';
 
 const ICON_SIZE = 15;
 
@@ -32,7 +31,7 @@ const Icon = React.memo(({
 	if (type === 'l') {
 		colorStyle = { color: STATUS_COLORS[status] };
 	} else {
-		colorStyle = { color: isAndroid && theme === 'light' ? themes[theme].buttonText : themes[theme].auxiliaryText };
+		colorStyle = { color: themes[theme].auxiliaryText };
 	}
 
 	let icon;

app/views/RoomView/Header/RoomHeaderLeft.js → app/views/RoomView/Header/LeftButtons.js

@@ -13,16 +13,21 @@ const styles = StyleSheet.create({
 	}
 });
 
-const RoomHeaderLeft = React.memo(({
+const LeftButtons = React.memo(({
 	tmid, unreadsCount, navigation, baseUrl, userId, token, title, t, theme, goRoomActionsView, isMasterDetail
 }) => {
 	if (!isMasterDetail || tmid) {
 		const onPress = useCallback(() => navigation.goBack());
+		const label = unreadsCount > 99 ? '+99' : unreadsCount || ' ';
+		const labelLength = label.length ? label.length : 1;
+		const marginLeft = -2 * labelLength;
+		const fontSize = labelLength > 1 ? 14 : 17;
 		return (
 			<HeaderBackButton
-				label={unreadsCount > 999 ? '+999' : unreadsCount || ' '}
+				label={label}
 				onPress={onPress}
 				tintColor={themes[theme].headerTintColor}
+				labelStyle={{ fontSize, marginLeft }}
 			/>
 		);
 	}
@@ -44,7 +49,7 @@ const RoomHeaderLeft = React.memo(({
 	return null;
 });
 
-RoomHeaderLeft.propTypes = {
+LeftButtons.propTypes = {
 	tmid: PropTypes.string,
 	unreadsCount: PropTypes.number,
 	navigation: PropTypes.object,
@@ -58,4 +63,4 @@ RoomHeaderLeft.propTypes = {
 	isMasterDetail: PropTypes.bool
 };
 
-export default RoomHeaderLeft;
+export default LeftButtons;

app/views/RoomView/Header/RightButtons.js

@@ -68,6 +68,17 @@ class RightButtonsContainer extends React.PureComponent {
 		}
 	}
 
+	goSearchView = () => {
+		const {
+			rid, navigation, isMasterDetail
+		} = this.props;
+		if (isMasterDetail) {
+			navigation.navigate('ModalStackNavigator', { screen: 'SearchMessagesView', params: { rid, showCloseModal: true } });
+		} else {
+			navigation.navigate('SearchMessagesView', { rid });
+		}
+	}
+
 	toggleFollowThread = () => {
 		const { isFollowingThread } = this.state;
 		const { toggleFollowThread } = this.props;
@@ -104,6 +115,12 @@ class RightButtonsContainer extends React.PureComponent {
 						testID='room-view-header-threads'
 					/>
 				) : null}
+				<Item
+					title='search'
+					iconName='magnifier'
+					onPress={this.goSearchView}
+					testID='room-view-search'
+				/>
 			</CustomHeaderButtons>
 		);
 	}

app/views/RoomView/Header/index.js

@@ -4,10 +4,11 @@ import { connect } from 'react-redux';
 import equal from 'deep-equal';
 
 import Header from './Header';
+import LeftButtons from './LeftButtons';
 import RightButtons from './RightButtons';
 import { withTheme } from '../../../theme';
-import RoomHeaderLeft from './RoomHeaderLeft';
 import { withDimensions } from '../../../dimensions';
+import I18n from '../../../i18n';
 
 class RoomHeaderView extends Component {
 	static propTypes = {
@@ -20,6 +21,7 @@ class RoomHeaderView extends Component {
 		status: PropTypes.string,
 		statusText: PropTypes.string,
 		connecting: PropTypes.bool,
+		connected: PropTypes.bool,
 		theme: PropTypes.string,
 		roomUserId: PropTypes.string,
 		widthOffset: PropTypes.number,
@@ -30,7 +32,7 @@ class RoomHeaderView extends Component {
 
 	shouldComponentUpdate(nextProps) {
 		const {
-			type, title, subtitle, status, statusText, connecting, goRoomActionsView, usersTyping, theme, width, height
+			type, title, subtitle, status, statusText, connecting, connected, goRoomActionsView, usersTyping, theme, width, height
 		} = this.props;
 		if (nextProps.theme !== theme) {
 			return true;
@@ -53,6 +55,9 @@ class RoomHeaderView extends Component {
 		if (nextProps.connecting !== connecting) {
 			return true;
 		}
+		if (nextProps.connected !== connected) {
+			return true;
+		}
 		if (nextProps.width !== width) {
 			return true;
 		}
@@ -70,9 +75,18 @@ class RoomHeaderView extends Component {
 
 	render() {
 		const {
-			title, subtitle, type, prid, tmid, widthOffset, status = 'offline', statusText, connecting, usersTyping, goRoomActionsView, roomUserId, theme, width, height
+			title, subtitle: subtitleProp, type, prid, tmid, widthOffset, status = 'offline', statusText, connecting, connected, usersTyping, goRoomActionsView, roomUserId, theme, width, height
 		} = this.props;
 
+		let subtitle;
+		if (connecting) {
+			subtitle = I18n.t('Connecting');
+		} else if (!connected) {
+			subtitle = I18n.t('Waiting_for_network');
+		} else {
+			subtitle = subtitleProp;
+		}
+
 		return (
 			<Header
 				prid={prid}
@@ -108,7 +122,8 @@ const mapStateToProps = (state, ownProps) => {
 	}
 
 	return {
-		connecting: state.meteor.connecting,
+		connecting: state.meteor.connecting || state.server.loading,
+		connected: state.meteor.connected,
 		usersTyping: state.usersTyping,
 		status,
 		statusText
@@ -117,4 +132,4 @@ const mapStateToProps = (state, ownProps) => {
 
 export default connect(mapStateToProps)(withDimensions(withTheme(RoomHeaderView)));
 
-export { RightButtons, RoomHeaderLeft };
+export { RightButtons, LeftButtons };