futher cleanup of help page

js/page/help.js

@@ -51,40 +51,32 @@ var HelpPage = React.createClass({
           </p>
         </section>
         <section className="card">
-          <h3>Common Issues</h3>
+          <h3>Report a Bug</h3>
-          <h4>Nothing seems to start downloading.</h4>
+          <p>Did you find something wrong?</p>
-          <p>If you can't download anything, including the Featured Content on the front page, your system may be unable to receive connections from other LBRY users hosting content. If you're able, try forwarding ports 4444 and 3333 on your firewall or router.</p>
+          <p><Link href="/?report" label="Submit a Bug Report" icon="icon-bug" button="alt" /></p>
-
+          <div className="meta">Thanks! LBRY is made by it's users.</div>
-          <p>If only certain content is failing to download, the user(s) hosting the file may have disconnected from LBRY, or are having issues with their own connection. We are currently rolling out improvements to the network that will make content more consistently available.</p>
-
-          <h4>Videos have trouble playing.</h4>
-          <p>Sometimes the video player will start before enough of the file has downloaded to start playing. Try reloading the page after a few seconds. You should also see the file appear in your downloads folder (configured on the <Link href="/?settings" label="Settings page" />).</p>
-
-          <p>A real fix for this is underway!</p>
-
-          <h4>How do I turn LBRY off?</h4>
-          <p>If you're on OS X, you can find the app running in the notification area at the top right of your screen. Click the LBRY icon and choose <code>Quit</code>.</p>
-
-          <p>On Linux, you'll find a close button in the menu at the top right of LBRY.</p>
-
-          <p>If you're running LBRY from the command line, you may also close the app with the command <code>stop-lbrynet-daemon</code></p>
-        </section>
-        <section className="card">
-          <h3>None of this applies to me, or it didn't work.</h3>
-          <p>Please <Link href="/?report" label="send us a bug report" />. Thanks!</p>
         </section>
         {!ver ? null :
           <section className="card">
-            <h3>About LBRY</h3>
+            <h3>About</h3>
-            <p><strong>LBRY version</strong> {ver.lbrynet_version}</p>
+            {ver.lbrynet_update_available || ver.lbryum_update_available ?
-            <p><strong>Platform</strong> {platform}</p>
+              <p>A newer version of LBRY is available. <Link href={newVerLink} label={"Download LBRY " + ver.remote_lbrynet + " now!"} /></p>
-            {ver.lbrynet_update_available
+              : <p>Your copy of LBRY is up to date.</p>
-              ? <p>A newer version of LBRY is available. <Link href={newVerLink} label={"Download LBRY " + ver.remote_lbrynet + " now!"} /></p>
-              : (ver.lbryum_update_available
-                  ? <p>You are running version {ver.lbryum_version} of lbryum, the wallet software used to store and process transactions between you and other LBRY users. A newer version is available. <Link href={newVerLink} label="Upgrade LBRY now" /> to get lbryum {ver.remote_lbryum}!</p>
-                  : <p>Your copy of LBRY is up to date.</p>)
             }
-
+            <table className="table-standard">
+              <tr>
+                <th>lbrynet (data)</th>
+                <td>{ver.lbrynet_version}</td>
+              </tr>
+              <tr>
+                <th>lbryum (wallet)</th>
+                <td>{ver.lbryum_version}</td>
+              </tr>
+              <tr>
+                <th>Platform</th>
+                <td>{platform}</td>
+              </tr>
+            </table>
           </section>
         }
       </main>

js/page/report.js

@@ -27,8 +27,12 @@ var ReportPage = React.createClass({
         <section className="card">
           <h3>Report an Issue</h3>
           <p>Please describe the problem you experienced and any information you think might be useful to us. Links to screenshots are great!</p>
-          <textarea ref={(t) => this._messageArea = t} cols="50" rows="10" name="message" type="text"/>
+          <div className="form-row">
-          <div><button onClick={this.submitMessage} className={'button-block button-primary ' + (this.state.submitting ? 'disabled' : '')}>{this.state.submitting ? 'Submitting...' : 'Submit Report'}</button></div>
+            <textarea ref={(t) => this._messageArea = t} cols="80" rows="10" name="message" type="text"/>
+          </div>
+          <div className="form-row form-row-submit">
+            <button onClick={this.submitMessage} className={'button-block button-primary ' + (this.state.submitting ? 'disabled' : '')}>{this.state.submitting ? 'Submitting...' : 'Submit Report'}</button>
+          </div>
         </section>
         <section className="card">
           <h3>Developer?</h3>

js/page/show.js

@@ -33,6 +33,7 @@ var FormatItem = React.createClass({
         </div>
         <div className="span8">
           <p>{description}</p>
+          <section>
             <table className="table-standard">
               <tbody>
                 <tr>
@@ -52,8 +53,11 @@ var FormatItem = React.createClass({
                 </tr>
               </tbody>
             </table>
+          </section>
+          <section>
             <WatchLink streamName={this.props.name} button="primary" />
             <DownloadLink streamName={this.props.name} button="alt" />
+          </section>
         </div>
       </div>
       );

scss/_gui.scss

@@ -9,10 +9,6 @@
 section
 {
   margin-bottom: $spacing-vertical;
-  section {
-    /* Smaller padding around inner sections */
-    margin-bottom: $spacing-vertical / 4;
-  }
   &:last-child
   {
     margin-bottom: 0;
@@ -58,10 +54,6 @@ p
   }
 }
 
-textarea {
-  height: 190px;
-}
-
 .hidden {
   display: none;
 }
@@ -76,15 +68,17 @@ input[type="text"], input[type="search"], textarea
   @include placeholder {
     color: lighten($color-text-dark, 60%);
   }
-  border: 0 none;
   border: 2px solid rgba(160,160,160,.5);
   padding-left: 5px;
   padding-right: 5px;
-  height: $spacing-vertical * 1.5;
-  line-height: $spacing-vertical - 4;
   box-sizing: border-box;
   -webkit-appearance: none;
 }
+input[type="text"], input[type="search"]
+{
+  line-height: $spacing-vertical - 4;
+  height: $spacing-vertical * 1.5;
+}
 
 .busy-indicator
 {

scss/_table.scss

@@ -1,5 +1,4 @@
 table.table-standard {
-  margin-bottom: $spacing-vertical;
   word-wrap: break-word;
   max-width: 100%;