From e0b15691b9a11b3d35c4baa2ee5a93bc882a6aeb Mon Sep 17 00:00:00 2001
From: Minesh Mitha <minesh@Mineshs-MacBook-Pro.local>
Date: Sat, 6 Oct 2018 18:57:11 +0100
Subject: [PATCH] Forgot to stage the rest of my code, thanks VS Code.

---
 client/scss/link/_link.scss              |   4 +
 client/scss/row/_row.scss                |  17 ++
 client/src/containers/AssetInfo/view.jsx | 202 ++++++++++++-----------
 3 files changed, 124 insertions(+), 99 deletions(-)

diff --git a/client/scss/link/_link.scss b/client/scss/link/_link.scss
index 4553605e..ee5cc8c7 100644
--- a/client/scss/link/_link.scss
+++ b/client/scss/link/_link.scss
@@ -6,6 +6,10 @@ a, a:visited {
   color: $interactive-color;
 }
 
+.link--brand, .link--brand:visited {
+  color: $brand-color;
+}
+
 .link--secondary, .link--secondary:visited {
   margin: 0px;
   padding: 0.3em;
diff --git a/client/scss/row/_row.scss b/client/scss/row/_row.scss
index 3b731ac0..fb5f3534 100644
--- a/client/scss/row/_row.scss
+++ b/client/scss/row/_row.scss
@@ -18,6 +18,23 @@
   width: 70%;
 }
 
+.row-labeled-alt {
+  display: column;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+
+  .row-labeled-label {
+    align-self: flex-start;
+    width: 100%;
+  }
+
+  .row-labeled-content {
+    align-self: center;
+    width: 100%;
+  }
+}
+
 
 @media (max-width: $break-point-medium ) {
 
diff --git a/client/src/containers/AssetInfo/view.jsx b/client/src/containers/AssetInfo/view.jsx
index 71a26885..63d8d669 100644
--- a/client/src/containers/AssetInfo/view.jsx
+++ b/client/src/containers/AssetInfo/view.jsx
@@ -12,7 +12,7 @@ class AssetInfo extends React.Component {
   render () {
     const { asset: { shortId, claimData : { channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host } } } = this.props;
     return (
-      <div className='asset-information'>
+      <div className='asset-information-wrap'>
         <HorizontalSplit
           leftSide={
             <div className='asset-description'>
@@ -21,106 +21,110 @@ class AssetInfo extends React.Component {
               )}
             </div>
           }
-          rightSide={''}
+          rightSide={
+            <div className='asset-information'>
+              {channelName && (
+                <Row>
+                  <RowLabeled
+                    label={
+                      <Label value={'Channel'} />
+                    }
+                    content={
+                      <span className='text'>
+                        <Link className='link--brand' to={`/${channelName}:${certificateId}`}>{channelName}</Link>
+                      </span>
+                    }
+                  />
+                </Row>
+              )}
+
+              <Row>
+                <RowLabeled
+                  label={
+                    <Label value={'Share'} />
+                  }
+                  content={
+                    <AssetShareButtons
+                      host={host}
+                      name={name}
+                      shortId={shortId}
+                    />
+                  }
+                />
+              </Row>
+
+              <Row>
+                <RowLabeled
+                  label={
+                    <Label value={'Link'} />
+                  }
+                  content={
+                    <ClickToCopy
+                      id={'short-link'}
+                      value={`${host}/${shortId}/${name}`}
+                    />
+                  }
+                />
+              </Row>
+
+              <Row>
+                <RowLabeled
+                  label={
+                    <Label value={'Embed'} />
+                  }
+                  content={
+                    <div>
+                      {(contentType === 'video/mp4') ? (
+                        <ClickToCopy
+                          id={'embed-text-video'}
+                          value={`<video width="100%" controls poster="${thumbnail}" src="${host}/${claimId}/${name}.${fileExt}"/></video>`}
+                        />
+                      ) : (
+                        <ClickToCopy
+                          id={'embed-text-image'}
+                          value={`<img src="${host}/${claimId}/${name}.${fileExt}"/>`}
+                        />
+                      )}
+                    </div>
+                  }
+                />
+              </Row>
+
+              <Row>
+                <SpaceBetween>
+                  <a
+                    className='link--brand'
+                    href={`${host}/${claimId}/${name}.${fileExt}`}
+                  >
+                    Direct Link
+                  </a>
+                  <a
+                    className={'link--brand'}
+                    href={`${host}/${claimId}/${name}.${fileExt}`}
+                    download={name}
+                  >
+                    Download
+                  </a>
+                  <a
+                    className={'link--brand'}
+                    target='_blank'
+                    href='https://lbry.io/dmca'
+                  >
+                    Report
+                  </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>
+          }
         />
 
-        {channelName && (
-          <Row>
-            <RowLabeled
-              label={
-                <Label value={'Channel:'} />
-              }
-              content={
-                <span className='text'>
-                  <Link to={`/${channelName}:${certificateId}`}>{channelName}</Link>
-                </span>
-              }
-            />
-          </Row>
-        )}
-
-        <Row>
-          <RowLabeled
-            label={
-              <Label value={'Share:'} />
-            }
-            content={
-              <AssetShareButtons
-                host={host}
-                name={name}
-                shortId={shortId}
-              />
-            }
-          />
-        </Row>
-
-        <Row>
-          <RowLabeled
-            label={
-              <Label value={'Link:'} />
-            }
-            content={
-              <ClickToCopy
-                id={'short-link'}
-                value={`${host}/${shortId}/${name}`}
-              />
-            }
-          />
-        </Row>
-
-        <Row>
-          <RowLabeled
-            label={
-              <Label value={'Embed:'} />
-            }
-            content={
-              <div>
-                {(contentType === 'video/mp4') ? (
-                  <ClickToCopy
-                    id={'embed-text-video'}
-                    value={`<video width="100%" controls poster="${thumbnail}" src="${host}/${claimId}/${name}.${fileExt}"/></video>`}
-                  />
-                ) : (
-                  <ClickToCopy
-                    id={'embed-text-image'}
-                    value={`<img src="${host}/${claimId}/${name}.${fileExt}"/>`}
-                  />
-                )}
-              </div>
-            }
-          />
-        </Row>
-
-        <Row>
-          <SpaceBetween>
-            <a
-              className='link--primary'
-              href={`${host}/${claimId}/${name}.${fileExt}`}
-            >
-              Direct Link
-            </a>
-            <a
-              className={'link--primary'}
-              href={`${host}/${claimId}/${name}.${fileExt}`}
-              download={name}
-            >
-              Download
-            </a>
-            <a
-              className={'link--primary'}
-              target='_blank'
-              href='https://lbry.io/dmca'
-            >
-              Report
-            </a>
-          </SpaceBetween>
-        </Row>
-
-        <Row>
-          <p>
-            Hosted via the <a className={'link--primary'} href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain
-          </p>
-        </Row>
 
       </div>
     );