From a36f0f2691fbbe0349287a85fa8eed31dc558363 Mon Sep 17 00:00:00 2001
From: Jeremy Kauffman <kauffj@gmail.com>
Date: Sun, 7 Aug 2016 20:20:14 -0400
Subject: [PATCH] wallet code + some finer touches on header + nav

---
 js/app.js              |  2 +-
 js/component/common.js |  4 +++
 js/component/drawer.js |  2 +-
 js/component/header.js | 16 +++++++++--
 js/component/link.js   | 14 ++--------
 js/page/claim_code.js  | 42 ++++++++++++++---------------
 js/page/my_files.js    |  3 ---
 js/page/settings.js    |  6 ++---
 js/page/show.js        |  3 ---
 js/page/wallet.js      | 60 +++++++++++++++++++++++++++++-------------
 scss/_canvas.scss      | 53 ++++++++++++++++++++++++++++---------
 scss/_global.scss      |  4 ++-
 scss/_gui.scss         |  2 +-
 13 files changed, 132 insertions(+), 79 deletions(-)

diff --git a/js/app.js b/js/app.js
index 7c59307e6..ac436b306 100644
--- a/js/app.js
+++ b/js/app.js
@@ -9,7 +9,7 @@ var App = React.createClass({
     if (param && ['settings', 'help', 'start', 'watch', 'report', 'files', 'claim', 'show', 'wallet', 'publish'].indexOf(param) != -1) {
       viewingPage = param;
     }
-
+  
     return {
       viewingPage: viewingPage ? viewingPage : 'home',
       drawerOpen: drawerOpenRaw !== null ? JSON.parse(drawerOpenRaw) : true,
diff --git a/js/component/common.js b/js/component/common.js
index d44033b94..4daaed476 100644
--- a/js/component/common.js
+++ b/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,
diff --git a/js/component/drawer.js b/js/component/drawer.js
index 974a26f20..748c9af52 100644
--- a/js/component/drawer.js
+++ b/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>
diff --git a/js/component/header.js b/js/component/header.js
index f6116cb86..2ceb46f61 100644
--- a/js/component/header.js
+++ b/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>
diff --git a/js/component/link.js b/js/component/link.js
index 5c8dcf36d..0243d5bed 100644
--- a/js/component/link.js
+++ b/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,
diff --git a/js/page/claim_code.js b/js/page/claim_code.js
index 1ec6168ba..c7885365c 100644
--- a/js/page/claim_code.js
+++ b/js/page/claim_code.js
@@ -1,6 +1,4 @@
-var claimCodePageStyle = {
-  textAlign: 'center',
-}, claimCodeContentStyle = {
+var claimCodeContentStyle = {
   display: 'inline-block',
   textAlign: 'left',
   width: '600px',
@@ -72,24 +70,26 @@ var ClaimCodePage = React.createClass({
   },
   render: function() {
     return (
-      <main className="page" style={claimCodePageStyle}>
-      <h1>Claim your beta invitation code</h1>
-      <section style={claimCodeContentStyle}>
-        <p>Thanks for beta testing LBRY! Enter your invitation code and email address below to receive your initial
-           LBRY credits.</p>
-        <p>You will be added to our mailing list (if you're not already on it) and will be eligible for future rewards for beta testers.</p>
-      </section>
-      <section>
-        <form onSubmit={this.handleSubmit}>
-          <section><label style={claimCodeLabelStyle} htmlFor="code">Invitation code</label><input name="code" ref="code" /></section>
-          <section><label style={claimCodeLabelStyle} htmlFor="email">Email</label><input name="email" ref="email" /></section>
-        </form>
-      </section>
-      <section>
-        <Link button="primary" label={this.state.submitting ? "Submitting..." : "Submit"}
-              disabled={this.state.submitting} onClick={this.handleSubmit} />
-        <Link button="alt" label="Skip" disabled={this.state.submitting} onClick={this.handleSkip} />
-      </section>
+      <main>
+        <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>
+            <p>You will be added to our mailing list (if you're not already on it) and will be eligible for future rewards for beta testers.</p>
+          </section>
+          <section>
+            <form onSubmit={this.handleSubmit}>
+              <section><label style={claimCodeLabelStyle} htmlFor="code">Invitation code</label><input name="code" ref="code" /></section>
+              <section><label style={claimCodeLabelStyle} htmlFor="email">Email</label><input name="email" ref="email" /></section>
+            </form>
+          </section>
+          <section>
+            <Link button="primary" label={this.state.submitting ? "Submitting..." : "Submit"}
+                  disabled={this.state.submitting} onClick={this.handleSubmit} />
+            <Link button="alt" label="Skip" disabled={this.state.submitting} onClick={this.handleSkip} />
+          </section>
+        </div>
       </main>
     );
   }
diff --git a/js/page/my_files.js b/js/page/my_files.js
index 60c82fdb7..021d239f8 100644
--- a/js/page/my_files.js
+++ b/js/page/my_files.js
@@ -191,9 +191,6 @@ var MyFilesPage = React.createClass({
         <section>
           {content}
         </section>
-        <section>
-          <ReturnLink />
-        </section>
       </main>
     );
   }
diff --git a/js/page/settings.js b/js/page/settings.js
index a0dc5efa6..d7d89e32c 100644
--- a/js/page/settings.js
+++ b/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>
diff --git a/js/page/show.js b/js/page/show.js
index ede85793e..f905edb9a 100644
--- a/js/page/show.js
+++ b/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>);
   }
 });
\ No newline at end of file
diff --git a/js/page/wallet.js b/js/page/wallet.js
index c2cdaf5ba..286381b3d 100644
--- a/js/page/wallet.js
+++ b/js/page/wallet.js
@@ -13,8 +13,8 @@ var NewAddressSection = React.createClass({
   },
   render: function() {
     return (
-      <section>
-        <h1>Generate New Address</h1>
+      <section className="card">
+        <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>
-        <h1>Send Credits</h1>
+      <section className="card">
+        <h3>Send Credits</h3>
         <section>
-          <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>
+          <label htmlFor="amount">Amount <input id="amount" type="text" size="10" onChange={this.setAmount}></input></label>
+          <label htmlFor="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>
-      </section>
+        {
+          this.state.results ?
+          <section>
+            <h4>Results</h4>
+            {this.state.results}
+          </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 />
-        <SendToAddressSection />
-        <section>
-          <h4>Claim invite code</h4>
-          <Link href="?claim" label="Claim a LBRY beta invite code"/>
+        <section className="card">
+          <h3>Balance</h3>
+          {this.state.balance} <CurrencySymbol />
         </section>
-        <section>
-          <ReturnLink />
+        <SendToAddressSection />
+        <NewAddressSection />
+        <section className="card">
+          <h3>Claim Invite Code</h3>
+          <Link href="?claim" label="Claim a LBRY beta invite code" button="alt" />
         </section>
       </main>
     );
diff --git a/scss/_canvas.scss b/scss/_canvas.scss
index df491745a..74912aefb 100644
--- a/scss/_canvas.scss
+++ b/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
-{
-  position: relative;
-}
+$drawer-width: 240px;
 
 #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;
-  h1 { font-size: 1.8em;   line-height: $header-height; }
+  padding: $spacing-vertical / 2 $spacing-vertical / 2 $spacing-vertical / 2 $drawer-width + $spacing-vertical / 2;
+  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;
diff --git a/scss/_global.scss b/scss/_global.scss
index 6962e461b..286645175 100644
--- a/scss/_global.scss
+++ b/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()
diff --git a/scss/_gui.scss b/scss/_gui.scss
index 0f7bdcdf9..135ea5a16 100644
--- a/scss/_gui.scss
+++ b/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
   {