Icon changes + claim address placeholder + image size change.

client/scss/asset-display/_asset-display.scss

@@ -26,20 +26,19 @@
 
 }
 
-
+.asset-title {
-  .asset-title {
+  margin-top: 40px;
-    margin-top: 40px;
+  font-weight: normal;
-    font-weight: normal;
+  font-size: 26px;
-    font-size: 26px;
+  color: #2E2F31;
-    color: #2E2F31;
+  letter-spacing: 0;
-    letter-spacing: 0;
+  text-align: center;
-    text-align: center;
+  line-height: 32px;
-    line-height: 32px;
+}
-  }
 
 .asset-image, .asset-video {
-  margin : 60px 0;
+  margin: 60px auto;
-  max-width: 100%;
+  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;
 }

client/scss/body/_body.scss

@@ -7,4 +7,4 @@ body {
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
-}
+}

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;
+      width: 16px;
-      height: 12px;
+      height: 16px;
     }
   }
 }

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;
+    }
+  }
+}
+

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 {
               <Row>
                 <SpaceBetween>
                   <a
-                    className='link--brand'
+                    className={'link--brand link--icon direct'}
                     href={`${host}/${claimId}/${name}.${fileExt}`}
                   >
-                    Direct Link
+                    <div className='link-text'>Direct Link</div>
+                    <div className='icon-wrap'>
+                      <Icon.ArrowRightCircle />
+                    </div>
+
                   </a>
                   <a
-                    className={'link--brand'}
+                    className={'link--brand link--icon download'}
                     href={`${host}/${claimId}/${name}.${fileExt}`}
                     download={name}
                   >
-                    Download
+                    <div className='link-text'>Download</div>
+                    <div className='icon-wrap'>
+                      <Icon.ArrowDownCircle />
+                    </div>
                   </a>
                   <a
-                    className={'link--brand'}
+                    className={'link--brand link--icon report'}
                     target='_blank'
                     href='https://lbry.io/dmca'
                   >
-                    Report
+                    <div className='link-text'>Report</div>
+                    <div className='icon-wrap'>
+                      <Icon.AlertCircle />
+                    </div>
                   </a>
                 </SpaceBetween>
               </Row>
 
-              <Row>
+              <div className='asset-footer'>
-                <p>
+                <Row>
-                  Hosted via the <a className={'link--brand'} href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain
+                  <p>
-                </p>
+                    Hosted via the <a className={'link--brand'} href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain
-              </Row>
+                  </p>
+                </Row>
+                <div className='claim-address'>
+                  <RowLabeledAlt
+                    label={
+                      <Label value={'Claim Address'} />
+                    }
+                    content={
+                      <a className={'link--brand'} href={'https://lbry.io/get'} target={'_blank'}>Place Claim Address Here</a>
+                    }
+                  />
+                </div>
+              </div>
 
             </div>
           }