wallet code + some finer touches on header + nav

js/component/common.js

@@ -61,6 +61,10 @@ var creditAmountStyle = {
   color: '#aaa',
 };
 
+var CurrencySymbol = React.createClass({
+  render: function() { return <span>LBC</span>; }
+});
+
 var CreditAmount = React.createClass({
   propTypes: {
     amount: React.PropTypes.number,

js/component/drawer.js

@@ -32,7 +32,7 @@ var Drawer = React.createClass({
         <DrawerItem href='/?home' viewingPage={this.props.viewingPage} label="Discover" icon="icon-search"  />
         <DrawerItem href='/?publish' viewingPage={this.props.viewingPage} label="Publish" icon="icon-upload" />
         <DrawerItem href='/?files' viewingPage={this.props.viewingPage}  label="My Files" icon='icon-cloud-download' />
-        <DrawerItem href="/?wallet" viewingPage={this.props.viewingPage}  label={ lbry.formatCredits(this.state.balance) } icon="icon-bank" />
+        <DrawerItem href="/?wallet" viewingPage={this.props.viewingPage}  label="My Wallet" badge={lbry.formatCredits(this.state.balance) } icon="icon-bank" />
         <DrawerItem href='/?settings' viewingPage={this.props.viewingPage}  label="Settings" icon='icon-gear' />
         <DrawerItem href='/?help' viewingPage={this.props.viewingPage}  label="Help" icon='icon-question-circle' />
       </nav>

js/component/header.js

@@ -1,7 +1,8 @@
 var Header = React.createClass({
   getInitialState: function() {
     return {
-      title: "LBRY"
+      title: "LBRY",
+      isScrolled: false
     };
   },
   componentWillMount: function() {
@@ -12,10 +13,21 @@ var Header = React.createClass({
       { subtree: true, characterData: true, childList: true }
     );
   },
+  componentDidMount() {
+    document.addEventListener('scroll', this.handleScroll);
+  },
+  componentWillUnmount() {
+    document.removeEventListener('scroll', this.handleScroll);
+  },
+  handleScroll() {
+    this.setState({
+      isScrolled: event.srcElement.body.scrollTop > 0
+    });
+  },
   render: function() {
     var isLinux = /linux/i.test(navigator.userAgent); // @TODO: find a way to use getVersionInfo() here without messy state management
     return (
-      <header id="header">
+      <header id="header" className={this.state.isScrolled ? 'header-scrolled' : 'header-unscrolled'}>
         <Link onClick={this.props.onOpenDrawer} icon="icon-bars" className="open-drawer-link" />
         {isLinux ? <Link href="/?start" icon="icon-close" className="close-lbry-link" /> : null}
         <h1>{ this.state.title }</h1>

js/component/link.js

@@ -16,7 +16,8 @@ var Link = React.createClass({
       <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}
+        <span className="link-label">{this.props.label}</span>
+        {this.props.badge ? <span className="badge">{this.props.badge}</span> : '' }
       </a>
     );
   }
@@ -72,17 +73,6 @@ var ToolTipLink = React.createClass({
   }
 });
 
-
-var ReturnLink = React.createClass({
-  render: function() {
-    return <div style={ { padding: '24px 0' } }><Link
-      href={this.props.href ? this.props.href : '/'}
-      icon="icon-chevron-left"
-      label={this.props.label ? this.props.label : 'Return'}
-    /></div>;
-  }
-});
-
 var DownloadLink = React.createClass({
   propTypes: {
     type: React.PropTypes.string,

js/page/claim_code.js

@@ -1,6 +1,4 @@
-var claimCodePageStyle = {
+var claimCodeContentStyle = {
-  textAlign: 'center',
-}, claimCodeContentStyle = {
   display: 'inline-block',
   textAlign: 'left',
   width: '600px',
@@ -72,8 +70,9 @@ var ClaimCodePage = React.createClass({
   },
   render: function() {
     return (
-      <main className="page" style={claimCodePageStyle}>
+      <main>
-      <h1>Claim your beta invitation code</h1>
+        <div className="card">
+          <h2>Claim your beta invitation code</h2>
           <section style={claimCodeContentStyle}>
             <p>Thanks for beta testing LBRY! Enter your invitation code and email address below to receive your initial
                LBRY credits.</p>
@@ -90,6 +89,7 @@ var ClaimCodePage = React.createClass({
                   disabled={this.state.submitting} onClick={this.handleSubmit} />
             <Link button="alt" label="Skip" disabled={this.state.submitting} onClick={this.handleSkip} />
           </section>
+        </div>
       </main>
     );
   }

js/page/my_files.js

@@ -191,9 +191,6 @@ var MyFilesPage = React.createClass({
         <section>
           {content}
         </section>
-        <section>
-          <ReturnLink />
-        </section>
       </main>
     );
   }

js/page/settings.js

@@ -78,13 +78,13 @@ var SettingsPage = React.createClass({
     return (
       <main>
         <section className="card">
-          <h3>Run on startup</h3>
+          <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 className="card">
-          <h3>Download directory</h3>
+          <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>
@@ -108,7 +108,7 @@ var SettingsPage = React.createClass({
           </label>
         </section>
         <section className="card">
-          <h3>Share diagnostic data</h3>
+          <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>

js/page/show.js

@@ -142,9 +142,6 @@ var DetailPage = React.createClass({
     return (
       <main className="page">
         <FormatsSection name={name} claimInfo={claimInfo} amount={amount} />
-        <section>
-          <ReturnLink />
-        </section>
       </main>);
   }
 });

js/page/wallet.js

@@ -13,8 +13,8 @@ var NewAddressSection = React.createClass({
   },
   render: function() {
     return (
-      <section>
+      <section className="card">
-        <h1>Generate New Address</h1>
+        <h3>Generate New Address</h3>
         <section><input type="text" size="60" value={this.state.address}></input></section>
         <Link button="primary" label="Generate" onClick={this.generateAddress} />
       </section>
@@ -80,35 +80,57 @@ var SendToAddressSection = React.createClass({
   },
   render: function() {
     return (
+      <section className="card">
+        <h3>Send Credits</h3>
         <section>
-        <h1>Send Credits</h1>
+          <label htmlFor="amount">Amount <input id="amount" type="text" size="10" onChange={this.setAmount}></input></label>
-        <section>
+          <label htmlFor="address">Recipient address <input id="address" type="text" size="60" onChange={this.setAddress}></input></label>
-          <section><label for="balance">Balance {this.state.balance}</label></section>
-          <label for="amount">Amount <input id="amount" type="text" size="10" onChange={this.setAmount}></input></label>
-          <label for="address">Recipient address <input id="address" type="text" size="60" onChange={this.setAddress}></input></label>
           <Link button="primary" label="Send" onClick={this.sendToAddress} disabled={!(parseFloat(this.state.amount) > 0.0) || this.state.address == ""} />
         </section>
-        <section className={!this.state.results ? 'hidden' : ''}>
+        {
-          <h4>Results:</h4>
+          this.state.results ?
+          <section>
+            <h4>Results</h4>
             {this.state.results}
           </section>
-      </section>
+          : ''
+        }
     );
   }
 });
 
 var WalletPage = React.createClass({
+  componentDidMount: function() {
+    document.title = "My Wallet";
+  },
+  /*
+  Below should be refactored so that balance is shared all of wallet page. Or even broader?
+  What is the proper React pattern for sharing a global state like balance?
+   */
+  getInitialState: function() {
+    return {
+      balance: "Checking balance...",
+    }
+  },
+  componentWillMount: function() {
+    lbry.getBalance((results) => {
+      this.setState({
+        balance: results,
+      });
+    });
+  },
   render: function() {
     return (
       <main className="page">
-        <NewAddressSection />
+        <section className="card">
-        <SendToAddressSection />
+          <h3>Balance</h3>
-        <section>
+          {this.state.balance} <CurrencySymbol />
-          <h4>Claim invite code</h4>
-          <Link href="?claim" label="Claim a LBRY beta invite code"/>
         </section>
-        <section>
+        <SendToAddressSection />
-          <ReturnLink />
+        <NewAddressSection />
+        <section className="card">
+          <h3>Claim Invite Code</h3>
+          <Link href="?claim" label="Claim a LBRY beta invite code" button="alt" />
         </section>
       </main>
     );

scss/_canvas.scss

@@ -9,41 +9,54 @@ body
 {
   font-family: 'Source Sans Pro', sans-serif;
   line-height: 1.3333;
-  min-height: 100%;
-  position: relative;
 }
 
-#window
+$drawer-width: 240px;
-{
-  position: relative;
-}
 
 #drawer
 {
-  width: 240px;
+  width: $drawer-width;
   position: absolute;
   min-height: 100vh;
   left: 0;
   top: 0;
+  background: $color-bg;
+  z-index: 1;
   .drawer-item
   {
     display: block;
     padding: $spacing-vertical / 2;
     font-size: 1.2em;
+    height: $spacing-vertical * 1.5;
     .icon
     {
       margin-right: 6px;
     }
+    .link-label
+    {
+      line-height: $spacing-vertical * 1.5;
+    }
+    .badge
+    {
+      float: right;
+      background: $color-money;
+      display: inline-block;
+      padding: 2px;
+      color: white;
+      margin-top: $spacing-vertical * 0.25 - 2;
+      border-radius: 2px;
+    }
   }
   .drawer-item-selected
   {
     background: $color-canvas;
+    color: $color-primary;
   }
 }
 #drawer-handle
 {
   padding: $spacing-vertical / 2;
-  max-height: $header-height;
+  max-height: $header-height - $spacing-vertical;
   text-align: center;
 }
 
@@ -53,7 +66,7 @@ body
 }
 #window.drawer-open
 {
-  #main-content { margin-left: 240px; }
+  #main-content { margin-left: $drawer-width; }
   .open-drawer-link { display: none; }
 }
 
@@ -62,16 +75,26 @@ body
   background: $color-primary;
   color: white;
   height: $header-height;
-  padding: $spacing-vertical / 2;
+  padding: $spacing-vertical / 2 $spacing-vertical / 2 $spacing-vertical / 2 $drawer-width + $spacing-vertical / 2;
-  h1 { font-size: 1.8em;   line-height: $header-height; }
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  box-sizing: border-box;
+  h1 { font-size: 1.8em; line-height: $header-height - $spacing-vertical; }
+  &.header-scrolled
+  {
+    box-shadow: $default-box-shadow;
+  }
 }
 
 #main-content
 {
   background: $color-canvas;
-  min-height: 100vh;
+  min-height: calc(100vh - 60px); //should be -$header-height, but I'm dumb I guess? It wouldn't work
   main
   {
+    margin-top: $header-height;
     padding: $spacing-vertical;
   }
 }
@@ -98,6 +121,12 @@ $header-icon-size: 1.5em;
   max-width: 800px;
   padding: $spacing-vertical;
   background: $color-bg;
+  box-shadow: $default-box-shadow;
+  border-radius: 2px;
+  h2
+  {
+    margin-bottom: $spacing-vertical;
+  }
   h3, h4
   {
     margin-bottom: $spacing-vertical / 2;

scss/_global.scss

@@ -17,7 +17,9 @@ $mobile-width-threshold: 801px;
 $max-content-width: 1000px;
 $max-text-width: 660px;
 
-$header-height: $spacing-vertical * 1.5;
+$header-height: $spacing-vertical * 2.5;
+
+$default-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
 
 
 @mixin clearfix()

scss/_gui.scss

@@ -135,7 +135,7 @@ select {
   border: 0 none;
   text-align: center;
   border-radius: 2px;
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
+  box-shadow: $default-box-shadow;
   text-transform: uppercase;
   + .button-block
   {