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>