public/assets/css/general.css

@@ -427,6 +427,20 @@ button {
 	background-color: white;
 }
 
+.button--secondary {
+	border: 0px;
+	border-bottom: 1px solid black;
+	padding: 0.5em;
+	margin: 0.5em 0.3em 0.5em 0.3em;
+	color: black;
+	background-color: white;
+}
+
+.button--secondary:hover {
+	border-bottom: 1px solid #9b9b9b;
+	color: #4156C5;
+}
+
 .button--large{
 	margin: 0px;
 	width: calc(100% - 2px);

react/components/AssetInfo/index.js

@@ -28,29 +28,30 @@ class AssetInfo extends React.Component {
     }
   }
   render () {
+    const { channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host, shortId } = this.props;
     return (
       <div>
-        {this.props.channelName &&
+        {channelName &&
         <div className="row row--padded row--wide row--no-top">
           <div className="column column--2 column--med-10">
             <span className="text">Channel:</span>
           </div>
           <div className="column column--8 column--med-10">
-            <span className="text"><a href={`/${this.props.channelName}:${this.props.certificateId}`}>{this.props.channelName}</a></span>
+            <span className="text"><a href={`/${channelName}:${certificateId}`}>{channelName}</a></span>
           </div>
         </div>
         }
 
-        {this.props.description &&
+        {description &&
         <div className="row row--padded row--wide row--no-top">
-          <span className="text">{this.props.description}</span>
+          <span className="text">{description}</span>
         </div>
         }
 
         <div className="row row--padded row--wide row--no-top">
           <div id="show-short-link">
             <div className="column column--2 column--med-10">
-              <Link className="link--primary" to={`/${this.props.shortId}/${this.props.name}.${this.props.fileExt}`}><span
+              <Link className="link--primary" to={`/${shortId}/${name}.${fileExt}`}><span
                 className="text">Link:</span></Link>
             </div>
             <div className="column column--8 column--med-10">
@@ -59,7 +60,7 @@ class AssetInfo extends React.Component {
                   <div className="input-error" id="input-error-copy-short-link" hidden="true">error here</div>
                   <input type="text" id="short-link" className="input-disabled input-text--full-width" readOnly
                          spellCheck="false"
-                         value={`${this.props.host}/${this.props.shortId}/${this.props.name}.${this.props.fileExt}`}
+                         value={`${host}/${shortId}/${name}.${fileExt}`}
                          onClick={this.select}/>
                 </div>
                 <div className="column column--1"> </div>
@@ -79,14 +80,14 @@ class AssetInfo extends React.Component {
               <div className="row row--short row--wide">
                 <div className="column column--7">
                   <div className="input-error" id="input-error-copy-embed-text" hidden="true">error here</div>
-                  {(this.props.contentType === 'video/mp4') ? (
+                  {(contentType === 'video/mp4') ? (
                     <input type="text" id="embed-text" className="input-disabled input-text--full-width" readOnly
                            onClick={this.select} spellCheck="false"
-                           value={`<video width="100%" controls poster="${this.props.thumbnail}" src="${this.props.host}/${this.props.claimId}/${this.props.name}.${this.props.fileExt}"/></video>`}/>
+                           value={`<video width="100%" controls poster="${thumbnail}" src="${host}/${claimId}/${name}.${fileExt}"/></video>`}/>
                   ) : (
                     <input type="text" id="embed-text" className="input-disabled input-text--full-width" readOnly
                            onClick={this.select} spellCheck="false"
-                           value={`<img src="${this.props.host}/${this.props.claimId}/${this.props.name}.${this.props.fileExt}"/>`}
+                           value={`<img src="${host}/${claimId}/${name}.${fileExt}"/>`}
                     />
                   )}
                 </div>
@@ -110,13 +111,13 @@ class AssetInfo extends React.Component {
               <div
                 className="row row--short row--wide flex-container--row flex-container--space-between-bottom flex-container--wrap">
                 <a className="link--primary" target="_blank"
-                   href={`https://twitter.com/intent/tweet?text=${this.props.host}/${this.props.shortId}/${this.props.name}`}>twitter</a>
+                   href={`https://twitter.com/intent/tweet?text=${host}/${shortId}/${name}`}>twitter</a>
                 <a className="link--primary" target="_blank"
-                   href={`https://www.facebook.com/sharer/sharer.php?u=${this.props.host}/${this.props.shortId}/${this.props.name}`}>facebook</a>
+                   href={`https://www.facebook.com/sharer/sharer.php?u=${host}/${shortId}/${name}`}>facebook</a>
                 <a className="link--primary" target="_blank"
-                   href={`http://tumblr.com/widgets/share/tool?canonicalUrl=${this.props.host}/${this.props.shortId}/${this.props.name}`}>tumblr</a>
+                   href={`http://tumblr.com/widgets/share/tool?canonicalUrl=${host}/${shortId}/${name}`}>tumblr</a>
                 <a className="link--primary" target="_blank"
-                   href={`https://www.reddit.com/submit?url=${this.props.host}/${this.props.shortId}/${this.props.name}&title=${this.props.name}`}>reddit</a>
+                   href={`https://www.reddit.com/submit?url=${host}/${shortId}/${name}&title=${name}`}>reddit</a>
               </div>
             </div>
           </div>
@@ -129,21 +130,21 @@ class AssetInfo extends React.Component {
                 <div className="column column--2 column--med-10">
                   <span className="text">Claim Name:</span>
                 </div><div className="column column--8 column--med-10">
-                  {this.props.name}
+                  {name}
                 </div>
               </div>
               <div>
                 <div className="column column--2 column--med-10">
                   <span className="text">Claim Id:</span>
                 </div><div className="column column--8 column--med-10">
-                  {this.props.claimId}
+                  {claimId}
                 </div>
               </div>
               <div>
                 <div className="column column--2 column--med-10">
                   <span className="text">File Type:</span>
                 </div><div className="column column--8 column--med-10">
-                  {this.props.contentType ? `${this.props.contentType}` : 'unknown'}
+                  {contentType ? `${contentType}` : 'unknown'}
                 </div>
               </div>
             </div>
@@ -155,7 +156,7 @@ class AssetInfo extends React.Component {
           </div>
         }
         <div className="row row--wide">
-          <button className="button--primary" onClick={this.toggleDetails}>{this.state.showDetails ? '[less]' : '[more]'}</button>
+          <button className="button--secondary" onClick={this.toggleDetails}>{this.state.showDetails ? 'less' : 'more'}</button>
         </div>
       </div>
     );

react/components/ErrorPage/index.js

@@ -3,11 +3,12 @@ import NavBar from 'containers/NavBar';
 
 class ErrorPage extends React.Component {
   render () {
+    const { error } = this.props;
     return (
       <div>
         <NavBar/>
         <div className="row row--padded">
-            <p>{this.props.error}</p>
+            <p>{error}</p>
         </div>
       </div>
     );

react/components/ShowAssetDetails/index.js

@@ -6,22 +6,20 @@ import AssetDisplay from 'containers/AssetDisplay';
 import AssetInfo from 'components/AssetInfo';
 
 class ShowAssetDetails extends React.Component {
-  componentDidMount () {
-    console.log('ShowAssetDetails props', this.props);
-  }
   render () {
+    const { error, claimData: { title, channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host }, shortId } = this.props;
     return (
       <div>
         <NavBar/>
-          {this.props.error &&
+          {error &&
           <div className="row row--padded">
-            <p>{this.props.error}</p>
+            <p>{error}</p>
           </div>
           }
           {this.props.claimData &&
           <div className="row row--tall row--padded">
             <div className="column column--10">
-              <AssetTitle title={this.props.claimData.title}/>
+              <AssetTitle title={title}/>
             </div>
             <div className="column column--5 column--sml-10 align-content-top">
               <div className="row row--padded">
@@ -30,16 +28,16 @@ class ShowAssetDetails extends React.Component {
             </div><div className="column column--5 column--sml-10 align-content-top">
               <div className="row row--padded">
               <AssetInfo
-                channelName={this.props.claimData.channelName}
-                certificateId={this.props.claimData.certificateId}
-                description={this.props.claimData.description}
-                name={this.props.claimData.name}
-                claimId={this.props.claimData.claimId}
-                fileExt={this.props.claimData.fileExt}
-                contentType={this.props.claimData.contentType}
-                thumbnail={this.props.claimData.thumbnail}
-                host={this.props.claimData.host}
-                shortId={this.props.shortId}
+                channelName={channelName}
+                certificateId={certificateId}
+                description={description}
+                name={name}
+                claimId={claimId}
+                fileExt={fileExt}
+                contentType={contentType}
+                thumbnail={thumbnail}
+                host={host}
+                shortId={shortId}
               />
               </div>
             </div>

react/components/ShowAssetLite/index.js

@@ -5,22 +5,16 @@ import AssetDisplay from 'containers/AssetDisplay';
 
 class ShowLite extends React.Component {
   render () {
+    const { error, claimData: { name, claimId } } = this.props;
     return (
       <div className="row row--tall flex-container--column flex-container--center-center">
-        {this.props.error &&
-          <p>{this.props.error}</p>
+        {error &&
+          <p>{error}</p>
         }
         {this.props.claimData &&
         <div>
-          <AssetDisplay
-            name={this.props.claimData.name}
-            claimId={this.props.claimData.claimId}
-            src={`/${this.props.claimData.claimId}/${this.props.claimData.name}.${this.props.claimData.fileExt}`}
-            contentType={this.props.claimData.contentType}
-            fileExt={this.props.claimData.fileExt}
-            thumbnail={this.props.claimData.thumbnail}
-            />
-          <Link id="asset-boilerpate" className="link--primary fine-print" to={`/${this.props.claimData.claimId}/${this.props.claimData.name}`}>hosted via Spee.ch</Link>
+          <AssetDisplay />
+          <Link id="asset-boilerpate" className="link--primary fine-print" to={`/${claimId}/${name}`}>hosted via Spee.ch</Link>
         </div>
         }
       </div>

react/containers/ChannelClaimsDisplay/view.jsx

@@ -69,10 +69,10 @@ class ChannelClaimsDisplay extends React.Component {
               />)}
               <div>
                 {(this.props.currentPage > 1) &&
-                <button className={'button--primary'} onClick={this.showPreviousResultsPage}>Previous Page</button>
+                <button className={'button--secondary'} onClick={this.showPreviousResultsPage}>Previous Page</button>
                 }
                 {(this.props.currentPage < this.props.totalPages) &&
-                <button className={'button--primary'} onClick={this.showNextResultsPage}>Next Page</button>
+                <button className={'button--secondary'} onClick={this.showNextResultsPage}>Next Page</button>
                 }
               </div>
             </div>

react/containers/PublishMetadataInputs/view.jsx

@@ -65,7 +65,7 @@ class PublishMetadataInputs extends React.Component {
           </div>
         </div>
       )}
-      <a className="label link--primary" id="publish-details-toggle" href="#" onClick={this.toggleShowInputs}>{this.props.showMetadataInputs ? '[less]' : '[more]'}</a>
+        <button className="button--secondary" onClick={this.toggleShowInputs}>{this.props.showMetadataInputs ? 'less' : 'more'}</button>
       </div>
     );
   }