Updating search bar styling (#626)

* Updating search bar styling

* Updating search bar styling

* Removing unusued variable
This commit is contained in:
Asaad Mahmood 2017-06-14 20:19:01 +05:00 committed by enahum
parent 7e2192a052
commit c9306a815a
6 changed files with 39 additions and 41 deletions

View file

@ -155,15 +155,15 @@ class ChannelsList extends Component {
placeholder={intl.formatMessage({id: 'mobile.channel_drawer.search', defaultMessage: 'Jump to a conversation'})}
cancelTitle={intl.formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
backgroundColor='transparent'
inputHeight={Platform.OS === 'android' ? 32 : 33}
inputHeight={33}
inputStyle={{
backgroundColor: changeOpacity(theme.sidebarText, 0.4),
color: theme.sidebarText,
backgroundColor: changeOpacity(theme.sidebarHeaderTextColor, 0.2),
color: theme.sidebarHeaderTextColor,
fontSize: 13
}}
placeholderTextColor={changeOpacity(theme.sidebarText, 0.5)}
tintColorSearch={changeOpacity(theme.sidebarText, 0.5)}
tintColorDelete={changeOpacity(theme.sidebarText, 0.5)}
placeholderTextColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
tintColorSearch={changeOpacity(theme.sidebarHeaderTextColor, 0.8)}
tintColorDelete={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
titleCancelColor={theme.sidebarHeaderTextColor}
onSearchButtonPress={this.onSearch}
onCancelButtonPress={this.cancelSearch}
@ -331,6 +331,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
height: 32,
justifyContent: 'center',
marginLeft: 16,
marginRight: 10,
paddingHorizontal: 6
},
switcherDivider: {

View file

@ -115,10 +115,10 @@ export default class SearchBarIos extends Component {
<Search
{...this.props}
ref='search'
placeholderCollapsedMargin={this.state.placeholderWidth}
placeholderExpandedMargin={20}
searchIconCollapsedMargin={this.state.placeholderWidth + 10}
searchIconExpandedMargin={10}
placeholderCollapsedMargin={this.state.placeholderWidth - 15}
placeholderExpandedMargin={30}
searchIconCollapsedMargin={this.state.placeholderWidth}
searchIconExpandedMargin={15}
shadowVisible={false}
onCancel={this.onCancel}
onChangeText={this.onChangeText}

View file

@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
import {injectIntl, intlShape} from 'react-intl';
import {
Alert,
Platform,
InteractionManager,
StyleSheet,
View
@ -245,16 +244,16 @@ class ChannelAddMembers extends PureComponent {
placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
cancelTitle={formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
backgroundColor='transparent'
inputHeight={30}
inputHeight={33}
inputStyle={{
backgroundColor: '#fff',
color: changeOpacity('#000', 0.5),
backgroundColor: changeOpacity(theme.sidebarHeaderTextColor, 0.2),
color: theme.sidebarHeaderTextColor,
fontSize: 13
}}
placeholderTextColor={changeOpacity('#000', 0.5)}
tintColorSearch={changeOpacity('#000', 0.5)}
tintColorDelete={changeOpacity('#000', 0.5)}
titleCancelColor={Platform.OS === 'android' ? changeOpacity('#000', 0.5) : theme.sidebarHeaderBg}
placeholderTextColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
tintColorSearch={changeOpacity(theme.sidebarHeaderTextColor, 0.8)}
tintColorDelete={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
titleCancelColor={theme.sidebarHeaderTextColor}
onChangeText={this.searchProfiles}
onSearchButtonPress={this.searchProfiles}
onCancelButtonPress={this.cancelSearch}

View file

@ -5,7 +5,6 @@ import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {
Alert,
Platform,
InteractionManager,
StyleSheet,
View
@ -300,16 +299,16 @@ class ChannelMembers extends PureComponent {
placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
cancelTitle={formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
backgroundColor='transparent'
inputHeight={30}
inputHeight={33}
inputStyle={{
backgroundColor: '#fff',
color: changeOpacity('#000', 0.5),
backgroundColor: changeOpacity(theme.sidebarHeaderTextColor, 0.2),
color: theme.sidebarHeaderTextColor,
fontSize: 13
}}
placeholderTextColor={changeOpacity('#000', 0.5)}
tintColorSearch={changeOpacity('#000', 0.5)}
tintColorDelete={changeOpacity('#000', 0.5)}
titleCancelColor={Platform.OS === 'android' ? changeOpacity('#000', 0.5) : theme.sidebarHeaderBg}
placeholderTextColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
tintColorSearch={changeOpacity(theme.sidebarHeaderTextColor, 0.8)}
tintColorDelete={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
titleCancelColor={theme.sidebarHeaderTextColor}
onChangeText={this.searchProfiles}
onSearchButtonPress={this.searchProfiles}
onCancelButtonPress={this.cancelSearch}

View file

@ -258,16 +258,16 @@ class MoreChannels extends PureComponent {
placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
cancelTitle={formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
backgroundColor='transparent'
inputHeight={30}
inputHeight={33}
inputStyle={{
backgroundColor: '#fff',
color: changeOpacity('#000', 0.5),
backgroundColor: changeOpacity(theme.sidebarHeaderTextColor, 0.2),
color: theme.sidebarHeaderTextColor,
fontSize: 13
}}
placeholderTextColor={changeOpacity('#000', 0.5)}
tintColorSearch={changeOpacity('#000', 0.5)}
tintColorDelete={changeOpacity('#000', 0.5)}
titleCancelColor={Platform.OS === 'android' ? changeOpacity('#000', 0.5) : theme.sidebarHeaderBg}
placeholderTextColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
tintColorSearch={changeOpacity(theme.sidebarHeaderTextColor, 0.8)}
tintColorDelete={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
titleCancelColor={theme.sidebarHeaderTextColor}
onChangeText={this.searchProfiles}
onSearchButtonPress={this.searchProfiles}
onCancelButtonPress={this.cancelSearch}

View file

@ -5,7 +5,6 @@ import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {injectIntl, intlShape} from 'react-intl';
import {
Platform,
InteractionManager,
StyleSheet,
View
@ -170,16 +169,16 @@ class MoreDirectMessages extends PureComponent {
placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
cancelTitle={formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
backgroundColor='transparent'
inputHeight={30}
inputHeight={33}
inputStyle={{
backgroundColor: '#fff',
color: changeOpacity('#000', 0.5),
backgroundColor: changeOpacity(theme.sidebarHeaderTextColor, 0.2),
color: theme.sidebarHeaderTextColor,
fontSize: 13
}}
placeholderTextColor={changeOpacity('#000', 0.5)}
tintColorSearch={changeOpacity('#000', 0.5)}
tintColorDelete={changeOpacity('#000', 0.5)}
titleCancelColor={Platform.OS === 'android' ? changeOpacity('#000', 0.5) : theme.sidebarHeaderBg}
placeholderTextColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
tintColorSearch={changeOpacity(theme.sidebarHeaderTextColor, 0.8)}
tintColorDelete={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
titleCancelColor={theme.sidebarHeaderTextColor}
onChangeText={this.searchProfiles}
onSearchButtonPress={this.searchProfiles}
onCancelButtonPress={this.cancelSearch}