From e84af2bfa778eb8e23bab64dc0887b7b02ddbf85 Mon Sep 17 00:00:00 2001
From: enahum <nahumhbl@gmail.com>
Date: Thu, 19 Oct 2017 18:49:21 -0300
Subject: [PATCH] Polishing search box text size and icon styling (#1034)

* Channel Switcher and search box text size and icon styling

* minor UI fixes and android fixes
---
 .../channels_list/channels_list.js            | 21 +++++++----
 .../switch_teams_button.js                    |  2 +-
 .../search_bar/search_bar.android.js          | 25 ++++++++-----
 app/components/search_bar/search_bar.ios.js   |  8 ++---
 app/components/search_bar/search_box.js       | 36 +++++++++----------
 .../channel_add_members.js                    |  5 +--
 .../channel_members/channel_members.js        |  5 +--
 app/screens/more_channels/more_channels.js    |  5 +--
 app/screens/more_dms/more_dms.js              |  5 +--
 app/screens/search/search.js                  | 12 ++-----
 assets/base/i18n/en.json                      |  2 +-
 11 files changed, 69 insertions(+), 57 deletions(-)

diff --git a/app/components/channel_drawer/channels_list/channels_list.js b/app/components/channel_drawer/channels_list/channels_list.js
index e220574fb..0cd2f14af 100644
--- a/app/components/channel_drawer/channels_list/channels_list.js
+++ b/app/components/channel_drawer/channels_list/channels_list.js
@@ -144,17 +144,18 @@ class ChannelsList extends React.PureComponent {
             <View style={styles.searchContainer}>
                 <SearchBar
                     ref='search_bar'
-                    placeholder={intl.formatMessage({id: 'mobile.channel_drawer.search', defaultMessage: 'Jump to a conversation'})}
+                    placeholder={intl.formatMessage({id: 'mobile.channel_drawer.search', defaultMessage: 'Jump to...'})}
                     cancelTitle={intl.formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
                     backgroundColor='transparent'
                     inputHeight={33}
                     inputStyle={{
                         backgroundColor: changeOpacity(theme.sidebarHeaderTextColor, 0.2),
                         color: theme.sidebarHeaderTextColor,
-                        fontSize: 13
+                        fontSize: 15,
+                        lineHeight: 66
                     }}
                     placeholderTextColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
-                    tintColorSearch={changeOpacity(theme.sidebarHeaderTextColor, 0.8)}
+                    tintColorSearch={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
                     tintColorDelete={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
                     titleCancelColor={theme.sidebarHeaderTextColor}
                     selectionColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
@@ -173,10 +174,12 @@ class ChannelsList extends React.PureComponent {
             >
                 <View style={styles.statusBar}>
                     <View style={styles.headerContainer}>
-                        <SwitchTeamsButton
-                            searching={searching}
-                            onShowTeams={onShowTeams}
-                        />
+                        <View style={styles.switchContainer}>
+                            <SwitchTeamsButton
+                                searching={searching}
+                                onShowTeams={onShowTeams}
+                            />
+                        </View>
                         {title}
                         {settings}
                     </View>
@@ -224,6 +227,10 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             fontWeight: 'normal',
             paddingLeft: 16
         },
+        switchContainer: {
+            position: 'relative',
+            top: -1
+        },
         settingsContainer: {
             alignItems: 'center',
             justifyContent: 'center',
diff --git a/app/components/channel_drawer/channels_list/switch_teams_button/switch_teams_button.js b/app/components/channel_drawer/channels_list/switch_teams_button/switch_teams_button.js
index bdca1daee..d25accc09 100644
--- a/app/components/channel_drawer/channels_list/switch_teams_button/switch_teams_button.js
+++ b/app/components/channel_drawer/channels_list/switch_teams_button/switch_teams_button.js
@@ -93,7 +93,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             height: 32,
             justifyContent: 'center',
             marginLeft: 6,
-            marginRight: 10,
+            marginRight: 5,
             paddingHorizontal: 6
         },
         switcherDivider: {
diff --git a/app/components/search_bar/search_bar.android.js b/app/components/search_bar/search_bar.android.js
index 8bf99b04e..fb8a61220 100644
--- a/app/components/search_bar/search_bar.android.js
+++ b/app/components/search_bar/search_bar.android.js
@@ -49,8 +49,8 @@ export default class SearchBarAndroid extends PureComponent {
 
     static defaultProps = {
         backArrowSize: 24,
-        deleteIconSize: 16,
-        searchIconSize: 16,
+        deleteIconSize: 20,
+        searchIconSize: 24,
         blurOnSubmit: true,
         placeholder: 'Search',
         showCancelButton: true,
@@ -99,6 +99,10 @@ export default class SearchBarAndroid extends PureComponent {
         });
     };
 
+    onClearPress = () => {
+        this.onChangeText('');
+    };
+
     onChangeText = (value) => {
         this.props.onChangeText(value);
     };
@@ -170,7 +174,7 @@ export default class SearchBarAndroid extends PureComponent {
                         {
                             backgroundColor: inputColor,
                             height: inputHeight,
-                            paddingLeft: isFocused ? 0 : inputHeight * 0.25
+                            paddingLeft: 7
                         }
                     ]}
                 >
@@ -212,13 +216,14 @@ export default class SearchBarAndroid extends PureComponent {
                         style={[
                             styles.searchBarInput,
                             inputNoBackground,
-                            {height: this.props.inputHeight}
+                            {height: this.props.inputHeight},
+                            isFocused ? {} : styles.searchBarBlurredInput
                         ]}
                     />
                     {isFocused && value ?
-                        <TouchableWithoutFeedback onPress={() => this.onChangeText('')}>
+                        <TouchableWithoutFeedback onPress={this.onClearPress}>
                             <Icon
-                                style={[{paddingRight: (inputHeight * 0.2)}]}
+                                style={[{paddingRight: 7}]}
                                 name='close'
                                 size={deleteIconSize}
                                 color={tintColorDelete || placeholderTextColor}
@@ -236,8 +241,7 @@ const styles = StyleSheet.create({
         backgroundColor: 'grey',
         flexDirection: 'row',
         justifyContent: 'flex-start',
-        alignItems: 'center',
-        padding: 5
+        alignItems: 'center'
     },
     searchBar: {
         flex: 1,
@@ -248,7 +252,10 @@ const styles = StyleSheet.create({
         flex: 1,
         fontWeight: 'normal',
         textAlignVertical: 'center',
-        padding: 0,
+        fontSize: 15,
         includeFontPadding: false
+    },
+    searchBarBlurredInput: {
+        padding: 0
     }
 });
diff --git a/app/components/search_bar/search_bar.ios.js b/app/components/search_bar/search_bar.ios.js
index e68ead80f..1a4a3194c 100644
--- a/app/components/search_bar/search_bar.ios.js
+++ b/app/components/search_bar/search_bar.ios.js
@@ -101,10 +101,10 @@ export default class SearchBarIos extends PureComponent {
             <Search
                 {...this.props}
                 ref='search'
-                placeholderCollapsedMargin={25}
-                placeholderExpandedMargin={25}
-                searchIconCollapsedMargin={15}
-                searchIconExpandedMargin={15}
+                placeholderCollapsedMargin={33}
+                placeholderExpandedMargin={33}
+                searchIconCollapsedMargin={10}
+                searchIconExpandedMargin={10}
                 shadowVisible={false}
                 onCancel={this.onCancel}
                 onChangeText={this.onChangeText}
diff --git a/app/components/search_bar/search_box.js b/app/components/search_bar/search_box.js
index e29d496ef..a6a4b16f2 100644
--- a/app/components/search_bar/search_box.js
+++ b/app/components/search_bar/search_box.js
@@ -15,10 +15,12 @@ import {
     StyleSheet,
     View
 } from 'react-native';
+import EvilIcon from 'react-native-vector-icons/EvilIcons';
 import IonIcon from 'react-native-vector-icons/Ionicons';
 
 const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
-const AnimatedIcon = Animated.createAnimatedComponent(IonIcon);
+const AnimatedIonIcon = Animated.createAnimatedComponent(IonIcon);
+const AnimatedEvilcon = Animated.createAnimatedComponent(EvilIcon);
 const containerHeight = 40;
 const middleHeight = 20;
 
@@ -328,11 +330,6 @@ export default class Search extends Component {
     };
 
     render() {
-        let iconSize = 16;
-        if (this.props.inputStyle && this.props.inputStyle.fontSize) {
-            iconSize = this.props.inputStyle.fontSize + 2;
-        }
-
         return (
             <Animated.View
                 ref='searchContainer'
@@ -391,16 +388,16 @@ export default class Search extends Component {
                         >
                             {this.props.iconSearch}
                         </Animated.View> :
-                        <AnimatedIcon
-                            name='ios-search-outline'
-                            size={iconSize}
+                        <AnimatedEvilcon
+                            name='search'
+                            size={24}
                             style={[
                                 styles.iconSearch,
                                 styles.iconSearchDefault,
                                 this.props.tintColorSearch && {color: this.props.tintColorSearch},
                                 {
                                     left: this.iconSearchAnimated,
-                                    top: middleHeight - (iconSize / 2)
+                                    top: middleHeight - 10
                                 }
                             ]}
                         />
@@ -417,10 +414,10 @@ export default class Search extends Component {
                         >
                             {this.props.iconDelete}
                         </Animated.View> :
-                        <View style={[styles.iconDelete, this.props.inputHeight && {height: this.props.inputHeight, width: iconSize + 5}]}>
-                            <AnimatedIcon
+                        <View style={[styles.iconDelete, this.props.inputHeight && {height: this.props.inputHeight}]}>
+                            <AnimatedIonIcon
                                 name='ios-close-circle'
-                                size={iconSize}
+                                size={17}
                                 style={[
                                     styles.iconDeleteDefault,
                                     this.props.tintColorDelete && {color: this.props.tintColorDelete},
@@ -468,13 +465,13 @@ const styles = StyleSheet.create({
     },
     input: {
         height: containerHeight - 10,
-        paddingTop: 5,
+        paddingTop: 7,
         paddingBottom: 5,
-        paddingRight: 20,
+        paddingRight: 32,
         borderColor: '#444',
         backgroundColor: '#f7f7f7',
         borderRadius: 5,
-        fontSize: 13
+        fontSize: 15
     },
     iconSearch: {
         flex: 1,
@@ -484,10 +481,13 @@ const styles = StyleSheet.create({
         color: 'grey'
     },
     iconDelete: {
-        alignItems: 'center',
+        alignItems: 'flex-start',
         justifyContent: 'center',
         position: 'absolute',
-        right: 70
+        paddingLeft: 1,
+        paddingTop: 3,
+        right: 65,
+        width: 25
     },
     iconDeleteDefault: {
         color: 'grey'
diff --git a/app/screens/channel_add_members/channel_add_members.js b/app/screens/channel_add_members/channel_add_members.js
index 04a46ebac..451fbb0e8 100644
--- a/app/screens/channel_add_members/channel_add_members.js
+++ b/app/screens/channel_add_members/channel_add_members.js
@@ -246,10 +246,11 @@ class ChannelAddMembers extends PureComponent {
                         inputStyle={{
                             backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
                             color: theme.centerChannelColor,
-                            fontSize: 13
+                            fontSize: 15,
+                            lineHeight: 66
                         }}
                         placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)}
-                        tintColorSearch={changeOpacity(theme.centerChannelColor, 0.8)}
+                        tintColorSearch={changeOpacity(theme.centerChannelColor, 0.5)}
                         tintColorDelete={changeOpacity(theme.centerChannelColor, 0.5)}
                         titleCancelColor={theme.centerChannelColor}
                         onChangeText={this.searchProfiles}
diff --git a/app/screens/channel_members/channel_members.js b/app/screens/channel_members/channel_members.js
index 335d02eef..019c7e626 100644
--- a/app/screens/channel_members/channel_members.js
+++ b/app/screens/channel_members/channel_members.js
@@ -293,10 +293,11 @@ class ChannelMembers extends PureComponent {
                         inputStyle={{
                             backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
                             color: theme.centerChannelColor,
-                            fontSize: 13
+                            fontSize: 15,
+                            lineHeight: 66
                         }}
                         placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)}
-                        tintColorSearch={changeOpacity(theme.centerChannelColor, 0.8)}
+                        tintColorSearch={changeOpacity(theme.centerChannelColor, 0.5)}
                         tintColorDelete={changeOpacity(theme.centerChannelColor, 0.5)}
                         titleCancelColor={theme.centerChannelColor}
                         onChangeText={this.searchProfiles}
diff --git a/app/screens/more_channels/more_channels.js b/app/screens/more_channels/more_channels.js
index 80c203f0d..3842969a3 100644
--- a/app/screens/more_channels/more_channels.js
+++ b/app/screens/more_channels/more_channels.js
@@ -290,10 +290,11 @@ class MoreChannels extends PureComponent {
                             inputStyle={{
                                 backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
                                 color: theme.centerChannelColor,
-                                fontSize: 13
+                                fontSize: 15,
+                                lineHeight: 66
                             }}
                             placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)}
-                            tintColorSearch={changeOpacity(theme.centerChannelColor, 0.8)}
+                            tintColorSearch={changeOpacity(theme.centerChannelColor, 0.5)}
                             tintColorDelete={changeOpacity(theme.centerChannelColor, 0.5)}
                             titleCancelColor={theme.centerChannelColor}
                             onChangeText={this.searchProfiles}
diff --git a/app/screens/more_dms/more_dms.js b/app/screens/more_dms/more_dms.js
index 1478fb14d..8863106fa 100644
--- a/app/screens/more_dms/more_dms.js
+++ b/app/screens/more_dms/more_dms.js
@@ -387,10 +387,11 @@ class MoreDirectMessages extends PureComponent {
                         inputStyle={{
                             backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
                             color: theme.centerChannelColor,
-                            fontSize: 13
+                            fontSize: 15,
+                            lineHeight: 66
                         }}
                         placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)}
-                        tintColorSearch={changeOpacity(theme.centerChannelColor, 0.8)}
+                        tintColorSearch={changeOpacity(theme.centerChannelColor, 0.5)}
                         tintColorDelete={changeOpacity(theme.centerChannelColor, 0.5)}
                         titleCancelColor={theme.centerChannelColor}
                         onChangeText={this.onSearch}
diff --git a/app/screens/search/search.js b/app/screens/search/search.js
index 8049276b7..8203acafc 100644
--- a/app/screens/search/search.js
+++ b/app/screens/search/search.js
@@ -592,18 +592,12 @@ class Search extends Component {
                         inputStyle={{
                             backgroundColor: changeOpacity(theme.sidebarHeaderTextColor, 0.2),
                             color: theme.sidebarHeaderTextColor,
-                            ...Platform.select({
-                                android: {
-                                    fontSize: 15
-                                },
-                                ios: {
-                                    fontSize: 13
-                                }
-                            })
+                            fontSize: 15,
+                            lineHeight: 66
                         }}
                         placeholderTextColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
                         selectionColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
-                        tintColorSearch={changeOpacity(theme.sidebarHeaderTextColor, 0.8)}
+                        tintColorSearch={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
                         tintColorDelete={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
                         titleCancelColor={theme.sidebarHeaderTextColor}
                         onChangeText={this.handleTextChanged}
diff --git a/assets/base/i18n/en.json b/assets/base/i18n/en.json
index f8a42a4af..c7cc26e61 100644
--- a/assets/base/i18n/en.json
+++ b/assets/base/i18n/en.json
@@ -1874,7 +1874,7 @@
   "mobile.advanced_settings.reset_message": "\nThis will reset all offline data and restart the app. You will be automatically logged back in once the app restarts.\n",
   "mobile.advanced_settings.reset_title": "Reset Cache",
   "mobile.advanced_settings.title": "Advanced Settings",
-  "mobile.channel_drawer.search": "Jump to a conversation",
+  "mobile.channel_drawer.search": "Jump to...",
   "mobile.channel_info.alertMessageDeleteChannel": "Are you sure you want to delete the {term} {name}?",
   "mobile.channel_info.alertMessageLeaveChannel": "Are you sure you want to leave the {term} {name}?",
   "mobile.channel_info.alertNo": "No",