clean up help, report, and settings

js/page/help.js

@@ -7,9 +7,12 @@ var HelpPage = React.createClass({
   render: function() {
     return (
       <main className="page">
+        <section className="card">
           <h3>Read the FAQ</h3>
           <p>Our FAQ answers many common questions.</p>
-        <p><Link href="https://lbry.io/faq" label="Read the FAQ" icon="icon-help" button="alt"/></p>
+          <p><Link href="https://lbry.io/faq" label="Read the FAQ" icon="icon-question" button="alt"/></p>
+        </section>
+        <section className="card">
           <h3>Get Live Help</h3>
           <p>
             Live help is available most hours in the #help channel of our Slack chat room.
@@ -17,6 +20,8 @@ var HelpPage = React.createClass({
           <p>
             <Link button="alt" label="Join Our Slack" icon="icon-slack" href="https://slack.lbry.io" />
           </p>
+        </section>
+        <section className="card">
           <h3>Common Issues</h3>
           <h4>Nothing seems to start downloading.</h4>
           <p>If you can't download anything, including 'wonderfullife', try forwarding ports 4444 and 3333 on your firewall or router. If you can access 'wonderfullife' but not other content, it's possible the content is not longer hosted on the network.</p>
@@ -32,11 +37,10 @@ var HelpPage = React.createClass({
           <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>
-          <ReturnLink />
         </section>
       </main>
     );

js/page/report.js

@@ -13,6 +13,9 @@ var ReportPage = React.createClass({
       this._messageArea.value = '';
     }
   },
+  componentDidMount: function() {
+    document.title = "Report an Issue";
+  },
   getInitialState: function() {
     return {
       submitting: false,
@@ -21,17 +24,15 @@ var ReportPage = React.createClass({
   render: function() {
     return (
       <main className="page">
-        <h1>Report an Issue</h1>
+        <section className="card">
-        <section>
+          <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><button onClick={this.submitMessage} className={'button-block button-primary ' + (this.state.submitting ? 'disabled' : '')}>{this.state.submitting ? 'Submitting...' : 'Submit Report'}</button></div>
         </section>
-        <section>
+        <section className="card">
-        Developers, feel free to instead <Link href="https://github.com/lbryio/lbry/issues" label="submit an issue on GitHub"/>.
+          <h3>Developer?</h3>
-        </section>
+          You can also <Link href="https://github.com/lbryio/lbry/issues" label="submit an issue on GitHub"/>.
-        <section>
-          <ReturnLink href="/?help" label="Return to Help"/>
         </section>
       </main>
     );

js/page/settings.js

@@ -76,19 +76,20 @@ var SettingsPage = React.createClass({
     }
 
     return (
-      <main className="page">
+      <main>
-        <section>
+        <section className="card">
-          <h4>Run on startup</h4>
+          <h3>Run on startup</h3>
           <label style={settingsCheckBoxOptionStyles}>
             <input type="checkbox" onChange={this.onRunOnStartChange} defaultChecked={this.state.settings.run_on_startup} /> Run LBRY automatically when I start my computer
           </label>
         </section>
-        <section>
+        <section className="card">
-          <h4>Download directory</h4>
+          <h3>Download directory</h3>
           <div className="help">Where would you like the files you download from LBRY to be saved?</div>
           <input style={downloadDirectoryFieldStyles} type="text" name="download_directory" defaultValue={this.state.settings.download_directory} onChange={this.onDownloadDirChange}/>
         </section>
-        <section>
+        <section className="card">
+          <h3>Bandwidth Limits</h3>
           <h4>Max Upload</h4>
           <label style={settingsRadioOptionStyles}>
             <input type="radio" name="max_upload_pref" onChange={this.onMaxUploadPrefChange.bind(this, false)} defaultChecked={!this.state.isMaxUpload}/> Unlimited
@@ -97,8 +98,6 @@ var SettingsPage = React.createClass({
             <input type="radio" name="max_upload_pref" onChange={this.onMaxUploadPrefChange.bind(this, true)} defaultChecked={this.state.isMaxUpload}/> { this.state.isMaxUpload ? 'Up to' : 'Choose limit...' }
             <span className={ this.state.isMaxUpload ? '' : 'hidden'}> <input type="number" min="0" step=".5" defaultValue={this.state.settings.max_upload} style={settingsNumberFieldStyles} onChange={this.onMaxUploadFieldChange}/> MB/s</span>
           </label>
-        </section>
-        <section>
           <h4>Max Download</h4>
           <label style={settingsRadioOptionStyles}>
             <input type="radio" name="max_download_pref" onChange={this.onMaxDownloadPrefChange.bind(this, false)} defaultChecked={!this.state.isMaxDownload}/> Unlimited
@@ -108,20 +107,12 @@ var SettingsPage = React.createClass({
             <span className={ this.state.isMaxDownload ? '' : 'hidden'}> <input type="number" min="0" step=".5" defaultValue={this.state.settings.max_download} style={settingsNumberFieldStyles} onChange={this.onMaxDownloadFieldChange}/> MB/s</span>
           </label>
         </section>
-        <section>
+        <section className="card">
-          <h4>Share diagnostic data</h4>
+          <h3>Share diagnostic data</h3>
           <label style={settingsCheckBoxOptionStyles}>
             <input type="checkbox" onChange={this.onShareDataChange} defaultChecked={this.state.settings.upload_log} /> Help make LBRY better by contributing diagnostic data about my usage
           </label>
         </section>
-        <section>
-          <h4>Claim invite code</h4>
-          <Link href="?claim" label="Claim a LBRY beta invite code"/>
-        </section>
-
-        <section>
-          <ReturnLink />
-        </section>
        </main>
     );
   }

js/page/wallet.js

@@ -103,6 +103,10 @@ var WalletPage = React.createClass({
       <main className="page">
         <NewAddressSection />
         <SendToAddressSection />
+        <section>
+          <h4>Claim invite code</h4>
+          <Link href="?claim" label="Claim a LBRY beta invite code"/>
+        </section>
         <section>
           <ReturnLink />
         </section>

scss/_canvas.scss

@@ -64,13 +64,16 @@ body
   height: $header-height;
   padding: $spacing-vertical / 2;
   h1 { font-size: 1.8em;   line-height: $header-height; }
-  margin-bottom: $spacing-vertical;
 }
 
 #main-content
 {
   background: $color-canvas;
   min-height: 100vh;
+  main
+  {
+    padding: $spacing-vertical;
+  }
 }
 
 $header-icon-size: 1.5em;
@@ -89,13 +92,23 @@ $header-icon-size: 1.5em;
   padding: 0 6px 0 18px;
 }
 
-.page {
+.card {
   margin-left: auto;
   margin-right: auto;
   max-width: 800px;
   padding: $spacing-vertical;
   background: $color-bg;
+  h3, h4
+  {
+    margin-bottom: $spacing-vertical / 2;
+    margin-top: $spacing-vertical;
+    &:first-child
+    {
+      margin-top: 0;
     }
+  }
+}
+
 .full-screen
 {
   width: 100%;

scss/_gui.scss

@@ -59,6 +59,10 @@ label {
 p
 {
   margin-bottom: 0.8em;
+  &:last-child
+  {
+    margin-bottom: 0;
+  }
 }
 
 textarea {