update channel links on file page

.eslintrc.json

@@ -36,6 +36,7 @@
     "object-curly-spacing": 0,
     "one-var": 0,
     "prefer-promise-reject-errors": 0,
+    "react/jsx-indent": 0,
     "react-hooks/exhaustive-deps": "warn",
     "react-hooks/rules-of-hooks": "error",
     "space-before-function-paren": ["error", "never"],

src/ui/component/claimPreview/view.jsx

@@ -64,6 +64,7 @@ function ClaimPreview(props: Props) {
   const abandoned = !isResolvingUri && !claim;
   const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
   const showPublishLink = abandoned && placeholder === 'publish';
+  const minimal = type === 'small' || type === 'tooltip';
 
   let isValid;
   try {
@@ -75,7 +76,7 @@ function ClaimPreview(props: Props) {
 
   const isChannel = isValid ? parseURI(uri).isChannel : false;
   let shouldHide =
-    placeholder !== 'loading' && ((abandoned && !showPublishLink) || (!claimIsMine && obscureNsfw && nsfw));
+    placeholder !== 'loading' && ((abandoned && !showPublishLink) || (!claimIsMine && obscureNsfw && nsfw) || !claim);
 
   // This will be replaced once blocking is done at the wallet server level
   if (claim && !shouldHide && blackListedOutpoints) {
@@ -133,7 +134,7 @@ function ClaimPreview(props: Props) {
       onClick={pending || type === 'inline' ? undefined : onClick}
       onContextMenu={handleContextMenu}
       className={classnames('claim-preview', {
-        'claim-preview--small': type === 'small',
+        'claim-preview--small': minimal,
         'claim-preview--large': type === 'large',
         'claim-preview--inline': type === 'inline',
         'claim-preview--visited': !isChannel && hasVisitedUri,
@@ -146,7 +147,7 @@ function ClaimPreview(props: Props) {
           <div className="claim-preview-title">
             {claim ? <TruncatedText text={title || claim.name} lines={1} /> : <span>{__('Nothing here')}</span>}
           </div>
-          {type !== 'small' && (
+          {!minimal && (
             <div>
               {isChannel && <SubscribeButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />}
               {!isChannel && <FileProperties uri={uri} />}
@@ -160,7 +161,7 @@ function ClaimPreview(props: Props) {
             {!isResolvingUri && (
               <div>
                 {claim ? (
-                  <UriIndicator uri={uri} link />
+                  <UriIndicator uri={uri} link addTooltip={!minimal} />
                 ) : (
                   <Fragment>
                     <div>{__('Publish something and claim this spot!')}</div>

src/ui/component/recommendedContent/view.jsx

@@ -57,7 +57,7 @@ export default class RecommendedContent extends React.PureComponent<Props> {
           loading={isSearching}
           uris={recommendedContent}
           header={__('Related')}
-          empty={<div className="empty">{__('No related content found')}</div>}
+          empty={__('No related content found')}
         />
       </section>
     );

src/ui/component/uriIndicator/view.jsx

@@ -10,6 +10,7 @@ type Props = {
   channelUri: ?string,
   link: ?boolean,
   claim: ?Claim,
+  addTooltip: boolean,
   // Lint thinks we aren't using these, even though we are.
   // Possibly because the resolve function is an arrow function that is passed in props?
   resolveUri: string => void,
@@ -17,6 +18,10 @@ type Props = {
 };
 
 class UriIndicator extends React.PureComponent<Props> {
+  static defaultProps = {
+    addTooltip: true,
+  };
+
   componentDidMount() {
     this.resolve(this.props);
   }
@@ -34,7 +39,7 @@ class UriIndicator extends React.PureComponent<Props> {
   };
 
   render() {
-    const { link, isResolvingUri, claim } = this.props;
+    const { link, isResolvingUri, claim, addTooltip } = this.props;
 
     if (!claim) {
       return <span className="empty">{isResolvingUri ? 'Validating...' : 'Unused'}</span>;
@@ -51,9 +56,12 @@ class UriIndicator extends React.PureComponent<Props> {
     if (channelClaim) {
       const { name, claim_id: claimId } = channelClaim;
       let channelLink;
-      if (claim.is_channel_signature_valid) {
+
+      // Disabling now because it mostly causes issues
+      // Add this back to ensure we only add links to signed channels
+      // if (claim.is_channel_signature_valid) {
       channelLink = link ? buildURI({ channelName: name, claimId }) : false;
-      }
+      // }
 
       const inner = <span className="channel-name">{name}</span>;
 
@@ -61,9 +69,15 @@ class UriIndicator extends React.PureComponent<Props> {
         return inner;
       }
 
+      const Wrapper = addTooltip
+        ? ({ children }) => (
+            <Tooltip label={<ClaimPreview uri={channelLink} type="tooltip" placeholder={false} />}>{children}</Tooltip>
+          )
+        : 'span';
+
       return (
         <Button className="button--uri-indicator" navigate={channelLink}>
-          <Tooltip label={<ClaimPreview uri={channelLink} type="small" />}>{inner}</Tooltip>
+          <Wrapper>{inner}</Wrapper>
         </Button>
       );
     } else {

src/ui/page/file/view.jsx

@@ -226,7 +226,7 @@ class FilePage extends React.Component<Props> {
             <div className="media__subtitle">
               <div className="media__actions media__actions--between">
                 <DateTime uri={uri} show={DateTime.SHOW_DATE} />
-                {'claimIsMine' && (
+                {claimIsMine && (
                   <span>
                     {viewCount} {viewCount !== 1 ? __('Views') : __('View')}
                   </span>
@@ -285,7 +285,13 @@ class FilePage extends React.Component<Props> {
               </div>
             </div>
 
+            <hr />
+
+            {channelUri ? (
               <ClaimPreview uri={channelUri} type="inline" />
+            ) : (
+              <div className="claim-preview--inline claim-preview-title">{__('Anonymous')}</div>
+            )}
 
             <div className="media__info--large">
               <FileDetails uri={uri} />

src/ui/scss/component/_claim-list.scss

@@ -107,6 +107,10 @@
 .claim-preview {
   border-bottom: 1px solid rgba($lbry-teal-5, 0.1);
 
+  &:only-of-type {
+    border: none;
+  }
+
   [data-mode='dark'] & {
     color: $lbry-white;
     border-color: var(--dm-color-04);
@@ -179,7 +183,6 @@
   padding: 0;
   padding-top: var(--spacing-large);
   border-bottom: none;
-  border-top: 1px solid $lbry-gray-1;
 
   .channel-thumbnail {
     width: var(--channel-thumbnail-width--small);

src/ui/scss/component/_form-field.scss

@@ -60,7 +60,6 @@ fieldset-section {
   label {
     width: auto;
     text-transform: none;
-    font-size: var(--font-multiplier-medium);
   }
 }
 
@@ -83,6 +82,7 @@ radio-element {
     color: lighten($lbry-black, 20%);
     margin-bottom: 0;
     margin-left: var(--spacing-miniscule);
+    font-size: var(--font-body);
   }
 }
 

src/ui/scss/component/_header.scss

@@ -76,7 +76,6 @@
     }
   }
 
-  // TODO: dark
   [data-mode='dark'] & {
     &:hover {
       color: $lbry-teal-3;

src/ui/scss/component/_media.scss

@@ -70,6 +70,10 @@
 
 .media__actions--between {
   justify-content: space-between;
+
+  &:last-of-type:not(:only-of-type) {
+    margin-bottom: var(--spacing-large);
+  }
 }
 
 .media__actions--nowrap {
@@ -84,7 +88,6 @@
 
 .media__action-group--large {
   display: flex;
-  margin-bottom: var(--spacing-medium);
   font-size: var(--font-multiplier-medium);
 
   > * {

src/ui/scss/component/_navigation.scss

@@ -39,6 +39,10 @@
   color: lighten($lbry-black, 20%);
   margin-top: var(--spacing-small);
 
+  .icon {
+    stroke: $lbry-gray-5;
+  }
+
   &:hover {
     color: $lbry-teal-4;
     .icon {
@@ -57,7 +61,7 @@
     color: var(--dm-color-01);
 
     svg {
-      color: var(--dm-color-01);
+      stroke: var(--dm-color-01);
     }
 
     &:hover,
@@ -65,7 +69,7 @@
       color: $lbry-teal-4;
 
       .icon {
-        color: $lbry-teal-4;
+        stroke: $lbry-teal-4;
       }
     }
   }