Header

RocketChat · Oct 10, 2019 · ada6bf8 · ada6bf8
1 parent 5fc2d8e
commit ada6bf8
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 21 deletions.
diff --git a/app/constants/colors.js b/app/constants/colors.js
@@ -35,7 +35,7 @@ export const SWITCH_TRACK_COLOR = {
 export const themes = {
 	light: {
 		backgroundColor: '#ffffff',
-		focusedBackground: '#f8f8f8',
+		focusedBackground: isIOS ? '#f8f8f8' : '#2f343d',
 		chatComponentBackground: '#f3f4f5',
 		auxiliaryBackground: '#eeeef4',
 		bannerBackground: '#f1f2f4',

diff --git a/app/containers/SearchBox.js b/app/containers/SearchBox.js
@@ -6,22 +6,19 @@ import PropTypes from 'prop-types';
 import Touchable from 'react-native-platform-touchable';
 
 import I18n from '../i18n';
-import { isIOS } from '../utils/deviceInfo';
 import { CustomIcon } from '../lib/Icons';
 import sharedStyles from '../views/Styles';
 import { withTheme } from '../theme';
 import { themes } from '../constants/colors';
 
 const styles = StyleSheet.create({
 	container: {
-		// backgroundColor: isIOS ? '#F7F8FA' : '#54585E',
 		flexDirection: 'row',
 		alignItems: 'center',
 		flex: 1
 	},
 	searchBox: {
 		alignItems: 'center',
-		backgroundColor: '#E1E5E8',
 		borderRadius: 10,
 		color: '#8E8E93',
 		flexDirection: 'row',
@@ -61,20 +58,22 @@ const SearchBox = ({
 	onChangeText, onSubmitEditing, testID, hasCancel, onCancelPress, theme, ...props
 }) => (
 	<View style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]}>
-		<View style={styles.searchBox}>
-			<CustomIcon name='magnifier' size={14} color='#8E8E93' />
+		<View style={[styles.searchBox, { backgroundColor: themes[theme].borderColor }]}>
+			<CustomIcon name='magnifier' size={14} color={themes[theme].auxiliaryText} />
 			<TextInput
 				autoCapitalize='none'
 				autoCorrect={false}
 				blurOnSubmit
 				clearButtonMode='while-editing'
 				placeholder={I18n.t('Search')}
+				placeholderTextColor={themes[theme].auxiliaryText}
 				returnKeyType='search'
-				style={styles.input}
+				style={[styles.input, { color: themes[theme].controlText }]}
 				testID={testID}
 				underlineColorAndroid='transparent'
 				onChangeText={onChangeText}
 				onSubmitEditing={onSubmitEditing}
+				keyboardAppearance={theme === 'light' ? 'light' : 'dark'}
 				{...props}
 			/>
 		</View>
@@ -87,7 +86,8 @@ SearchBox.propTypes = {
 	onSubmitEditing: PropTypes.func,
 	hasCancel: PropTypes.bool,
 	onCancelPress: PropTypes.func,
-	testID: PropTypes.string
+	testID: PropTypes.string,
+	theme: PropTypes.string
 };
 
 export default withTheme(SearchBox);
diff --git a/app/views/RoomsListView/Header/Header.ios.js b/app/views/RoomsListView/Header/Header.ios.js
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 
 import I18n from '../../../i18n';
 import sharedStyles from '../../Styles';
-import { COLOR_PRIMARY } from '../../../constants/colors';
+import { COLOR_PRIMARY, themes } from '../../../constants/colors';
 
 const styles = StyleSheet.create({
 	container: {
@@ -19,7 +19,7 @@ const styles = StyleSheet.create({
 	},
 	title: {
 		fontSize: 14,
-		...sharedStyles.textColorTitle,
+		// ...sharedStyles.textColorTitle,
 		...sharedStyles.textRegular
 	},
 	server: {
@@ -39,19 +39,19 @@ const styles = StyleSheet.create({
 	}
 });
 
-const HeaderTitle = React.memo(({ connecting, isFetching }) => {
+const HeaderTitle = React.memo(({ connecting, isFetching, theme }) => {
 	let title = I18n.t('Messages');
 	if (connecting) {
 		title = I18n.t('Connecting');
 	}
 	if (isFetching) {
 		title = I18n.t('Updating');
 	}
-	return <Text style={styles.title}>{title}</Text>;
+	return <Text style={[styles.title, { color: themes[theme].titleText }]}>{title}</Text>;
 });
 
 const Header = React.memo(({
-	connecting, isFetching, serverName, showServerDropdown, onPress
+	connecting, isFetching, serverName, showServerDropdown, onPress, theme
 }) => (
 	<View style={styles.container}>
 		<TouchableOpacity
@@ -60,7 +60,7 @@ const Header = React.memo(({
 			style={styles.container}
 			disabled={connecting || isFetching}
 		>
-			<HeaderTitle connecting={connecting} isFetching={isFetching} />
+			<HeaderTitle connecting={connecting} isFetching={isFetching} theme={theme} />
 			<View style={styles.button}>
 				<Text style={styles.server}>{serverName}</Text>
 				<Image style={[styles.disclosure, showServerDropdown && styles.upsideDown]} source={{ uri: 'disclosure_indicator_server' }} />
@@ -73,6 +73,7 @@ Header.propTypes = {
 	connecting: PropTypes.bool,
 	isFetching: PropTypes.bool,
 	serverName: PropTypes.string,
+	theme: PropTypes.string,
 	showServerDropdown: PropTypes.bool.isRequired,
 	onPress: PropTypes.func.isRequired
 };
@@ -83,7 +84,8 @@ Header.defaultProps = {
 
 HeaderTitle.propTypes = {
 	connecting: PropTypes.bool,
-	isFetching: PropTypes.bool
+	isFetching: PropTypes.bool,
+	theme: PropTypes.string
 };
 
 export default Header;
diff --git a/app/views/RoomsListView/Header/index.js b/app/views/RoomsListView/Header/index.js
@@ -6,6 +6,7 @@ import {
 	toggleServerDropdown, closeServerDropdown, closeSortDropdown, setSearch as setSearchAction
 } from '../../../actions/rooms';
 import Header from './Header';
+import { withTheme } from '../../../theme';
 
 class RoomsListHeaderView extends PureComponent {
 	static propTypes = {
@@ -15,6 +16,7 @@ class RoomsListHeaderView extends PureComponent {
 		serverName: PropTypes.string,
 		connecting: PropTypes.bool,
 		isFetching: PropTypes.bool,
+		theme: PropTypes.string,
 		open: PropTypes.func,
 		close: PropTypes.func,
 		closeSort: PropTypes.func,
@@ -44,11 +46,12 @@ class RoomsListHeaderView extends PureComponent {
 
 	render() {
 		const {
-			serverName, showServerDropdown, showSearchHeader, connecting, isFetching
+			serverName, showServerDropdown, showSearchHeader, connecting, isFetching, theme
 		} = this.props;
 
 		return (
 			<Header
+				theme={theme}
 				serverName={serverName}
 				showServerDropdown={showServerDropdown}
 				showSearchHeader={showSearchHeader}
@@ -77,4 +80,4 @@ const mapDispatchtoProps = dispatch => ({
 	setSearch: searchText => dispatch(setSearchAction(searchText))
 });
 
-export default connect(mapStateToProps, mapDispatchtoProps)(RoomsListHeaderView);
+export default connect(mapStateToProps, mapDispatchtoProps)(withTheme(RoomsListHeaderView));
diff --git a/app/views/RoomsListView/ListHeader/SearchBar.js b/app/views/RoomsListView/ListHeader/SearchBar.js
@@ -3,10 +3,17 @@ import PropTypes from 'prop-types';
 
 import SearchBox from '../../../containers/SearchBox';
 import { isIOS } from '../../../utils/deviceInfo';
+import { withTheme } from '../../../theme';
 
-const SearchBar = React.memo(({ onChangeSearchText }) => {
+const SearchBar = React.memo(({ theme, onChangeSearchText }) => {
 	if (isIOS) {
-		return <SearchBox onChangeText={onChangeSearchText} testID='rooms-list-view-search' key='rooms-list-view-search' />;
+		return (
+			<SearchBox
+				onChangeText={onChangeSearchText}
+				testID='rooms-list-view-search'
+				theme={theme}
+			/>
+		);
 	}
 	return null;
 });
@@ -15,4 +22,4 @@ SearchBar.propTypes = {
 	onChangeSearchText: PropTypes.func
 };
 
-export default SearchBar;
+export default withTheme(SearchBar);
diff --git a/app/views/RoomsListView/index.js b/app/views/RoomsListView/index.js
@@ -81,7 +81,8 @@ class RoomsListView extends React.Component {
 		);
 
 		return {
-			headerStyle: { backgroundColor: themes[screenProps.theme].backgroundColor },
+			headerStyle: { backgroundColor: themes[screenProps.theme].focusedBackground },
+			headerTintColor: themes[screenProps.theme].tintColor,
 			headerLeft: searching ? (
 				<CustomHeaderButtons left>
 					<Item
@@ -137,6 +138,7 @@ class RoomsListView extends React.Component {
 		useRealName: PropTypes.bool,
 		StoreLastMessage: PropTypes.bool,
 		appState: PropTypes.string,
+		theme: PropTypes.string,
 		toggleSortDropdown: PropTypes.func,
 		openSearchHeader: PropTypes.func,
 		closeSearchHeader: PropTypes.func,