basic nav design, new title scheme, light page clean up

js/app.js

@@ -59,30 +59,45 @@ var App = React.createClass({
     sessionStorage.setItem('drawerOpen', false);
     this.setState({ drawerOpen: false });
   },
+  getMainContent: function()
+  {
+    switch(this.state.viewingPage)
+    {
+      case 'home':
+        return <HomePage />;
+      case 'settings':
+        return <SettingsPage />;
+      case 'help':
+        return <HelpPage />;
+      case 'watch':
+        return <WatchPage name={this.state.pageArgs} />;
+      case 'report':
+        return <ReportPage />;
+      case 'files':
+        return <MyFilesPage />;
+      case 'start':
+        return <StartPage />;
+      case 'claim':
+        return <ClaimCodePage />;
+      case 'wallet':
+        return <WalletPage />;
+      case 'show':
+        return <DetailPage name={this.state.pageArgs} />;
+      case 'wallet':
+        return <WalletPage />;
+      case 'publish':
+        return <PublishPage />;
+    }
+  },
   render: function() {
-    console.log(this.state);
+    var mainContent = this.getMainContent();
+
     return (
       <div id="window" className={ this.state.drawerOpen ? 'drawer-open' : 'drawer-closed' }>
-        <Drawer onCloseDrawer={this.closeDrawer} />
+        <Drawer onCloseDrawer={this.closeDrawer} viewingPage={this.state.viewingPage} />
         <div id="main-content">
           <Header onOpenDrawer={this.openDrawer} />
-          {(() => {
+          {mainContent}
-            switch(this.state.viewingPage)
-            {
-              case 'home': return <HomePage />;
-              case 'settings': return <SettingsPage />;
-              case 'help': return <HelpPage />;
-              case 'watch': return <WatchPage name={this.state.pageArgs}/>;
-              case 'report': return <ReportPage />;
-              case 'files': return <MyFilesPage />;
-              case 'start': return <StartPage />;
-              case 'claim': return <ClaimCodePage />;
-              case 'wallet': return <WalletPage />;
-              case 'show':  return <DetailPage name={this.state.pageArgs}/>;
-              case 'wallet': return <WalletPage />;
-              case 'publish': return <PublishPage />;
-            }
-          })()}
         </div>
       </div>
     );

js/component/drawer.js

@@ -1,6 +1,7 @@
 var DrawerItem = React.createClass({
   render: function() {
-    return <Link {...this.props} className="drawer-item" />
+    var isSelected = this.props.viewingPage == this.props.href.substr(2);
+    return <Link {...this.props} className={ 'drawer-item ' + (isSelected ? 'drawer-item-selected' : '') } />
   }
 });
 
@@ -26,16 +27,16 @@ var Drawer = React.createClass({
     return (
       <nav id="drawer">
         <div id="drawer-handle">
-          <Link title="Close" onClick={this.props.onCloseDrawer} icon="icon-bars" className="button-text close-drawer-link"/>
+          <Link title="Close" onClick={this.props.onCloseDrawer} icon="icon-bars" className="close-drawer-link"/>
           <a href="/"><img src="./img/lbry-dark-1600x528.png" style={drawerImageStyle}/></a>
         </div>
-        <DrawerItem href='/?home' label="Discover" icon="icon-search"  />
+        <DrawerItem href='/?home' viewingPage={this.props.viewingPage} label="Discover" icon="icon-search"  />
-        <DrawerItem href='/?publish' label="Publish" icon="icon-upload" />
+        <DrawerItem href='/?publish' viewingPage={this.props.viewingPage} label="Publish" icon="icon-upload" />
-        <DrawerItem href='/?files' label="My Files" icon='icon-cloud-download' />
+        <DrawerItem href='/?files' viewingPage={this.props.viewingPage}  label="My Files" icon='icon-cloud-download' />
-        <DrawerItem href="/?wallet" label={ lbry.formatCredits(this.state.balance) } icon="icon-bank" />
+        <DrawerItem href="/?wallet" viewingPage={this.props.viewingPage}  label={ lbry.formatCredits(this.state.balance) } icon="icon-bank" />
-        <DrawerItem href='/?settings' label="Settings" icon='icon-gear' />
+        <DrawerItem href='/?settings' viewingPage={this.props.viewingPage}  label="Settings" icon='icon-gear' />
-        <DrawerItem href='/?help' label="Help" icon='icon-question-circle' />
+        <DrawerItem href='/?help' viewingPage={this.props.viewingPage}  label="Help" icon='icon-question-circle' />
-        {isLinux ? <DrawerItem href="/?start" label="Exit LBRY" icon="icon-close" /> : null}
+        {isLinux ? <DrawerItem href="/?start" viewingPage={this.props.viewingPage} label="Exit LBRY" icon="icon-close" /> : null}
       </nav>
     );
   }

js/component/header.js

@@ -1,9 +1,22 @@
 var Header = React.createClass({
+  getInitialState: function() {
+    return {
+      title: "LBRY"
+    };
+  },
+  componentWillMount: function() {
+    new MutationObserver(function(mutations) {
+      this.setState({ title: mutations[0].target.innerHTML });
+    }.bind(this)).observe(
+      document.querySelector('title'),
+      { subtree: true, characterData: true, childList: true }
+    );
+  },
   render: function() {
     return (
       <header id="header">
-        <h1>{ document.title ? document.title : 'LBRY' }</h1>
         <Link onClick={this.props.onOpenDrawer} icon="icon-bars" className="open-drawer-link" />
+        <h1>{ this.state.title }</h1>
       </header>
     );
   }

js/page/help.js

@@ -1,21 +1,32 @@
 //@TODO: Customize advice based on OS
 
 var HelpPage = React.createClass({
+  componentDidMount: function() {
+    document.title = "Help";
+  },
   render: function() {
     return (
       <main className="page">
-        <h1>Troubleshooting</h1>
+        <h3>Read the FAQ</h3>
-        <p>Here are the most commonly encountered problems and what to try doing about them.</p>
+        <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>
-        <h3>Nothing seems to start downloading.</h3>
+        <h3>Get Live Help</h3>
+        <p>
+          Live help is available most hours in the #help channel of our Slack chat room.
+        </p>
+        <p>
+          <Link button="alt" label="Join Our Slack" icon="icon-slack" href="https://slack.lbry.io" />
+        </p>
+        <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>
 
-        <h3>Videos have trouble playing.</h3>
+        <h4>Videos have trouble playing.</h4>
         <p>Sometimes your video player will start the file while it's still empty. Try reloading the page after a few seconds and it may work. You should also see the file appear in your downloads folder (configured in <a href="/?settings">settings</a>).</p>
 
         <p>A real fix for this is underway!</p>
 
-        <h3>How do I turn LBRY off?</h3>
+        <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>

js/page/my_files.js

@@ -131,6 +131,9 @@ var MyFilesPage = React.createClass({
       filesInfo: null,
     };
   },
+  componentDidMount: function() {
+    document.title = "My Files";
+  },
   componentWillMount: function() {
     this.updateFilesInfo();
   },
@@ -185,7 +188,6 @@ var MyFilesPage = React.createClass({
     }
     return (
       <main className="page">
-        <h1>My Files</h1>
         <section>
           {content}
         </section>

js/page/publish.js

@@ -241,6 +241,9 @@ var PublishPage = React.createClass({
       isFee: feeEnabled
     });
   },
+  componentDidMount: function() {
+    document.title = "Publish";
+  },
   componentDidUpdate: function() {
     if (this.state.fileInfo && !this.state.tempFileReady) {
       // A file was chosen but the daemon hasn't finished processing it yet, i.e. it's loading, so
@@ -261,7 +264,6 @@ var PublishPage = React.createClass({
   render: function() {
     return (
       <main className="page" ref="page">
-        <h1>Publish Content</h1>
         <section className="section-block">
           <h4>LBRY Name</h4>
           lbry://<FormField type="text" ref="name" onChange={this.handleNameChange} />

js/page/settings.js

@@ -77,7 +77,6 @@ var SettingsPage = React.createClass({
 
     return (
       <main className="page">
-        <h1>Settings</h1>
         <section>
           <h4>Run on startup</h4>
           <label style={settingsCheckBoxOptionStyles}>

scss/_canvas.scss

@@ -35,11 +35,16 @@ body
       margin-right: 6px;
     }
   }
+  .drawer-item-selected
+  {
+    background: $color-canvas;
+  }
 }
 #drawer-handle
 {
   padding: $spacing-vertical / 2;
   max-height: $header-height;
+  text-align: center;
 }
 
 #window.drawer-closed
@@ -58,6 +63,13 @@ body
   color: white;
   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;
 }
 
 .open-drawer-link, .close-drawer-link
@@ -65,13 +77,15 @@ body
   display: inline-block;
   font-size: 1.5em;
   padding: 0 18px 0 6px;
+  float: left;
 }
 
 .page {
   margin-left: auto;
   margin-right: auto;
-  width: 800px;
+  max-width: 800px;
-  padding-bottom: $spacing-vertical*3;
+  padding: $spacing-vertical;
+  background: $color-bg;
 }
 .full-screen
 {

scss/_global.scss

@@ -6,6 +6,8 @@ $color-primary: #155B4A;
 $color-light-alt: hsl(hue($color-primary), 15, 85);
 $color-text-dark: #000;
 $color-help: rgba(0,0,0,.6);
+$color-canvas: #f5f5f5;
+$color-bg: #ffffff;
 $color-money: #216C2A;
 $color-meta-light: #505050;
 

scss/_gui.scss

@@ -26,7 +26,7 @@ section
   margin-bottom: $spacing-vertical;
 }
 
-h1 {
+main h1 {
   font-size: 2.0em;
   margin-bottom: $spacing-vertical;
   margin-top: $spacing-vertical*2;
@@ -40,10 +40,7 @@ h2 {
 h3 { font-size: 1.4em; }
 
 h4 {
-  font-weight: 600;
   font-size: 1.2em;
-  margin: 0;
-  margin-bottom: $spacing-vertical/2;
 }
 
 h5 { font-size: 1.1em; }
@@ -59,11 +56,6 @@ label {
   display: block;
 }
 
-header
-{
-  line-height: $spacing-vertical;
-}
-
 p
 {
   margin-bottom: 0.8em;