removed css from inside AssetPreview

public/assets/css/general.css

@@ -276,7 +276,7 @@ a, a:visited {
 	vertical-align: top;
 }
 
-.align-content-right {
+.align-content-bottom {
 	vertical-align: bottom;
 }
 
@@ -495,7 +495,7 @@ table {
 	padding: 1em;
 }
 
-#asset-preview {
+#dropzone-preview {
 	display: block;
 	width: 100%;
 }
@@ -506,6 +506,20 @@ table {
 
 /* Assets */
 
+.asset-holder {
+	clear  : both;
+	display: inline-block;
+	width  : 31%;
+	padding: 0px;
+	margin : 1%;
+}
+
+.asset-preview {
+	width  : 100%;
+	padding: 0px;
+	margin : 0px
+}
+
 .asset {
 	width: 100%;
 }

react/components/AssetInfo/index.js

@@ -155,7 +155,7 @@ class AssetInfo extends React.Component {
           </div>
         }
         <div className="row row--wide">
-          <a className="text link--primary" id="show-details-toggle" href="#" onClick={this.toggleDetails}>{this.state.showDetails ? '[less]' : '[more]'}</a>
+          <button className="button--primary" onClick={this.toggleDetails}>{this.state.showDetails ? '[less]' : '[more]'}</button>
         </div>
       </div>
     );

react/components/AssetPreview/index.js

@@ -4,20 +4,8 @@ import { Link } from 'react-router-dom';
 const AssetPreview = ({ name, claimId, fileExt, contentType }) => {
   const directSourceLink = `${claimId}/${name}.${fileExt}`;
   const showUrlLink = `${claimId}/${name}`;
-  const previewHolderStyle = {
-    clear  : 'both',
-    display: 'inline-block',
-    width  : '31%',
-    padding: '0px',
-    margin : '1%',
-  };
-  const assetStyle = {
-    width  : '100%',
-    padding: '0px',
-    margin : '0px',
-  };
   return (
-    <div style={previewHolderStyle}>
+    <div className="asset-holder">
       <Link to={showUrlLink} >
         {(() => {
           switch (contentType) {
@@ -25,15 +13,15 @@ const AssetPreview = ({ name, claimId, fileExt, contentType }) => {
             case 'image/jpg':
             case 'image/png':
               return (
-                <img style={assetStyle} className={'asset-preview--image'} src={directSourceLink} alt={name}/>
+                <img className={'asset-preview'} src={directSourceLink} alt={name}/>
               );
             case 'image/gif':
               return (
-                <img style={assetStyle} className={'asset-preview--gif'} src={directSourceLink} alt={name}/>
+                <img className={'asset-preview'} src={directSourceLink} alt={name}/>
               );
             case 'video/mp4':
               return (
-                <video style={assetStyle}>
+                <video className={'asset-preview'}>
                   <source src={directSourceLink} type={contentType}/>
                 </video>
               );

react/components/Preview/index.jsx

@@ -34,7 +34,7 @@ class Preview extends React.Component {
   render () {
     return (
       <img
-        id="asset-preview"
+        id="dropzone-preview"
         src={this.state.imgSource}
         className={this.props.dimPreview ? 'dim' : ''}
         alt="publish preview"

react/containers/ChannelClaimsDisplay/view.jsx

@@ -8,6 +8,8 @@ class ChannelClaimsDisplay extends React.Component {
     this.state = {
       error: null,
     };
+    this.showNextResultsPage = this.showNextResultsPage.bind(this);
+    this.showPreviousResultsPage = this.showPreviousResultsPage.bind(this);
   }
   componentDidMount () {
     const name = this.props.name;
@@ -66,8 +68,12 @@ class ChannelClaimsDisplay extends React.Component {
                 key={`${claim.name}-${index}`}
               />)}
               <div>
-                {(this.props.currentPage > 1) && <button onClick={this.showPreviousResultsPage}>Previous Page</button>}
+                {(this.props.currentPage > 1) &&
-                {(this.props.currentPage < this.props.totalPages) && <button onClick={this.showNextResultsPage}>Next Page</button>}
+                <button className={'button--primary'} onClick={this.showPreviousResultsPage}>Previous Page</button>
+                }
+                {(this.props.currentPage < this.props.totalPages) &&
+                <button className={'button--primary'} onClick={this.showNextResultsPage}>Next Page</button>
+                }
               </div>
             </div>
             }

react/containers/ShowChannel/view.jsx

@@ -51,8 +51,8 @@ class ShowChannel extends React.Component {
           <div className="row row--tall row--padded">
             <div className="column column--10">
               <h2>channel name: {this.props.name ? this.props.name : 'loading...'}</h2>
-              <p>full channel id: {this.props.longId ? this.props.longId : 'loading...'}</p>
+              <p className={'fine-print'}>full channel id: {this.props.longId ? this.props.longId : 'loading...'}</p>
-              <p>short channel id: {this.props.shortId ? this.props.shortId : 'loading...'}</p>
+              <p className={'fine-print'}>short channel id: {this.props.shortId ? this.props.shortId : 'loading...'}</p>
             </div>
             <div className="column column--10">
               {(this.props.name && this.props.longId) && <ChannelClaimsDisplay />}