From b7adc597e232f95dea200a6f49bf5d17c1af102c Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Thu, 20 Jun 2019 19:00:52 -0600
Subject: [PATCH] fix styles

---
 src/ui/component/claimLink/view.jsx          | 27 ++++++++++++++----
 src/ui/component/externalLink/view.jsx       |  2 +-
 src/ui/component/previewLink/view.jsx        | 29 ++++++++++----------
 src/ui/component/uriIndicator/view.jsx       |  8 ++++--
 src/ui/scss/component/_markdown-preview.scss | 12 +++++---
 5 files changed, 51 insertions(+), 27 deletions(-)

diff --git a/src/ui/component/claimLink/view.jsx b/src/ui/component/claimLink/view.jsx
index f69361cc2..889bf7add 100644
--- a/src/ui/component/claimLink/view.jsx
+++ b/src/ui/component/claimLink/view.jsx
@@ -7,9 +7,11 @@ import { parseURI } from 'lbry-redux';
 
 type Props = {
   uri: string,
+  link?: boolean,
   title: ?string,
   claim: StreamClaim,
   children: React.Node,
+  className: ?string,
   thumbnail: ?string,
   autoEmbed: ?boolean,
   description: ?string,
@@ -25,6 +27,7 @@ type Props = {
 class ClaimLink extends React.Component<Props> {
   static defaultProps = {
     href: null,
+    link: false,
     title: null,
     thumbnail: null,
     autoEmbed: false,
@@ -64,7 +67,19 @@ class ClaimLink extends React.Component<Props> {
   }
 
   render() {
-    const { uri, claim, title, description, thumbnail, currentTheme, autoEmbed, children, isResolvingUri } = this.props;
+    const {
+      uri,
+      link,
+      claim,
+      title,
+      className,
+      description,
+      thumbnail,
+      currentTheme,
+      autoEmbed,
+      children,
+      isResolvingUri,
+    } = this.props;
     const isUnresolved = (!isResolvingUri && !claim) || !claim;
     const isBlacklisted = this.isClaimBlackListed();
 
@@ -77,13 +92,13 @@ class ClaimLink extends React.Component<Props> {
     const isChannelClaim = isChannel && !path;
     const showPreview = autoEmbed === true && !isUnresolved;
 
-    const link = (
+    const innerContent = (
       <Button
         label={children}
         title={!isChannelClaim ? title || claimName : undefined}
-        button={!isChannel ? 'link' : undefined}
+        button={link ? 'link' : undefined}
+        className={className}
         navigate={uri}
-        className="button--uri-indicator"
       />
     );
 
@@ -98,13 +113,13 @@ class ClaimLink extends React.Component<Props> {
         thumbnail={thumbnail}
         description={description}
       >
-        <span>{link}</span>
+        <span>{innerContent}</span>
       </ChannelTooltip>
     );
 
     return (
       <React.Fragment>
-        {isChannelClaim ? wrappedLink : link}
+        {isChannelClaim ? wrappedLink : innerContent}
         {showPreview && <PreviewLink uri={uri} />}
       </React.Fragment>
     );
diff --git a/src/ui/component/externalLink/view.jsx b/src/ui/component/externalLink/view.jsx
index 23d34f90d..167ddeaca 100644
--- a/src/ui/component/externalLink/view.jsx
+++ b/src/ui/component/externalLink/view.jsx
@@ -44,7 +44,7 @@ class ExternalLink extends React.PureComponent<Props> {
     // Return local link if protocol is lbry uri
     if (protocol && protocol[0] === 'lbry:' && isURIValid(href)) {
       element = (
-        <ClaimLink uri={href} autoEmbed={embed}>
+        <ClaimLink uri={href} autoEmbed={embed} link>
           {children}
         </ClaimLink>
       );
diff --git a/src/ui/component/previewLink/view.jsx b/src/ui/component/previewLink/view.jsx
index 4a5351e28..f05b4a654 100644
--- a/src/ui/component/previewLink/view.jsx
+++ b/src/ui/component/previewLink/view.jsx
@@ -1,6 +1,5 @@
 // @flow
 import * as React from 'react';
-import DateTime from 'component/dateTime';
 import UriIndicator from 'component/uriIndicator';
 import TruncatedText from 'component/common/truncated-text';
 import MarkdownPreview from 'component/common/markdown-preview';
@@ -31,21 +30,23 @@ class PreviewLink extends React.PureComponent<Props> {
 
     return (
       <span className={'preview-link'} role="button" onClick={this.handleClick}>
-        <span className={'media-tile media-tile--small card--link'}>
-          <span style={thumbnailStyle} className={'preview-link--thumbnail media__thumb'} />
-          <span className={'preview-link--text media__info'}>
-            <span className={'preview-link--title media__title'}>
-              <TruncatedText text={title} lines={1} />
-            </span>
-            <span className={'preview-link--description media__subtext'}>
-              <span className={'truncated-text'}>
-                {__('Published to')} <UriIndicator uri={uri} link /> <DateTime timeAgo uri={uri} />
+        <span className={'file-list__item'}>
+          <span style={thumbnailStyle} className={'preview-link__thumbnail media__thumb'} />
+          <span className={'file-list__item-metadata'}>
+            <span className={'file-list__item-info'}>
+              <span className={'file-list__item-title'}>
+                <TruncatedText text={title} lines={1} />
               </span>
             </span>
-            <span className={'preview-link--description media__subtext'}>
-              <TruncatedText lines={2} showTooltip={false}>
-                <MarkdownPreview content={description} promptLinks strip />
-              </TruncatedText>
+            <span className={'preview-link__description media__subtext'}>
+              <UriIndicator uri={uri} link />
+            </span>
+            <span className={'file-list__item-properties'}>
+              <span className={'preview-link__description media__subtext'}>
+                <TruncatedText lines={2} showTooltip={false}>
+                  <MarkdownPreview content={description} promptLinks strip />
+                </TruncatedText>
+              </span>
             </span>
           </span>
         </span>
diff --git a/src/ui/component/uriIndicator/view.jsx b/src/ui/component/uriIndicator/view.jsx
index bb38fc728..3bf73da3a 100644
--- a/src/ui/component/uriIndicator/view.jsx
+++ b/src/ui/component/uriIndicator/view.jsx
@@ -58,8 +58,12 @@ class UriIndicator extends React.PureComponent<Props> {
       if (!channelLink) {
         return inner;
       }
-      
-      return <ClaimLink uri={channelLink}>{inner}</ClaimLink>;
+
+      return (
+        <ClaimLink uri={channelLink} className={'button--uri-indicator'}>
+          {inner}
+        </ClaimLink>
+      );
     } else {
       return null;
     }
diff --git a/src/ui/scss/component/_markdown-preview.scss b/src/ui/scss/component/_markdown-preview.scss
index 5e8012b20..e898e5ae7 100644
--- a/src/ui/scss/component/_markdown-preview.scss
+++ b/src/ui/scss/component/_markdown-preview.scss
@@ -122,17 +122,21 @@
   }
 
   .preview-link {
-    margin: var(--spacing-vertical-medium) 0;
-    padding: 1.2rem 0.8rem;
+    padding: 0;
+    margin: 1rem 0;
     background-color: rgba($lbry-teal-5, 0.1);
     border-left: 0.5rem solid $lbry-teal-5;
     display: block;
     align-items: center;
     width: 40rem;
+    word-break: break-all;
   }
 
-  .preview-link--description {
+  .preview-link__thumbnail {
+    width: 12rem;
+  }
+
+  .preview-link__description {
     display: block;
-    margin: var(--spacing-vertical-medium) 0;
   }
 }