From c9306a815a4db68ac9a0e18bb29687216515a7be Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Wed, 14 Jun 2017 20:19:01 +0500
Subject: [PATCH] Updating search bar styling (#626)

* Updating search bar styling

* Updating search bar styling

* Removing unusued variable
---
 .../channel_drawer/channels_list/index.js         | 13 +++++++------
 app/components/search_bar/search_bar.ios.js       |  8 ++++----
 .../channel_add_members/channel_add_members.js    | 15 +++++++--------
 app/screens/channel_members/channel_members.js    | 15 +++++++--------
 app/screens/more_channels/more_channels.js        | 14 +++++++-------
 app/screens/more_dms/more_dms.js                  | 15 +++++++--------
 6 files changed, 39 insertions(+), 41 deletions(-)

diff --git a/app/components/channel_drawer/channels_list/index.js b/app/components/channel_drawer/channels_list/index.js
index a198f3b01..1a3cb8d93 100644
--- a/app/components/channel_drawer/channels_list/index.js
+++ b/app/components/channel_drawer/channels_list/index.js
@@ -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: {
diff --git a/app/components/search_bar/search_bar.ios.js b/app/components/search_bar/search_bar.ios.js
index 03c9ae066..dcc887c92 100644
--- a/app/components/search_bar/search_bar.ios.js
+++ b/app/components/search_bar/search_bar.ios.js
@@ -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}
diff --git a/app/screens/channel_add_members/channel_add_members.js b/app/screens/channel_add_members/channel_add_members.js
index d8f893276..4eee8e2f4 100644
--- a/app/screens/channel_add_members/channel_add_members.js
+++ b/app/screens/channel_add_members/channel_add_members.js
@@ -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}
diff --git a/app/screens/channel_members/channel_members.js b/app/screens/channel_members/channel_members.js
index 41851e4d5..d720ac29d 100644
--- a/app/screens/channel_members/channel_members.js
+++ b/app/screens/channel_members/channel_members.js
@@ -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}
diff --git a/app/screens/more_channels/more_channels.js b/app/screens/more_channels/more_channels.js
index 500b7a268..94fb8061a 100644
--- a/app/screens/more_channels/more_channels.js
+++ b/app/screens/more_channels/more_channels.js
@@ -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}
diff --git a/app/screens/more_dms/more_dms.js b/app/screens/more_dms/more_dms.js
index 1d51500a8..878a868f4 100644
--- a/app/screens/more_dms/more_dms.js
+++ b/app/screens/more_dms/more_dms.js
@@ -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}