store upgrade skip in session

js/app.js

@@ -18,7 +18,8 @@ var App = React.createClass({
   },
   componentWillMount: function() {
     lbry.checkNewVersionAvailable(function(isAvailable) {
-      if (!isAvailable) {
+
+      if (!isAvailable || sessionStorage.getItem('upgradeSkipped')) {
         return;
       }
 
@@ -40,9 +41,12 @@ var App = React.createClass({
           var updateUrl = 'https://lbry.io/get/lbry.deb';
         }
 
-        if (window.confirm(message)) {
+        if (window.confirm(message))
+        {
           lbry.stop();
           window.location = updateUrl;
+        } else {
+          sessionStorage.setItem('upgradeSkipped', true);
         };
       });
     });

js/component/drawer.js

@@ -1,3 +1,13 @@
+var DrawerItem = React.createClass({
+  render: function() {
+    return <Link {...this.props} className="drawer-item" />
+  }
+});
+
+var drawerImageStyle = { //@TODO: remove this, img should be properly scaled once size is settled
+  height: '36px'
+};
+
 var Drawer = React.createClass({
   getInitialState: function() {
     return {
@@ -16,15 +26,16 @@ var Drawer = React.createClass({
     return (
       <nav id="drawer">
         <div id="drawer-handle">
-          <Link title="Close" onClick={this.props.onCloseDrawer} icon="icon-bars" />
+          <Link title="Close" onClick={this.props.onCloseDrawer} icon="icon-bars" className="button-text close-drawer-link"/>
+          <a href="/"><img src="./img/lbry-dark-1600x528.png" style={drawerImageStyle}/></a>
         </div>
-        <Link href='/?home' label="Discover" icon="icon-search" />
+        <DrawerItem href='/?home' label="Discover" icon="icon-search"  />
-        <Link icon="icon-bank" href="/?wallet" label={<CreditAmount amount={this.state.balance}/>} />
+        <DrawerItem href='/?publish' label="Publish" icon="icon-upload" />
-        <Link href='/?publish' label="Publish" icon="icon-upload" />
+        <DrawerItem href='/?files' label="My Files" icon='icon-cloud-download' />
-        <Link href='/?files' label="My Files" icon='icon-cloud-download' />
+        <DrawerItem href="/?wallet" label={ lbry.formatCredits(this.state.balance) } icon="icon-bank" />
-        <Link href='/?settings' label="Settings" icon='icon-gear' />
+        <DrawerItem href='/?settings' label="Settings" icon='icon-gear' />
-        <Link href='/?help' label="Help" icon='icon-question-circle' />
+        <DrawerItem href='/?help' label="Help" icon='icon-question-circle' />
-        {isLinux ? <Link href="/?start" label="Exit LBRY" icon="icon-close" /> : null}
+        {isLinux ? <DrawerItem href="/?start" label="Exit LBRY" icon="icon-close" /> : null}
       </nav>
     );
   }

js/component/header.js

@@ -1,83 +1,9 @@
-var topBarStyle = {
-    'float': 'right',
-    'position': 'absolute',
-    'right': 0,
-    'top': 0
-  },
-  balanceStyle = {
-    'marginRight': '5px',
-    'position': 'relative',
-    'top': '1px',
-  },
-  menuDropdownStyle = {
-  position: 'absolute',
-  top: '26px',
-  right: '0px',
-};
-
-var TopBar = React.createClass({
-  getInitialState: function() {
-    return {
-      balance: 0,
-    };
-  },
-  componentDidMount: function() {
-    lbry.getBalance(function(balance) {
-      this.setState({
-        balance: balance
-      });
-    }.bind(this));
-  },
-  onClose: function() {
-    window.location.href = "?start";
-  },
-  render: function() {
-    var isLinux = /linux/i.test(navigator.userAgent); // @TODO: find a way to use getVersionInfo() here without messy state management
-    return (
-      <span className='top-bar' style={topBarStyle}>
-        <Link icon="icon-bank" href="/?wallet" label={<CreditAmount amount={this.state.balance}/>} style={balanceStyle} />
-        <Link href='/?publish' label="Publish" icon="icon-upload" button="text" />
-        <Link ref="menuButton" title="LBRY Menu" icon="icon-bars" />
-        <div style={menuDropdownStyle}>
-          <Menu toggleButton={this.refs.menuButton} >
-            <MenuItem href='/?files' label="My Files" icon='icon-cloud-download' />
-            <MenuItem href='/?settings' label="Settings" icon='icon-gear' />
-            <MenuItem href='/?help' label="Help" icon='icon-question-circle' />
-            {isLinux ? <MenuItem href="/?start" label="Exit LBRY" icon="icon-close" />
-              : null}
-          </Menu>
-        </div>
-      </span>
-    );
-  }
-});
-
-var subPageLogoStyle = {
-  maxWidth: '150px',
-  display: 'block',
-  marginTop: '36px',
-};
-
-var SubPageLogo = React.createClass({
-  render: function() {
-    return <a href="/"><img src="img/lbry-dark-1600x528.png" style={subPageLogoStyle} /></a>;
-  }
-});
-
-var headerStyle = {
-    padding: '12px 12px 36px',
-    position: 'relative'
-  },
-  headerImageStyle = { //@TODO: remove this, img should be properly scaled once size is settled
-    height: '48px'
-  };
-
 var Header = React.createClass({
   render: function() {
     return (
-      <header style={headerStyle}>
+      <header id="header">
+        <h1>{ document.title ? document.title : 'LBRY' }</h1>
         <Link onClick={this.props.onOpenDrawer} icon="icon-bars" className="open-drawer-link" />
-        <a href="/"><img src="./img/lbry-dark-1600x528.png" style={headerImageStyle}/></a>
       </header>
     );
   }

js/component/link.js

@@ -6,12 +6,14 @@ var Link = React.createClass({
   },
   render: function() {
     var href = this.props.href ? this.props.href : 'javascript:;',
-      icon = this.props.icon ? <Icon icon={this.props.icon} />  : '',
+      icon = this.props.icon ? <Icon icon={this.props.icon} fixed={true} />  : '',
-      className = (this.props.button ? 'button-block button-' + this.props.button : 'button-text') +
+      className = (this.props.className ? this.props.className : '') +
-        (this.props.hidden ? ' hidden' : '') + (this.props.disabled ? ' disabled' : '') + ' ' + this.props.className;
+        (this.props.button ? ' button-block button-' + this.props.button : '') +
+        (this.props.hidden ? ' hidden' : '') +
+        (this.props.disabled ? ' disabled' : '');
 
     return (
-      <a className={className} href={href} style={this.props.style ? this.props.style : {}}
+      <a className={className ? className : 'button-text'} href={href} style={this.props.style ? this.props.style : {}}
          title={this.props.title} onClick={this.handleClick}>
         {this.props.icon ? icon : '' }
         {this.props.label}
@@ -48,13 +50,14 @@ var ToolTipLink = React.createClass({
   render: function() {
     var href = this.props.href ? this.props.href : 'javascript:;',
       icon = this.props.icon ? <Icon icon={this.props.icon} />  : '',
-      className = (this.props.button ? 'button-block button-' + this.props.button : 'button-text') +
+      className = this.props.className +
-        (this.props.hidden ? ' hidden' : '') + (this.props.disabled ? ' disabled' : '') + ' ' + this.props.className;
+        (this.props.button ? ' button-block button-' + this.props.button : '') +
-
+        (this.props.hidden ? ' hidden' : '') +
+        (this.props.disabled ? ' disabled' : '');
 
     return (
       <span style={linkContainerStyle}>
-        <a className={className} href={href} style={this.props.style ? this.props.style : {}}
+        <a className={className ? className : 'button-text'} href={href} style={this.props.style ? this.props.style : {}}
            title={this.props.title} onClick={this.handleClick}>
           {this.props.icon ? icon : '' }
           {this.props.label}

js/page/home.js

@@ -335,6 +335,7 @@ var Discover = React.createClass({
 
 var HomePage = React.createClass({
   componentDidMount: function() {
+    document.title = "Discover";
     lbry.getStartNotice(function(notice) {
       if (notice) {
         alert(notice);

js/page/settings.js

@@ -58,6 +58,9 @@ var SettingsPage = React.createClass({
       settings: null
     }
   },
+  componentDidMount: function() {
+    document.title = "Settings";
+  },
   componentWillMount: function() {
     lbry.getSettings(function(settings) {
       this.setState({

scss/_canvas.scss

@@ -25,10 +25,21 @@ body
   min-height: 100vh;
   left: 0;
   top: 0;
-  .button-text
+  .drawer-item
   {
     display: block;
+    padding: $spacing-vertical / 2;
+    font-size: 1.2em;
+    .icon
+    {
+      margin-right: 6px;
     }
+  }
+}
+#drawer-handle
+{
+  padding: $spacing-vertical / 2;
+  max-height: $header-height;
 }
 
 #window.drawer-closed
@@ -41,6 +52,21 @@ body
   .open-drawer-link { display: none; }
 }
 
+#header
+{
+  background: $color-primary;
+  color: white;
+  height: $header-height;
+  padding: $spacing-vertical / 2;
+}
+
+.open-drawer-link, .close-drawer-link
+{
+  display: inline-block;
+  font-size: 1.5em;
+  padding: 0 18px 0 6px;
+}
+
 .page {
   margin-left: auto;
   margin-right: auto;

scss/_global.scss

@@ -15,6 +15,8 @@ $mobile-width-threshold: 801px;
 $max-content-width: 1000px;
 $max-text-width: 660px;
 
+$header-height: $spacing-vertical * 1.5;
+
 
 @mixin clearfix()
 {