use Inter font for markdown display and some style tweaks

src/component/channelIconItem/view.js

@@ -51,7 +51,7 @@ export default class ChannelIconItem extends React.PureComponent {
       <TouchableOpacity style={channelIconStyle.container} onPress={onPress}>
         {isResolvingUri && (
           <View style={channelIconStyle.centered}>
-            <ActivityIndicator size={'small'} color={Colors.LbryGreen} />
+            <ActivityIndicator size={'small'} color={Colors.NextLbryGreen} />
           </View>
         )}
         <View

src/component/channelSelector/view.js

@@ -191,7 +191,7 @@ export default class ChannelSelector extends React.PureComponent {
     const channel = this.state.addingChannel ? 'new' : this.props.channel;
     const { balance, enabled, fetchingChannels, channels = [] } = this.props;
     const pickerItems = [Constants.ITEM_ANONYMOUS, Constants.ITEM_CREATE_A_CHANNEL].concat(
-      channels ? channels.map(ch => ch.name) : []
+      channels ? channels.map(ch => ch.name) : [],
     );
 
     const {
@@ -264,7 +264,7 @@ export default class ChannelSelector extends React.PureComponent {
             </Text>
 
             <View style={channelSelectorStyle.buttonContainer}>
-              {creatingChannel && <ActivityIndicator size={'small'} color={Colors.LbryGreen} />}
+              {creatingChannel && <ActivityIndicator size={'small'} color={Colors.NextLbryGreen} />}
               {!creatingChannel && (
                 <View style={channelSelectorStyle.buttons}>
                   <Link style={channelSelectorStyle.cancelLink} text={__('Cancel')} onPress={this.handleCreateCancel} />

src/component/suggestedSubscriptionItem/view.js

@@ -43,7 +43,7 @@ class SuggestedSubscriptionItem extends React.PureComponent {
     if (isResolvingUri) {
       return (
         <View style={subscriptionsStyle.itemLoadingContainer}>
-          <ActivityIndicator size={'small'} color={Colors.LbryGreen} />
+          <ActivityIndicator size={'small'} color={Colors.NextLbryGreen} />
         </View>
       );
     }

src/page/file/view.js

@@ -9,6 +9,7 @@ import {
   Image,
   Linking,
   NativeModules,
+  Platform,
   ScrollView,
   StatusBar,
   StyleSheet,
@@ -185,7 +186,7 @@ class FilePage extends React.PureComponent {
       if (purchaseUriErrorMessage && purchaseUriErrorMessage.trim().length > 0) {
         notify({ message: purchaseUriErrorMessage, isError: true });
       }
-      this.setState({ downloadPressed: false, fileViewLogged: false, mediaLoaded: false });
+      this.setState({ downloadPressed: false, fileViewLogged: false, mediaLoaded: false, showRecommended: true });
     }
 
     const mediaType = Lbry.getMediaType(contentType);
@@ -261,7 +262,7 @@ class FilePage extends React.PureComponent {
       this.setState({ autoGetAttempted: true }, () => this.checkStoragePermissionForDownload());
     }
 
-    if (((costInfo && costInfo.cost > 0) || !isPlayable) && !this.state.showRecommended) {
+    if (((costInfo && costInfo.cost > 0) || !isPlayable) && (!fileInfo && !isViewable) && !this.state.showRecommended) {
       this.setState({ showRecommended: true });
     }
 
@@ -620,13 +621,13 @@ class FilePage extends React.PureComponent {
 
   confirmPurchaseUri = (uri, costInfo, download) => {
     const { notify, purchaseUri, title } = this.props;
-    const { cost } = costInfo;
-
     if (!costInfo) {
       notify({ message: __('This content cannot be viewed at this time. Please try again in a bit.'), isError: true });
+      this.fetchCostInfo(uri, this.props);
       return;
     }
 
+    const { cost } = costInfo;
     if (costInfo.cost > 0) {
       Alert.alert(
         __('Confirm Purchase'),
@@ -763,6 +764,7 @@ class FilePage extends React.PureComponent {
               },
             ],
             showImageViewer: true,
+            showRecommended: true,
           },
           () => pushDrawerStack(Constants.DRAWER_ROUTE_FILE_VIEW),
         );
@@ -774,6 +776,7 @@ class FilePage extends React.PureComponent {
         this.setState(
           {
             showWebView: true,
+            showRecommended: true,
           },
           () => {
             pushDrawerStack(Constants.DRAWER_ROUTE_FILE_VIEW);
@@ -815,21 +818,40 @@ class FilePage extends React.PureComponent {
     const localFileUri = this.localUriForFileInfo(fileInfo);
 
     if (['text/markdown', 'text/md'].includes(contentType)) {
-      const html =
+      let fontdecl = '';
-        '<!doctype html>' +
+      if (Platform.OS === 'android') {
-        '<html>' +
+        fontdecl = `
-        '  <head>' +
+          @font-face {
-        '    <meta charset="utf-8"/>' +
+            font-family: 'Inter';
-        '    <meta name="viewport" content="width=device-width, user-scalable=no"/>' +
+            src: url('file:///android_asset/fonts/Inter-Regular.otf');
-        '    <style type="text/css">' +
+            font-weight: normal;
-        '    body { margin: 16px }' +
+          }
-        '    img { width: 100%; }' +
+          @font-face {
-        '    </style>' +
+            font-family: 'Inter;
-        '  </head>' +
+            src: url('file:///android_asset/fonts/Inter-Bold.otf');
-        '  <body>' +
+            font-weight: bold;
-        '    <div id="content"></div>' +
+          }
-        '  </body>' +
+          `;
-        '</html>';
+      }
+
+      const html = `
+        <!doctype html>
+        <html>
+          <head>
+            <meta charset="utf-8"/>
+            <meta name="viewport" content="width=device-width, user-scalable=no"/>
+            <style type="text/css">
+              ${fontdecl}
+              body { font-family: 'Inter', sans-serif; margin: 16px }
+              img { width: 100%; }
+            </style>
+          </head>
+          <body>
+            <div id="content"></div>
+          </body>
+        </html>
+        `;
+
       return { html };
     }
 

src/styles/uriBar.js

@@ -31,7 +31,6 @@ const uriBarStyle = StyleSheet.create({
     paddingRight: 12,
     fontFamily: 'Inter-Regular',
     fontSize: 16,
-    height: 44,
     lineHeight: 18,
     flex: 17,
   },