diff --git a/client/scss/asset-display/_asset-display.scss b/client/scss/asset-display/_asset-display.scss
index e9823933..e8eeced3 100644
--- a/client/scss/asset-display/_asset-display.scss
+++ b/client/scss/asset-display/_asset-display.scss
@@ -26,20 +26,19 @@
}
-
- .asset-title {
- margin-top: 40px;
- font-weight: normal;
- font-size: 26px;
- color: #2E2F31;
- letter-spacing: 0;
- text-align: center;
- line-height: 32px;
- }
+.asset-title {
+ margin-top: 40px;
+ font-weight: normal;
+ font-size: 26px;
+ color: #2E2F31;
+ letter-spacing: 0;
+ text-align: center;
+ line-height: 32px;
+}
.asset-image, .asset-video {
- margin : 60px 0;
- max-width: 100%;
+ margin: 60px auto;
+ max-width: 60vh;
max-height: 100%;
object-fit: contain;
object-position: center;
@@ -92,4 +91,9 @@
width: 341px;
}
+}
+
+.asset-footer {
+ padding-top: 30px;
+ border-top: 1px solid $grey-alt;
}
\ No newline at end of file
diff --git a/client/scss/body/_body.scss b/client/scss/body/_body.scss
index 90f22258..6072cbd4 100644
--- a/client/scss/body/_body.scss
+++ b/client/scss/body/_body.scss
@@ -7,4 +7,4 @@ body {
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-}
+}
\ No newline at end of file
diff --git a/client/scss/click-to-copy/_click-to-copy.scss b/client/scss/click-to-copy/_click-to-copy.scss
index 16b6996f..c5d1fd3d 100644
--- a/client/scss/click-to-copy/_click-to-copy.scss
+++ b/client/scss/click-to-copy/_click-to-copy.scss
@@ -21,17 +21,17 @@
max-width: 236px;
letter-spacing: 0;
font-family: monospace;
- border-right: 1px solid #9095a54d;
+ border-right: 1px solid $grey-alt;
}
.icon-wrap {
width: 30px;
height: 30px;
- line-height: 30px;
+ line-height: 34px;
text-align: center;
svg {
stroke: $brand-color;
- width: 12px;
- height: 12px;
+ width: 16px;
+ height: 16px;
}
}
}
diff --git a/client/scss/link/_link.scss b/client/scss/link/_link.scss
index ee5cc8c7..4fbc92ef 100644
--- a/client/scss/link/_link.scss
+++ b/client/scss/link/_link.scss
@@ -29,3 +29,34 @@ a, a:visited {
color: $interactive-color;
border-bottom: 2px solid $interactive-color;
}
+
+
+.link--icon, .link--icon:visited {
+ display: flex;
+ .link-text {
+ padding-bottom: 2px;
+ border-bottom: 1px solid transparent;
+ transition: all 0.2s ease;
+ }
+ .icon-wrap {
+ margin-left: 5px;
+ padding-top: 3px;
+ align-items: center;
+ svg {
+ width: 16px;
+ height: 16px;
+ stroke-width: 1.2px;
+ stroke: $grey-alt;
+ transition: all 0.2s ease;
+ }
+ }
+ &:hover {
+ .link-text {
+ border-bottom: 1px solid $brand-color;
+ }
+ svg {
+ stroke: $brand-color;
+ }
+ }
+}
+
diff --git a/client/src/containers/AssetInfo/view.jsx b/client/src/containers/AssetInfo/view.jsx
index b150b488..30a366bc 100644
--- a/client/src/containers/AssetInfo/view.jsx
+++ b/client/src/containers/AssetInfo/view.jsx
@@ -7,6 +7,7 @@ import SpaceBetween from '@components/SpaceBetween';
import AssetShareButtons from '@components/AssetShareButtons';
import HorizontalSplit from '@components/HorizontalSplit';
import ClickToCopy from '@components/ClickToCopy';
+import * as Icon from 'react-feather';
class AssetInfo extends React.Component {
render () {
@@ -93,33 +94,55 @@ class AssetInfo extends React.Component {
- Hosted via the LBRY blockchain
-
+ Hosted via the LBRY blockchain +
+