Fixes #3200 Claim previews right-clickable

ui/component/claimPreview/view.jsx

@@ -1,9 +1,9 @@
 // @flow
 import type { Node } from 'react';
 import React, { useEffect, forwardRef } from 'react';
+import { NavLink, withRouter } from 'react-router-dom';
 import classnames from 'classnames';
 import { parseURI, convertToShareLink } from 'lbry-redux';
-import { withRouter } from 'react-router-dom';
 import { openCopyLinkMenu } from 'util/context-menu';
 import { formatLbryUrlForWeb } from 'util/url';
 import { isEmpty } from 'util/object';
@@ -102,6 +102,12 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
 
   const isChannel = isValid ? parseURI(uri).isChannel : false;
   const signingChannel = claim && claim.signing_channel;
+  const canonicalUrl = claim && claim.canonical_url;
+  const navigateUrl = canonicalUrl ? formatLbryUrlForWeb(canonicalUrl) : undefined;
+  const navLinkProps = {
+    to: navigateUrl,
+    onClick: e => e.stopPropagation(),
+  };
 
   // do not block abandoned and nsfw claims if showUserBlocked is passed
   let shouldHide =
@@ -162,7 +168,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     }
 
     if (claim && !pending) {
-      history.push(formatLbryUrlForWeb(claim.canonical_url ? claim.canonical_url : uri));
+      history.push(navigateUrl || uri);
     }
   }
 
@@ -230,13 +236,17 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
             <ChannelThumbnail uri={uri} obscure={channelIsBlocked} />
           </UriIndicator>
         ) : (
-          <FileThumbnail thumbnail={thumbnailUrl} />
+          <NavLink {...navLinkProps}>
+            <FileThumbnail thumbnail={thumbnailUrl} />
+          </NavLink>
         )}
 
         <div className="claim-preview__text">
           <div className="claim-preview-metadata">
             <div className="claim-preview-info">
-              <ClaimPreviewTitle uri={uri} />
+              <NavLink {...navLinkProps}>
+                <ClaimPreviewTitle uri={uri} />
+              </NavLink>
               {!isChannel && <FileProperties uri={uri} />}
             </div>
 

ui/scss/component/_claim-list.scss

@@ -106,6 +106,10 @@
       height: 5rem;
     }
   }
+
+  a {
+    color: inherit;
+  }
 }
 
 .claim-preview--large {