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 { - Direct Link +
Direct Link
+
+ +
+
- Download +
Download
+
+ +
- Report +
Report
+
+ +
- -

- Hosted via the LBRY blockchain -

-
+
+ +

+ Hosted via the LBRY blockchain +

+
+
+ + } + content={ + Place Claim Address Here + } + /> +
+
}