From a188adc311cde2b52d17ae7a1383e52517bd57ff Mon Sep 17 00:00:00 2001
From: Minesh Mitha <minesh@mineshs-MBP.local>
Date: Sun, 21 Oct 2018 22:38:27 +0100
Subject: [PATCH] Link underlines for @channel + claim address + lbry url

---
 client/scss/asset-display/_asset-display.scss |  4 ++--
 client/scss/link/_link.scss                   | 11 +++++++++++
 client/src/containers/AssetInfo/view.jsx      |  6 +++---
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/client/scss/asset-display/_asset-display.scss b/client/scss/asset-display/_asset-display.scss
index e8eeced3..a4c6f1f9 100644
--- a/client/scss/asset-display/_asset-display.scss
+++ b/client/scss/asset-display/_asset-display.scss
@@ -73,7 +73,7 @@
         padding-right: 40px;
       }
       &:last-child {
-        padding-left: 40px;
+        padding-left: 60px;
         border-left: 1px solid #9095a54d;
       }
     }
@@ -88,7 +88,7 @@
     width: 360px;
   }
   .asset-information {
-    width: 341px;
+    width: 320px;
   }
 
 }
diff --git a/client/scss/link/_link.scss b/client/scss/link/_link.scss
index fa81a1da..59b189be 100644
--- a/client/scss/link/_link.scss
+++ b/client/scss/link/_link.scss
@@ -59,3 +59,14 @@ a, a:visited {
   }
 }
 
+
+.link--hover {
+  display: inline-block;
+  padding-bottom: 2px;
+  border-bottom: 1px solid transparent;
+  transition: all 0.2s ease;
+  &:hover {
+    border-bottom: 1px solid $brand-color;
+  }
+}
+
diff --git a/client/src/containers/AssetInfo/view.jsx b/client/src/containers/AssetInfo/view.jsx
index 30a366bc..71bfea1f 100644
--- a/client/src/containers/AssetInfo/view.jsx
+++ b/client/src/containers/AssetInfo/view.jsx
@@ -32,7 +32,7 @@ class AssetInfo extends React.Component {
                     }
                     content={
                       <span className='text'>
-                        <Link className='link--brand' to={`/${channelName}:${certificateId}`}>{channelName}</Link>
+                        <Link className='link--brand link--hover' to={`/${channelName}:${certificateId}`}>{channelName}</Link>
                       </span>
                     }
                   />
@@ -129,7 +129,7 @@ class AssetInfo extends React.Component {
               <div className='asset-footer'>
                 <Row>
                   <p>
-                    Hosted via the <a className={'link--brand'} href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain
+                    Hosted via the <a className={'link--brand link--hover'} href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain
                   </p>
                 </Row>
                 <div className='claim-address'>
@@ -138,7 +138,7 @@ class AssetInfo extends React.Component {
                       <Label value={'Claim Address'} />
                     }
                     content={
-                      <a className={'link--brand'} href={'https://lbry.io/get'} target={'_blank'}>Place Claim Address Here</a>
+                      <a className={'link--brand link--hover'} href={'https://lbry.io/get'} target={'_blank'}>Place Claim Address Here</a>
                     }
                   />
                 </div>