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

@@ -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>

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,
+    fontSize: 16,
-    position: 'absolute'
+    marginLeft: 16,
+    marginRight: 16
+  },
+  boldText: {
+    fontFamily: 'Inter-UI-SemiBold',
+    fontSize: 16
   },
   loading: {
     position: 'absolute'

app/src/styles/uriBar.js

@@ -19,13 +19,13 @@ const uriBarStyle = StyleSheet.create({
     elevation: 4
   },
   uriText: {
-    backgroundColor: Colors.White,
+    backgroundColor: Colors.VeryLightGrey,
-    borderWidth: 1,
+    borderRadius: 24,
-    borderColor: Colors.LightGrey,
+    paddingLeft: 12,
-    padding: 8,
+    paddingRight: 12,
-    borderRadius: 4,
     fontFamily: 'Inter-UI-Regular',
     fontSize: 16,
+    lineHeight: 18,
     flex: 17
   },
   overlay: {