From 3f18238597a192a75121cd94099b4cad0c520a96 Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Fri, 21 Jul 2017 16:33:52 -0400
Subject: [PATCH] Fix search box clear button to be more tappable and center
 text vertically

---
 app/components/search_bar/search_box.js | 35 ++++++++++++-------------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/app/components/search_bar/search_box.js b/app/components/search_bar/search_box.js
index 32a36c943..aa65913b0 100644
--- a/app/components/search_bar/search_box.js
+++ b/app/components/search_bar/search_box.js
@@ -415,20 +415,20 @@ export default class Search extends Component {
                         >
                             {this.props.iconDelete}
                         </Animated.View> :
-                        <AnimatedIcon
-                            name='ios-close-circle'
-                            size={iconSize}
-                            style={[
-                                styles.iconDelete,
-                                styles.iconDeleteDefault,
-                                this.props.tintColorDelete && {color: this.props.tintColorDelete},
-                                this.props.positionRightDelete && {right: this.props.positionRightDelete},
-                                {
-                                    opacity: this.iconDeleteAnimated,
-                                    top: middleHeight - (iconSize / 2)
-                                }
-                            ]}
-                        />
+                        <View style={[styles.iconDelete, this.props.inputHeight && {height: this.props.inputHeight, width: iconSize + 5}]}>
+                            <AnimatedIcon
+                                name='ios-close-circle'
+                                size={iconSize}
+                                style={[
+                                    styles.iconDeleteDefault,
+                                    this.props.tintColorDelete && {color: this.props.tintColorDelete},
+                                    this.props.positionRightDelete && {right: this.props.positionRightDelete},
+                                    {
+                                        opacity: this.iconDeleteAnimated
+                                    }
+                                ]}
+                            />
+                        </View>
                     )}
                 </TouchableWithoutFeedback>
                 <TouchableWithoutFeedback onPress={this.onCancel}>
@@ -462,10 +462,7 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         justifyContent: 'flex-start',
         alignItems: 'center',
-        paddingBottom: 5,
-        paddingLeft: 5,
-        paddingRight: 5,
-        paddingTop: 4
+        padding: 5
     },
     input: {
         height: containerHeight - 10,
@@ -485,6 +482,8 @@ const styles = StyleSheet.create({
         color: 'grey'
     },
     iconDelete: {
+        alignItems: 'center',
+        justifyContent: 'center',
         position: 'absolute',
         right: 70
     },