From 58b52a4e9ccbf1ef7050ec8549dd7e82f2b435b0 Mon Sep 17 00:00:00 2001
From: Minesh Mitha <minesh@mineshs-MBP.local>
Date: Sun, 21 Oct 2018 22:24:34 +0100
Subject: [PATCH] Icon changes + claim address placeholder + image size change.

---
 client/scss/asset-display/_asset-display.scss | 28 +++++++-----
 client/scss/body/_body.scss                   |  2 +-
 client/scss/click-to-copy/_click-to-copy.scss |  8 ++--
 client/scss/link/_link.scss                   | 31 +++++++++++++
 client/src/containers/AssetInfo/view.jsx      | 45 ++++++++++++++-----
 5 files changed, 86 insertions(+), 28 deletions(-)

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 {
               <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>
-                <p>
-                  Hosted via the <a className={'link--brand'} href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain
-                </p>
-              </Row>
+              <div className='asset-footer'>
+                <Row>
+                  <p>
+                    Hosted via the <a className={'link--brand'} href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain
+                  </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>
           }