From b024a01b724ce639cf801325a16e494215d6b9e1 Mon Sep 17 00:00:00 2001
From: Galen Wolfe-Pauly <root@office-for.com>
Date: Mon, 14 Mar 2016 13:03:37 -0700
Subject: [PATCH] working on docs

---
 web/lib/css/bootstrap.css | 105 ++++++++++++---------
 web/tree/main.css         | 193 +++++++++++++++++++++++++-------------
 web/tree/main.js          |  92 +++++++++++++-----
 3 files changed, 258 insertions(+), 132 deletions(-)

diff --git a/web/lib/css/bootstrap.css b/web/lib/css/bootstrap.css
index 143197a0cd..3008753606 100644
--- a/web/lib/css/bootstrap.css
+++ b/web/lib/css/bootstrap.css
@@ -2089,21 +2089,21 @@ input[type="checkbox"].disabled {
 .has-success.checkbox label,
 .has-success.radio-inline label,
 .has-success.checkbox-inline label {
-  color: #02d124;
+  color: #64de79;
 }
 
 .has-success .form-control {
-  border-color: #02d124;
+  border-color: #64de79;
 }
 
 .has-success .input-group-addon {
-  color: #02d124;
-  background-color: #a1feb0;
-  border-color: #02d124;
+  color: #64de79;
+  background-color: white;
+  border-color: #64de79;
 }
 
 .has-success .form-control-feedback {
-  color: #02d124;
+  color: #64de79;
 }
 
 .has-success .form-control-success {
@@ -2406,28 +2406,28 @@ fieldset[disabled] a.btn {
 
 .btn-success {
   color: #fff;
-  background-color: #02d124;
-  border-color: #02d124;
+  background-color: #64de79;
+  border-color: #64de79;
 }
 
 .btn-success:hover {
   color: #fff;
-  background-color: #029e1b;
-  border-color: #01941a;
+  background-color: #3ad555;
+  border-color: #32d34d;
 }
 
 .btn-success:focus, .btn-success.focus {
   color: #fff;
-  background-color: #029e1b;
-  border-color: #01941a;
+  background-color: #3ad555;
+  border-color: #32d34d;
 }
 
 .btn-success:active, .btn-success.active,
 .open > .btn-success.dropdown-toggle {
   color: #fff;
-  background-color: #029e1b;
+  background-color: #3ad555;
   background-image: none;
-  border-color: #01941a;
+  border-color: #32d34d;
 }
 
 .btn-success:active:hover, .btn-success:active:focus, .btn-success:active.focus, .btn-success.active:hover, .btn-success.active:focus, .btn-success.active.focus,
@@ -2435,18 +2435,18 @@ fieldset[disabled] a.btn {
 .open > .btn-success.dropdown-toggle:focus,
 .open > .btn-success.dropdown-toggle.focus {
   color: #fff;
-  background-color: #017b15;
-  border-color: #01530e;
+  background-color: #29c244;
+  border-color: #22a038;
 }
 
 .btn-success.disabled:focus, .btn-success.disabled.focus, .btn-success:disabled:focus, .btn-success:disabled.focus {
-  background-color: #02d124;
-  border-color: #02d124;
+  background-color: #64de79;
+  border-color: #64de79;
 }
 
 .btn-success.disabled:hover, .btn-success:disabled:hover {
-  background-color: #02d124;
-  border-color: #02d124;
+  background-color: #64de79;
+  border-color: #64de79;
 }
 
 .btn-warning {
@@ -2624,31 +2624,31 @@ fieldset[disabled] a.btn {
 }
 
 .btn-success-outline {
-  color: #02d124;
+  color: #64de79;
   background-color: transparent;
   background-image: none;
-  border-color: #02d124;
+  border-color: #64de79;
 }
 
 .btn-success-outline:focus, .btn-success-outline.focus, .btn-success-outline:active, .btn-success-outline.active,
 .open > .btn-success-outline.dropdown-toggle {
   color: #fff;
-  background-color: #02d124;
-  border-color: #02d124;
+  background-color: #64de79;
+  border-color: #64de79;
 }
 
 .btn-success-outline:hover {
   color: #fff;
-  background-color: #02d124;
-  border-color: #02d124;
+  background-color: #64de79;
+  border-color: #64de79;
 }
 
 .btn-success-outline.disabled:focus, .btn-success-outline.disabled.focus, .btn-success-outline:disabled:focus, .btn-success-outline:disabled.focus {
-  border-color: #3cfd5c;
+  border-color: #b8f0c2;
 }
 
 .btn-success-outline.disabled:hover, .btn-success-outline:disabled:hover {
-  border-color: #3cfd5c;
+  border-color: #b8f0c2;
 }
 
 .btn-warning-outline {
@@ -3741,8 +3741,8 @@ input[type="button"].btn-block {
 }
 
 .card-success {
-  background-color: #02d124;
-  border-color: #02d124;
+  background-color: #64de79;
+  border-color: #64de79;
 }
 
 .card-info {
@@ -3777,7 +3777,7 @@ input[type="button"].btn-block {
 
 .card-success-outline {
   background-color: transparent;
-  border-color: #02d124;
+  border-color: #64de79;
 }
 
 .card-warning-outline {
@@ -4066,11 +4066,11 @@ a.label:focus, a.label:hover {
 }
 
 .label-success {
-  background-color: #02d124;
+  background-color: #64de79;
 }
 
 .label-success[href]:focus, .label-success[href]:hover {
-  background-color: #029e1b;
+  background-color: #3ad555;
 }
 
 .label-info {
@@ -4334,16 +4334,16 @@ a.label:focus, a.label:hover {
 }
 
 .progress-success[value]::-webkit-progress-value {
-  background-color: #02d124;
+  background-color: #64de79;
 }
 
 .progress-success[value]::-moz-progress-bar {
-  background-color: #02d124;
+  background-color: #64de79;
 }
 
 @media screen and (min-width: 0\0) {
   .progress-success .progress-bar {
-    background-color: #02d124;
+    background-color: #64de79;
   }
 }
 
@@ -5566,11 +5566,11 @@ a.text-primary:focus, a.text-primary:hover {
 }
 
 .text-success {
-  color: #02d124 !important;
+  color: #64de79 !important;
 }
 
 a.text-success:focus, a.text-success:hover {
-  color: #029e1b;
+  color: #3ad555;
 }
 
 .text-info {
@@ -5617,11 +5617,11 @@ a.bg-primary:focus, a.bg-primary:hover {
 
 .bg-success {
   color: #fff !important;
-  background-color: #02d124 !important;
+  background-color: #64de79 !important;
 }
 
 a.bg-success:focus, a.bg-success:hover {
-  background-color: #029e1b;
+  background-color: #3ad555;
 }
 
 .bg-info {
@@ -6020,12 +6020,14 @@ h1,
 h2,
 h3 {
   padding-top: 2rem;
+  line-height: 4rem;
 }
 
 h4,
 h5,
 h6 {
   padding-top: 1rem;
+  line-height: 2rem;
 }
 
 h3, h4 {
@@ -6052,6 +6054,25 @@ h1:first-of-type {
   margin-bottom: 0;
 }
 
+h1.first,
+h2.first,
+h3.first {
+  padding-top: 0;
+  padding-bottom: 2rem;
+}
+
+.gray {
+  color: #55595c;
+}
+
+.gray-light {
+  color: #b1b7bd;
+}
+
+.gray-lighter {
+  color: #eceeef;
+}
+
 @media (max-width: 767px) {
   h1 {
     font-size: 2rem;
@@ -6128,7 +6149,7 @@ body {
 }
 
 .green {
-  color: #02d124;
+  color: #64de79;
 }
 
 .yellow {
@@ -6150,7 +6171,7 @@ body {
 }
 
 .inverse.green {
-  background-color: #02d124;
+  background-color: #64de79;
 }
 
 .inverse.yellow {
diff --git a/web/tree/main.css b/web/tree/main.css
index dd3c3ef9dd..5e3c2bb963 100644
--- a/web/tree/main.css
+++ b/web/tree/main.css
@@ -14,6 +14,27 @@ img.logo {
 img.logo.first {
   margin-bottom: 2rem; }
 
+div.logo {
+  width: 3rem;
+  height: 3rem;
+  background-color: #fff;
+  display: inline-block;
+  margin-right: 2rem;
+  border-radius: 50%;
+  vertical-align: middle;
+  margin-top: -.8rem; }
+
+div.logo:before {
+  content: "~";
+  color: #B1B7BD;
+  font-size: 2.6rem;
+  vertical-align: middle;
+  line-height: 3rem;
+  margin-top: .2rem;
+  text-align: center;
+  width: 2rem;
+  display: inline-block; }
+
 .short {
   width: 75%; }
 
@@ -375,8 +396,8 @@ img.logo.first {
     margin-bottom: 1rem; } }
 
 .urbit.navbar.ctrl .icon .home {
-  border-color: #0500F0;
-  background-color: #0500F0;
+  border-color: #B1B7BD;
+  background-color: #B1B7BD;
   width: 3rem;
   height: 3rem;
   margin: 0 4rem 0 0; }
@@ -402,25 +423,25 @@ img.logo.first {
   line-height: 3rem; }
 
 .urbit.navbar.ctrl ul.nav .btn {
-  border: 3px solid #0500F0;
+  border: 3px solid #000;
   margin-top: -3px;
   height: 3rem;
   padding: 0rem; }
   .urbit.navbar.ctrl ul.nav .btn a {
     font-size: 1rem;
-    color: #0500F0;
+    color: #000;
     letter-spacing: 0; }
 
 .urbit.navbar.ctrl ul.nav .btn.selected,
 .urbit.navbar.ctrl ul.nav .btn:hover {
-  background-color: #0500F0; }
+  background-color: #000; }
   .urbit.navbar.ctrl ul.nav .btn.selected a,
   .urbit.navbar.ctrl ul.nav .btn:hover a {
     color: #fff; }
 
 .urbit.navbar.ctrl ul.nav li a:hover,
 .urbit.navbar.ctrl ul.nav li.selected a {
-  color: #0500F0; }
+  color: #000; }
 
 .urbit.navbar.ctrl .subnav ul.nav {
   height: 1.5rem; }
@@ -435,11 +456,12 @@ img.logo.first {
       line-height: 3rem; }
 
 .urbit.home.navbar.ctrl .icon .home {
+  opacity: 0;
   border-color: #fff;
   background-color: #fff; }
 
 .urbit.home.navbar.ctrl .icon .home:before {
-  color: #000; }
+  color: #B1B7BD; }
 
 .urbit.home.navbar.ctrl ul.nav li a {
   color: #f7f7f9; }
@@ -495,31 +517,31 @@ img.logo.first {
     height: 6rem;
     margin: 1rem 0 0 1rem; }
   .h-arrow h1 {
-    color: #0500F0;
+    color: #000;
     display: inline-block;
     line-height: 4rem; }
   .h-arrow h1 code {
     background-color: transparent;
-    color: #0500F0; }
+    color: #000; }
 
 .footer {
-  margin-top: 3rem;
+  margin-top: 6rem;
   font-weight: 500;
   color: #B1B7BD; }
   .footer a {
-    color: #02D124;
+    color: #55595c;
     text-decoration: none;
-    border-bottom: 2px solid #02D124;
+    border-bottom: 2px solid #55595c;
     margin-left: .6rem; }
 
 .body[data-path^='/docs'] h1,
 .body[data-path^='/work'] h1 {
-  color: #0500F0; }
+  color: #000; }
 
 .body[data-path^='/docs'] h1 code,
 .body[data-path^='/work'] h1 code {
   background-color: transparent;
-  color: #0500F0;
+  color: #000;
   padding: 0; }
 
 .body[data-path^='/docs'] .book h2,
@@ -528,25 +550,25 @@ img.logo.first {
 
 .body[data-path^='/docs'] .book h2 code,
 .body[data-path^='/work'] .book h2 code {
-  color: #0500F0;
+  color: #000;
   background-color: transparent; }
 
 .body[data-path^='/docs'] .book h2 a,
 .body[data-path^='/work'] .book h2 a {
-  color: #0500F0; }
+  color: #000; }
 
 .body[data-path^='/docs'] .book hr,
 .body[data-path^='/work'] .book hr {
   margin-bottom: 3rem; }
 
 .body[data-path^='/work'] h2 {
-  color: #0500F0; }
+  color: #000; }
 
 .body[data-path^='/docs/system/hoon/runes/'] h1 {
   color: #B1B7BD; }
 
 .body[data-path^='/docs/system/hoon/runes/basic'] h1 {
-  color: #0500F0; }
+  color: #000; }
 
 .body[data-path^='/docs/system/hoon/library/'] h3 {
   font-size: 1.5rem; }
@@ -559,12 +581,31 @@ img.logo.first {
   margin-bottom: 0; }
 
 .body .urbit h1 {
-  color: #0500F0;
+  color: #000;
   line-height: 4rem; }
 
 .body .urbit a.green:hover {
   color: #02D124; }
 
+.body .urbit .container.stack {
+  margin-bottom: 3rem; }
+
+.body .urbit .container.stack.six {
+  margin-top: 12rem;
+  margin-bottom: 6rem; }
+
+.body .urbit .btn.black {
+  text-transform: none;
+  text-decoration: none;
+  border: 3px solid #000;
+  letter-spacing: 0;
+  margin-right: 1rem; }
+
+.body .urbit button.submit:hover,
+.body .urbit .btn.black:hover {
+  background-color: #000;
+  color: #fff; }
+
 .body .urbit .front {
   padding-bottom: 4rem; }
   .body .urbit .front h1 {
@@ -576,23 +617,56 @@ img.logo.first {
 
 .body .urbit .image-fs {
   height: 44rem;
-  overflow: hidden; }
-  .body .urbit .image-fs h1 {
-    position: absolute;
-    line-height: 44rem;
+  margin-bottom: 3rem; }
+  .body .urbit .image-fs .text-container,
+  .body .urbit .image-fs .image-container {
+    position: absolute; }
+  .body .urbit .image-fs .text-container {
+    display: table;
+    height: 44rem;
     width: 100%;
+    z-index: 1; }
+    .body .urbit .image-fs .text-container .text {
+      display: table-cell;
+      vertical-align: middle; }
+    .body .urbit .image-fs .text-container .rect {
+      width: 60%;
+      margin-left: auto;
+      margin-right: auto; }
+      .body .urbit .image-fs .text-container .rect h1 {
+        padding-bottom: 1rem;
+        text-align: left; }
+    .body .urbit .image-fs .text-container .rect.no-header {
+      font-weight: 500;
+      color: #fff;
+      font-size: 1.4rem; }
+      .body .urbit .image-fs .text-container .rect.no-header p.email {
+        font-size: 1rem; }
+      .body .urbit .image-fs .text-container .rect.no-header button.submit {
+        background-color: transparent;
+        border-color: #fff; }
+  .body .urbit .image-fs .image-container {
+    z-index: 0;
+    height: 44rem;
+    width: 100%;
+    overflow: hidden; }
+    .body .urbit .image-fs .image-container img {
+      position: relative;
+      left: 50%;
+      margin-left: -50%;
+      top: 50%;
+      margin-top: -50%;
+      min-height: 44rem;
+      min-width: 100%; }
+  .body .urbit .image-fs h1 {
     text-align: center;
     color: #fff; }
-  .body .urbit .image-fs img {
-    min-height: 44rem;
-    min-width: 100%; }
 
 .body .urbit .image-fs.first {
   margin-top: -9rem; }
 
 .body .urbit .slide {
   margin-bottom: 12rem;
-  font-weight: 500;
   position: relative; }
   .body .urbit .slide h1 {
     padding-bottom: 1rem; }
@@ -607,7 +681,6 @@ img.logo.first {
     .body .urbit .slide .pair .image.left {
       padding-right: 5%; }
     .body .urbit .slide .pair .text {
-      font-size: 1.4rem;
       width: 75%; }
     .body .urbit .slide .pair .image {
       width: 20%; }
@@ -624,14 +697,16 @@ img.logo.first {
 
 .body .urbit input.email,
 .body .urbit button.submit {
-  line-height: 2rem;
+  line-height: 1rem;
   padding: .6rem;
   border: 0; }
 
 .body .urbit input.email {
+  font-weight: 500;
   background-color: #B1B7BD;
   color: #fff;
-  margin-right: 1rem; }
+  margin-right: 1rem;
+  border: 3px solid #B1B7BD; }
 
 .body .urbit input.email::-moz-placeholder {
   color: #D2D2D2; }
@@ -640,39 +715,25 @@ img.logo.first {
   color: #D2D2D2; }
 
 .body .urbit button.submit {
-  background-color: #02D124;
-  color: #fff; }
+  text-transform: none;
+  text-decoration: none;
+  border: 3px solid #000;
+  background-color: #fff;
+  font-weight: 500;
+  letter-spacing: 0; }
 
-.body .urbit .road {
-  border-left: 0.3rem solid #02D124;
-  padding-left: 3rem;
-  padding-bottom: 2rem; }
+.body .urbit .last a {
+  display: block;
+  font-weight: 500;
+  color: #B1B7BD; }
 
-.body .urbit .road .step {
-  padding-top: 2rem; }
-  .body .urbit .road .step h2,
-  .body .urbit .road .step h3 {
-    display: inline-block;
-    padding-top: 0;
-    font-size: 1.5rem; }
-  .body .urbit .road .step h2 {
-    color: #02D124;
-    width: 2rem;
-    text-align: center; }
-  .body .urbit .road .step .dot {
-    display: inline-block;
-    width: 1rem;
-    height: 1rem;
-    border-radius: 50%;
-    border: 4px solid #B1B7BD;
-    background-color: #eceeef;
-    margin: -.5rem 2.65rem 0 -3.65rem;
-    vertical-align: middle; }
-  .body .urbit .road .step h3 {
-    color: #0500F0;
-    margin-left: 1rem; }
-  .body .urbit .road .step p {
-    margin-left: 3rem; }
+.body .urbit .last h2 {
+  padding-top: 0;
+  padding-bottom: 1rem;
+  margin-bottom: 0; }
+
+.body .urbit.home p.email {
+  margin-top: 3rem; }
 
 @media (max-width: 767px) {
   .body .urbit {
@@ -803,14 +864,14 @@ img.logo.first {
   .body[data-path^='/docs'] .list h1,
   .body[data-path^='/work'] .list a,
   .body[data-path^='/work'] .list h1 {
-    color: #02D124;
+    color: #55595c;
     font-weight: 500;
     height: 2rem;
     display: inline;
     text-decoration: none; }
   .body[data-path^='/docs'] .list h1,
   .body[data-path^='/work'] .list h1 {
-    border-bottom: 2px solid #02D124; }
+    border-bottom: 2px solid #55595c; }
 
 .body[data-path^='/work'] .list.main a,
 .body[data-path^='/work'] .list.main h1 {
@@ -837,7 +898,7 @@ img.logo.first {
   .body[data-path^='/docs'] .list.runes a h1 code {
     margin-right: 1rem;
     background-color: transparent;
-    color: #0500F0; }
+    color: #55595c; }
   .body[data-path^='/docs'] .list.runes a code {
     background-color: #eceeef; }
   .body[data-path^='/docs'] .list.runes a code {
@@ -859,6 +920,8 @@ img.logo.first {
 .urbit ul.blog {
   list-style-type: none;
   padding-left: 0; }
+  .urbit ul.blog li {
+    margin-bottom: 12rem; }
   .urbit ul.blog .btn {
     padding: .3rem;
     border: 3px solid #02D124;
@@ -950,7 +1013,7 @@ img.logo.first {
 .sections ul li,
 .sections ul li a,
 .sections ul li h1 span {
-  color: #02D124;
+  color: #55595c;
   height: 2rem; }
 
 .sections .kids > div {
diff --git a/web/tree/main.js b/web/tree/main.js
index b3ec045fbd..e932b7da68 100644
--- a/web/tree/main.js
+++ b/web/tree/main.js
@@ -240,7 +240,7 @@ module.exports = function(queries, Child, load) {
 
 
 },{"../actions/TreeActions.coffee":1,"../stores/TreeStore.coffee":23,"./LoadComponent.coffee":11}],3:[function(require,module,exports){
-var Comments, TreeActions, a, clas, div, extras, h1, h3, img, input, load, p, query, reactify, recl, ref, rele, util;
+var Comments, TreeActions, TreeStore, a, clas, div, extras, h1, h3, img, input, load, p, query, reactify, recl, ref, rele, util;
 
 clas = require('classnames');
 
@@ -252,6 +252,8 @@ reactify = require('./Reactify.coffee');
 
 TreeActions = require('../actions/TreeActions.coffee');
 
+TreeStore = require('../stores/TreeStore.coffee');
+
 Comments = require('./CommentsComponent.coffee');
 
 util = require('../utils/util.coffee');
@@ -373,13 +375,27 @@ extras = {
   footer: recl({
     displayName: "Footer",
     render: function() {
+      var containerClas, footerClas;
+      containerClas = clas({
+        footer: true,
+        container: this.props.container === 'false'
+      });
+      footerClas = clas({
+        'col-md-12': this.props.container === 'false'
+      });
       return div({
-        className: "footer"
-      }, p({}, [
-        "This page was served by an Urbit.", a({
-          href: "mailto:urbit@urbit.org"
-        }, "urbit@urbit.org")
-      ]));
+        className: containerClas,
+        key: 'footer-container'
+      }, [
+        div({
+          className: footerClas,
+          key: 'footer-inner'
+        }, [
+          "This page was served by an Urbit.", a({
+            href: "mailto:urbit@urbit.org"
+          }, "urbit@urbit.org")
+        ])
+      ]);
     }
   })
 };
@@ -392,8 +408,24 @@ module.exports = query({
   sein: 't'
 }, recl({
   displayName: "Body",
+  stateFromStore: function() {
+    return {
+      curr: TreeStore.getCurr()
+    };
+  },
+  getInitialState: function() {
+    return this.stateFromStore();
+  },
+  _onChangeStore: function() {
+    if (this.isMounted()) {
+      return this.setState(this.stateFromStore());
+    }
+  },
+  componentDidMount: function() {
+    return TreeStore.addChangeListener(this._onChangeStore);
+  },
   render: function() {
-    var bodyClas, extra, innerClas, outerClas, parts, ref1;
+    var bodyClas, extra, innerClas, parts, ref1;
     extra = (function(_this) {
       return function(name, props) {
         if (props == null) {
@@ -407,9 +439,6 @@ module.exports = query({
         }
       };
     })(this);
-    outerClas = clas({
-      container: this.props.meta.container !== 'false'
-    });
     innerClas = {
       body: true
     };
@@ -429,17 +458,21 @@ module.exports = query({
       }), reactify(this.props.body), extra('next', {
         dataPath: this.props.sein,
         curr: this.props.name
-      }), extra('comments'), extra('footer')
+      }), extra('comments'), extra('footer', {
+        container: this.props.meta.container
+      })
     ];
     if (this.props.meta.type === "post") {
       parts.splice(1, 0, extra('date'), extra('title'), extra('image'), extra('preview'), extra('author'));
     }
     return div({
-      className: outerClas
+      dataPath: this.state.curr,
+      key: this.state.curr
     }, [
       div({
         className: innerClas,
-        'data-path': this.props.path
+        'data-path': this.props.path,
+        key: 'body-inner'
       }, [
         div({
           key: "body" + this.props.path,
@@ -459,7 +492,7 @@ module.exports = query({
 }));
 
 
-},{"../actions/TreeActions.coffee":1,"../utils/util.coffee":25,"./Async.coffee":2,"./CommentsComponent.coffee":5,"./LoadComponent.coffee":11,"./Reactify.coffee":14,"classnames":26}],4:[function(require,module,exports){
+},{"../actions/TreeActions.coffee":1,"../stores/TreeStore.coffee":23,"../utils/util.coffee":25,"./Async.coffee":2,"./CommentsComponent.coffee":5,"./LoadComponent.coffee":11,"./Reactify.coffee":14,"classnames":26}],4:[function(require,module,exports){
 var div, recl, ref, textarea;
 
 recl = React.createClass;
@@ -679,9 +712,12 @@ module.exports = recl({
   onClick: function() {
     return this.submit();
   },
-  onKeyUp: function(e) {
+  onChange: function(e) {
     var email, valid;
-    email = this.$email.val();
+    email = e.target.value;
+    this.setState({
+      email: e.target.value
+    });
     valid = email.indexOf('@') !== -1 && email.indexOf('.') !== -1 && email.length > 7 && email.split(".")[1].length > 1 && email.split("@")[0].length > 0 && email.split("@")[1].length > 4;
     this.$email.toggleClass('valid', valid);
     this.$email.removeClass('error');
@@ -711,19 +747,21 @@ module.exports = recl({
     return this.$email = $('input.email');
   },
   render: function() {
-    var cont;
+    var cont, ref1, submit;
     if (this.state.submit === false) {
+      submit = (ref1 = this.props.submit) != null ? ref1 : "Sign up";
       cont = [
         input({
           key: "field",
           className: "email",
           placeholder: "your@email.com",
-          onKeyUp: this.onKeyUp
-        }, this.state.email), button({
+          onChange: this.onChange,
+          value: this.state.email
+        }), button({
           key: "submit",
           className: "submit",
           onClick: this.onClick
-        }, "Sign up")
+        }, submit)
       ];
     } else {
       cont = [
@@ -1364,9 +1402,7 @@ module.exports = query({
       history.pushState({}, "", util.basepath(href_parts.join("#")));
     }
     if (next !== this.props.path) {
-      ReactDOM.unmountComponentAtNode($('#body')[0]);
-      TreeActions.setCurr(next);
-      return rend(BodyComponent({}, ""), $('#body')[0]);
+      return TreeActions.setCurr(next);
     }
   },
   reset: function() {
@@ -1954,7 +1990,13 @@ module.exports = query({
     });
     return div({
       className: treeClas
-    }, [head({}, ""), body({}, "")]);
+    }, [
+      head({
+        key: 'head-container'
+      }, ""), body({
+        key: 'body-container'
+      }, "")
+    ]);
   }
 }));