Alignment and formatting tweaks

js/page/claim_code.js

@@ -8,6 +8,8 @@ var claimCodePageStyle = {
   display: 'inline-block',
   cursor: 'default',
   width: '130px',
+  textAlign: 'right',
+  marginRight: '6px',
 };
 
 var ClaimCodePage = React.createClass({
@@ -78,7 +80,7 @@ var ClaimCodePage = React.createClass({
         <p>You will be added to our mailing list (if you're not already on it) and will be eligible for future rewards for beta testers.</p>
       </section>
       <section>
-        <form>
+        <form onSubmit={this.handleSubmit}>
           <section><label style={claimCodeLabelStyle} htmlFor="code">Invitation code</label><input name="code" ref="code" /></section>
           <section><label style={claimCodeLabelStyle} htmlFor="email">Email</label><input name="email" ref="email" /></section>
         </form>

js/page/home.js

@@ -117,7 +117,7 @@ var SearchResultRow = React.createClass({
 
 var featuredContentItemStyle = {
   fontSize: '0.95em',
-  marginBottom: '10px',
+  marginTop: '10px',
   minHeight: '130px',
 }, featuredContentItemImgStyle = {
   maxHeight: '90px',
@@ -130,6 +130,7 @@ var featuredContentItemStyle = {
   color: '#444',
   marginBottom: '5px',
   fontSize: '0.9em',
+  minHeight: '74px',
 }, featuredContentItemCostStyle = {
   display: 'block',
   float: 'right',
@@ -156,7 +157,7 @@ var FeaturedContentItem = React.createClass({
     });
     lbry.search(this.props.name, (results) => {
       this.setState({
-        amount: results[0].cost_est
+        amount: (results ? results[0].cost_est : 0.0)
       });
     });
   },
@@ -168,10 +169,23 @@ var FeaturedContentItem = React.createClass({
 
     var metadata = this.state.metadata;
 
+    if ('narrow' in this.props) {
+      // Workaround -- narrow thumbnails look a bit funky without some extra left margin.
+      // Find a way to do this in CSS.
+
+      var thumbStyle = Object.assign({}, featuredContentItemImgStyle, {
+        position: 'relative',
+        maxHeight: '102px',
+        left: '13px',
+      });
+    } else {
+      var thumbStyle = featuredContentItemImgStyle;
+    }
+
     return (
       <div className="row-fluid" style={featuredContentItemStyle}>
         <div className="span4">
-          <img src={metadata.thumbnail} alt={'Photo for ' + this.state.title} style={featuredContentItemImgStyle} />
+          <img src={metadata.thumbnail} alt={'Photo for ' + this.state.title} style={thumbStyle} />
         </div>
         <div className="span8">
           <h4>{this.state.title}</h4>
@@ -189,6 +203,7 @@ var FeaturedContentItem = React.createClass({
 
 var featuredContentStyle = {
   width: '100%',
+  marginTop: '-8px',
 };
 
 var FeaturedContent = React.createClass({
@@ -201,7 +216,7 @@ var FeaturedContent = React.createClass({
           <FeaturedContentItem name="keynesvhayek" />
         </div>
         <div className="span6">
-          <FeaturedContentItem name="itsadisaster" />
+          <FeaturedContentItem name="itsadisaster" narrow />
           <FeaturedContentItem name="meetlbry1" />
         </div>
       </div>
@@ -307,7 +322,9 @@ var topBarStyle = {
   'height': '26px',
 },
 balanceStyle = {
-  'marginRight': '5px'
+  'marginRight': '5px',
+  'position': 'relative',
+  'top': '1px',
 };
 
 var mainMenuStyle = {

js/page/my_files.js

@@ -149,7 +149,7 @@ var MyFilesPage = React.createClass({
         let {title, thumbnail} = metadata;
 
         var ratioLoaded = written_bytes / total_bytes;
-        var showWatchButton = (lbry.getMediaType(file_name) == 'video');
+        var showWatchButton = (lbry.getMediaType(file_name) == 'video' || lbry.getMediaType(file_name) == 'audio');
 
         content.push(<MyFilesRow lbryUri={lbry_uri} title={title || ('lbry://' + lbry_uri)} completed={completed} stopped={stopped}
                                  ratioLoaded={ratioLoaded} imgUrl={thumbnail} path={download_path}