New Row put to use + style changes to match design

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

@@ -5,6 +5,18 @@
   justify-content: center;
 }
 
+.asset-title-wrap {
+  margin-top: 90px;
+  .asset-title {
+    font-weight: normal;
+    font-size: 26px;
+    color: #2E2F31;
+    letter-spacing: 0;
+    text-align: center;
+    line-height: 32px;
+  }
+}
+
 .asset-image, .asset-video {
   margin : 0;
   max-width: 100%;

client/scss/click-to-copy/_click-to-copy.scss

@@ -1,9 +1,14 @@
 .click-to-copy {
   cursor: pointer;
-  border: 1px solid black;
+  border: none;
   padding: 0.5em;
   margin: 0;
   color: black;
   background-color: white;
   width: calc(100% - 1em - 2px);
+  font-size: 14px;
+  color: #2E2F31;
+  letter-spacing: -0.6px;
+  line-height: 20px;
+
 }

client/scss/row/_row.scss

@@ -27,6 +27,8 @@
   .row-labeled-label {
     align-self: flex-start;
     width: 100%;
+    color: $grey;
+    font-size: 12px;
   }
 
   .row-labeled-content {

client/scss/variables/_variables.scss

@@ -6,6 +6,7 @@ $interactive-color: blue;
 $success-color: green;
 $failure-color: red;
 $brand-color: #ff725d;
+$grey: #a9adba;
 
 $primary-padding: 3em;
 $secondary-padding: 2em;

client/src/containers/AssetDisplay/view.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import AssetTitle from '@containers/AssetTitle';
 import ProgressBar from '@components/ProgressBar';
 import { LOCAL_CHECK, UNAVAILABLE, ERROR, AVAILABLE } from '../../constants/asset_display_states';
 
@@ -63,7 +64,9 @@ class AssetDisplay extends React.Component {
           }
         })()
         }
+        <AssetTitle />
       </div>
+
     );
   }
 };

client/src/containers/AssetInfo/view.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import Label from '@components/Label';
-import RowLabeled from '@components/RowLabeled';
+import RowLabeledAlt from '@components/RowLabeledAlt';
 import Row from '@components/Row';
 import SpaceBetween from '@components/SpaceBetween';
 import AssetShareButtons from '@components/AssetShareButtons';
@@ -25,7 +25,7 @@ class AssetInfo extends React.Component {
             <div className='asset-information'>
               {channelName && (
                 <Row>
-                  <RowLabeled
+                  <RowLabeledAlt
                     label={
                       <Label value={'Channel'} />
                     }
@@ -39,7 +39,7 @@ class AssetInfo extends React.Component {
               )}
 
               <Row>
-                <RowLabeled
+                <RowLabeledAlt
                   label={
                     <Label value={'Share'} />
                   }
@@ -54,7 +54,7 @@ class AssetInfo extends React.Component {
               </Row>
 
               <Row>
-                <RowLabeled
+                <RowLabeledAlt
                   label={
                     <Label value={'Link'} />
                   }
@@ -68,7 +68,7 @@ class AssetInfo extends React.Component {
               </Row>
 
               <Row>
-                <RowLabeled
+                <RowLabeledAlt
                   label={
                     <Label value={'Embed'} />
                   }

client/src/containers/AssetTitle/view.jsx

@@ -1,11 +1,10 @@
 import React from 'react';
-import Row from '@components/Row';
 
 const AssetTitle = ({ title }) => {
   return (
-    <Row>
-      <h3>{title}</h3>
-    </Row>
+    <div className='asset-title-wrap'>
+      <h3 className='asset-title'>{title}</h3>
+    </div>
   );
 };
 

client/src/pages/ShowAssetDetails/view.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PageLayout from '@components/PageLayout';
 
 import VerticalSplit from '@components/VerticalSplit';
-import AssetTitle from '@containers/AssetTitle';
+// import AssetTitle from '@containers/AssetTitle';
 import AssetDisplay from '@containers/AssetDisplay';
 import AssetInfo from '@containers/AssetInfo';
 import ErrorPage from '@pages/ErrorPage';
@@ -17,7 +17,7 @@ class ShowAssetDetails extends React.Component {
           pageTitle={`${name} - details`}
           asset={asset}
         >
-          <AssetTitle />
+          
           <VerticalSplit
             top={<AssetDisplay />}
             bottom={<AssetInfo />}