From 7f57447e572d104beee182a8da9cf1b42b8172ad Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Wed, 29 May 2019 11:53:27 +0100
Subject: [PATCH] change the appearance of the uri bar input (#561)

* change the appearance of the uri bar input
* improve no search results display
---
 app/src/page/search/view.js |  7 +++++--
 app/src/styles/search.js    | 21 ++++++++++++++++-----
 app/src/styles/uriBar.js    | 10 +++++-----
 3 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/app/src/page/search/view.js b/app/src/page/search/view.js
index a37a3cd3..5b810e01 100644
--- a/app/src/page/search/view.js
+++ b/app/src/page/search/view.js
@@ -104,8 +104,7 @@ class SearchPage extends React.PureComponent {
             <ActivityIndicator size="large" color={Colors.LbryGreen} style={searchStyle.loading} />
           </View>}
 
-        {!isSearching && (!uris || uris.length === 0) &&
-            <Text style={searchStyle.noResultsText}>No results to display.</Text>}
+
         {!isSearching &&
         <ScrollView
           style={searchStyle.scrollContainer}
@@ -127,6 +126,10 @@ class SearchPage extends React.PureComponent {
                                               navigation={navigation}
                                               onPress={() => navigateToUri(navigation, uri)}/>)
               ) : null }
+          {(!uris || uris.length === 0) &&
+            <View style={searchStyle.noResults}>
+              <Text style={searchStyle.noResultsText}>There are no results to display for <Text style={searchStyle.boldText}>{query}</Text>. Please try a different search term.</Text>
+            </View>}
         </ScrollView>}
         <FloatingWalletBalance navigation={navigation} />
       </View>
diff --git a/app/src/styles/search.js b/app/src/styles/search.js
index 601b7bd1..3e532472 100644
--- a/app/src/styles/search.js
+++ b/app/src/styles/search.js
@@ -8,7 +8,7 @@ const searchStyle = StyleSheet.create({
   },
   scrollContainer: {
     flex: 1,
-    marginTop: 60
+    marginTop: 60,
   },
   busyContainer: {
     flex: 1,
@@ -16,6 +16,7 @@ const searchStyle = StyleSheet.create({
     justifyContent: 'center'
   },
   scrollPadding: {
+    flex: 1,
     paddingBottom: 16
   },
   resultItem: {
@@ -27,7 +28,6 @@ const searchStyle = StyleSheet.create({
     marginRight: 8
   },
   featuredResultItem: {
-    flex: 1,
     flexDirection: 'row',
     justifyContent: 'space-between',
     paddingTop: 8,
@@ -42,11 +42,22 @@ const searchStyle = StyleSheet.create({
     fontFamily: 'Inter-UI-Regular',
     fontSize: 16
   },
+  noResults: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
   noResultsText: {
-    textAlign: 'center',
     fontFamily: 'Inter-UI-Regular',
-    fontSize: 14,
-    position: 'absolute'
+    fontSize: 16,
+    marginLeft: 16,
+    marginRight: 16
+  },
+  boldText: {
+    fontFamily: 'Inter-UI-SemiBold',
+    fontSize: 16
   },
   loading: {
     position: 'absolute'
diff --git a/app/src/styles/uriBar.js b/app/src/styles/uriBar.js
index e930e64d..07986dfe 100644
--- a/app/src/styles/uriBar.js
+++ b/app/src/styles/uriBar.js
@@ -19,13 +19,13 @@ const uriBarStyle = StyleSheet.create({
     elevation: 4
   },
   uriText: {
-    backgroundColor: Colors.White,
-    borderWidth: 1,
-    borderColor: Colors.LightGrey,
-    padding: 8,
-    borderRadius: 4,
+    backgroundColor: Colors.VeryLightGrey,
+    borderRadius: 24,
+    paddingLeft: 12,
+    paddingRight: 12,
     fontFamily: 'Inter-UI-Regular',
     fontSize: 16,
+    lineHeight: 18,
     flex: 17
   },
   overlay: {