From 9a5e4b3f54a4b971088ff5a9a7333759ec8fdb36 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Tue, 13 Oct 2015 18:07:33 +0900
Subject: [PATCH] restructure DONE

---
 .bowerrc                                      |    3 -
 .gitignore                                    |    7 +-
 finder-window.js => atom-lib/finder-window.js |    0
 main-window.js => atom-lib/main-window.js     |    5 +-
 {modules => atom-lib}/menu-template.js        |    0
 updater.js => atom-lib/updater.js             |    0
 bower.json                                    |   11 -
 browser/main/Components/AboutModal.jsx        |   38 -
 browser/main/Components/AddMemberModal.jsx    |   99 -
 browser/main/Components/ArticleDetail.jsx     |  209 -
 browser/main/Components/ArticleList.jsx       |   63 -
 browser/main/Components/CodeDeleteModal.jsx   |   55 -
 browser/main/Components/CodeEditModal.jsx     |   26 -
 browser/main/Components/CodeForm.jsx          |  162 -
 browser/main/Components/CodeViewer.jsx        |   53 -
 browser/main/Components/EditProfileModal.jsx  |  168 -
 browser/main/Components/HomeNavigator.jsx     |  109 -
 browser/main/Components/LaunchModal.jsx       |   79 -
 browser/main/Components/LogoutModal.jsx       |   42 -
 browser/main/Components/NoteDeleteModal.jsx   |   55 -
 browser/main/Components/NoteEditModal.jsx     |   27 -
 browser/main/Components/NoteForm.jsx          |  153 -
 browser/main/Components/PlanetCreateModal.jsx |  111 -
 browser/main/Components/PlanetHeader.jsx      |   86 -
 browser/main/Components/PlanetNavigator.jsx   |   76 -
 .../main/Components/PlanetSettingModal.jsx    |  190 -
 browser/main/Components/PreferencesModal.jsx  |  112 -
 browser/main/Components/TeamCreateModal.jsx   |   89 -
 browser/main/Components/TeamSettingsModal.jsx |  269 --
 browser/main/Components/TopBar.jsx            |   30 -
 browser/main/Containers/PlanetContainer.js    |  414 --
 .../{HomeContainer/index.js => HomePage.js}   |   10 +-
 .../Components => HomePage}/ArticleDetail.js  |    6 +-
 .../Components => HomePage}/ArticleList.js    |    4 +-
 .../ArticleNavigator.js                       |    2 +-
 .../components => HomePage}/ArticleTopBar.js  |    2 +-
 .../Components => HomePage}/UserNavigator.js  |    6 +-
 .../LoginContainer.js => LoginPage.js}        |   11 +-
 .../MainContainer.js => MainPage.js}          |    5 +-
 browser/main/Mixins/ArticleFilter.js          |   67 -
 browser/main/Mixins/AuthFilter.js             |   27 -
 browser/main/Mixins/ExternalLink.js           |    8 -
 browser/main/Mixins/ForceUpdate.js            |   14 -
 browser/main/Mixins/Helper.js                 |   33 -
 browser/main/Mixins/KeyCaster.js              |  100 -
 browser/main/Mixins/Markdown.js               |   14 -
 browser/main/Mixins/Modal.jsx                 |   42 -
 browser/main/Mixins/linkState.js              |   29 -
 browser/main/Services/Hq.js                   |   82 -
 browser/main/Services/socket.js               |   17 -
 .../SignupContainer.js => SignupPage.js}      |    9 +-
 browser/main/{HomeContainer => }/actions.js   |    0
 browser/main/index.js                         |   24 +-
 browser/main/{HomeContainer => }/reducer.js   |    0
 browser/styles/main/index.css                 | 3892 -----------------
 {modules => lib}/ace-modes.js                 |    0
 .../main/HomeContainer/lib => lib}/api.js     |   23 +-
 .../components/CodeEditor.js                  |    2 +-
 .../components}/ExternalLink.js               |    0
 .../components}/MarkdownPreview.js            |    2 +-
 .../Components => lib/components}/ModeIcon.js |    0
 .../components}/ProfileImage.js               |    0
 .../components/modal/ContactModal.js          |    6 +-
 .../components}/modal/CreateNewTeam.js        |    6 +-
 {browser/main/helpers => lib}/linkState.js    |    0
 .../HomeContainer/lib => lib}/markdown.js     |    0
 .../lib/modal/index.js => lib/modal.js        |    0
 {browser/main/helpers => lib}/openExternal.js |    0
 main.js                                       |    8 +-
 node_modules/boost                            |    1 +
 package.json                                  |    3 +-
 app.icns => resources/app.icns                |  Bin
 72 files changed, 79 insertions(+), 7117 deletions(-)
 delete mode 100644 .bowerrc
 rename finder-window.js => atom-lib/finder-window.js (100%)
 rename main-window.js => atom-lib/main-window.js (74%)
 rename {modules => atom-lib}/menu-template.js (100%)
 rename updater.js => atom-lib/updater.js (100%)
 delete mode 100644 bower.json
 delete mode 100644 browser/main/Components/AboutModal.jsx
 delete mode 100644 browser/main/Components/AddMemberModal.jsx
 delete mode 100644 browser/main/Components/ArticleDetail.jsx
 delete mode 100644 browser/main/Components/ArticleList.jsx
 delete mode 100644 browser/main/Components/CodeDeleteModal.jsx
 delete mode 100644 browser/main/Components/CodeEditModal.jsx
 delete mode 100644 browser/main/Components/CodeForm.jsx
 delete mode 100644 browser/main/Components/CodeViewer.jsx
 delete mode 100644 browser/main/Components/EditProfileModal.jsx
 delete mode 100644 browser/main/Components/HomeNavigator.jsx
 delete mode 100644 browser/main/Components/LaunchModal.jsx
 delete mode 100644 browser/main/Components/LogoutModal.jsx
 delete mode 100644 browser/main/Components/NoteDeleteModal.jsx
 delete mode 100644 browser/main/Components/NoteEditModal.jsx
 delete mode 100644 browser/main/Components/NoteForm.jsx
 delete mode 100644 browser/main/Components/PlanetCreateModal.jsx
 delete mode 100644 browser/main/Components/PlanetHeader.jsx
 delete mode 100644 browser/main/Components/PlanetNavigator.jsx
 delete mode 100644 browser/main/Components/PlanetSettingModal.jsx
 delete mode 100644 browser/main/Components/PreferencesModal.jsx
 delete mode 100644 browser/main/Components/TeamCreateModal.jsx
 delete mode 100644 browser/main/Components/TeamSettingsModal.jsx
 delete mode 100644 browser/main/Components/TopBar.jsx
 delete mode 100644 browser/main/Containers/PlanetContainer.js
 rename browser/main/{HomeContainer/index.js => HomePage.js} (87%)
 rename browser/main/{HomeContainer/Components => HomePage}/ArticleDetail.js (92%)
 rename browser/main/{HomeContainer/Components => HomePage}/ArticleList.js (95%)
 rename browser/main/{HomeContainer/Components => HomePage}/ArticleNavigator.js (97%)
 rename browser/main/{HomeContainer/components => HomePage}/ArticleTopBar.js (93%)
 rename browser/main/{HomeContainer/Components => HomePage}/UserNavigator.js (87%)
 rename browser/main/{Containers/LoginContainer.js => LoginPage.js} (91%)
 rename browser/main/{Containers/MainContainer.js => MainPage.js} (90%)
 delete mode 100644 browser/main/Mixins/ArticleFilter.js
 delete mode 100644 browser/main/Mixins/AuthFilter.js
 delete mode 100644 browser/main/Mixins/ExternalLink.js
 delete mode 100644 browser/main/Mixins/ForceUpdate.js
 delete mode 100644 browser/main/Mixins/Helper.js
 delete mode 100644 browser/main/Mixins/KeyCaster.js
 delete mode 100644 browser/main/Mixins/Markdown.js
 delete mode 100644 browser/main/Mixins/Modal.jsx
 delete mode 100644 browser/main/Mixins/linkState.js
 delete mode 100644 browser/main/Services/Hq.js
 delete mode 100644 browser/main/Services/socket.js
 rename browser/main/{Containers/SignupContainer.js => SignupPage.js} (94%)
 rename browser/main/{HomeContainer => }/actions.js (100%)
 rename browser/main/{HomeContainer => }/reducer.js (100%)
 delete mode 100644 browser/styles/main/index.css
 rename {modules => lib}/ace-modes.js (100%)
 rename {browser/main/HomeContainer/lib => lib}/api.js (72%)
 rename browser/main/Components/CodeEditor.jsx => lib/components/CodeEditor.js (98%)
 rename {browser/main/Components => lib/components}/ExternalLink.js (100%)
 rename {browser/main/Components => lib/components}/MarkdownPreview.js (95%)
 rename {browser/main/Components => lib/components}/ModeIcon.js (100%)
 rename {browser/main/Components => lib/components}/ProfileImage.js (100%)
 rename browser/main/Components/ContactModal.jsx => lib/components/modal/ContactModal.js (94%)
 rename {browser/main/HomeContainer/lib => lib/components}/modal/CreateNewTeam.js (98%)
 rename {browser/main/helpers => lib}/linkState.js (100%)
 rename {browser/main/HomeContainer/lib => lib}/markdown.js (100%)
 rename browser/main/HomeContainer/lib/modal/index.js => lib/modal.js (100%)
 rename {browser/main/helpers => lib}/openExternal.js (100%)
 create mode 120000 node_modules/boost
 rename app.icns => resources/app.icns (100%)

diff --git a/.bowerrc b/.bowerrc
deleted file mode 100644
index 0c16bd5a..00000000
--- a/.bowerrc
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "directory": "browser/vendor/"
-}
diff --git a/.gitignore b/.gitignore
index 3f4e490c..727c5017 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,4 @@
-build/
-node_modules/
-electron_build/
 .env
-dist/
-vendor/
+node_modules/*
+!node_modules/boost
 Boost-darwin-x64/
diff --git a/finder-window.js b/atom-lib/finder-window.js
similarity index 100%
rename from finder-window.js
rename to atom-lib/finder-window.js
diff --git a/main-window.js b/atom-lib/main-window.js
similarity index 74%
rename from main-window.js
rename to atom-lib/main-window.js
index b2a5b56d..5c6f70eb 100644
--- a/main-window.js
+++ b/atom-lib/main-window.js
@@ -1,4 +1,5 @@
 var BrowserWindow = require('browser-window')
+var path = require('path')
 
 var mainWindow = new BrowserWindow({
   width: 1080,
@@ -10,7 +11,9 @@ var mainWindow = new BrowserWindow({
   'standard-window': false
 })
 
-mainWindow.loadUrl('file://' + __dirname + '/browser/main/index.html')
+var url = path.resolve(__dirname, '../browser/main/index.html')
+
+mainWindow.loadUrl('file://' + url)
 
 mainWindow.setVisibleOnAllWorkspaces(true)
 
diff --git a/modules/menu-template.js b/atom-lib/menu-template.js
similarity index 100%
rename from modules/menu-template.js
rename to atom-lib/menu-template.js
diff --git a/updater.js b/atom-lib/updater.js
similarity index 100%
rename from updater.js
rename to atom-lib/updater.js
diff --git a/bower.json b/bower.json
deleted file mode 100644
index 85708203..00000000
--- a/bower.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "name": "codexen-app",
-  "dependencies": {
-    "react": "~0.13.3",
-    "fontawesome": "~4.3.0",
-    "react-router": "~0.13.3",
-    "reflux": "~0.2.8",
-    "moment": "~2.10.3",
-    "markdown-it": "~4.3.1"
-  }
-}
diff --git a/browser/main/Components/AboutModal.jsx b/browser/main/Components/AboutModal.jsx
deleted file mode 100644
index 030700c0..00000000
--- a/browser/main/Components/AboutModal.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-var React = require('react')
-
-var ExternalLink = require('../Mixins/ExternalLink')
-var KeyCaster = require('../Mixins/KeyCaster')
-
-module.exports = React.createClass({
-  mixins: [ExternalLink, KeyCaster('aboutModal')],
-  propTypes: {
-    close: React.PropTypes.func
-  },
-  onKeyCast: function (e) {
-    switch (e.status) {
-      case 'closeModal':
-        this.props.close()
-        break
-    }
-  },
-  render: function () {
-    var version = global.version
-    return (
-      <div className='PreferencesModal sideNavModal modal'>
-        <div className='about1'>
-          <img className='logo' src='resources/favicon-230x230.png'/>
-          <div className='appInfo'>Boost {version == null || version.length === 0 ? 'DEV version' : 'v' + version}</div>
-        </div>
-
-        <div className='about2'>
-          <div className='externalLabel'>External links</div>
-          <ul className='externalList'>
-            <li><a onClick={this.openExternal} href='http://b00st.io'>Boost Homepage <i className='fa fa-external-link'/></a></li>
-            <li><a>Regulation <i className='fa fa-external-link'/></a></li>
-            <li><a>Private policy <i className='fa fa-external-link'/></a></li>
-          </ul>
-        </div>
-      </div>
-    )
-  }
-})
diff --git a/browser/main/Components/AddMemberModal.jsx b/browser/main/Components/AddMemberModal.jsx
deleted file mode 100644
index 9a173f1a..00000000
--- a/browser/main/Components/AddMemberModal.jsx
+++ /dev/null
@@ -1,99 +0,0 @@
-var React = require('react')
-var Select = require('react-select')
-
-var LinkedState = require('../Mixins/LinkedState')
-
-var Hq = require('../Services/Hq')
-
-var KeyCaster = require('../Mixins/KeyCaster')
-
-var getOptions = function (input, callback) {
-  Hq.searchUser(input)
-    .then(function (res) {
-      callback(null, {
-        options: res.body.map(function (user) {
-          return {
-            label: user.name,
-            value: user.name
-          }
-        }),
-        complete: false
-      })
-    })
-    .catch(function (err) {
-      console.error(err)
-    })
-}
-
-module.exports = React.createClass({
-  mixins: [LinkedState, KeyCaster('addMemberModal')],
-  propTypes: {
-    team: React.PropTypes.object,
-    close: React.PropTypes.func
-  },
-  getInitialState: function () {
-    return {
-      userName: '',
-      role: 'member'
-    }
-  },
-  onKeyCast: function (e) {
-    switch (e.status) {
-      case 'closeModal':
-        this.props.close()
-        break
-      case 'submitAddMemberModal':
-        this.handleSubmit()
-        break
-    }
-  },
-  handleSubmit: function () {
-    this.setState({errorMessage: null}, function () {
-      Hq
-        .addMember(this.props.team.name, {
-          userName: this.state.userName,
-          role: this.state.role
-        })
-        .then(function (res) {
-          console.log(res.body)
-          this.props.close()
-        }.bind(this))
-        .catch(function (err) {
-          console.error(err)
-          if (err.status === 403) {
-            this.setState({errorMessage: err.response.body.message})
-          }
-        }.bind(this))
-    })
-  },
-  handleChange: function (value) {
-    this.setState({userName: value})
-  },
-  render: function () {
-    return (
-      <div className='AddMemberModal modal'>
-        <Select
-          name='userName'
-          value={this.state.userName}
-          placeholder='Username to add'
-          asyncOptions={getOptions}
-          onChange={this.handleChange}
-          className='userNameSelect'
-        />
-
-        <div className='formField'>
-          Add member as
-          <select valueLink={this.linkState('role')}>
-            <option value={'member'}>Member</option>
-            <option value={'owner'}>Owner</option>
-          </select>
-          role
-        </div>
-
-        {this.state.errorMessage != null ? (<p className='errorAlert'>{this.state.errorMessage}</p>) : null}
-
-        <button onClick={this.handleSubmit} className='submitButton'><i className='fa fa-check'/></button>
-      </div>
-    )
-  }
-})
diff --git a/browser/main/Components/ArticleDetail.jsx b/browser/main/Components/ArticleDetail.jsx
deleted file mode 100644
index 4cb67b75..00000000
--- a/browser/main/Components/ArticleDetail.jsx
+++ /dev/null
@@ -1,209 +0,0 @@
-var React = require('react')
-var moment = require('moment')
-var _ = require('lodash')
-
-var CodeEditor = require('./CodeEditor')
-var MarkdownPreview = require('./MarkdownPreview')
-var ModeIcon = require('./ModeIcon')
-var Select = require('react-select')
-
-var Modal = require('../Mixins/Modal')
-var ForceUpdate = require('../Mixins/ForceUpdate')
-var LinkedState = require('../Mixins/LinkedState')
-
-var aceModes = require('../../../modules/ace-modes')
-
-var modeOptions = aceModes.map(function (mode) {
-  return {
-    label: mode,
-    value: mode
-  }
-})
-
-module.exports = React.createClass({
-  mixins: [ForceUpdate(60000), Modal, LinkedState],
-  propTypes: {
-    currentArticle: React.PropTypes.object,
-    showOnlyWithTag: React.PropTypes.func,
-    planet: React.PropTypes.object,
-    switchDetailMode: React.PropTypes.func,
-    user: React.PropTypes.shape({
-      id: React.PropTypes.number,
-      name: React.PropTypes.string,
-      Folders: React.PropTypes.array
-    }),
-    article: React.PropTypes.object,
-    saveCurrentArticle: React.PropTypes.func,
-    detailMode: React.PropTypes.string
-  },
-  getInitialState: function () {
-    var article = this.props.currentArticle != null ? {
-      id: this.props.currentArticle.id,
-      title: this.props.currentArticle.title,
-      content: this.props.currentArticle.CurrentRevision.title,
-      tags: this.props.currentArticle.Tags.map(function (tag) {
-        return tag.name
-      }),
-      mode: this.props.currentArticle.mode,
-      status: this.props.currentArticle.status
-    } : null
-    // console.log('init staet')
-    // console.log(article)
-    return {
-      isEditModalOpen: false,
-      article: article
-    }
-  },
-  componentWillReceiveProps: function (nextProps) {
-    if (nextProps.detailMode === 'edit') {
-      var article = {
-        id: nextProps.currentArticle.id,
-        title: nextProps.currentArticle.title,
-        content: nextProps.currentArticle.CurrentRevision.content,
-        tags: nextProps.currentArticle.Tags.map(function (tag) {
-          return tag.name
-        }),
-        mode: nextProps.currentArticle.mode,
-        FolderId: nextProps.currentArticle.FolderId,
-        status: nextProps.currentArticle.status
-      }
-      this.setState({article: article})
-    }
-  },
-  openDeleteModal: function () {
-    if (this.props.article == null) return
-  },
-  handleFolderIdChange: function (FolderId) {
-    this.state.article.FolderId = FolderId
-    this.setState({article: this.state.article})
-  },
-  handleTagsChange: function (tag, tags) {
-    tags = _.uniq(tags, function (tag) {
-      return tag.value
-    })
-
-    this.state.article.tags = tags.map(function (tag) {
-      return tag.value
-    })
-    this.setState({article: this.state.article})
-  },
-  handleModeChange: function (mode) {
-    this.state.article.mode = mode
-    this.setState({article: this.state.article})
-  },
-  handleContentChange: function (e, value) {
-    var article = this.state.article
-    article.content = value
-    this.setState({article: article})
-  },
-  saveArticle: function () {
-    if (this.state.article.mode === '') {
-      return this.refs.mode.focus()
-    }
-    if (this.state.article.FolderId === '') {
-      return this.refs.folder.focus()
-    }
-    this.props.saveCurrentArticle(this.state.article)
-  },
-  render: function () {
-    if (this.props.currentArticle == null) {
-      return (
-        <div className='ArticleDetail'>
-          Nothing selected
-        </div>
-      )
-    }
-
-    if (this.props.detailMode === 'show') {
-      return this.renderViewer()
-    }
-    if (this.state.article == null) {
-      return (
-        <div className='ArticleDetail'>
-          Nothing selected
-        </div>
-      )
-    }
-    return this.renderEditor()
-  },
-  renderEditor: function () {
-    var article = this.state.article
-
-    var folderOptions = this.props.user.Folders.map(function (folder) {
-      return {
-        label: folder.name,
-        value: folder.id
-      }
-    })
-
-    return (
-      <div className='ArticleDetail edit'>
-        <div className='detailInfo'>
-          <div className='left'>
-            <Select ref='folder' onChange={this.handleFolderIdChange} clearable={false} options={folderOptions} placeholder='select folder...' value={article.FolderId} className='folder'/>
-            <Select onChange={this.handleTagsChange} clearable={false} multi={true} placeholder='add some tags...' allowCreate={true} value={article.tags} className='tags'/>
-          </div>
-          <div className='right'>
-            <button onClick={this.props.switchDetailMode('show')}>Cancel</button>
-            <button onClick={this.saveArticle} className='primary'>Save</button>
-          </div>
-        </div>
-        <div className='detailBody'>
-          <div className='detailPanel'>
-            <div className='header'>
-              <div className='title'>
-                <input ref='title' valueLink={this.linkState('article.title')}/>
-              </div>
-              <Select ref='mode' onChange={this.handleModeChange} clearable={false} options={modeOptions}placeholder='select mode...' value={article.mode} className='mode'/>
-            </div>
-            <CodeEditor onChange={this.handleContentChange} mode={article.mode} code={article.content}/>
-          </div>
-        </div>
-      </div>
-    )
-  },
-  renderViewer: function () {
-    var article = this.props.currentArticle
-    var tags = article.Tags.length > 0 ? article.Tags.map(function (tag) {
-      return (
-        <a key={tag.id}>{tag.name}</a>
-      )
-    }) : (
-      <span className='noTags'>Not tagged yet</span>
-    )
-
-    var folder = _.findWhere(this.props.user.Folders, {id: article.FolderId})
-    var folderName = folder != null ? folder.name : null
-
-    return (
-      <div className='ArticleDetail show'>
-        <div className='detailInfo'>
-          <div className='left'>
-            <div className='info'>
-              <i className='fa fa-fw fa-square'/> {folderName}&nbsp;
-              by {article.User.profileName}&nbsp;
-              Created {moment(article.createdAt).format('YYYY/MM/DD')}&nbsp;
-              Updated {moment(article.updatedAt).format('YYYY/MM/DD')}
-            </div>
-            <div className='tags'><i className='fa fa-fw fa-tags'/>{tags}</div>
-          </div>
-
-          <div className='right'>
-            <button onClick={this.props.switchDetailMode('edit')}><i className='fa fa-fw fa-edit'/></button>
-            <button><i className='fa fa-fw fa-trash'/></button>
-            <button><i className='fa fa-fw fa-share-alt'/></button>
-          </div>
-        </div>
-        <div className='detailBody'>
-          <div className='detailPanel'>
-            <div className='header'>
-              <ModeIcon className='mode' mode={article.mode}/>
-              <div className='title'>{article.title}</div>
-            </div>
-            {article.mode === 'markdown' ? <MarkdownPreview content={article.CurrentRevision.content}/> : <CodeEditor readOnly={true} onChange={this.handleContentChange} mode={article.mode} code={article.CurrentRevision.content}/>}
-          </div>
-        </div>
-      </div>
-    )
-  }
-})
diff --git a/browser/main/Components/ArticleList.jsx b/browser/main/Components/ArticleList.jsx
deleted file mode 100644
index 41eaed53..00000000
--- a/browser/main/Components/ArticleList.jsx
+++ /dev/null
@@ -1,63 +0,0 @@
-var React = require('react')
-var ReactRouter = require('react-router')
-var moment = require('moment')
-var _ = require('lodash')
-
-var ForceUpdate = require('../Mixins/ForceUpdate')
-var Markdown = require('../Mixins/Markdown')
-
-var ProfileImage = require('../Components/ProfileImage')
-var ModeIcon = require('../Components/ModeIcon')
-
-module.exports = React.createClass({
-  mixins: [ReactRouter.Navigation, ReactRouter.State, ForceUpdate(60000), Markdown],
-  propTypes: {
-    articles: React.PropTypes.array
-  },
-  handleArticleClick: function (article) {
-    return function () {
-      this.props.selectArticle(article.id)
-    }.bind(this)
-  },
-  render: function () {
-    var articles = this.props.articles.map(function (article) {
-      if (article == null) return null
-      var tags = _.isArray(article.Tags) && article.Tags.length > 0 ? article.Tags.map(function (tag) {
-        return (
-          <a key={tag.id}>#{tag.name}</a>
-        )
-      }.bind(this)) : (
-        <span>Not tagged yet</span>
-      )
-      var params = this.getParams()
-      var isActive = this.props.currentArticle.id === article.id
-
-      return (
-        <li key={'article-' + article.id}>
-          <div onClick={this.handleArticleClick(article)} className={'articleItem' + (isActive ? ' active' : '')}>
-            <div className='top'>
-              <i className='fa fa-fw fa-square'/>
-              by <ProfileImage className='profileImage' size='20' email={article.User.email}/> {article.User.profileName}
-            <span className='updatedAt'>{article.status != null ? article.status : moment(article.updatedAt).fromNow()}</span>
-            </div>
-            <div className='middle'>
-              <ModeIcon className='mode' mode={article.mode}/> <div className='title'>{article.status !== 'new' ? article.title : '(New article)'}</div>
-            </div>
-            <div className='bottom'>
-              <div className='tags'><i className='fa fa-fw fa-tags'/>{tags}</div>
-            </div>
-          </div>
-          <div className='divider'></div>
-        </li>
-      )
-    }.bind(this))
-
-    return (
-      <div className='ArticleList'>
-        <ul ref='articles'>
-          {articles}
-        </ul>
-      </div>
-    )
-  }
-})
diff --git a/browser/main/Components/CodeDeleteModal.jsx b/browser/main/Components/CodeDeleteModal.jsx
deleted file mode 100644
index e6ef467e..00000000
--- a/browser/main/Components/CodeDeleteModal.jsx
+++ /dev/null
@@ -1,55 +0,0 @@
-var React = require('react')
-
-var Hq = require('../Services/Hq')
-
-var KeyCaster = require('../Mixins/KeyCaster')
-
-var PlanetStore = require('../Stores/PlanetStore')
-
-module.exports = React.createClass({
-  mixins: [KeyCaster('codeDeleteModal')],
-  propTypes: {
-    planet: React.PropTypes.object,
-    code: React.PropTypes.object,
-    close: React.PropTypes.func
-  },
-  onKeyCast: function (e) {
-    switch (e.status) {
-      case 'submitCodeDeleteModal':
-        this.submit()
-        break
-      case 'closeModal':
-        this.props.close()
-        break
-    }
-  },
-  submit: function () {
-    var planet = this.props.planet
-    Hq.destroyCode(planet.Owner.name, planet.name, this.props.code.localId)
-      .then(function (res) {
-        PlanetStore.Actions.destroyCode(res.body)
-        this.props.close()
-      }.bind(this))
-      .catch(function (err) {
-        console.error(err)
-      })
-  },
-  render: function () {
-    return (
-      <div className='CodeDeleteModal modal'>
-        <div className='modal-header'>
-          <h1>Delete Code</h1>
-        </div>
-        <div className='modal-body'>
-          <p>Are you sure to delete it?</p>
-        </div>
-        <div className='modal-footer'>
-          <div className='modal-control'>
-            <button onClick={this.props.close} className='btn-default'>Cancel</button>
-            <button ref='submit' onClick={this.submit} className='btn-primary'>Delete</button>
-          </div>
-        </div>
-      </div>
-    )
-  }
-})
diff --git a/browser/main/Components/CodeEditModal.jsx b/browser/main/Components/CodeEditModal.jsx
deleted file mode 100644
index 7b070db6..00000000
--- a/browser/main/Components/CodeEditModal.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-var React = require('react')
-var CodeForm = require('./CodeForm')
-
-module.exports = React.createClass({
-  propTypes: {
-    close: React.PropTypes.func,
-    code: React.PropTypes.object,
-    planet: React.PropTypes.object
-  },
-  componentDidMount: function () {
-    // TODO: Hacked!! should fix later
-    setTimeout(function () {
-      React.findDOMNode(this.refs.form.refs.description).focus()
-    }.bind(this), 1)
-  },
-  render: function () {
-    return (
-      <div className='CodeEditModal modal'>
-        <div className='modal-header'>
-          <h1>Edit Code</h1>
-        </div>
-        <CodeForm ref='form' code={this.props.code} planet={this.props.planet} close={this.props.close}/>
-      </div>
-    )
-  }
-})
diff --git a/browser/main/Components/CodeForm.jsx b/browser/main/Components/CodeForm.jsx
deleted file mode 100644
index 0c2c3972..00000000
--- a/browser/main/Components/CodeForm.jsx
+++ /dev/null
@@ -1,162 +0,0 @@
-var React = require('react')
-var CodeEditor = require('./CodeEditor')
-var Select = require('react-select')
-
-var Hq = require('../Services/Hq')
-
-var LinkedState = require('../Mixins/LinkedState')
-var KeyCaster = require('../Mixins/KeyCaster')
-
-var PlanetStore = require('../Stores/PlanetStore')
-
-var aceModes = require('../../../modules/ace-modes')
-
-var getOptions = function (input, callback) {
-  Hq.searchTag(input)
-    .then(function (res) {
-      callback(null, {
-        options: res.body.map(function (tag) {
-          return {
-            label: tag.name,
-            value: tag.name
-          }
-        }),
-        complete: false
-      })
-    })
-    .catch(function (err) {
-      console.log(err)
-    })
-}
-
-module.exports = React.createClass({
-  mixins: [LinkedState, KeyCaster('codeForm')],
-  propTypes: {
-    planet: React.PropTypes.object,
-    close: React.PropTypes.func,
-    transitionTo: React.PropTypes.func,
-    code: React.PropTypes.object
-  },
-  getInitialState: function () {
-    var code = Object.assign({
-      description: '',
-      mode: '',
-      content: '',
-      Tags: []
-    }, this.props.code)
-
-    code.Tags = code.Tags.map(function (tag) {
-      return {
-        label: tag.name,
-        value: tag.name
-      }
-    })
-
-    return {
-      code: code
-    }
-  },
-  onKeyCast: function (e) {
-    switch (e.status) {
-      case 'submitCodeForm':
-        this.submit()
-        break
-      case 'closeModal':
-        this.props.close()
-        break
-    }
-  },
-  handleModeChange: function (selected) {
-    var code = this.state.code
-    code.mode = selected
-    this.setState({code: code})
-  },
-  handleTagsChange: function (selected, all) {
-    var code = this.state.code
-    code.Tags = all
-    this.setState({code: code})
-  },
-  handleContentChange: function (e, value) {
-    var code = this.state.code
-    code.content = value
-    this.setState({code: code})
-  },
-  submit: function () {
-    var planet = this.props.planet
-    var code = this.state.code
-    code.Tags = code.Tags.map(function (tag) {
-      return tag.value
-    })
-    if (this.props.code == null) {
-      Hq.createCode(planet.Owner.name, planet.name, this.state.code)
-        .then(function (res) {
-          var code = res.body
-          PlanetStore.Actions.updateCode(code)
-          this.props.close()
-          this.props.transitionTo('codes', {userName: planet.Owner.name, planetName: planet.name, localId: code.localId})
-        }.bind(this))
-        .catch(function (err) {
-          console.error(err)
-        })
-    } else {
-      Hq.updateCode(planet.Owner.name, planet.name, this.props.code.localId, this.state.code)
-        .then(function (res) {
-          var code = res.body
-          PlanetStore.Actions.updateCode(code)
-          this.props.close()
-        }.bind(this))
-    }
-  },
-  handleKeyDown: function (e) {
-    if (e.keyCode === 13 && e.metaKey) {
-      this.submit()
-      e.stopPropagation()
-    }
-  },
-  render: function () {
-    var modeOptions = aceModes.map(function (mode) {
-      return {
-        label: mode,
-        value: mode
-      }
-    })
-    return (
-      <div className='CodeForm'>
-        <div className='modal-body'>
-          <div className='form-group'>
-            <textarea ref='description' className='codeDescription block-input' valueLink={this.linkState('code.description')} placeholder='Description'/>
-          </div>
-          <div className='form-group'>
-            <Select
-              name='mode'
-              className='modeSelect'
-              value={this.state.code.mode}
-              placeholder='Select Language'
-              options={modeOptions}
-              onChange={this.handleModeChange}/>
-          </div>
-          <div className='form-group'>
-            <CodeEditor onChange={this.handleContentChange} code={this.state.code.content} mode={this.state.code.mode}/>
-          </div>
-          <div className='form-group'>
-            <Select
-              name='Tags'
-              multi={true}
-              allowCreate={true}
-              value={this.state.code.Tags}
-              placeholder='Tags...'
-              asyncOptions={getOptions}
-              onChange={this.handleTagsChange}
-            />
-          </div>
-        </div>
-        <div className='modal-footer'>
-          <div className='modal-control'>
-            <button onClick={this.props.close} className='btn-default'>Cancel</button>
-            <button onClick={this.submit} className='btn-primary'>{this.props.code == null ? 'Launch' : 'Relaunch'}</button>
-          </div>
-        </div>
-      </div>
-    )
-  }
-})
diff --git a/browser/main/Components/CodeViewer.jsx b/browser/main/Components/CodeViewer.jsx
deleted file mode 100644
index 084b1447..00000000
--- a/browser/main/Components/CodeViewer.jsx
+++ /dev/null
@@ -1,53 +0,0 @@
-var React = require('react')
-
-var ace = window.ace
-
-module.exports = React.createClass({
-  propTypes: {
-    code: React.PropTypes.string,
-    mode: React.PropTypes.string,
-    className: React.PropTypes.string
-  },
-  componentDidMount: function () {
-    var el = React.findDOMNode(this.refs.target)
-    var editor = ace.edit(el)
-    editor.$blockScrolling = Infinity
-    editor.setValue(this.props.code)
-    editor.renderer.setShowGutter(false)
-    editor.setReadOnly(true)
-    editor.setTheme('ace/theme/xcode')
-    editor.setHighlightActiveLine(false)
-    editor.clearSelection()
-
-    var session = editor.getSession()
-    if (this.props.mode != null && this.props.mode.length > 0) {
-      session.setMode('ace/mode/' + this.props.mode)
-    } else {
-      session.setMode('ace/mode/text')
-    }
-    session.setUseSoftTabs(true)
-    session.setOption('useWorker', false)
-    session.setUseWrapMode(true)
-
-    this.setState({editor: editor})
-  },
-  componentDidUpdate: function (prevProps) {
-    if (this.state.editor.getValue() !== this.props.code) {
-      this.state.editor.setValue(this.props.code)
-      this.state.editor.clearSelection()
-    }
-    if (prevProps.mode !== this.props.mode) {
-      var session = this.state.editor.getSession()
-      if (this.props.mode != null && this.props.mode.length > 0) {
-        session.setMode('ace/mode/' + this.props.mode)
-      } else {
-        session.setMode('ace/mode/text')
-      }
-    }
-  },
-  render: function () {
-    return (
-      <div ref='target' className={this.props.className}></div>
-    )
-  }
-})
diff --git a/browser/main/Components/EditProfileModal.jsx b/browser/main/Components/EditProfileModal.jsx
deleted file mode 100644
index df681b85..00000000
--- a/browser/main/Components/EditProfileModal.jsx
+++ /dev/null
@@ -1,168 +0,0 @@
-var React = require('react')
-
-var Hq = require('../Services/Hq')
-
-var LinkedState = require('../Mixins/LinkedState')
-var KeyCaster = require('../Mixins/KeyCaster')
-
-var UserStore = require('../Stores/UserStore')
-
-module.exports = React.createClass({
-  mixins: [LinkedState, KeyCaster('editProfileModal')],
-  propTypes: {
-    user: React.PropTypes.shape({
-      name: React.PropTypes.string,
-      profileName: React.PropTypes.string,
-      email: React.PropTypes.string
-    }),
-    close: React.PropTypes.func
-  },
-  getInitialState: function () {
-    var user = this.props.user
-    return {
-      currentTab: 'userInfo',
-      user: {
-        profileName: user.profileName,
-        email: user.email
-      },
-      userSubmitStatus: null,
-      password: {
-        currentPassword: '',
-        newPassword: '',
-        passwordConfirmation: ''
-      },
-      passwordSubmitStatus: null
-    }
-  },
-  onKeyCast: function (e) {
-    switch (e.status) {
-      case 'closeModal':
-        this.props.close()
-        break
-    }
-  },
-  selectTab: function (tabName) {
-    return function () {
-      this.setState({currentTab: tabName})
-    }.bind(this)
-  },
-  saveUserInfo: function () {
-    this.setState({
-      userSubmitStatus: 'sending'
-    }, function () {
-      Hq.updateUser(this.props.user.name, this.state.user)
-        .then(function (res) {
-          this.setState({userSubmitStatus: 'done'}, function () {
-            localStorage.setItem('currentUser', JSON.stringify(res.body))
-            UserStore.Actions.update(res.body)
-          })
-        }.bind(this))
-        .catch(function (err) {
-          console.error(err)
-          this.setState({userSubmitStatus: 'error'})
-        }.bind(this))
-    })
-  },
-  savePassword: function () {
-    this.setState({
-      passwordSubmitStatus: 'sending'
-    }, function () {
-      Hq.changePassword(this.state.password)
-        .then(function (res) {
-          this.setState({
-            passwordSubmitStatus: 'done',
-            currentPassword: '',
-            newPassword: '',
-            passwordConfirmation: ''
-          })
-        }.bind(this))
-        .catch(function (err) {
-          console.error(err)
-          this.setState({
-            passwordSubmitStatus: 'error',
-            currentPassword: '',
-            newPassword: '',
-            passwordConfirmation: ''
-          })
-        }.bind(this))
-    })
-  },
-  render: function () {
-    var content
-
-    switch (this.state.currentTab) {
-      case 'userInfo':
-        content = this.renderUserInfoTab()
-        break
-      case 'password':
-        content = this.renderPasswordTab()
-        break
-    }
-
-    return (
-      <div className='EditProfileModal sideNavModal modal'>
-        <div className='leftPane'>
-          <div className='modalLabel'>Edit profile</div>
-          <div className='tabList'>
-            <button className={this.state.currentTab === 'userInfo' ? 'active' : ''} onClick={this.selectTab('userInfo')}><i className='fa fa-user fa-fw'/> User Info</button>
-            <button className={this.state.currentTab === 'password' ? 'active' : ''} onClick={this.selectTab('password')}><i className='fa fa-lock fa-fw'/> Password</button>
-          </div>
-        </div>
-        <div className='rightPane'>
-          {content}
-        </div>
-      </div>
-    )
-  },
-  renderUserInfoTab: function () {
-    return (
-      <div className='userInfoTab tab'>
-        <div className='formField'>
-          <label>Profile Name</label>
-          <input valueLink={this.linkState('user.profileName')}/>
-        </div>
-        <div className='formField'>
-          <label>E-mail</label>
-          <input valueLink={this.linkState('user.email')}/>
-        </div>
-        <div className='formConfirm'>
-          <button disabled={this.state.userSubmitStatus === 'sending'} onClick={this.saveUserInfo}>Save</button>
-
-          <div className={'alertInfo' + (this.state.userSubmitStatus === 'sending' ? '' : ' hide')}>on Sending...</div>
-
-          <div className={'alertError' + (this.state.userSubmitStatus === 'error' ? '' : ' hide')}>Connection failed.. Try again.</div>
-
-          <div className={'alertSuccess' + (this.state.userSubmitStatus === 'done' ? '' : ' hide')}>Successfully done!!</div>
-        </div>
-      </div>
-    )
-  },
-  renderPasswordTab: function () {
-    return (
-      <div className='passwordTab tab'>
-        <div className='formField'>
-          <label>Current password</label>
-          <input type='password' valueLink={this.linkState('password.currentPassword')}/>
-        </div>
-        <div className='formField'>
-          <label>New password</label>
-          <input type='password' valueLink={this.linkState('password.newPassword')}/>
-        </div>
-        <div className='formField'>
-          <label>Confirmation</label>
-          <input type='password' valueLink={this.linkState('password.passwordConfirmation')}/>
-        </div>
-
-        <div className='formConfirm'>
-          <button disabled={this.state.password.newPassword.length === 0 || this.state.password.newPassword !== this.state.password.passwordConfirmation || this.state.passwordSubmitStatus === 'sending'} onClick={this.savePassword}>Save</button>
-
-          <div className={'alertInfo' + (this.state.passwordSubmitStatus === 'sending' ? '' : ' hide')}>on Sending...</div>
-
-          <div className={'alertError' + (this.state.passwordSubmitStatus === 'error' ? '' : ' hide')}>Connection failed.. Try again.</div>
-
-          <div className={'alertSuccess' + (this.state.passwordSubmitStatus === 'done' ? '' : ' hide')}>Successfully done!!</div>
-        </div>
-      </div>
-    )
-  }
-})
diff --git a/browser/main/Components/HomeNavigator.jsx b/browser/main/Components/HomeNavigator.jsx
deleted file mode 100644
index 64c9f33f..00000000
--- a/browser/main/Components/HomeNavigator.jsx
+++ /dev/null
@@ -1,109 +0,0 @@
-var React = require('react')
-var ReactRouter = require('react-router')
-var Navigation = ReactRouter.Navigation
-var State = ReactRouter.State
-var Link = ReactRouter.Link
-var Reflux = require('reflux')
-var _ = require('lodash')
-
-var Modal = require('../Mixins/Modal')
-
-var UserStore = require('../Stores/UserStore')
-
-var PreferencesModal = require('./PreferencesModal')
-var PlanetCreateModal = require('./PlanetCreateModal')
-var TeamCreateModal = require('./TeamCreateModal')
-var LogoutModal = require('./LogoutModal')
-var ProfileImage = require('./ProfileImage')
-
-module.exports = React.createClass({
-  mixins: [Navigation, State, Reflux.listenTo(UserStore, 'onUserChange'), Modal],
-  getInitialState: function () {
-    return {
-      isPlanetCreateModalOpen: false,
-      currentUser: JSON.parse(localStorage.getItem('currentUser'))
-    }
-  },
-  onUserChange: function (res) {
-    switch (res.status) {
-      case 'userUpdated':
-        var user = res.data
-        var currentUser = this.state.currentUser
-        if (currentUser.id === user.id) {
-          this.setState({currentUser: user})
-          return
-        }
-
-        if (user.userType === 'team') {
-          var isMyTeam = user.Members.some(function (member) {
-            if (currentUser.id === member.id) {
-              return true
-            }
-            return false
-          })
-
-          if (isMyTeam) {
-            var isNew = !currentUser.Teams.some(function (team, index) {
-              if (user.id === team.id) {
-                currentUser.Teams.splice(index, 1, user)
-                return true
-              }
-              return false
-            })
-
-            if (isNew) {
-              currentUser.Teams.push(user)
-            }
-
-            this.setState({currentUser: currentUser})
-          }
-        }
-        break
-    }
-  },
-  openTeamCreateModal: function () {
-    this.openModal(TeamCreateModal, {user: this.state.currentUser, transitionTo: this.transitionTo})
-  },
-  handleLogoutClick: function () {
-    this.openModal(LogoutModal, {transitionTo: this.transitionTo})
-  },
-  switchUserByIndex: function (index) {
-    var userProp = this.refs.users.props.children[index - 1].props
-    this.transitionTo('user', {userId: userProp.id})
-  },
-  render: function () {
-    var params = this.getParams()
-
-    if (this.state.currentUser == null) {
-      return null
-    }
-    console.log(this.state.currentUser.Teams)
-
-    var users = [this.state.currentUser]
-    if (_.isArray(this.state.currentUser.Teams)) users = users.concat(this.state.currentUser.Teams)
-
-    var userButtons = users.map(function (user, index) {
-      return (
-        <li key={'user-' + user.id}>
-          <Link to='user' params={{userId: user.id}}>
-            {user.userType === 'person' ? (<ProfileImage email={user.email} size='44'/>): user.name[0]}
-            <div className='userTooltip'>{user.name}</div>
-          </Link>
-          {index < 9 ? (<div className='shortCut'>⌘{index + 1}</div>) : null}
-        </li>
-      )
-    })
-
-    return (
-      <div className='HomeNavigator'>
-        <ul ref='users' className='userList'>
-          {userButtons}
-        </ul>
-        <button onClick={this.openTeamCreateModal} className='newTeamButton'>
-          <i className='fa fa-plus'/>
-          <div className='tooltip'>Create new team</div>
-        </button>
-      </div>
-    )
-  }
-})
diff --git a/browser/main/Components/LaunchModal.jsx b/browser/main/Components/LaunchModal.jsx
deleted file mode 100644
index d7ac6de2..00000000
--- a/browser/main/Components/LaunchModal.jsx
+++ /dev/null
@@ -1,79 +0,0 @@
-var React = require('react')
-
-var CodeForm = require('./CodeForm')
-var NoteForm = require('./NoteForm')
-
-module.exports = React.createClass({
-  propTypes: {
-    planet: React.PropTypes.object,
-    transitionTo: React.PropTypes.func,
-    close: React.PropTypes.func
-  },
-  getInitialState: function () {
-    return {
-      currentTab: 'code'
-    }
-  },
-  componentDidMount: function () {
-    var codeButton = React.findDOMNode(this.refs.codeButton)
-    codeButton.addEventListener('keydown', this.handleKeyDown)
-    React.findDOMNode(this.refs.noteButton).addEventListener('keydown', this.handleKeyDown)
-    codeButton.focus()
-  },
-  componentWillUnmount: function () {
-    React.findDOMNode(this.refs.codeButton).removeEventListener('keydown', this.handleKeyDown)
-    React.findDOMNode(this.refs.noteButton).removeEventListener('keydown', this.handleKeyDown)
-  },
-  handleKeyDown: function (e) {
-    if (e.keyCode === 37 && e.metaKey) {
-      this.selectCodeTab()
-      e.stopPropagation()
-      return
-    }
-    if (e.keyCode === 39 && e.metaKey) {
-      this.selectNoteTab()
-      e.stopPropagation()
-      return
-    }
-    if (e.keyCode === 9) {
-      if (this.state.currentTab === 'code') React.findDOMNode(this.refs.form.refs.description).focus()
-      else React.findDOMNode(this.refs.form.refs.title).focus()
-
-      e.preventDefault()
-    }
-  },
-  selectCodeTab: function () {
-    this.setState({currentTab: 'code'}, function () {
-      React.findDOMNode(this.refs.codeButton).focus()
-    })
-  },
-  selectNoteTab: function () {
-    this.setState({currentTab: 'note'}, function () {
-      React.findDOMNode(this.refs.noteButton).focus()
-    })
-  },
-  render: function () {
-    var modalBody
-    if (this.state.currentTab === 'code') {
-      modalBody = (
-        <CodeForm ref='form' planet={this.props.planet} transitionTo={this.props.transitionTo} close={this.props.close}/>
-      )
-    } else {
-      modalBody = (
-        <NoteForm ref='form' planet={this.props.planet} transitionTo={this.props.transitionTo} close={this.props.close}/>
-      )
-    }
-
-    return (
-      <div className='LaunchModal modal'>
-        <div className='modal-header'>
-          <div className='modal-tab'>
-            <button ref='codeButton' className={this.state.currentTab === 'code' ? 'btn-primary active' : 'btn-default'} onClick={this.selectCodeTab}>Code</button>
-            <button ref='noteButton' className={this.state.currentTab === 'note' ? 'btn-primary active' : 'btn-default'} onClick={this.selectNoteTab}>Note</button>
-          </div>
-        </div>
-        {modalBody}
-      </div>
-    )
-  }
-})
diff --git a/browser/main/Components/LogoutModal.jsx b/browser/main/Components/LogoutModal.jsx
deleted file mode 100644
index c7bdc272..00000000
--- a/browser/main/Components/LogoutModal.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-var React = require('react')
-
-var socket = require('../Services/socket')
-
-var KeyCaster = require('../Mixins/KeyCaster')
-
-module.exports = React.createClass({
-  mixins: [KeyCaster('logoutModal')],
-  propTypes: {
-    transitionTo: React.PropTypes.func,
-    close: React.PropTypes.func
-  },
-  onKeyCast: function (e) {
-    switch (e.status) {
-      case 'closeModal':
-        this.props.close()
-        break
-      case 'submitLogoutModal':
-        this.logout()
-        break
-    }
-  },
-  logout: function () {
-    localStorage.removeItem('currentUser')
-    localStorage.removeItem('token')
-    socket.reconnect()
-
-    this.props.transitionTo('login')
-    this.props.close()
-  },
-  render: function () {
-    return (
-      <div className='LogoutModal modal'>
-        <div className='messageLabel'>Are you sure to log out?</div>
-        <div className='formControl'>
-          <button onClick={this.props.close}>Cancel</button>
-          <button className='logoutButton' onClick={this.logout}>Log out</button>
-        </div>
-      </div>
-    )
-  }
-})
diff --git a/browser/main/Components/NoteDeleteModal.jsx b/browser/main/Components/NoteDeleteModal.jsx
deleted file mode 100644
index 379b2925..00000000
--- a/browser/main/Components/NoteDeleteModal.jsx
+++ /dev/null
@@ -1,55 +0,0 @@
-var React = require('react')
-
-var Hq = require('../Services/Hq')
-
-var KeyCaster = require('../Mixins/KeyCaster')
-
-var PlanetStore = require('../Stores/PlanetStore')
-
-module.exports = React.createClass({
-  mixins: [KeyCaster('noteDeleteModal')],
-  propTypes: {
-    planet: React.PropTypes.object,
-    note: React.PropTypes.object,
-    close: React.PropTypes.func
-  },
-  onKeyCast: function (e) {
-    switch (e.status) {
-      case 'submitNoteDeleteModal':
-        this.submit()
-        break
-      case 'closeModal':
-        this.props.close()
-        break
-    }
-  },
-  submit: function () {
-    var planet = this.props.planet
-    Hq.destroyNote(planet.Owner.name, planet.name, this.props.note.localId)
-      .then(function (res) {
-        PlanetStore.Actions.destroyNote(res.body)
-        this.props.close()
-      }.bind(this))
-      .catch(function (err) {
-        console.error(err)
-      })
-  },
-  render: function () {
-    return (
-      <div className='NoteDeleteModal modal'>
-        <div className='modal-header'>
-          <h1>Delete Note</h1>
-        </div>
-        <div className='modal-body'>
-          <p>Are you sure to delete it?</p>
-        </div>
-        <div className='modal-footer'>
-          <div className='modal-control'>
-            <button onClick={this.props.close} className='btn-default'>Cancel</button>
-            <button ref='submit' onClick={this.submit} className='btn-primary'>Delete</button>
-          </div>
-        </div>
-      </div>
-    )
-  }
-})
diff --git a/browser/main/Components/NoteEditModal.jsx b/browser/main/Components/NoteEditModal.jsx
deleted file mode 100644
index cfea0469..00000000
--- a/browser/main/Components/NoteEditModal.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-var React = require('react')
-
-var NoteForm = require('./NoteForm')
-
-module.exports = React.createClass({
-  propTypes: {
-    close: React.PropTypes.func,
-    note: React.PropTypes.object,
-    planet: React.PropTypes.object
-  },
-  componentDidMount: function () {
-    // TODO: Hacked!! should fix later
-    setTimeout(function () {
-      React.findDOMNode(this.refs.form.refs.title).focus()
-    }.bind(this), 1)
-  },
-  render: function () {
-    return (
-      <div className='NoteEditModal modal'>
-        <div className='modal-header'>
-          <h1>Edit Note</h1>
-        </div>
-        <NoteForm ref='form' note={this.props.note} planet={this.props.planet} close={this.props.close}/>
-      </div>
-    )
-  }
-})
diff --git a/browser/main/Components/NoteForm.jsx b/browser/main/Components/NoteForm.jsx
deleted file mode 100644
index dcd8a329..00000000
--- a/browser/main/Components/NoteForm.jsx
+++ /dev/null
@@ -1,153 +0,0 @@
-var React = require('react')
-var Select = require('react-select')
-
-var Hq = require('../Services/Hq')
-
-var LinkedState = require('../Mixins/LinkedState')
-var Markdown = require('../Mixins/Markdown')
-var KeyCaster = require('../Mixins/KeyCaster')
-
-var PlanetStore = require('../Stores/PlanetStore')
-
-var CodeEditor = require('./CodeEditor')
-var MarkdownPreview = require('./MarkdownPreview')
-
-var getOptions = function (input, callback) {
-  Hq.searchTag(input)
-    .then(function (res) {
-      callback(null, {
-        options: res.body.map(function (tag) {
-          return {
-            label: tag.name,
-            value: tag.name
-          }
-        }),
-        complete: false
-      })
-    })
-    .catch(function (err) {
-      console.log(err)
-    })
-}
-
-var EDIT_MODE = 0
-var PREVIEW_MODE = 1
-
-module.exports = React.createClass({
-  mixins: [LinkedState, Markdown, KeyCaster('noteForm')],
-  propTypes: {
-    planet: React.PropTypes.object,
-    close: React.PropTypes.func,
-    transitionTo: React.PropTypes.func,
-    note: React.PropTypes.object
-  },
-  getInitialState: function () {
-    var note = Object.assign({
-      title: '',
-      content: '',
-      Tags: []
-    }, this.props.note)
-    note.Tags = note.Tags.map(function (tag) {
-      return {
-        label: tag.name,
-        value: tag.name
-      }
-    })
-    return {
-      note: note,
-      mode: EDIT_MODE
-    }
-  },
-  onKeyCast: function (e) {
-    switch (e.status) {
-      case 'submitNoteForm':
-        this.submit()
-        break
-      case 'closeModal':
-        this.props.close()
-        break
-    }
-  },
-  handleTagsChange: function (selected, all) {
-    var note = this.state.note
-    note.Tags = all
-    this.setState({note: note})
-  },
-  handleContentChange: function (e, value) {
-    var note = this.state.note
-    note.content = value
-    this.setState({note: note})
-  },
-  togglePreview: function () {
-    this.setState({mode: this.state.mode === EDIT_MODE ? PREVIEW_MODE : EDIT_MODE})
-  },
-  submit: function () {
-    var planet = this.props.planet
-    var note = this.state.note
-    note.Tags = note.Tags.map(function (tag) {
-      return tag.value
-    })
-
-    if (this.props.note == null) {
-      Hq.createNote(planet.Owner.name, planet.name, this.state.note)
-        .then(function (res) {
-          var note = res.body
-          PlanetStore.Actions.updateNote(note)
-          this.props.close()
-          this.props.transitionTo('notes', {userName: planet.Owner.name, planetName: planet.name, localId: note.localId})
-        }.bind(this))
-        .catch(function (err) {
-          console.error(err)
-        })
-    } else {
-      Hq.updateNote(planet.Owner.name, planet.name, this.props.note.localId, this.state.note)
-        .then(function (res) {
-          var note = res.body
-          PlanetStore.Actions.updateNote(note)
-          this.props.close()
-        }.bind(this))
-    }
-  },
-  render: function () {
-    var content = this.state.mode === EDIT_MODE ? (
-      <div className='form-group'>
-        <CodeEditor onChange={this.handleContentChange} code={this.state.note.content} mode={'markdown'}/>
-      </div>
-    ) : (
-      <div className='form-group relative'>
-        <div className='previewMode'>Preview mode</div>
-        <MarkdownPreview className='marked' content={this.state.note.content}/>
-      </div>
-    )
-
-    return (
-      <div className='NoteForm'>
-        <div className='modal-body'>
-          <div className='form-group'>
-            <input ref='title' className='block-input' valueLink={this.linkState('note.title')} placeholder='Title'/>
-          </div>
-          {content}
-          <div className='form-group'>
-            <Select
-                name='Tags'
-                multi={true}
-                allowCreate={true}
-                value={this.state.note.Tags}
-                placeholder='Tags...'
-                asyncOptions={getOptions}
-                onChange={this.handleTagsChange}
-            />
-          </div>
-        </div>
-
-        <div className='modal-footer'>
-          <button onClick={this.togglePreview} className={'btn-default' + (this.state.mode === PREVIEW_MODE ? ' active' : '')}>Preview mode</button>
-          <div className='modal-control'>
-            <button onClick={this.props.close} className='btn-default'>Cancel</button>
-            <button onClick={this.submit} className='btn-primary'>Launch</button>
-          </div>
-        </div>
-      </div>
-    )
-  }
-})
diff --git a/browser/main/Components/PlanetCreateModal.jsx b/browser/main/Components/PlanetCreateModal.jsx
deleted file mode 100644
index 39716bc4..00000000
--- a/browser/main/Components/PlanetCreateModal.jsx
+++ /dev/null
@@ -1,111 +0,0 @@
-/* global localStorage */
-
-var React = require('react')
-
-var Hq = require('../Services/Hq')
-
-var LinkedState = require('../Mixins/LinkedState')
-var KeyCaster = require('../Mixins/KeyCaster')
-
-var PlanetStore = require('../Stores/PlanetStore')
-
-module.exports = React.createClass({
-  mixins: [LinkedState, KeyCaster('planetCreateModal')],
-  propTypes: {
-    ownerName: React.PropTypes.string,
-    transitionTo: React.PropTypes.func,
-    close: React.PropTypes.func
-  },
-  getInitialState: function () {
-    var currentUser = JSON.parse(localStorage.getItem('currentUser'))
-    var ownerName = this.props.ownerName != null ? this.props.ownerName : currentUser.name
-    return {
-      user: currentUser,
-      planet: {
-        name: '',
-        public: true
-      },
-      ownerName: ownerName,
-      error: null
-    }
-  },
-  componentDidMount: function () {
-    React.findDOMNode(this.refs.name).focus()
-  },
-  onKeyCast: function (e) {
-    switch (e.status) {
-      case 'closeModal':
-        this.props.close()
-        break
-      case 'submitPlanetCreateModal':
-        this.handleSubmit()
-        break
-    }
-  },
-  handleSubmit: function () {
-    this.setState({error: null}, function () {
-      Hq.createPlanet(this.state.ownerName, this.state.planet)
-        .then(function (res) {
-          var planet = res.body
-
-          PlanetStore.Actions.update(planet)
-
-          if (this.props.transitionTo != null) {
-            this.props.transitionTo('planetHome', {userName: planet.Owner.name, planetName: planet.name})
-          }
-
-          this.props.close()
-        }.bind(this))
-        .catch(function (err) {
-          console.error(err)
-
-          if (err.status == null) return this.setState({error: {message: 'Check your network connection'}})
-
-          switch (err.status) {
-            case 403:
-              this.setState({error: err.response.body})
-              break
-            case 422:
-              this.setState({error: {message: 'Planet name should be Alphanumeric with _, -'}})
-              break
-            case 409:
-              this.setState({error: {message: 'The entered name already in use'}})
-              break
-            default:
-              this.setState({error: {message: 'Unexpected error occured! please try again'}})
-          }
-        }.bind(this))
-    })
-  },
-  render: function () {
-    var teamOptions = this.state.user.Teams.map(function (team) {
-      return (
-        <option key={'user-' + team.id} value={team.name}>{team.profileName} ({team.name})</option>
-      )
-    })
-    return (
-      <div className='PlanetCreateModal modal'>
-        <input ref='name' valueLink={this.linkState('planet.name')} className='nameInput stripInput' placeholder='Crate new Planet'/>
-
-        <div className='formField'>
-          of
-          <select valueLink={this.linkState('ownerName')}>
-            <option value={this.state.user.name}>Me({this.state.user.name})</option>
-            {teamOptions}
-          </select>
-          as
-          <select valueLink={this.linkState('planet.public')}>
-            <option value={true}>Public</option>
-            <option value={false}>Private</option>
-          </select>
-        </div>
-
-        {this.state.error != null ? (<p className='errorAlert'>{this.state.error.message != null ? this.state.error.message : 'Error message undefined'}</p>) : null}
-
-        <button onClick={this.handleSubmit} className='submitButton'>
-          <i className='fa fa-check'/>
-        </button>
-      </div>
-    )
-  }
-})
diff --git a/browser/main/Components/PlanetHeader.jsx b/browser/main/Components/PlanetHeader.jsx
deleted file mode 100644
index 098c2f09..00000000
--- a/browser/main/Components/PlanetHeader.jsx
+++ /dev/null
@@ -1,86 +0,0 @@
-var React = require('react')
-var ReactRouter = require('react-router')
-var Link = ReactRouter.Link
-
-var Modal = require('../Mixins/Modal')
-var ExternalLink = require('../Mixins/ExternalLink')
-
-var PlanetSettingModal = require('./PlanetSettingModal')
-
-module.exports = React.createClass({
-  mixins: [ReactRouter.State, Modal, ExternalLink],
-  propTypes: {
-    search: React.PropTypes.string,
-    fetchPlanet: React.PropTypes.func,
-    onSearchChange: React.PropTypes.func,
-    currentPlanet: React.PropTypes.object
-  },
-  getInitialState: function () {
-    return {
-      search: ''
-    }
-  },
-  componentDidMount: function () {
-    var search = React.findDOMNode(this.refs.search)
-    search.addEventListener('keydown', this.handleSearchKeyDown)
-  },
-  componentWillUnmount: function () {
-    var search = React.findDOMNode(this.refs.search)
-    search.removeEventListener('keydown', this.handleSearchKeyDown)
-  },
-  handleSearchKeyDown: function (e) {
-    if (e.keyCode === 38 || e.keyCode === 40) {
-      var search = React.findDOMNode(this.refs.search)
-      search.blur()
-      e.preventDefault()
-    }
-    if (e.keyCode !== 27 && (e.keyCode !== 13 || !e.metaKey)) {
-      e.stopPropagation()
-    }
-  },
-  openPlanetSettingModal: function () {
-    this.openModal(PlanetSettingModal, {planet: this.props.currentPlanet})
-  },
-  refresh: function () {
-    this.props.fetchPlanet()
-  },
-  render: function () {
-    var currentPlanetName = this.props.currentPlanet.name
-    var currentUserName = this.props.currentPlanet.Owner.name
-
-    return (
-      <div className='PlanetHeader'>
-        <div className='headerLabel'>
-          <Link to='userHome' params={{userName: currentUserName}} className='userName'>{currentUserName}</Link>
-          <span className='planetName'>{currentPlanetName}</span>
-
-          {this.props.currentPlanet.public ? null : (
-            <div className='private'>
-              <i className='fa fa-lock'/>
-              <div className='tooltip'>Private planet</div>
-            </div>
-          )}
-
-          <button onClick={this.openPlanetSettingModal} className='planetSettingButton'>
-            <i className='fa fa-chevron-down'></i>
-            <div className='tooltip'>Planet setting</div>
-          </button>
-        </div>
-        <div className='headerControl'>
-          <div className='searchInput'>
-            <i className='fa fa-search'/>
-            <input onChange={this.props.onSearchChange} value={this.props.search} ref='search' type='text' className='inline-input circleInput' placeholder='Search...'/>
-          </div>
-          <button onClick={this.refresh} className='refreshButton'>
-            <i className='fa fa-refresh'/>
-            <div className='tooltip'>Refresh planet</div>
-          </button>
-          <a onClick={this.openExternal} href='http://b00st.io' className='logo'>
-            <img width='44' height='44' src='resources/favicon-230x230.png'/>
-            <div className='tooltip'>Boost official page</div>
-          </a>
-        </div>
-      </div>
-    )
-  }
-})
diff --git a/browser/main/Components/PlanetNavigator.jsx b/browser/main/Components/PlanetNavigator.jsx
deleted file mode 100644
index 699c40d1..00000000
--- a/browser/main/Components/PlanetNavigator.jsx
+++ /dev/null
@@ -1,76 +0,0 @@
-var React = require('react')
-var ReactRouter = require('react-router')
-var Navigation = ReactRouter.Navigation
-
-var Modal = require('../Mixins/Modal')
-
-var LaunchModal = require('../Components/LaunchModal')
-
-module.exports = React.createClass({
-  mixins: [Modal, Navigation],
-  propTypes: {
-    planet: React.PropTypes.shape({
-      name: React.PropTypes.string,
-      Owner: React.PropTypes.shape({
-        id: React.PropTypes.number,
-        userType: React.PropTypes.string
-      })
-    }),
-    search: React.PropTypes.string,
-    toggleCodeFilter: React.PropTypes.func,
-    toggleNoteFilter: React.PropTypes.func,
-    currentUser: React.PropTypes.shape({
-      id: React.PropTypes.number,
-      userType: React.PropTypes.string,
-      Teams: React.PropTypes.array
-    })
-  },
-  getInitialState: function () {
-    return {
-      isLaunchModalOpen: false
-    }
-  },
-  openLaunchModal: function () {
-    this.openModal(LaunchModal, {planet: this.props.planet, transitionTo: this.transitionTo})
-  },
-  isMyPlanet: function () {
-    if (this.props.currentUser == null) return false
-    if (this.props.planet.Owner.userType === 'person' && this.props.planet.Owner.id !== this.props.currentUser.id) return false
-    if (this.props.planet.Owner.userType === 'team' && !this.props.currentUser.Teams.some(function (team) {
-      if (team.id === this.props.planet.Owner.id) return true
-      return false
-    }.bind(this))) return false
-
-    return true
-
-  },
-  render: function () {
-    var keywords = this.props.search.split(' ')
-    var usingCodeFilter = keywords.some(function (keyword) {
-      if (keyword === '$c') return true
-      return false
-    })
-    var usingNoteFilter = keywords.some(function (keyword) {
-      if (keyword === '$n') return true
-      return false
-    })
-
-    return (
-      <div className='PlanetNavigator'>
-        {this.isMyPlanet() ? (
-          <button onClick={this.openLaunchModal} className='launchButton btn-primary btn-block'>
-            <i className='fa fa-rocket fa-fw'/> Launch
-          </button>
-        ) : null}
-        <nav className='articleFilters'>
-          <a className={usingCodeFilter && !usingNoteFilter ? 'active' : ''} onClick={this.props.toggleCodeFilter}>
-            <i className='fa fa-code fa-fw'/> Codes
-          </a>
-          <a className={!usingCodeFilter && usingNoteFilter ? 'active' : ''} onClick={this.props.toggleNoteFilter}>
-            <i className='fa fa-file-text-o fa-fw'/> Notes
-          </a>
-        </nav>
-      </div>
-    )
-  }
-})
diff --git a/browser/main/Components/PlanetSettingModal.jsx b/browser/main/Components/PlanetSettingModal.jsx
deleted file mode 100644
index 33bdd602..00000000
--- a/browser/main/Components/PlanetSettingModal.jsx
+++ /dev/null
@@ -1,190 +0,0 @@
-var React = require('react')
-
-var Hq = require('../Services/Hq')
-
-var LinkedState = require('../Mixins/LinkedState')
-var KeyCaster = require('../Mixins/KeyCaster')
-
-var PlanetStore = require('../Stores/PlanetStore')
-
-module.exports = React.createClass({
-  mixins: [LinkedState, KeyCaster('planetSettingModal')],
-  propTypes: {
-    close: React.PropTypes.func,
-    planet: React.PropTypes.shape({
-      name: React.PropTypes.string,
-      public: React.PropTypes.bool,
-      Owner: React.PropTypes.shape({
-        name: React.PropTypes.string
-      })
-    })
-  },
-  getInitialState: function () {
-    var deleteTextCandidates = [
-      'Confirm',
-      'Exterminatus',
-      'Avada Kedavra'
-    ]
-    var random = Math.round(Math.random() * 10) % 10
-    var randomDeleteText = random > 1 ? deleteTextCandidates[0] : random === 1 ? deleteTextCandidates[1] : deleteTextCandidates[2]
-
-    return {
-      currentTab: 'profile',
-      planet: {
-        name: this.props.planet.name,
-        public: this.props.planet.public
-      },
-      randomDeleteText: randomDeleteText,
-      deleteConfirmation: ''
-    }
-  },
-  onKeyCast: function (e) {
-    switch (e.status) {
-      case 'closeModal':
-        this.props.close()
-        break
-    }
-  },
-  activePlanetProfile: function () {
-    this.setState({currentTab: 'profile'})
-  },
-  activePlanetDelete: function () {
-    this.setState({currentTab: 'delete'})
-  },
-  handlePublicChange: function (value) {
-    return function () {
-      this.state.planet.public = value
-      this.setState({planet: this.state.planet})
-    }.bind(this)
-  },
-  handleSavePlanetProfile: function (e) {
-    var planet = this.props.planet
-
-    this.setState({profileFormStatus: 'sending', profileFormError: null}, function () {
-      Hq.updatePlanet(planet.Owner.name, planet.name, this.state.planet)
-        .then(function (res) {
-          var planet = res.body
-          console.log(planet)
-          this.setState({profileFormStatus: 'done'})
-
-          PlanetStore.Actions.update(planet)
-          this.props.close()
-        }.bind(this))
-        .catch(function (err) {
-          console.error(err)
-          var newState = {
-            profileFormStatus: 'error'
-          }
-
-          if (err.status == null) {
-            newState.profileFormError = {message: 'Check your network connection'}
-            return this.setState(newState)
-          }
-
-          switch (err.status) {
-            case 403:
-              newState.profileFormError = err.response.body
-              this.setState(newState)
-              break
-            case 422:
-              newState.profileFormError = {message: 'Planet name should be Alphanumeric with _, -'}
-              this.setState(newState)
-              break
-            case 409:
-              newState.profileFormError = {message: 'The entered name already in use'}
-              this.setState(newState)
-              break
-            default:
-              newState.profileFormError = {message: 'Undefined error please try again'}
-              this.setState(newState)
-          }
-        }.bind(this))
-    })
-  },
-  handleDeletePlanetClick: function () {
-    var planet = this.props.planet
-
-    this.setState({deleteSubmitStatus: 'sending'}, function () {
-      Hq.destroyPlanet(planet.Owner.name, planet.name)
-        .then(function (res) {
-          var planet = res.body
-
-          PlanetStore.Actions.destroy(planet)
-          this.setState({deleteSubmitStatus: 'done'}, function () {
-            this.props.close()
-          })
-        }.bind(this))
-        .catch(function (err) {
-          this.setState({deleteSubmitStatus: 'error'})
-          console.error(err)
-        }.bind(this))
-    })
-
-  },
-  render: function () {
-    var content
-
-    content = this.state.currentTab === 'profile' ? this.renderPlanetProfileTab() : this.renderPlanetDeleteTab()
-
-    return (
-      <div className='PlanetSettingModal sideNavModal modal'>
-        <div className='leftPane'>
-          <h1 className='modalLabel'>Planet setting</h1>
-          <nav className='tabList'>
-            <button onClick={this.activePlanetProfile} className={this.state.currentTab === 'profile' ? 'active' : ''}><i className='fa fa-globe fa-fw'/> Planet profile</button>
-            <button onClick={this.activePlanetDelete} className={this.state.currentTab === 'delete' ? 'active' : ''}><i className='fa fa-trash fa-fw'/> Delete Planet</button>
-          </nav>
-        </div>
-
-        <div className='rightPane'>
-          {content}
-        </div>
-      </div>
-    )
-  },
-  renderPlanetProfileTab: function () {
-    return (
-      <div className='planetProfileTab tab'>
-        <div className='formField'>
-          <label>Planet name </label>
-          <input valueLink={this.linkState('planet.name')}/>
-        </div>
-
-        <div className='formRadioField'>
-          <input id='publicOption' checked={this.state.planet.public} onChange={this.handlePublicChange(true)} name='public' type='radio'/> <label htmlFor='publicOption'>Public</label>
-
-          <input id='privateOption' checked={!this.state.planet.public} onChange={this.handlePublicChange(false)} name='public' type='radio'/> <label htmlFor='privateOption'>Private</label>
-        </div>
-        <div className='formConfirm'>
-          <button onClick={this.handleSavePlanetProfile} className='saveButton btn-primary'>Save</button>
-
-          <div className={'alertInfo' + (this.state.profileFormStatus === 'sending' ? '' : ' hide')}>on Sending...</div>
-
-          <div className={'alertError' + (this.state.profileFormStatus === 'error' ? '' : ' hide')}>{this.state.profileFormError != null ? this.state.profileFormError.message : 'Unexpected error occured! please try again'}</div>
-
-          <div className={'alertSuccess' + (this.state.profileFormStatus === 'done' ? '' : ' hide')}>Successfully done!!</div>
-        </div>
-      </div>
-    )
-  },
-  renderPlanetDeleteTab: function () {
-    var disabled = !this.state.deleteConfirmation.match(new RegExp('^' + this.props.planet.Owner.name + '/' + this.props.planet.name + '$'))
-
-    return (
-      <div className='planetDeleteTab tab'>
-        <p>Are you sure to destroy <strong>'{this.props.planet.Owner.name + '/' + this.props.planet.name}'</strong>?</p>
-        <p>If you are sure, write <strong>'{this.props.planet.Owner.name + '/' + this.props.planet.name}'</strong> to input below and click <strong>'{this.state.randomDeleteText}'</strong> button.</p>
-        <input valueLink={this.linkState('deleteConfirmation')} placeholder='userName/planetName'/>
-        <div className='formConfirm'>
-          <button disabled={disabled} onClick={this.handleDeletePlanetClick}>{this.state.randomDeleteText}</button>
-
-          <div className={'alertInfo' + (this.state.deleteSubmitStatus === 'sending' ? '' : ' hide')}>on Sending...</div>
-
-          <div className={'alertError' + (this.state.deleteSubmitStatus === 'error' ? '' : ' hide')}>Connection failed.. Try again.</div>
-
-          <div className={'alertSuccess' + (this.state.deleteSubmitStatus === 'done' ? '' : ' hide')}>Successfully done!!</div>
-        </div>
-      </div>
-    )
-  }
-})
diff --git a/browser/main/Components/PreferencesModal.jsx b/browser/main/Components/PreferencesModal.jsx
deleted file mode 100644
index b22a5615..00000000
--- a/browser/main/Components/PreferencesModal.jsx
+++ /dev/null
@@ -1,112 +0,0 @@
-var ipc = require('ipc')
-var remote = require('remote')
-
-var React = require('react')
-
-var LinkedState = require('../Mixins/LinkedState')
-var ExternalLink = require('../Mixins/ExternalLink')
-var KeyCaster = require('../Mixins/KeyCaster')
-
-module.exports = React.createClass({
-  mixins: [LinkedState, ExternalLink, KeyCaster('aboutModal')],
-  propTypes: {
-    close: React.PropTypes.func
-  },
-  getInitialState: function () {
-    var keymap = remote.getGlobal('keymap')
-    console.log(keymap)
-    return {
-      currentTab: 'settings',
-      keymap: keymap
-    }
-  },
-  onKeyCast: function (e) {
-    switch (e.status) {
-      case 'closeModal':
-        this.props.close()
-        break
-    }
-  },
-  activeSettings: function () {
-    this.setState({currentTab: 'settings'})
-  },
-  activeAbout: function () {
-    this.setState({currentTab: 'about'})
-  },
-  saveKeymap: function () {
-    ipc.send('hotkeyUpdated', JSON.stringify(this.state.keymap))
-  },
-  render: function () {
-    var content = this.state.currentTab === 'settings' ? this.renderSettingsTab() : this.renderAboutTab()
-
-    return (
-      <div className='PreferencesModal sideNavModal modal'>
-        <div className='leftPane'>
-          <h1 className='modalLabel'>Preferences</h1>
-          <nav className='tabList'>
-            <button onClick={this.activeSettings} className={this.state.currentTab === 'settings' ? 'active' : ''}><i className='fa fa-gear fa-fw'/> Settings</button>
-            <button onClick={this.activeAbout} className={this.state.currentTab === 'about' ? 'active' : ''}><i className='fa fa-info-circle fa-fw'/> About this app</button>
-          </nav>
-        </div>
-        <div className='rightPane'>
-          {content}
-        </div>
-      </div>
-    )
-  },
-  renderSettingsTab: function () {
-    return (
-      <div className='settingsTab tab'>
-        <div className='categoryLabel'>Hotkey</div>
-        <div className='formField'>
-          <label>Toggle finder</label>
-          <input valueLink={this.linkState('keymap.toggleFinder')}/>
-        </div>
-        <div className='formConfirm'>
-          <button onClick={this.saveKeymap}>Save</button>
-        </div>
-        <div className='example'>
-          <h3>Example</h3>
-          <ul>
-            <li><code>0</code> to <code>9</code></li>
-            <li><code>A</code> to <code>Z</code></li>
-            <li><code>F1</code> to <code>F24</code></li>
-            <li>Punctuations like <code>~</code>, <code>!</code>, <code>@</code>, <code>#</code>, <code>$</code>, etc.</li>
-            <li><code>Plus</code></li>
-            <li><code>Space</code></li>
-            <li><code>Backspace</code></li>
-            <li><code>Delete</code></li>
-            <li><code>Insert</code></li>
-            <li><code>Return</code> (or <code>Enter</code> as alias)</li>
-            <li><code>Up</code>, <code>Down</code>, <code>Left</code> and <code>Right</code></li>
-            <li><code>Home</code> and <code>End</code></li>
-            <li><code>PageUp</code> and <code>PageDown</code></li>
-            <li><code>Escape</code> (or <code>Esc</code> for short)</li>
-            <li><code>VolumeUp</code>, <code>VolumeDown</code> and <code>VolumeMute</code></li>
-            <li><code>MediaNextTrack</code>, <code>MediaPreviousTrack</code>, <code>MediaStop</code> and <code>MediaPlayPause</code></li>
-          </ul>
-        </div>
-      </div>
-    )
-  },
-  renderAboutTab: function () {
-    var version = global.version
-    return (
-      <div className='aboutTab tab'>
-        <div className='about1'>
-          <img className='logo' src='resources/favicon-230x230.png'/>
-          <div className='appInfo'>Boost {version == null || version.length === 0 ? 'DEV version' : 'v' + version}</div>
-        </div>
-
-        <div className='about2'>
-          <div className='externalLabel'>External links</div>
-          <ul className='externalList'>
-            <li><a onClick={this.openExternal} href='http://b00st.io'>Boost Homepage <i className='fa fa-external-link'/></a></li>
-            <li><a onClick={this.openExternal} href='http://boostio.github.io/regulations.html'>Regulation <i className='fa fa-external-link'/></a></li>
-            <li><a onClick={this.openExternal} href='http://boostio.github.io/privacypolicies.html'>Private policy <i className='fa fa-external-link'/></a></li>
-          </ul>
-        </div>
-      </div>
-    )
-  }
-})
diff --git a/browser/main/Components/TeamCreateModal.jsx b/browser/main/Components/TeamCreateModal.jsx
deleted file mode 100644
index 935898b2..00000000
--- a/browser/main/Components/TeamCreateModal.jsx
+++ /dev/null
@@ -1,89 +0,0 @@
-/* global localStorage */
-
-var React = require('react')
-
-var Hq = require('../Services/Hq')
-var socket = require('../Services/socket')
-
-var LinkedState = require('../Mixins/LinkedState')
-var KeyCaster = require('../Mixins/KeyCaster')
-
-var UserStore = require('../Stores/UserStore')
-
-module.exports = React.createClass({
-  mixins: [LinkedState, KeyCaster('teamCreateModal')],
-  propTypes: {
-    user: React.PropTypes.shape({
-      name: React.PropTypes.string
-    }),
-    transitionTo: React.PropTypes.func,
-    close: React.PropTypes.func
-  },
-  getInitialState: function () {
-    return {
-      team: {
-        name: ''
-      },
-      error: null
-    }
-  },
-  componentDidMount: function () {
-    React.findDOMNode(this.refs.teamName).focus()
-  },
-  onKeyCast: function (e) {
-    switch (e.status) {
-      case 'closeModal':
-        this.props.close()
-        break
-      case 'submitTeamCreateModal':
-        this.handleSubmit()
-        break
-    }
-  },
-  handleSubmit: function () {
-    this.setState({error: null}, function () {
-      Hq.createTeam(this.props.user.name, this.state.team)
-        .then(function (res) {
-          var currentUser = JSON.parse(localStorage.getItem('currentUser'))
-          var team = res.body
-
-          currentUser.Teams.push(team)
-          localStorage.setItem('currentUser', JSON.stringify(currentUser))
-          socket.reconnect(currentUser)
-          UserStore.Actions.update(currentUser)
-
-          if (this.props.transitionTo != null) {
-            this.props.transitionTo('userHome', {userName: team.name})
-          }
-          this.props.close()
-        }.bind(this))
-        .catch(function (err) {
-          console.error(err)
-
-          if (err.status == null) return this.setState({error: {message: 'Check your network connection'}})
-
-          switch (err.status) {
-            case 422:
-              this.setState({error: {message: 'Team name should be Alphanumeric with _, -'}})
-              break
-            case 409:
-              this.setState({error: {message: 'The entered name already in use'}})
-              break
-            default:
-              this.setState({error: {message: 'Error message undefined'}})
-          }
-        }.bind(this))
-    })
-  },
-  render: function () {
-    return (
-      <div className='TeamCreateModal modal'>
-        <input ref='teamName' valueLink={this.linkState('team.name')} className='nameInput stripInput' placeholder='Create new team'/>
-        {this.state.error != null ? (<p className='errorAlert'>{this.state.error.message != null ? this.state.error.message : 'Unintended error occured'}</p>) : null}
-        <button onClick={this.handleSubmit} className='submitButton'>
-          <i className='fa fa-check'/>
-        </button>
-      </div>
-    )
-  }
-})
diff --git a/browser/main/Components/TeamSettingsModal.jsx b/browser/main/Components/TeamSettingsModal.jsx
deleted file mode 100644
index 19732e48..00000000
--- a/browser/main/Components/TeamSettingsModal.jsx
+++ /dev/null
@@ -1,269 +0,0 @@
-/* global localStorage */
-
-var React = require('react')
-var Reflux = require('reflux')
-var Select = require('react-select')
-
-var Hq = require('../Services/Hq')
-
-var LinkedState = require('../Mixins/LinkedState')
-var Helper = require('../Mixins/Helper')
-var KeyCaster = require('../Mixins/KeyCaster')
-
-var UserStore = require('../Stores/UserStore')
-
-var getOptions = function (input, callback) {
-  Hq.searchUser(input)
-    .then(function (res) {
-      callback(null, {
-        options: res.body.map(function (user) {
-          return {
-            label: user.name,
-            value: user.name
-          }
-        }),
-        complete: false
-      })
-    })
-    .catch(function (err) {
-      console.error(err)
-    })
-}
-
-module.exports = React.createClass({
-  mixins: [LinkedState, Reflux.listenTo(UserStore, 'onUserChange'), Helper, KeyCaster('teamSettingsModal')],
-  propTypes: {
-    team: React.PropTypes.shape({
-      id: React.PropTypes.number,
-      name: React.PropTypes.string,
-      profileName: React.PropTypes.string,
-      email: React.PropTypes.string,
-      Members: React.PropTypes.array
-    }),
-    close: React.PropTypes.func
-  },
-  getInitialState: function () {
-    return {
-      currentTab: 'teamInfo',
-      team: this.props.team,
-      userSubmitStatus: null,
-      member: {
-        name: '',
-        role: 'member'
-      },
-      updatingMember: false
-    }
-  },
-  onKeyCast: function (e) {
-    switch (e.status) {
-      case 'closeModal':
-        this.props.close()
-        break
-    }
-  },
-  onUserChange: function (res) {
-    switch (res.status) {
-      case 'userUpdated':
-        var user = res.data
-        if (user.id === this.props.team.id) {
-          this.forceUpdate()
-        }
-        break
-    }
-  },
-  selectTab: function (tabName) {
-    return function () {
-      this.setState({currentTab: tabName})
-    }.bind(this)
-  },
-  saveUserInfo: function () {
-    this.setState({
-      userSubmitStatus: 'sending'
-    }, function () {
-      Hq.updateUser(this.props.team.name, this.state.team)
-        .then(function (res) {
-          this.setState({userSubmitStatus: 'done'}, function () {
-            UserStore.Actions.update(res.body)
-            this.forceUpdate()
-          })
-        }.bind(this))
-        .catch(function (err) {
-          console.error(err)
-          this.setState({userSubmitStatus: 'error'})
-        }.bind(this))
-    })
-  },
-  handleMemberNameChange: function (value) {
-    var member = this.state.member
-    member.name = value
-    this.setState({member: member})
-  },
-  addMember: function () {
-    this.setState({updatingMember: true}, function () {
-      Hq
-        .addMember(this.props.team.name, {
-          userName: this.state.member.name,
-          role: this.state.member.role
-        })
-        .then(function (res) {
-          this.setState({updatingMember: false, team: res.body})
-        }.bind(this))
-        .catch(function (err) {
-          console.error(err)
-          this.setState({updatingMember: false})
-        }.bind(this))
-    })
-  },
-  roleChange: function (memberName) {
-    return function (e) {
-      var role = e.target.value
-      this.setState({updatingMember: true}, function () {
-        Hq
-          .addMember(this.props.team.name, {
-            userName: memberName,
-            role: role
-          })
-          .then(function (res) {
-            this.setState({updatingMember: false, team: res.body})
-          }.bind(this))
-          .catch(function (err) {
-            console.error(err)
-            this.setState({updatingMember: false})
-          }.bind(this))
-      })
-    }.bind(this)
-  },
-  removeMember: function (memberName) {
-    return function () {
-      this.setState({updatingMember: true}, function () {
-        Hq
-          .removeMember(this.props.team.name, {
-            userName: memberName
-          })
-          .then(function (res) {
-            this.setState({updatingMember: false, team: res.body})
-          }.bind(this))
-          .catch(function (err) {
-            console.error(err)
-            this.setState({updatingMember: false})
-          }.bind(this))
-      })
-    }.bind(this)
-  },
-  render: function () {
-    var content
-
-    switch (this.state.currentTab) {
-      case 'teamInfo':
-        content = this.renderTeamInfoTab()
-        break
-      case 'members':
-        content = this.renderMembersTab()
-        break
-    }
-
-    return (
-      <div className='TeamSettingsModal sideNavModal modal'>
-        <div className='leftPane'>
-          <div className='modalLabel'>Team settings</div>
-          <div className='tabList'>
-            <button className={this.state.currentTab === 'teamInfo' ? 'active' : ''} onClick={this.selectTab('teamInfo')}><i className='fa fa-info-circle fa-fw'/> Team Info</button>
-            <button className={this.state.currentTab === 'members' ? 'active' : ''} onClick={this.selectTab('members')}><i className='fa fa-users fa-fw'/> Members</button>
-          </div>
-        </div>
-        <div className='rightPane'>
-          {content}
-        </div>
-      </div>
-    )
-  },
-  renderTeamInfoTab: function () {
-    return (
-      <div className='userInfoTab tab'>
-        <div className='formField'>
-          <label>Profile Name</label>
-          <input valueLink={this.linkState('team.profileName')}/>
-        </div>
-        <div className='formConfirm'>
-          <button disabled={this.state.userSubmitStatus === 'sending'} onClick={this.saveUserInfo}>Save</button>
-
-          <div className={'alertInfo' + (this.state.userSubmitStatus === 'sending' ? '' : ' hide')}>on Sending...</div>
-
-          <div className={'alertError' + (this.state.userSubmitStatus === 'error' ? '' : ' hide')}>Connection failed.. Try again.</div>
-
-          <div className={'alertSuccess' + (this.state.userSubmitStatus === 'done' ? '' : ' hide')}>Successfully done!!</div>
-        </div>
-      </div>
-    )
-  },
-  renderMembersTab: function () {
-    var currentUser = JSON.parse(localStorage.getItem('currentUser'))
-
-    var members = this.state.team.Members.map(function (member) {
-      var isCurrentUser = currentUser.id === member.id
-      return (
-        <tr>
-          <td>{member.profileName}({member.name})</td>
-          <td>
-            {isCurrentUser ? (
-              'Owner'
-              ) : (
-                <select disabled={this.state.updatingMember} onChange={this.roleChange(member.name)} className='roleSelect' value={member.TeamMember.role}>
-                  <option value='owner'>Owner</option>
-                  <option value='member'>Member</option>
-                </select>
-              )}
-          </td>
-          <td>
-            {isCurrentUser ? '-' : (
-              <button disabled={this.state.updatingMember} onClick={this.removeMember(member.name)}><i className='fa fa-close fa-fw'/></button>
-            )}
-          </td>
-        </tr>
-      )
-    }.bind(this))
-
-    var belowLimit = members.length < 5
-
-    return (
-      <div className='membersTab tab'>
-        <table className='memberTable'>
-          <thead>
-            <tr>
-              <th>Username</th>
-              <th>Role</th>
-              <th>Control</th>
-            </tr>
-          </thead>
-          <tbody>
-            {members}
-          </tbody>
-        </table>
-        {belowLimit ? (
-          <div className='addMemberForm'>
-            <div className='formLabel'>Add Member</div>
-            <div className='formGroup'>
-              <Select
-                name='userName'
-                value={this.state.member.name}
-                placeholder='Username to add'
-                asyncOptions={getOptions}
-                onChange={this.handleMemberNameChange}
-                className='userNameSelect'
-              />
-            <select valueLink={this.linkState('member.role')} className='roleSelect'>
-                <option value={'member'}>Member</option>
-                <option value={'owner'}>Owner</option>
-              </select>
-              <button disabled={this.state.updatingMember} onClick={this.addMember} className='confirmButton'>Add Member</button>
-            </div>
-          </div>
-        ) : (
-          <div>
-            Maximum number of members is 5 on Beta version. Please contact us if you want futher use.
-          </div>
-        )}
-      </div>
-    )
-  }
-})
diff --git a/browser/main/Components/TopBar.jsx b/browser/main/Components/TopBar.jsx
deleted file mode 100644
index 1c1e02e0..00000000
--- a/browser/main/Components/TopBar.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-var React = require('react')
-
-var ExternalLink = require('../Mixins/ExternalLink')
-
-module.exports = React.createClass({
-  mixins: [ExternalLink],
-  propTypes: {
-    search: React.PropTypes.string,
-    changeSearch: React.PropTypes.func
-  },
-  render: function () {
-    return (
-      <div className='TopBar'>
-        <div className='left'>
-          <div className='search'>
-            <i className='fa fa-search'/>
-            <input value={this.props.search} onChange={this.props.changeSearch} className='searchInput' placeholder='Search...'/>
-          </div>
-        </div>
-
-        <div className='right'>
-          <a onClick={this.openExternal} href='http://b00st.io' className='logo'>
-            <img width='44' height='44' src='resources/favicon-230x230.png'/>
-            <div className='tooltip'>Boost official page</div>
-          </a>
-        </div>
-      </div>
-    )
-  }
-})
diff --git a/browser/main/Containers/PlanetContainer.js b/browser/main/Containers/PlanetContainer.js
deleted file mode 100644
index ecd1270e..00000000
--- a/browser/main/Containers/PlanetContainer.js
+++ /dev/null
@@ -1,414 +0,0 @@
-/* global localStorage*/
-var React = require('react')
-var ReactRouter = require('react-router')
-var Reflux = require('reflux')
-
-var PlanetHeader = require('../Components/PlanetHeader')
-var PlanetNavigator = require('../Components/PlanetNavigator')
-var PlanetArticleList = require('../Components/PlanetArticleList')
-var PlanetArticleDetail = require('../Components/PlanetArticleDetail')
-
-var Hq = require('../Services/Hq')
-
-var Modal = require('../Mixins/Modal')
-var ArticleFilter = require('../Mixins/ArticleFilter')
-var Helper = require('../Mixins/Helper')
-var KeyCaster = require('../Mixins/KeyCaster')
-
-var UserStore = require('../Stores/UserStore')
-var PlanetStore = require('../Stores/PlanetStore')
-
-module.exports = React.createClass({
-  mixins: [ReactRouter.Navigation, ReactRouter.State, Modal, Reflux.listenTo(UserStore, 'onUserChange'), Reflux.listenTo(PlanetStore, 'onPlanetChange'), ArticleFilter, Helper, KeyCaster('planetContainer')],
-  propTypes: {
-    params: React.PropTypes.object,
-    planetName: React.PropTypes.string
-  },
-  getInitialState: function () {
-    return {
-      currentUser: JSON.parse(localStorage.getItem('currentUser')),
-      planet: null,
-      search: ''
-    }
-  },
-  componentDidMount: function () {
-    this.fetchPlanet(this.props.params.userName, this.props.params.planetName)
-  },
-  componentDidUpdate: function () {
-    if (this.isActive('planetHome') && this.refs.list != null && this.refs.list.props.articles.length > 0) {
-      var article = this.refs.list.props.articles[0]
-      var planet = this.state.planet
-      switch (article.type) {
-        case 'code':
-          this.transitionTo('codes', {userName: planet.Owner.name, planetName: planet.name, localId: article.localId})
-          break
-        case 'note':
-          this.transitionTo('notes', {userName: planet.Owner.name, planetName: planet.name, localId: article.localId})
-          break
-      }
-    }
-  },
-  componentWillReceiveProps: function (nextProps) {
-    if (this.state.planet == null) {
-      this.fetchPlanet(nextProps.params.userName, nextProps.params.planetName)
-      return
-    }
-
-    if (nextProps.params.userName !== this.state.planet.Owner.name || nextProps.params.planetName !== this.state.planet.name) {
-      this.setState({
-        planet: null
-      }, function () {
-        this.fetchPlanet(nextProps.params.userName, nextProps.params.planetName)
-      })
-    }
-  },
-  onKeyCast: function (e) {
-    switch (e.status) {
-      case 'openLaunchModal':
-        this.refs.navigator.openLaunchModal()
-        break
-      case 'selectNextArticle':
-        this.selectNextArticle()
-        break
-      case 'selectPriorArticle':
-        this.selectPriorArticle()
-        break
-      case 'toggleFocusSearchInput':
-        this.toggleFocusSearchInput()
-        break
-      case 'openEditModal':
-        this.refs.detail.openEditModal()
-        break
-      case 'openDeleteModal':
-        this.refs.detail.openDeleteModal()
-        break
-    }
-  },
-  onPlanetChange: function (res) {
-    if (this.state.planet == null) return
-
-    var planet, code, note, articleIndex, articlesCount
-    switch (res.status) {
-      case 'updated':
-        planet = res.data
-        if (this.state.planet.id === planet.id) {
-          if (this.state.planet.name === planet.name) {
-            this.setState({planet: planet})
-          } else {
-            this.transitionTo('planetHome', {userName: planet.Owner.name, planetName: planet.name})
-          }
-        }
-        break
-      case 'destroyed':
-        planet = res.data
-        if (this.state.planet.id === planet.id) {
-          this.transitionTo('userHome', {userName: this.state.planet.Owner.name})
-        }
-        break
-      case 'codeUpdated':
-        code = res.data
-        if (code.PlanetId === this.state.planet.id) {
-          this.state.planet.Codes = this.updateItemToTargetArray(code, this.state.planet.Codes)
-
-          this.setState({planet: this.state.planet})
-        }
-        break
-      case 'noteUpdated':
-        note = res.data
-        if (note.PlanetId === this.state.planet.id) {
-          this.state.planet.Notes = this.updateItemToTargetArray(note, this.state.planet.Notes)
-
-          this.setState({planet: this.state.planet})
-        }
-        break
-      case 'codeDestroyed':
-        code = res.data
-        if (code.PlanetId === this.state.planet.id) {
-          this.state.planet.Codes = this.deleteItemFromTargetArray(code, this.state.planet.Codes)
-
-          if (this.refs.detail.props.article != null && this.refs.detail.props.article.type === code.type && this.refs.detail.props.article.localId === code.localId) {
-            articleIndex = this.getFilteredIndexOfCurrentArticle()
-            articlesCount = this.refs.list.props.articles.length
-
-            this.setState({planet: this.state.planet}, function () {
-              if (articlesCount > 1) {
-                if (articleIndex > 0) {
-                  this.selectArticleByListIndex(articleIndex - 1)
-                } else {
-                  this.selectArticleByListIndex(articleIndex)
-                }
-              }
-            })
-            return
-          }
-
-          this.setState({planet: this.state.planet})
-        }
-        break
-      case 'noteDestroyed':
-        note = res.data
-        if (note.PlanetId === this.state.planet.id) {
-          this.state.planet.Notes = this.deleteItemFromTargetArray(note, this.state.planet.Notes)
-
-          if (this.refs.detail.props.article != null && this.refs.detail.props.article.type === note.type && this.refs.detail.props.article.localId === note.localId) {
-            articleIndex = this.getFilteredIndexOfCurrentArticle()
-            articlesCount = this.refs.list.props.articles.length
-
-            this.setState({planet: this.state.planet}, function () {
-              if (articlesCount > 1) {
-                if (articleIndex > 0) {
-                  this.selectArticleByListIndex(articleIndex - 1)
-                } else {
-                  this.selectArticleByListIndex(articleIndex)
-                }
-              }
-            })
-            return
-          }
-
-          this.setState({planet: this.state.planet})
-        }
-        break
-    }
-  },
-  onUserChange: function () {
-
-  },
-  fetchPlanet: function (userName, planetName) {
-    if (userName == null) userName = this.props.params.userName
-    if (planetName == null) planetName = this.props.params.planetName
-
-    Hq.fetchPlanet(userName, planetName)
-      .then(function (res) {
-        var planet = res.body
-
-        planet.Codes.forEach(function (code) {
-          code.type = 'code'
-        })
-
-        planet.Notes.forEach(function (note) {
-          note.type = 'note'
-        })
-
-        localStorage.setItem('planet-' + planet.id, JSON.stringify(planet))
-
-        this.setState({planet: planet})
-      }.bind(this))
-      .catch(function (err) {
-        console.error(err)
-      })
-  },
-  getFilteredIndexOfCurrentArticle: function () {
-    var params = this.props.params
-    var index = 0
-
-    if (this.isActive('codes')) {
-      this.refs.list.props.articles.some(function (_article, _index) {
-        if (_article.type === 'code' && _article.localId === parseInt(params.localId, 10)) {
-          index = _index
-        }
-      })
-    } else if (this.isActive('notes')) {
-      this.refs.list.props.articles.some(function (_article, _index) {
-        if (_article.type === 'note' && _article.localId === parseInt(params.localId, 10)) {
-          index = _index
-          return true
-        }
-        return false
-      })
-    }
-
-    return index
-  },
-  selectArticleByListIndex: function (index) {
-    var article = this.refs.list.props.articles[index]
-    var params = this.props.params
-
-    if (article == null) {
-      this.transitionTo('planetHome', params)
-      return
-    }
-
-    var listElement = this.refs.list.refs.articles.getDOMNode()
-    var articleElement = listElement.querySelectorAll('li')[index]
-
-    var overflowBelow = listElement.clientHeight + listElement.scrollTop < articleElement.offsetTop + articleElement.clientHeight
-    if (overflowBelow) {
-      listElement.scrollTop = articleElement.offsetTop + articleElement.clientHeight - listElement.clientHeight
-    }
-    var overflowAbove = listElement.scrollTop > articleElement.offsetTop
-    if (overflowAbove) {
-      listElement.scrollTop = articleElement.offsetTop
-    }
-
-    if (article.type === 'code') {
-      params.localId = article.localId
-      this.transitionTo('codes', params)
-      return
-    }
-
-    if (article.type === 'note') {
-      params.localId = article.localId
-      this.transitionTo('notes', params)
-      return
-    }
-  },
-  selectNextArticle: function () {
-    if (this.state.planet == null) return
-
-    var index = this.getFilteredIndexOfCurrentArticle()
-
-    if (index < this.refs.list.props.articles.length - 1) {
-      this.selectArticleByListIndex(index + 1)
-    }
-  },
-  selectPriorArticle: function () {
-    if (this.state.planet == null) {
-      return
-    }
-    var index = this.getFilteredIndexOfCurrentArticle()
-
-    if (index > 0) {
-      this.selectArticleByListIndex(index - 1)
-    } else {
-      React.findDOMNode(this.refs.header.refs.search).focus()
-    }
-  },
-  toggleFocusSearchInput: function () {
-    var search = React.findDOMNode(this.refs.header.refs.search)
-    if (document.activeElement === search) {
-      React.findDOMNode(this.refs.header.refs.search).blur()
-      return
-    }
-    React.findDOMNode(this.refs.header.refs.search).focus()
-  },
-  handleSearchChange: function (e) {
-    this.setState({search: e.target.value}, function () {
-      this.selectArticleByListIndex(0)
-    })
-  },
-  showAll: function () {
-    this.setState({search: ''})
-  },
-  toggleCodeFilter: function () {
-    var keywords = typeof this.state.search === 'string' ? this.state.search.split(' ') : []
-
-    var usingCodeFilter = false
-    var usingNoteFilter = false
-    keywords = keywords.filter(function (keyword) {
-      if (keyword === '$n') {
-        usingNoteFilter = true
-        return false
-      }
-      if (keyword === '$c') usingCodeFilter = true
-      return true
-    })
-
-    if (usingCodeFilter && !usingNoteFilter) {
-      keywords = keywords.filter(function (keyword) {
-        return keyword !== '$c'
-      })
-    }
-
-    if (!usingCodeFilter) {
-      keywords.unshift('$c')
-    }
-
-    this.setState({search: keywords.join(' ')}, function () {
-      this.selectArticleByListIndex(0)
-    })
-  },
-  toggleNoteFilter: function () {
-    var keywords = typeof this.state.search === 'string' ? this.state.search.split(' ') : []
-
-    var usingCodeFilter = false
-    var usingNoteFilter = false
-    keywords = keywords.filter(function (keyword) {
-      if (keyword === '$c') {
-        usingCodeFilter = true
-        return false
-      }
-      if (keyword === '$n') usingNoteFilter = true
-      return true
-    })
-
-    if (usingNoteFilter && !usingCodeFilter) {
-      keywords = keywords.filter(function (keyword) {
-        return keyword !== '$n'
-      })
-    }
-
-    if (!usingNoteFilter) {
-      keywords.unshift('$n')
-    }
-
-    this.setState({search: keywords.join(' ')}, function () {
-      this.selectArticleByListIndex(0)
-    })
-  },
-  applyTagFilter: function (tag) {
-    return function () {
-      this.setState({search: '#' + tag})
-    }.bind(this)
-  },
-  render: function () {
-    if (this.state.planet == null) return (<div/>)
-
-    var localId = parseInt(this.props.params.localId, 10)
-
-    var codes = this.state.planet.Codes
-    var notes = this.state.planet.Notes
-
-    var article
-    if (this.isActive('codes')) {
-      codes.some(function (_article) {
-        if (localId === _article.localId) {
-          article = _article
-          return true
-        }
-        return false
-      })
-    } else if (this.isActive('notes')) {
-      notes.some(function (_article) {
-        if (localId === _article.localId) {
-          article = _article
-          return true
-        }
-        return false
-      })
-    }
-
-    var articles = codes.concat(notes)
-
-    var filteredArticles = this.searchArticle(this.state.search, articles)
-
-    return (
-      <div className='PlanetContainer'>
-        <PlanetHeader
-          ref='header'
-          search={this.state.search}
-          fetchPlanet={this.fetchPlanet}
-          onSearchChange={this.handleSearchChange}
-          currentPlanet={this.state.planet}
-        />
-
-        <PlanetNavigator
-          ref='navigator'
-          search={this.state.search}
-          showAll={this.showAll}
-          toggleCodeFilter={this.toggleCodeFilter}
-          toggleNoteFilter={this.toggleNoteFilter}
-          planet={this.state.planet}
-          currentUser={this.state.currentUser}/>
-
-        <PlanetArticleList showOnlyWithTag={this.applyTagFilter} ref='list' articles={filteredArticles}/>
-
-        <PlanetArticleDetail
-          ref='detail'
-          article={article}
-          planet={this.state.planet}
-          showOnlyWithTag={this.applyTagFilter}/>
-      </div>
-    )
-  }
-})
diff --git a/browser/main/HomeContainer/index.js b/browser/main/HomePage.js
similarity index 87%
rename from browser/main/HomeContainer/index.js
rename to browser/main/HomePage.js
index 6bbb5319..3628e757 100644
--- a/browser/main/HomeContainer/index.js
+++ b/browser/main/HomePage.js
@@ -1,11 +1,11 @@
 import React, { PropTypes} from 'react'
 import { connect } from 'react-redux'
 import { switchUser } from './actions'
-import UserNavigator from './Components/UserNavigator'
-import ArticleNavigator from './Components/ArticleNavigator'
-import ArticleTopBar from './Components/ArticleTopBar'
-import ArticleList from './Components/ArticleList'
-import ArticleDetail from './Components/ArticleDetail'
+import UserNavigator from './HomePage/UserNavigator'
+import ArticleNavigator from './HomePage/ArticleNavigator'
+import ArticleTopBar from './HomePage/ArticleTopBar'
+import ArticleList from './HomePage/ArticleList'
+import ArticleDetail from './HomePage/ArticleDetail'
 import { findWhere } from 'lodash'
 
 // var AuthFilter = require('../Mixins/AuthFilter')
diff --git a/browser/main/HomeContainer/Components/ArticleDetail.js b/browser/main/HomePage/ArticleDetail.js
similarity index 92%
rename from browser/main/HomeContainer/Components/ArticleDetail.js
rename to browser/main/HomePage/ArticleDetail.js
index afb4aa71..01fc52e6 100644
--- a/browser/main/HomeContainer/Components/ArticleDetail.js
+++ b/browser/main/HomePage/ArticleDetail.js
@@ -1,9 +1,9 @@
 import React, { PropTypes } from 'react'
 import moment from 'moment'
 import { findWhere } from 'lodash'
-import ModeIcon from '../../Components/ModeIcon'
-import MarkdownPreview from '../../Components/MarkdownPreview'
-import CodeEditor from '../../Components/CodeEditor'
+import ModeIcon from 'boost/components/ModeIcon'
+import MarkdownPreview from 'boost/components/MarkdownPreview'
+import CodeEditor from 'boost/components/CodeEditor'
 
 export default class ArticleDetail extends React.Component {
   render () {
diff --git a/browser/main/HomeContainer/Components/ArticleList.js b/browser/main/HomePage/ArticleList.js
similarity index 95%
rename from browser/main/HomeContainer/Components/ArticleList.js
rename to browser/main/HomePage/ArticleList.js
index a59af0d5..913778ec 100644
--- a/browser/main/HomeContainer/Components/ArticleList.js
+++ b/browser/main/HomePage/ArticleList.js
@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react'
-import ProfileImage from '../../components/ProfileImage'
-import ModeIcon from '../../Components/ModeIcon'
+import ProfileImage from 'boost/components/ProfileImage'
+import ModeIcon from 'boost/components/ModeIcon'
 import moment from 'moment'
 import { IDLE_MODE, CREATE_MODE, EDIT_MODE } from '../actions'
 
diff --git a/browser/main/HomeContainer/Components/ArticleNavigator.js b/browser/main/HomePage/ArticleNavigator.js
similarity index 97%
rename from browser/main/HomeContainer/Components/ArticleNavigator.js
rename to browser/main/HomePage/ArticleNavigator.js
index 8ff56a80..5e69ab29 100644
--- a/browser/main/HomeContainer/Components/ArticleNavigator.js
+++ b/browser/main/HomePage/ArticleNavigator.js
@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react'
-import ProfileImage from '../../components/ProfileImage'
+import ProfileImage from 'boost/components/ProfileImage'
 import { findWhere } from 'lodash'
 
 export default class ArticleNavigator extends React.Component {
diff --git a/browser/main/HomeContainer/components/ArticleTopBar.js b/browser/main/HomePage/ArticleTopBar.js
similarity index 93%
rename from browser/main/HomeContainer/components/ArticleTopBar.js
rename to browser/main/HomePage/ArticleTopBar.js
index c9b5a5c2..7f2358bf 100644
--- a/browser/main/HomeContainer/components/ArticleTopBar.js
+++ b/browser/main/HomePage/ArticleTopBar.js
@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react'
-import ExternalLink from '../../components/ExternalLink'
+import ExternalLink from 'boost/components/ExternalLink'
 
 const ArticleTopBar = React.createClass({
   render () {
diff --git a/browser/main/HomeContainer/Components/UserNavigator.js b/browser/main/HomePage/UserNavigator.js
similarity index 87%
rename from browser/main/HomeContainer/Components/UserNavigator.js
rename to browser/main/HomePage/UserNavigator.js
index 825eeb95..ab9cbd7b 100644
--- a/browser/main/HomeContainer/Components/UserNavigator.js
+++ b/browser/main/HomePage/UserNavigator.js
@@ -1,8 +1,8 @@
 import React, { Component, PropTypes } from 'react'
 import { Link } from 'react-router'
-import ProfileImage from '../../components/ProfileImage'
-import { openModal } from '../lib/modal'
-import CreateNewTeam from '../lib/modal/CreateNewTeam'
+import ProfileImage from 'boost/components/ProfileImage'
+import { openModal } from 'boost/modal'
+import CreateNewTeam from 'boost/components/modal/CreateNewTeam'
 
 export default class UserNavigator extends Component {
   handleClick (e) {
diff --git a/browser/main/Containers/LoginContainer.js b/browser/main/LoginPage.js
similarity index 91%
rename from browser/main/Containers/LoginContainer.js
rename to browser/main/LoginPage.js
index 725204b2..59130a79 100644
--- a/browser/main/Containers/LoginContainer.js
+++ b/browser/main/LoginPage.js
@@ -1,9 +1,7 @@
-var Hq = require('../Services/Hq')
-var socket = require('../Services/socket')
-
 import React, { PropTypes } from 'react'
 import { Link } from 'react-router'
-import linkState from '../helpers/linkState'
+import linkState from 'boost/linkState'
+import { login } from 'boost/api'
 
 export default class LoginPage extends React.Component {
   constructor (props) {
@@ -23,15 +21,14 @@ export default class LoginPage extends React.Component {
       isSending: true,
       error: null
     }, function () {
-      console.log(this.state.user)
-      Hq.login(this.state.user)
+      login(this.state.user)
         .then(function (res) {
           localStorage.setItem('token', res.body.token)
           localStorage.setItem('currentUser', JSON.stringify(res.body.user))
 
           try {
             this.props.history.pushState('home')
-          } catch(e) {
+          } catch (e) {
             console.error(e)
           }
         }.bind(this))
diff --git a/browser/main/Containers/MainContainer.js b/browser/main/MainPage.js
similarity index 90%
rename from browser/main/Containers/MainContainer.js
rename to browser/main/MainPage.js
index 4cba559d..568075c4 100644
--- a/browser/main/Containers/MainContainer.js
+++ b/browser/main/MainPage.js
@@ -1,10 +1,9 @@
-var ipc = require('ipc')
+import ipc from 'ipc'
 import React, { PropTypes } from 'react'
 
-var ContactModal = require('../Components/ContactModal')
+var ContactModal = require('boost/components/modal/ContactModal')
 
 export default class MainContainer extends React.Component {
-  // mixins: [Modal],
   constructor (props) {
     super(props)
     this.state = {updateAvailable: false}
diff --git a/browser/main/Mixins/ArticleFilter.js b/browser/main/Mixins/ArticleFilter.js
deleted file mode 100644
index d3506e8d..00000000
--- a/browser/main/Mixins/ArticleFilter.js
+++ /dev/null
@@ -1,67 +0,0 @@
-function basicFilter (keyword, articles) {
-  if (keyword === '' || keyword == null) return articles
-  var firstFiltered = articles.filter(function (article) {
-
-    var first = article.type === 'code' ? article.description : article.title
-    if (first.match(new RegExp(keyword, 'i'))) return true
-
-    return false
-  })
-
-  var secondFiltered = articles.filter(function (article) {
-    var second = article.type === 'code' ? article.content : article.content
-    if (second.match(new RegExp(keyword, 'i'))) return true
-
-    return false
-  })
-
-  return firstFiltered.concat(secondFiltered).filter(function (value, index, self) {
-    return self.indexOf(value) === index
-  })
-}
-
-function codeFilter (articles) {
-  return articles.filter(function (article) {
-    return article.type === 'code'
-  })
-}
-
-function noteFilter (articles) {
-  return articles.filter(function (article) {
-    return article.type === 'note'
-  })
-}
-
-function tagFilter (keyword, articles) {
-  return articles.filter(function (article) {
-    return article.Tags.some(function (tag) {
-      return tag.name.match(new RegExp('^' + keyword, 'i'))
-    })
-  })
-}
-
-function searchArticle (search, articles) {
-  var keywords = search.split(' ')
-
-  for (var keyword of keywords) {
-    if (keyword.match(/^\$c/, 'i')) {
-      articles = codeFilter(articles)
-      continue
-    } else if (keyword.match(/^\$n/, 'i')) {
-      articles = noteFilter(articles)
-      continue
-    } else if (keyword.match(/^#[A-Za-z0-9]+/)) {
-      articles = tagFilter(keyword.substring(1, keyword.length), articles)
-      continue
-    }
-    articles = basicFilter(keyword, articles)
-  }
-
-  return articles.sort(function (a, b) {
-    return new Date(b.updatedAt) - new Date(a.updatedAt)
-  })
-}
-
-module.exports = {
-  searchArticle: searchArticle
-}
diff --git a/browser/main/Mixins/AuthFilter.js b/browser/main/Mixins/AuthFilter.js
deleted file mode 100644
index 3903302b..00000000
--- a/browser/main/Mixins/AuthFilter.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/* global localStorage*/
-
-var mixin = {}
-
-mixin.OnlyGuest = {
-  componentDidMount: function () {
-    var currentUser = JSON.parse(localStorage.getItem('currentUser'))
-
-    if (currentUser == null) {
-      return
-    }
-    this.transitionTo('homeDefault')
-  }
-}
-
-mixin.OnlyUser = {
-  componentDidMount: function () {
-    var currentUser = localStorage.getItem('currentUser')
-
-    if (currentUser == null) {
-      this.transitionTo('login')
-      return
-    }
-  }
-}
-
-module.exports = mixin
diff --git a/browser/main/Mixins/ExternalLink.js b/browser/main/Mixins/ExternalLink.js
deleted file mode 100644
index 45005a04..00000000
--- a/browser/main/Mixins/ExternalLink.js
+++ /dev/null
@@ -1,8 +0,0 @@
-var shell = require('shell')
-
-module.exports = {
-  openExternal: function (e) {
-    shell.openExternal(e.currentTarget.href)
-    e.preventDefault()
-  }
-}
diff --git a/browser/main/Mixins/ForceUpdate.js b/browser/main/Mixins/ForceUpdate.js
deleted file mode 100644
index db49bc8e..00000000
--- a/browser/main/Mixins/ForceUpdate.js
+++ /dev/null
@@ -1,14 +0,0 @@
-var ForceUpdate = function (interval) {
-  return {
-    componentDidMount: function () {
-      this.refreshTimer = setInterval(function () {
-        this.forceUpdate()
-      }.bind(this), interval)
-    },
-    componentWillUnmount: function () {
-      clearInterval(this.refreshTimer)
-    }
-  }
-}
-
-module.exports = ForceUpdate
diff --git a/browser/main/Mixins/Helper.js b/browser/main/Mixins/Helper.js
deleted file mode 100644
index ee9d8564..00000000
--- a/browser/main/Mixins/Helper.js
+++ /dev/null
@@ -1,33 +0,0 @@
-function deleteItemFromTargetArray (item, targetArray) {
-  if (targetArray == null) targetArray = []
-  targetArray.some(function (_item, index) {
-    if (_item.id === item.id) {
-      targetArray.splice(index, 1)
-      return true
-    }
-    return false
-  })
-
-  return targetArray
-}
-
-function updateItemToTargetArray (item, targetArray) {
-  if (targetArray == null) targetArray = []
-
-  var isNew = !targetArray.some(function (_item, index) {
-    if (_item.id === item.id) {
-      targetArray.splice(index, 1, item)
-      return true
-    }
-    return false
-  })
-
-  if (isNew) targetArray.push(item)
-
-  return targetArray
-}
-
-module.exports = {
-  deleteItemFromTargetArray: deleteItemFromTargetArray,
-  updateItemToTargetArray: updateItemToTargetArray
-}
diff --git a/browser/main/Mixins/KeyCaster.js b/browser/main/Mixins/KeyCaster.js
deleted file mode 100644
index e9996d69..00000000
--- a/browser/main/Mixins/KeyCaster.js
+++ /dev/null
@@ -1,100 +0,0 @@
-var Reflux = require('reflux')
-
-var state = {
-
-}
-
-var keyDown = Reflux.createAction()
-
-var KeyStore = Reflux.createStore({
-  init: function () {
-    this.listenTo(keyDown, this.onKeyDown)
-    document.addEventListener('keydown', function (e) {
-      keyDown(e)
-    })
-  },
-  setState: function (newState, cb) {
-    for (var key in newState) {
-      state[key] = newState[key]
-    }
-    if (typeof cb === 'function') cb()
-  },
-  onKeyDown: function (e) {
-    /*
-      Modals
-    */
-    if (state.codeForm || state.noteForm || state.noteDeleteModal || state.codeDeleteModal || state.addMemberModal || state.aboutModal || state.editProfileModal || state.contactModal || state.teamCreateModal || state.planetCreateModal || state.planetSettingModal || state.teamSettingsModal || state.logoutModal) {
-      // ESC
-      if (e.keyCode === 27) this.cast('closeModal')
-
-      // Cmd + Enter
-      if (e.keyCode === 13 && e.metaKey) {
-        if (state.codeForm) this.cast('submitCodeForm')
-        if (state.noteForm) this.cast('submitNoteForm')
-        if (state.codeDeleteModal) this.cast('submitCodeDeleteModal')
-        if (state.noteDeleteModal) this.cast('submitNoteDeleteModal')
-        if (state.addMemberModal) this.cast('submitAddMemberModal')
-        if (state.contactModal) this.cast('submitContactModal')
-        if (state.teamCreateModal) this.cast('submitTeamCreateModal')
-        if (state.planetCreateModal) this.cast('submitPlanetCreateModal')
-        if (state.logoutModal) this.cast('submitLogoutModal')
-      }
-
-      return
-    }
-
-    /*
-      PlanetContainer
-    */
-    if (state.planetContainer) {
-      // Cmd + Enter, A
-      if ((e.keyCode === 13 && e.metaKey) || e.keyCode === 65) this.cast('openLaunchModal')
-
-      // Esc
-      if (e.keyCode === 27) this.cast('toggleFocusSearchInput')
-
-      // Up
-      if (e.keyCode === 38) this.cast('selectPriorArticle')
-
-      // Down
-      if (e.keyCode === 40) this.cast('selectNextArticle')
-
-      // E
-      if (e.keyCode === 69) this.cast('openEditModal')
-
-      // D
-      if (e.keyCode === 68) this.cast('openDeleteModal')
-    }
-
-    /*
-      HomeContainer
-    */
-    if (state.homeContainer) {
-      if (e.keyCode > 48 && e.keyCode < 58 && e.metaKey) {
-        this.cast('switchPlanet', e.keyCode - 48)
-      }
-    }
-  },
-  cast: function (status, data) {
-    this.trigger({
-      status: status,
-      data: data
-    })
-  }
-})
-
-module.exports = function (stateKey) {
-  return {
-    mixins: [Reflux.listenTo(KeyStore, 'onKeyCast')],
-    componentDidMount: function () {
-      var newState = {}
-      newState[stateKey] = true
-      KeyStore.setState(newState)
-    },
-    componentWillUnmount: function () {
-      var newState = {}
-      newState[stateKey] = false
-      KeyStore.setState(newState)
-    }
-  }
-}
diff --git a/browser/main/Mixins/Markdown.js b/browser/main/Mixins/Markdown.js
deleted file mode 100644
index 4a59c3d9..00000000
--- a/browser/main/Mixins/Markdown.js
+++ /dev/null
@@ -1,14 +0,0 @@
-var markdownit = require('markdown-it')
-var md = markdownit({
-  typographer: true,
-  linkify: true
-})
-
-var Markdown = {
-  markdown: function (content) {
-    if (content == null) content = ''
-    return md.render(content)
-  }
-}
-
-module.exports = Markdown
diff --git a/browser/main/Mixins/Modal.jsx b/browser/main/Mixins/Modal.jsx
deleted file mode 100644
index 3367eda7..00000000
--- a/browser/main/Mixins/Modal.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react'
-var ModalBase = React.createClass({
-  getInitialState: function () {
-    return {
-      component: null,
-      componentProps: {},
-      isHidden: true
-    }
-  },
-  close: function () {
-    this.setState({component: null, componentProps: null, isHidden: true})
-  },
-  render: function () {
-    var componentProps = this.state.componentProps
-    return (
-      <div className={'ModalBase' + (this.state.isHidden ? ' hide' : '')}>
-        <div onClick={this.close} className='modalBack'/>
-        {this.state.component == null ? null : (
-          <this.state.component {...componentProps} close={this.close}/>
-        )}
-      </div>
-    )
-  }
-})
-
-var modalBase = null
-
-module.exports = {
-  componentDidMount: function () {
-    if (modalBase == null) {
-      var el = document.createElement('div')
-      document.body.appendChild(el)
-      modalBase = React.render(<ModalBase/>, el)
-    }
-  },
-  openModal: function (component, props) {
-    modalBase.setState({component: component, componentProps: props, isHidden: false})
-  },
-  closeModal: function () {
-    modalBase.setState({isHidden: true})
-  }
-}
diff --git a/browser/main/Mixins/linkState.js b/browser/main/Mixins/linkState.js
deleted file mode 100644
index 6b2be4a0..00000000
--- a/browser/main/Mixins/linkState.js
+++ /dev/null
@@ -1,29 +0,0 @@
-function getIn (object, path) {
-  var stack = path.split('.')
-  while (stack.length > 1) {
-    object = object[stack.shift()]
-  }
-  return object[stack.shift()]
-}
-
-function updateIn (object, path, value) {
-  var current = object
-  var stack = path.split('.')
-  while (stack.length > 1) {
-    current = current[stack.shift()]
-  }
-  current[stack.shift()] = value
-  return object
-}
-
-function setPartialState (component, path, value) {
-  component.setState(
-    updateIn(component.state, path, value))
-}
-
-export default function linkState (path) {
-  return {
-    value: getIn(this.state, path),
-    requestChange: setPartialState.bind(null, this, path)
-  }
-}
diff --git a/browser/main/Services/Hq.js b/browser/main/Services/Hq.js
deleted file mode 100644
index 9c241dad..00000000
--- a/browser/main/Services/Hq.js
+++ /dev/null
@@ -1,82 +0,0 @@
-var request = require('superagent-promise')(require('superagent'), Promise)
-var apiUrl = require('../../../config').apiUrl
-
-module.exports = {
-  // Auth
-  login: function (input) {
-    return request
-      .post(apiUrl + 'auth/login')
-      .send(input)
-  },
-  signup: function (input) {
-    return request
-      .post(apiUrl + 'auth/register')
-      .send(input)
-  },
-  getUser: function () {
-    return request
-      .get(apiUrl + 'auth/user')
-      .set({
-        Authorization: 'Bearer ' + localStorage.getItem('token')
-      })
-  },
-  changePassword: function (input) {
-    return request
-      .post(apiUrl + 'auth/password')
-      .set({
-        Authorization: 'Bearer ' + localStorage.getItem('token')
-      })
-      .send(input)
-  },
-  fetchArticles: function (userId) {
-    return request
-      .get(apiUrl + 'teams/' + userId +'/articles')
-      .set({
-        Authorization: 'Bearer ' + localStorage.getItem('token')
-      })
-  },
-  fetchArticlesByFolderId: function (folderId) {
-    return request
-      .get(apiUrl + 'folders/' + folderId +'/articles')
-      .set({
-        Authorization: 'Bearer ' + localStorage.getItem('token')
-      })
-  },
-  createArticle: function (input) {
-    return request
-      .post(apiUrl + 'folders/' + input.FolderId + '/articles')
-      .set({
-        Authorization: 'Bearer ' + localStorage.getItem('token')
-      })
-      .send(input)
-  },
-  updateArticle: function (articleId, input) {
-    return request
-      .put(apiUrl + 'articles/' + articleId)
-      .set({
-        Authorization: 'Bearer ' + localStorage.getItem('token')
-      })
-      .send(input)
-  },
-  // Search
-  searchTag: function (tagName) {
-    return request
-      .get(apiUrl + 'search/tags')
-      .query({name: tagName})
-  },
-  searchUser: function (userName) {
-    return request
-      .get(apiUrl + 'search/users')
-      .query({name: userName})
-  },
-
-  // Mail
-  sendEmail: function (input) {
-    return request
-      .post(apiUrl + 'mail')
-      .set({
-        Authorization: 'Bearer ' + localStorage.getItem('token')
-      })
-      .send(input)
-  }
-}
diff --git a/browser/main/Services/socket.js b/browser/main/Services/socket.js
deleted file mode 100644
index 2e285324..00000000
--- a/browser/main/Services/socket.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/* global localStorage */
-
-var config = require('../../../config')
-
-var io = require('socket.io-client')(config.apiUrl)
-
-io.on('connected', function (data) {
-  console.log('connected by WS')
-})
-
-io.on('userUpdated', function (data) {
-  console.log('userUpdated')
-})
-
-module.exports = {
-  io: io
-}
diff --git a/browser/main/Containers/SignupContainer.js b/browser/main/SignupPage.js
similarity index 94%
rename from browser/main/Containers/SignupContainer.js
rename to browser/main/SignupPage.js
index ea279cec..2a624241 100644
--- a/browser/main/Containers/SignupContainer.js
+++ b/browser/main/SignupPage.js
@@ -1,9 +1,8 @@
 import React, { PropTypes } from 'react'
 import { Link } from 'react-router'
-import linkState from '../helpers/linkState'
-import openExternal from '../helpers/openExternal'
-
-var Hq = require('../Services/Hq')
+import linkState from 'boost/linkState'
+import openExternal from 'boost/openExternal'
+import { signup } from 'boost/api'
 
 export default class SignupContainer extends React.Component {
   constructor (props) {
@@ -26,7 +25,7 @@ export default class SignupContainer extends React.Component {
       isSending: true,
       error: null
     }, function () {
-      Hq.signup(this.state.user)
+      signup(this.state.user)
         .then(res => {
           localStorage.setItem('token', res.body.token)
           localStorage.setItem('currentUser', JSON.stringify(res.body.user))
diff --git a/browser/main/HomeContainer/actions.js b/browser/main/actions.js
similarity index 100%
rename from browser/main/HomeContainer/actions.js
rename to browser/main/actions.js
diff --git a/browser/main/index.js b/browser/main/index.js
index 82f7c834..f7de8928 100644
--- a/browser/main/index.js
+++ b/browser/main/index.js
@@ -1,14 +1,14 @@
 import React from 'react'
 import { createStore } from 'redux'
 import { Provider } from 'react-redux'
-import { updateUser, updateArticles } from './HomeContainer/actions'
-import reducer from './HomeContainer/reducer'
-import { fetchCurrentUser, fetchArticles } from './HomeContainer/lib/api'
+import { updateUser, updateArticles } from './actions'
+import reducer from './reducer'
+import { fetchCurrentUser, fetchArticles } from 'boost/api'
 import { Router, Route, IndexRoute } from 'react-router'
-import MainContainer from './Containers/MainContainer'
-import LoginContainer from './Containers/LoginContainer'
-import SignupContainer from './Containers/SignupContainer'
-import HomeContainer from './HomeContainer'
+import MainPage from './MainPage'
+import LoginPage from './LoginPage'
+import SignupPage from './SignupPage'
+import HomePage from './HomePage'
 require('../styles/main/index.styl')
 
 function onlyUser (state, replaceState) {
@@ -18,11 +18,11 @@ function onlyUser (state, replaceState) {
 }
 
 let routes = (
-  <Route path='/' component={MainContainer}>
-    <Route name='login' path='login' component={LoginContainer}/>
-    <Route name='signup' path='signup' component={SignupContainer}/>
-    <IndexRoute name='home' component={HomeContainer} onEnter={onlyUser}/>
-    <Route name='user' path='/users/:userId' component={HomeContainer} onEnter={onlyUser}/>
+  <Route path='/' component={MainPage}>
+    <Route name='login' path='login' component={LoginPage}/>
+    <Route name='signup' path='signup' component={SignupPage}/>
+    <IndexRoute name='home' component={HomePage} onEnter={onlyUser}/>
+    <Route name='user' path='/users/:userId' component={HomePage} onEnter={onlyUser}/>
   </Route>
 )
 
diff --git a/browser/main/HomeContainer/reducer.js b/browser/main/reducer.js
similarity index 100%
rename from browser/main/HomeContainer/reducer.js
rename to browser/main/reducer.js
diff --git a/browser/styles/main/index.css b/browser/styles/main/index.css
deleted file mode 100644
index 4cdcb064..00000000
--- a/browser/styles/main/index.css
+++ /dev/null
@@ -1,3892 +0,0 @@
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  outline: 0;
-  font-weight: inherit;
-  font-style: inherit;
-  font-family: inherit;
-  font-size: 100%;
-  vertical-align: baseline;
-}
-body {
-  line-height: 1;
-  color: #000;
-  background: #fff;
-}
-ol,
-ul {
-  list-style: none;
-}
-table {
-  border-collapse: separate;
-  border-spacing: 0;
-  vertical-align: middle;
-}
-caption,
-th,
-td {
-  text-align: left;
-  font-weight: normal;
-  vertical-align: middle;
-}
-a img {
-  border: none;
-}
-.btn-primary,
-.btn-default {
-  border-style: solid;
-  border-width: 1px;
-  background-image: none;
-  height: 44px;
-  padding: 0 15px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  font-size: 1em;
-  font-family: 'Lato';
-  font-weight: 400;
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-  cursor: pointer;
-  margin: 0 5px;
-}
-.btn-block {
-  display: block;
-  width: 100%;
-  margin: 0 auto;
-}
-.btn-square {
-  display: inline-block;
-  width: 44px;
-  padding: 0;
-  border-width: 1px;
-}
-.btn-sm {
-  height: 32px;
-  -webkit-border-radius: 16px;
-  border-radius: 16px;
-}
-.btn-sm.btn-square {
-  width: 32px;
-}
-.btn-primary {
-  border-color: #3fb399;
-  background-color: transparent;
-  color: #2bac8f;
-}
-.btn-primary:hover,
-.btn-primary.hover,
-.btn-primary:focus,
-.btn-primary.focus {
-  border-color: #2c7d6b;
-  color: #1e7864;
-}
-.btn-primary:active,
-.btn-primary.active {
-  background-color: #2bac8f;
-  color: #fff;
-}
-.btn-default {
-  border-color: #898989;
-  background-color: transparent;
-  color: #898989;
-}
-.btn-default:hover,
-.btn-default.hover,
-.btn-default:focus,
-.btn-default.focus {
-  border-color: #454545;
-  color: #454545;
-}
-.btn-default:active,
-.btn-default.active {
-  border-color: #39a18a;
-  background-color: #2bac8f;
-  color: #fff;
-}
-.ModalBase {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  z-index: 1000;
-}
-.ModalBase.hide {
-  display: none;
-}
-.ModalBase .modalBack {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  background-color: rgba(255,255,255,0.65);
-  z-index: 1001;
-}
-.ModalBase .modal {
-  position: relative;
-  width: 650px;
-  margin: 50px auto 0;
-  z-index: 1002;
-  -webkit-box-shadow: 0 0 5px 0 #888;
-  box-shadow: 0 0 5px 0 #888;
-  background-color: #fff;
-  -webkit-border-radius: 10px;
-  border-radius: 10px;
-  padding: 15px;
-}
-.ModalBase .modal .modal-header {
-  border-bottom: solid 1px #d0d0d0;
-  margin-bottom: 10px;
-}
-.ModalBase .modal .modal-header h1 {
-  padding: 10px 0 15px;
-  font-size: 1.5em;
-}
-.ModalBase .modal .modal-body p {
-  margin-bottom: 10px;
-}
-.ModalBase .modal .modal-footer {
-  zoom: 1;
-  border-top: solid 1px #d0d0d0;
-  padding-top: 10px;
-}
-.ModalBase .modal .modal-footer:before,
-.ModalBase .modal .modal-footer:after {
-  content: "";
-  display: table;
-}
-.ModalBase .modal .modal-footer:after {
-  clear: both;
-}
-.ModalBase .modal .modal-footer .modal-control {
-  float: right;
-}
-.ModalBase .sideNavModal {
-  height: 500px;
-}
-.ModalBase .sideNavModal .leftPane {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 175px;
-  padding: 20px;
-  border-right: solid 1px #d0d0d0;
-}
-.ModalBase .sideNavModal .leftPane .modalLabel {
-  font-size: 1.5em;
-  margin-top: 25px;
-  margin-bottom: 35px;
-  color: #2bac8f;
-}
-.ModalBase .sideNavModal .leftPane .tabList button {
-  border: none;
-  background-color: transparent;
-  color: #898989;
-  display: block;
-  width: 100%;
-  font-size: 1.1em;
-  padding: 10px 5px;
-  margin-bottom: 15px;
-  text-align: left;
-}
-.ModalBase .sideNavModal .leftPane .tabList button:hover,
-.ModalBase .sideNavModal .leftPane .tabList button.hover,
-.ModalBase .sideNavModal .leftPane .tabList button:focus,
-.ModalBase .sideNavModal .leftPane .tabList button.focus {
-  color: #454545;
-}
-.ModalBase .sideNavModal .leftPane .tabList button:active,
-.ModalBase .sideNavModal .leftPane .tabList button.active {
-  color: #2bac8f;
-}
-.ModalBase .sideNavModal .rightPane {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 175px;
-  padding: 15px;
-  overflow-y: auto;
-}
-.ModalBase .sideNavModal .tab {
-  padding-top: 45px;
-}
-.ModalBase .sideNavModal .tab .formField {
-  position: relative;
-  zoom: 1;
-  margin-bottom: 15px;
-}
-.ModalBase .sideNavModal .tab .formField:before,
-.ModalBase .sideNavModal .tab .formField:after {
-  content: "";
-  display: table;
-}
-.ModalBase .sideNavModal .tab .formField:after {
-  clear: both;
-}
-.ModalBase .sideNavModal .tab .formField label {
-  width: 30%;
-  display: block;
-  line-height: 33px;
-  float: left;
-}
-.ModalBase .sideNavModal .tab .formField input {
-  width: 70%;
-  display: block;
-  border: solid 1px #d0d0d0;
-  padding: 5px 15px;
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-  height: 33px;
-  font-size: 1em;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  float: left;
-}
-.ModalBase .sideNavModal .tab .formField input:focus,
-.ModalBase .sideNavModal .tab .formField input.focus {
-  border-color: #3fb399;
-  outline: none;
-}
-.ModalBase .sideNavModal .tab .formRadioField {
-  margin-bottom: 15px;
-}
-.ModalBase .sideNavModal .tab .formRadioField input {
-  margin-left: 25px;
-}
-.ModalBase .sideNavModal .tab .formConfirm {
-  position: relative;
-  zoom: 1;
-  margin-bottom: 15px;
-}
-.ModalBase .sideNavModal .tab .formConfirm:before,
-.ModalBase .sideNavModal .tab .formConfirm:after {
-  content: "";
-  display: table;
-}
-.ModalBase .sideNavModal .tab .formConfirm:after {
-  clear: both;
-}
-.ModalBase .sideNavModal .tab .formConfirm button {
-  float: right;
-  border-style: solid;
-  border-width: 1px;
-  border-color: #898989;
-  background-color: transparent;
-  color: #898989;
-  padding: 10px 15px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  font-size: 1em;
-  margin-left: 5px;
-}
-.ModalBase .sideNavModal .tab .formConfirm button:hover,
-.ModalBase .sideNavModal .tab .formConfirm button.hover,
-.ModalBase .sideNavModal .tab .formConfirm button:focus,
-.ModalBase .sideNavModal .tab .formConfirm button.focus {
-  border-color: #454545;
-  color: #454545;
-}
-.ModalBase .sideNavModal .tab .formConfirm button:active,
-.ModalBase .sideNavModal .tab .formConfirm button.active {
-  border-color: #39a18a;
-  background-color: #2bac8f;
-  color: #fff;
-}
-.ModalBase .sideNavModal .tab .formConfirm button:disabled,
-.ModalBase .sideNavModal .tab .formConfirm button.disabled {
-  opacity: 0.6;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-  filter: alpha(opacity=60);
-}
-.ModalBase .sideNavModal .tab .formConfirm .alertInfo,
-.ModalBase .sideNavModal .tab .formConfirm .alertSuccess,
-.ModalBase .sideNavModal .tab .formConfirm .alertError {
-  float: right;
-  padding: 12px 10px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  width: 320px;
-  font-size: 1em;
-  overflow-x: hidden;
-  white-space: nowrap;
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-}
-.ModalBase .sideNavModal .tab .formConfirm .alertInfo.hide,
-.ModalBase .sideNavModal .tab .formConfirm .alertSuccess.hide,
-.ModalBase .sideNavModal .tab .formConfirm .alertError.hide {
-  width: 0;
-  padding: 12px 0;
-}
-.ModalBase .sideNavModal .tab .formConfirm .alertInfo {
-  background-color: #d9edf7;
-  color: #34708e;
-}
-.ModalBase .sideNavModal .tab .formConfirm .alertSuccess {
-  background-color: #e0f0d9;
-  color: #3e753f;
-}
-.ModalBase .sideNavModal .tab .formConfirm .alertError {
-  background-color: #f2dede;
-  color: #a64444;
-}
-.ModalBase .PreferencesModal .settingsTab .categoryLabel {
-  font-size: 1.5em;
-  margin-bottom: 25px;
-}
-.ModalBase .PreferencesModal .settingsTab .example hr {
-  border-top: none;
-  border-bottom: solid 1px #d0d0d0;
-  margin: 15px 0;
-}
-.ModalBase .PreferencesModal .settingsTab .example h1 {
-  font-size: 2em;
-  border-bottom: solid 2px #d0d0d0;
-  margin: 0.33em auto 0.67em;
-}
-.ModalBase .PreferencesModal .settingsTab .example h2 {
-  font-size: 1.5em;
-  margin: 0.42em auto 0.83em;
-}
-.ModalBase .PreferencesModal .settingsTab .example h3 {
-  font-size: 1.17em;
-  margin: 0.5em auto 1em;
-}
-.ModalBase .PreferencesModal .settingsTab .example h4 {
-  font-size: 1em;
-  margin: 0.67em auto 1.33em;
-}
-.ModalBase .PreferencesModal .settingsTab .example h5 {
-  font-size: 0.83em;
-  margin: 0.84em auto 1.67em;
-}
-.ModalBase .PreferencesModal .settingsTab .example h6 {
-  font-size: 0.67em;
-  margin: 1.16em auto 2.33em;
-}
-.ModalBase .PreferencesModal .settingsTab .example h1,
-.ModalBase .PreferencesModal .settingsTab .example h2,
-.ModalBase .PreferencesModal .settingsTab .example h3,
-.ModalBase .PreferencesModal .settingsTab .example h4,
-.ModalBase .PreferencesModal .settingsTab .example h5,
-.ModalBase .PreferencesModal .settingsTab .example h6 {
-  font-weight: 700;
-  line-height: 1.8em;
-}
-.ModalBase .PreferencesModal .settingsTab .example p {
-  line-height: 1.8em;
-  margin: 15px 0 25px;
-}
-.ModalBase .PreferencesModal .settingsTab .example img {
-  max-width: 100%;
-}
-.ModalBase .PreferencesModal .settingsTab .example strong {
-  font-weight: bold;
-}
-.ModalBase .PreferencesModal .settingsTab .example em {
-  font-style: italic;
-}
-.ModalBase .PreferencesModal .settingsTab .example s {
-  text-decoration: line-through;
-}
-.ModalBase .PreferencesModal .settingsTab .example blockquote {
-  border-left: solid 4px #3fb399;
-  margin: 15px 0 25px;
-  padding: 0 25px;
-}
-.ModalBase .PreferencesModal .settingsTab .example ul {
-  list-style-type: disc;
-  padding-left: 35px;
-  margin-bottom: 35px;
-}
-.ModalBase .PreferencesModal .settingsTab .example ul li {
-  display: list-item;
-  margin: 15px 0;
-}
-.ModalBase .PreferencesModal .settingsTab .example ul>li>ul {
-  list-style-type: circle;
-}
-.ModalBase .PreferencesModal .settingsTab .example ul>li>ul>li>ul {
-  list-style-type: square;
-}
-.ModalBase .PreferencesModal .settingsTab .example ol {
-  list-style-type: decimal;
-  padding-left: 35px;
-  margin-bottom: 35px;
-}
-.ModalBase .PreferencesModal .settingsTab .example ol li {
-  display: list-item;
-  margin: 15px 0;
-}
-.ModalBase .PreferencesModal .settingsTab .example code {
-  font-family: monospace;
-  padding: 2px 4px;
-  border: solid 1px #d0d0d0;
-  -webkit-border-radius: 4px;
-  border-radius: 4px;
-  font-size: 0.9em;
-  color: #000;
-  text-decoration: none;
-  background-color: #f6f6f6;
-}
-.ModalBase .PreferencesModal .settingsTab .example pre {
-  padding: 5px;
-  border: solid 1px #d0d0d0;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  overflow-x: auto;
-  margin: 15px 0 25px;
-  background-color: #f6f6f6;
-}
-.ModalBase .PreferencesModal .settingsTab .example pre>code {
-  padding: 0;
-  border: none;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-  color: #000;
-}
-.ModalBase .PreferencesModal .settingsTab .example table {
-  width: 100%;
-  margin: 15px 0 25px;
-}
-.ModalBase .PreferencesModal .settingsTab .example table thead tr {
-  background-color: #fff;
-}
-.ModalBase .PreferencesModal .settingsTab .example table thead th {
-  border-style: solid;
-  padding: 15px 5px;
-  border-width: 1px 0 2px 1px;
-  border-color: #d0d0d0;
-}
-.ModalBase .PreferencesModal .settingsTab .example table thead th:last-child {
-  border-right: solid 1px #d0d0d0;
-}
-.ModalBase .PreferencesModal .settingsTab .example table tbody tr:nth-child(2n + 1) {
-  background-color: #f9f9f9;
-}
-.ModalBase .PreferencesModal .settingsTab .example table tbody tr:nth-child(2n) {
-  background-color: #fff;
-}
-.ModalBase .PreferencesModal .settingsTab .example table tbody td {
-  border-style: solid;
-  padding: 15px 5px;
-  border-width: 0 0 1px 1px;
-  border-color: #d0d0d0;
-}
-.ModalBase .PreferencesModal .settingsTab .example table tbody td:last-child {
-  border-right: solid 1px #d0d0d0;
-}
-.ModalBase .PreferencesModal .aboutTab {
-  padding-top: 30px;
-}
-.ModalBase .PreferencesModal .aboutTab .about1 {
-  margin-bottom: 25px;
-}
-.ModalBase .PreferencesModal .aboutTab .about1 .logo {
-  display: block;
-  margin: 0 auto;
-}
-.ModalBase .PreferencesModal .aboutTab .about1 .appInfo {
-  font-size: 1.5em;
-  text-align: center;
-}
-.ModalBase .PreferencesModal .aboutTab .about2 {
-  width: 200px;
-  margin: 0 auto;
-}
-.ModalBase .PreferencesModal .aboutTab .about2 .externalLabel {
-  font-size: 1.2em;
-  margin-bottom: 15px;
-}
-.ModalBase .PreferencesModal .aboutTab .about2 .externalList li {
-  margin-bottom: 15px;
-}
-.ModalBase .PlanetSettingModal .planetDeleteTab {
-  padding-top: 65px;
-}
-.ModalBase .PlanetSettingModal .planetDeleteTab p {
-  margin-bottom: 25px;
-}
-.ModalBase .PlanetSettingModal .planetDeleteTab p strong {
-  color: #2bac8f;
-  font-size: 1.1em;
-}
-.ModalBase .PlanetSettingModal .planetDeleteTab input {
-  border: solid 1px #d0d0d0;
-  padding: 5px 15px;
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-  margin-right: 5px;
-  height: 33px;
-  font-size: 1em;
-  -webkit-border-radius: 10px;
-  border-radius: 10px;
-}
-.ModalBase .PlanetSettingModal .planetDeleteTab input:focus,
-.ModalBase .PlanetSettingModal .planetDeleteTab input.focus {
-  border-color: #3fb399;
-  outline: none;
-}
-.ModalBase .PlanetSettingModal .planetDeleteTab .formConfirm {
-  position: relative;
-  zoom: 1;
-  margin-bottom: 15px;
-}
-.ModalBase .PlanetSettingModal .planetDeleteTab .formConfirm:before,
-.ModalBase .PlanetSettingModal .planetDeleteTab .formConfirm:after {
-  content: "";
-  display: table;
-}
-.ModalBase .PlanetSettingModal .planetDeleteTab .formConfirm:after {
-  clear: both;
-}
-.ModalBase .PlanetSettingModal .planetDeleteTab .formConfirm button {
-  float: right;
-  border-style: solid;
-  border-width: 1px;
-  border-color: #898989;
-  background-color: transparent;
-  color: #898989;
-  padding: 10px 15px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  font-size: 1em;
-  margin-left: 5px;
-}
-.ModalBase .PlanetSettingModal .planetDeleteTab .formConfirm button:hover,
-.ModalBase .PlanetSettingModal .planetDeleteTab .formConfirm button.hover,
-.ModalBase .PlanetSettingModal .planetDeleteTab .formConfirm button:focus,
-.ModalBase .PlanetSettingModal .planetDeleteTab .formConfirm button.focus {
-  border-color: #454545;
-  color: #454545;
-}
-.ModalBase .PlanetSettingModal .planetDeleteTab .formConfirm button:active,
-.ModalBase .PlanetSettingModal .planetDeleteTab .formConfirm button.active {
-  border-color: #39a18a;
-  background-color: #2bac8f;
-  color: #fff;
-}
-.ModalBase .PlanetSettingModal .planetDeleteTab .formConfirm button:disabled,
-.ModalBase .PlanetSettingModal .planetDeleteTab .formConfirm button.disabled {
-  opacity: 0.6;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-  filter: alpha(opacity=60);
-}
-.ModalBase .PlanetSettingModal .planetDeleteTab .formConfirm .alertInfo,
-.ModalBase .PlanetSettingModal .planetDeleteTab .formConfirm .alertSuccess,
-.ModalBase .PlanetSettingModal .planetDeleteTab .formConfirm .alertError {
-  float: right;
-  padding: 12px 10px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  width: 320px;
-  font-size: 1em;
-  overflow-x: hidden;
-  white-space: nowrap;
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-}
-.ModalBase .PlanetSettingModal .planetDeleteTab .formConfirm .alertInfo.hide,
-.ModalBase .PlanetSettingModal .planetDeleteTab .formConfirm .alertSuccess.hide,
-.ModalBase .PlanetSettingModal .planetDeleteTab .formConfirm .alertError.hide {
-  width: 0;
-  padding: 12px 0;
-}
-.ModalBase .PlanetSettingModal .planetDeleteTab .formConfirm .alertInfo {
-  background-color: #d9edf7;
-  color: #34708e;
-}
-.ModalBase .PlanetSettingModal .planetDeleteTab .formConfirm .alertSuccess {
-  background-color: #e0f0d9;
-  color: #3e753f;
-}
-.ModalBase .PlanetSettingModal .planetDeleteTab .formConfirm .alertError {
-  background-color: #f2dede;
-  color: #a64444;
-}
-.ModalBase .TeamSettingsModal .membersTab .memberTable {
-  width: 100%;
-  margin-bottom: 25px;
-}
-.ModalBase .TeamSettingsModal .membersTab .memberTable th {
-  border-bottom: solid 2px #d0d0d0;
-}
-.ModalBase .TeamSettingsModal .membersTab .memberTable td {
-  border-bottom: solid 1px #d0d0d0;
-  height: 38px;
-}
-.ModalBase .TeamSettingsModal .membersTab .memberTable td button {
-  border-style: solid;
-  border-width: 1px;
-  border-color: #898989;
-  background-color: transparent;
-  color: #898989;
-  padding: 5px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-}
-.ModalBase .TeamSettingsModal .membersTab .memberTable td button:hover,
-.ModalBase .TeamSettingsModal .membersTab .memberTable td button.hover,
-.ModalBase .TeamSettingsModal .membersTab .memberTable td button:focus,
-.ModalBase .TeamSettingsModal .membersTab .memberTable td button.focus {
-  border-color: #454545;
-  color: #454545;
-}
-.ModalBase .TeamSettingsModal .membersTab .memberTable td button:active,
-.ModalBase .TeamSettingsModal .membersTab .memberTable td button.active {
-  border-color: #39a18a;
-  background-color: #2bac8f;
-  color: #fff;
-}
-.ModalBase .TeamSettingsModal .membersTab .memberTable td button:disabled,
-.ModalBase .TeamSettingsModal .membersTab .memberTable td button.disabled {
-  opacity: 0.6;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-  filter: alpha(opacity=60);
-}
-.ModalBase .TeamSettingsModal .membersTab .memberTable td .roleSelect {
-  height: 33px;
-  border: solid 1px #d0d0d0;
-  background-color: #fff;
-}
-.ModalBase .TeamSettingsModal .membersTab .memberTable th,
-.ModalBase .TeamSettingsModal .membersTab .memberTable td {
-  padding: 5px 0;
-}
-.ModalBase .TeamSettingsModal .membersTab .addMemberForm .formLabel {
-  margin-bottom: 5px;
-}
-.ModalBase .TeamSettingsModal .membersTab .addMemberForm .formGroup {
-  zoom: 1;
-}
-.ModalBase .TeamSettingsModal .membersTab .addMemberForm .formGroup:before,
-.ModalBase .TeamSettingsModal .membersTab .addMemberForm .formGroup:after {
-  content: "";
-  display: table;
-}
-.ModalBase .TeamSettingsModal .membersTab .addMemberForm .formGroup:after {
-  clear: both;
-}
-.ModalBase .TeamSettingsModal .membersTab .addMemberForm .formGroup .userNameSelect {
-  display: block;
-  width: 200px;
-  margin-right: 5px;
-  float: left;
-}
-.ModalBase .TeamSettingsModal .membersTab .addMemberForm .formGroup .roleSelect {
-  display: block;
-  height: 33px;
-  border: solid 1px #d0d0d0;
-  background-color: #fff;
-  float: left;
-  margin-right: 5px;
-}
-.ModalBase .TeamSettingsModal .membersTab .addMemberForm .formGroup .confirmButton {
-  display: block;
-  height: 33px;
-  border-style: solid;
-  border-width: 1px;
-  border-color: #898989;
-  background-color: transparent;
-  color: #898989;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  float: left;
-}
-.ModalBase .TeamSettingsModal .membersTab .addMemberForm .formGroup .confirmButton:hover,
-.ModalBase .TeamSettingsModal .membersTab .addMemberForm .formGroup .confirmButton.hover,
-.ModalBase .TeamSettingsModal .membersTab .addMemberForm .formGroup .confirmButton:focus,
-.ModalBase .TeamSettingsModal .membersTab .addMemberForm .formGroup .confirmButton.focus {
-  border-color: #454545;
-  color: #454545;
-}
-.ModalBase .TeamSettingsModal .membersTab .addMemberForm .formGroup .confirmButton:active,
-.ModalBase .TeamSettingsModal .membersTab .addMemberForm .formGroup .confirmButton.active {
-  border-color: #39a18a;
-  background-color: #2bac8f;
-  color: #fff;
-}
-.ModalBase .TeamSettingsModal .membersTab .addMemberForm .formGroup .confirmButton:disabled,
-.ModalBase .TeamSettingsModal .membersTab .addMemberForm .formGroup .confirmButton.disabled {
-  opacity: 0.6;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-  filter: alpha(opacity=60);
-}
-.ModalBase .LaunchModal .modal-tab {
-  text-align: center;
-  margin-bottom: 10px;
-}
-.ModalBase .LaunchModal .modal-tab .btn-primary,
-.ModalBase .LaunchModal .modal-tab .btn-default {
-  margin: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-  border-width: 1px;
-  width: 150px;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-.ModalBase .LaunchModal .modal-tab .btn-primary:nth-child(1),
-.ModalBase .LaunchModal .modal-tab .btn-default:nth-child(1) {
-  border-right: solid 1px #d0d0d0;
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
-}
-.ModalBase .LaunchModal .modal-tab .btn-primary:nth-child(2),
-.ModalBase .LaunchModal .modal-tab .btn-default:nth-child(2) {
-  border-left: none;
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-.ModalBase .Select .Select-control {
-  border-color: #d0d0d0;
-}
-.ModalBase .Select.is-focused .Select-control {
-  border-color: #3fb399;
-}
-.ModalBase .Select .Select-menu-outer {
-  border-color: #d0d0d0;
-}
-.ModalBase .ace_editor {
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  border: solid 1px #d0d0d0;
-}
-.ModalBase .CodeForm .form-group,
-.ModalBase .NoteForm .form-group {
-  margin-bottom: 10px;
-}
-.ModalBase .CodeForm textarea.codeDescription {
-  height: 75px;
-  font-size: 0.9em;
-  margin-bottom: 10px;
-}
-.ModalBase .CodeForm .modeSelect.Select {
-  display: inline-block;
-  width: 200px;
-  height: 37px;
-}
-.ModalBase .CodeForm .modeSelect.Select .Select-control {
-  height: 37px;
-}
-.ModalBase .CodeForm .ace_editor {
-  height: 258px;
-}
-.ModalBase .NoteForm .ace_editor {
-  height: 358px;
-}
-.ModalBase .NoteForm .previewMode {
-  position: absolute;
-  top: 0;
-  right: 0;
-  font-size: 0.8em;
-  line-height: 24px;
-  padding: 5 15px;
-  background-color: rgba(0,0,0,0.2);
-  color: #fff;
-  border-top-right-radius: 5px;
-}
-.ModalBase .marked {
-  height: 360px;
-  overflow-x: hidden;
-  overflow-y: auto;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  padding: 5px;
-  border: solid 1px #d0d0d0;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-}
-.ModalBase .marked hr {
-  border-top: none;
-  border-bottom: solid 1px #d0d0d0;
-  margin: 15px 0;
-}
-.ModalBase .marked h1 {
-  font-size: 2em;
-  border-bottom: solid 2px #d0d0d0;
-  margin: 0.33em auto 0.67em;
-}
-.ModalBase .marked h2 {
-  font-size: 1.5em;
-  margin: 0.42em auto 0.83em;
-}
-.ModalBase .marked h3 {
-  font-size: 1.17em;
-  margin: 0.5em auto 1em;
-}
-.ModalBase .marked h4 {
-  font-size: 1em;
-  margin: 0.67em auto 1.33em;
-}
-.ModalBase .marked h5 {
-  font-size: 0.83em;
-  margin: 0.84em auto 1.67em;
-}
-.ModalBase .marked h6 {
-  font-size: 0.67em;
-  margin: 1.16em auto 2.33em;
-}
-.ModalBase .marked h1,
-.ModalBase .marked h2,
-.ModalBase .marked h3,
-.ModalBase .marked h4,
-.ModalBase .marked h5,
-.ModalBase .marked h6 {
-  font-weight: 700;
-  line-height: 1.8em;
-}
-.ModalBase .marked p {
-  line-height: 1.8em;
-  margin: 15px 0 25px;
-}
-.ModalBase .marked img {
-  max-width: 100%;
-}
-.ModalBase .marked strong {
-  font-weight: bold;
-}
-.ModalBase .marked em {
-  font-style: italic;
-}
-.ModalBase .marked s {
-  text-decoration: line-through;
-}
-.ModalBase .marked blockquote {
-  border-left: solid 4px #3fb399;
-  margin: 15px 0 25px;
-  padding: 0 25px;
-}
-.ModalBase .marked ul {
-  list-style-type: disc;
-  padding-left: 35px;
-  margin-bottom: 35px;
-}
-.ModalBase .marked ul li {
-  display: list-item;
-  margin: 15px 0;
-}
-.ModalBase .marked ul>li>ul {
-  list-style-type: circle;
-}
-.ModalBase .marked ul>li>ul>li>ul {
-  list-style-type: square;
-}
-.ModalBase .marked ol {
-  list-style-type: decimal;
-  padding-left: 35px;
-  margin-bottom: 35px;
-}
-.ModalBase .marked ol li {
-  display: list-item;
-  margin: 15px 0;
-}
-.ModalBase .marked code {
-  font-family: monospace;
-  padding: 2px 4px;
-  border: solid 1px #d0d0d0;
-  -webkit-border-radius: 4px;
-  border-radius: 4px;
-  font-size: 0.9em;
-  color: #000;
-  text-decoration: none;
-  background-color: #f6f6f6;
-}
-.ModalBase .marked pre {
-  padding: 5px;
-  border: solid 1px #d0d0d0;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  overflow-x: auto;
-  margin: 15px 0 25px;
-  background-color: #f6f6f6;
-}
-.ModalBase .marked pre>code {
-  padding: 0;
-  border: none;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-  color: #000;
-}
-.ModalBase .marked table {
-  width: 100%;
-  margin: 15px 0 25px;
-}
-.ModalBase .marked table thead tr {
-  background-color: #fff;
-}
-.ModalBase .marked table thead th {
-  border-style: solid;
-  padding: 15px 5px;
-  border-width: 1px 0 2px 1px;
-  border-color: #d0d0d0;
-}
-.ModalBase .marked table thead th:last-child {
-  border-right: solid 1px #d0d0d0;
-}
-.ModalBase .marked table tbody tr:nth-child(2n + 1) {
-  background-color: #f9f9f9;
-}
-.ModalBase .marked table tbody tr:nth-child(2n) {
-  background-color: #fff;
-}
-.ModalBase .marked table tbody td {
-  border-style: solid;
-  padding: 15px 5px;
-  border-width: 0 0 1px 1px;
-  border-color: #d0d0d0;
-}
-.ModalBase .marked table tbody td:last-child {
-  border-right: solid 1px #d0d0d0;
-}
-.ModalBase .PlanetCreateModal.modal,
-.ModalBase .TeamCreateModal.modal,
-.ModalBase .AddMemberModal.modal {
-  padding: 60px 0;
-}
-.ModalBase .PlanetCreateModal.modal .nameInput,
-.ModalBase .TeamCreateModal.modal .nameInput,
-.ModalBase .AddMemberModal.modal .nameInput {
-  width: 80%;
-  font-size: 1.3em;
-  margin: 25px auto 15px;
-  text-align: center;
-}
-.ModalBase .PlanetCreateModal.modal .userNameSelect,
-.ModalBase .TeamCreateModal.modal .userNameSelect,
-.ModalBase .AddMemberModal.modal .userNameSelect {
-  width: 80%;
-  font-size: 1.3em;
-  margin: 35px auto;
-  text-align: center;
-}
-.ModalBase .PlanetCreateModal.modal .formField,
-.ModalBase .TeamCreateModal.modal .formField,
-.ModalBase .AddMemberModal.modal .formField {
-  text-align: center;
-  margin: 0 auto 25px;
-}
-.ModalBase .PlanetCreateModal.modal .formField select,
-.ModalBase .TeamCreateModal.modal .formField select,
-.ModalBase .AddMemberModal.modal .formField select {
-  display: inline-block;
-  width: 150px;
-  height: 33px;
-  border: solid 1px #d0d0d0;
-  background-color: #fff;
-  padding: 0 10px;
-  margin: 0 15px;
-}
-.ModalBase .PlanetCreateModal.modal .submitButton,
-.ModalBase .TeamCreateModal.modal .submitButton,
-.ModalBase .AddMemberModal.modal .submitButton {
-  display: block;
-  margin: 0 auto;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  width: 55px;
-  height: 55px;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  overflow: hidden;
-  border-style: solid;
-  border-width: 1px;
-  border-color: #3fb399;
-  background-color: transparent;
-  color: #2bac8f;
-}
-.ModalBase .PlanetCreateModal.modal .submitButton:hover,
-.ModalBase .TeamCreateModal.modal .submitButton:hover,
-.ModalBase .AddMemberModal.modal .submitButton:hover,
-.ModalBase .PlanetCreateModal.modal .submitButton.hover,
-.ModalBase .TeamCreateModal.modal .submitButton.hover,
-.ModalBase .AddMemberModal.modal .submitButton.hover,
-.ModalBase .PlanetCreateModal.modal .submitButton:focus,
-.ModalBase .TeamCreateModal.modal .submitButton:focus,
-.ModalBase .AddMemberModal.modal .submitButton:focus,
-.ModalBase .PlanetCreateModal.modal .submitButton.focus,
-.ModalBase .TeamCreateModal.modal .submitButton.focus,
-.ModalBase .AddMemberModal.modal .submitButton.focus {
-  border-color: #2c7d6b;
-  color: #1e7864;
-}
-.ModalBase .PlanetCreateModal.modal .submitButton:active,
-.ModalBase .TeamCreateModal.modal .submitButton:active,
-.ModalBase .AddMemberModal.modal .submitButton:active,
-.ModalBase .PlanetCreateModal.modal .submitButton.active,
-.ModalBase .TeamCreateModal.modal .submitButton.active,
-.ModalBase .AddMemberModal.modal .submitButton.active {
-  background-color: #2bac8f;
-  color: #fff;
-}
-.ModalBase .PlanetCreateModal.modal .submitButton:disabled,
-.ModalBase .TeamCreateModal.modal .submitButton:disabled,
-.ModalBase .AddMemberModal.modal .submitButton:disabled,
-.ModalBase .PlanetCreateModal.modal .submitButton.disabled,
-.ModalBase .TeamCreateModal.modal .submitButton.disabled,
-.ModalBase .AddMemberModal.modal .submitButton.disabled {
-  opacity: 0.6;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-  filter: alpha(opacity=60);
-}
-.ModalBase .PlanetCreateModal.modal .errorAlert,
-.ModalBase .TeamCreateModal.modal .errorAlert,
-.ModalBase .AddMemberModal.modal .errorAlert {
-  background-color: #f2dede;
-  color: #a64444;
-  padding: 12px 10px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  text-align: center;
-  display: block;
-  width: 360px;
-  margin: 0 auto 15px;
-}
-.ModalBase .ContactModal {
-  padding: 15px;
-}
-.ModalBase .ContactModal .contactForm .formField {
-  width: 100%;
-  margin-bottom: 10px;
-}
-.ModalBase .ContactModal .contactForm .formField input,
-.ModalBase .ContactModal .contactForm .formField textarea {
-  display: block;
-  width: 100%;
-  border: solid 1px #d0d0d0;
-  padding: 5px 15px;
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-}
-.ModalBase .ContactModal .contactForm .formField input:focus,
-.ModalBase .ContactModal .contactForm .formField textarea:focus,
-.ModalBase .ContactModal .contactForm .formField input.focus,
-.ModalBase .ContactModal .contactForm .formField textarea.focus {
-  border-color: #3fb399;
-  outline: none;
-}
-.ModalBase .ContactModal .contactForm .formField input {
-  height: 33px;
-  font-size: 1em;
-}
-.ModalBase .ContactModal .contactForm .formField textarea {
-  height: 175px;
-  font-size: 1em;
-}
-.ModalBase .ContactModal .contactForm .formControl {
-  zoom: 1;
-}
-.ModalBase .ContactModal .contactForm .formControl:before,
-.ModalBase .ContactModal .contactForm .formControl:after {
-  content: "";
-  display: table;
-}
-.ModalBase .ContactModal .contactForm .formControl:after {
-  clear: both;
-}
-.ModalBase .ContactModal .contactForm .formControl button {
-  float: right;
-  border-style: solid;
-  border-width: 1px;
-  border-color: #898989;
-  background-color: transparent;
-  color: #898989;
-  height: 44px;
-  padding: 0 15px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  margin-left: 5px;
-  font-size: 1em;
-}
-.ModalBase .ContactModal .contactForm .formControl button:hover,
-.ModalBase .ContactModal .contactForm .formControl button.hover,
-.ModalBase .ContactModal .contactForm .formControl button:focus,
-.ModalBase .ContactModal .contactForm .formControl button.focus {
-  border-color: #454545;
-  color: #454545;
-}
-.ModalBase .ContactModal .contactForm .formControl button:active,
-.ModalBase .ContactModal .contactForm .formControl button.active {
-  border-color: #39a18a;
-  background-color: #2bac8f;
-  color: #fff;
-}
-.ModalBase .ContactModal .contactForm .formControl button:disabled,
-.ModalBase .ContactModal .contactForm .formControl button.disabled {
-  opacity: 0.6;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-  filter: alpha(opacity=60);
-}
-.ModalBase .ContactModal .contactForm .formControl button.sendButton {
-  border-style: solid;
-  border-width: 1px;
-  border-color: #3fb399;
-  background-color: transparent;
-  color: #2bac8f;
-}
-.ModalBase .ContactModal .contactForm .formControl button.sendButton:hover,
-.ModalBase .ContactModal .contactForm .formControl button.sendButton.hover,
-.ModalBase .ContactModal .contactForm .formControl button.sendButton:focus,
-.ModalBase .ContactModal .contactForm .formControl button.sendButton.focus {
-  border-color: #2c7d6b;
-  color: #1e7864;
-}
-.ModalBase .ContactModal .contactForm .formControl button.sendButton:active,
-.ModalBase .ContactModal .contactForm .formControl button.sendButton.active {
-  background-color: #2bac8f;
-  color: #fff;
-}
-.ModalBase .ContactModal .contactForm .formControl button.sendButton:disabled,
-.ModalBase .ContactModal .contactForm .formControl button.sendButton.disabled {
-  opacity: 0.6;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-  filter: alpha(opacity=60);
-}
-.ModalBase .ContactModal .confirmation .confirmationMessage {
-  padding: 35px 0;
-  text-align: center;
-  font-size: 1.1em;
-}
-.ModalBase .ContactModal .confirmation .doneButton {
-  border-style: solid;
-  border-width: 1px;
-  border-color: #898989;
-  background-color: transparent;
-  color: #898989;
-  height: 44px;
-  padding: 0 35px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  display: block;
-  margin: 0 auto 25px;
-}
-.ModalBase .ContactModal .confirmation .doneButton:hover,
-.ModalBase .ContactModal .confirmation .doneButton.hover,
-.ModalBase .ContactModal .confirmation .doneButton:focus,
-.ModalBase .ContactModal .confirmation .doneButton.focus {
-  border-color: #454545;
-  color: #454545;
-}
-.ModalBase .ContactModal .confirmation .doneButton:active,
-.ModalBase .ContactModal .confirmation .doneButton.active {
-  border-color: #39a18a;
-  background-color: #2bac8f;
-  color: #fff;
-}
-.ModalBase .ContactModal .confirmation .doneButton:disabled,
-.ModalBase .ContactModal .confirmation .doneButton.disabled {
-  opacity: 0.6;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-  filter: alpha(opacity=60);
-}
-.ModalBase .LogoutModal {
-  padding: 65px 0 45px;
-  width: 350px;
-}
-.ModalBase .LogoutModal .messageLabel {
-  text-align: center;
-  font-size: 1.1em;
-  margin-bottom: 35px;
-}
-.ModalBase .LogoutModal .formControl {
-  text-align: center;
-}
-.ModalBase .LogoutModal .formControl button {
-  border-style: solid;
-  border-width: 1px;
-  border-color: #898989;
-  background-color: transparent;
-  color: #898989;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  height: 44px;
-  margin: 15px 5px;
-  padding: 0 15px;
-}
-.ModalBase .LogoutModal .formControl button:hover,
-.ModalBase .LogoutModal .formControl button.hover,
-.ModalBase .LogoutModal .formControl button:focus,
-.ModalBase .LogoutModal .formControl button.focus {
-  border-color: #454545;
-  color: #454545;
-}
-.ModalBase .LogoutModal .formControl button:active,
-.ModalBase .LogoutModal .formControl button.active {
-  border-color: #39a18a;
-  background-color: #2bac8f;
-  color: #fff;
-}
-.ModalBase .LogoutModal .formControl button:disabled,
-.ModalBase .LogoutModal .formControl button.disabled {
-  opacity: 0.6;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-  filter: alpha(opacity=60);
-}
-.ModalBase .LogoutModal .formControl button.logoutButton {
-  border-style: solid;
-  border-width: 1px;
-  border-color: #3fb399;
-  background-color: transparent;
-  color: #2bac8f;
-}
-.ModalBase .LogoutModal .formControl button.logoutButton:hover,
-.ModalBase .LogoutModal .formControl button.logoutButton.hover,
-.ModalBase .LogoutModal .formControl button.logoutButton:focus,
-.ModalBase .LogoutModal .formControl button.logoutButton.focus {
-  border-color: #2c7d6b;
-  color: #1e7864;
-}
-.ModalBase .LogoutModal .formControl button.logoutButton:active,
-.ModalBase .LogoutModal .formControl button.logoutButton.active {
-  background-color: #2bac8f;
-  color: #fff;
-}
-.ModalBase .LogoutModal .formControl button.logoutButton:disabled,
-.ModalBase .LogoutModal .formControl button.logoutButton.disabled {
-  opacity: 0.6;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-  filter: alpha(opacity=60);
-}
-.ArticleDetail {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  top: 60px;
-  left: 250px;
-  padding: 10px;
-}
-.ArticleDetail * {
-  -webkit-user-select: all;
-}
-.ArticleDetail .detailInfo {
-  height: 70px;
-  width: 100%;
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-  font-size: 12px;
-  position: relative;
-}
-.ArticleDetail .detailInfo .left {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 120px;
-}
-.ArticleDetail .detailInfo .right {
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-.ArticleDetail .detailBody {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 70px;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-.ArticleDetail .detailBody .detailPanel {
-  position: absolute;
-  top: 0;
-  left: 10px;
-  right: 10px;
-  bottom: 10px;
-  background-color: #fff;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  border: solid 1px #d0d0d0;
-}
-.ArticleDetail .detailBody .detailPanel>.header {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 60px;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 60px;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  padding: 5px 15px;
-  border-top: solid 1px #d0d0d0;
-  overflow-y: auto;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview hr {
-  border-top: none;
-  border-bottom: solid 1px #d0d0d0;
-  margin: 15px 0;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview h1 {
-  font-size: 2em;
-  border-bottom: solid 2px #d0d0d0;
-  margin: 0.33em auto 0.67em;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview h2 {
-  font-size: 1.5em;
-  margin: 0.42em auto 0.83em;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview h3 {
-  font-size: 1.17em;
-  margin: 0.5em auto 1em;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview h4 {
-  font-size: 1em;
-  margin: 0.67em auto 1.33em;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview h5 {
-  font-size: 0.83em;
-  margin: 0.84em auto 1.67em;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview h6 {
-  font-size: 0.67em;
-  margin: 1.16em auto 2.33em;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview h1,
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview h2,
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview h3,
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview h4,
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview h5,
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview h6 {
-  font-weight: 700;
-  line-height: 1.8em;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview p {
-  line-height: 1.8em;
-  margin: 15px 0 25px;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview img {
-  max-width: 100%;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview strong {
-  font-weight: bold;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview em {
-  font-style: italic;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview s {
-  text-decoration: line-through;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview blockquote {
-  border-left: solid 4px #3fb399;
-  margin: 15px 0 25px;
-  padding: 0 25px;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview ul {
-  list-style-type: disc;
-  padding-left: 35px;
-  margin-bottom: 35px;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview ul li {
-  display: list-item;
-  margin: 15px 0;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview ul>li>ul {
-  list-style-type: circle;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview ul>li>ul>li>ul {
-  list-style-type: square;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview ol {
-  list-style-type: decimal;
-  padding-left: 35px;
-  margin-bottom: 35px;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview ol li {
-  display: list-item;
-  margin: 15px 0;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview code {
-  font-family: monospace;
-  padding: 2px 4px;
-  border: solid 1px #d0d0d0;
-  -webkit-border-radius: 4px;
-  border-radius: 4px;
-  font-size: 0.9em;
-  color: #000;
-  text-decoration: none;
-  background-color: #f6f6f6;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview pre {
-  padding: 5px;
-  border: solid 1px #d0d0d0;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  overflow-x: auto;
-  margin: 15px 0 25px;
-  background-color: #f6f6f6;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview pre>code {
-  padding: 0;
-  border: none;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-  color: #000;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview table {
-  width: 100%;
-  margin: 15px 0 25px;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview table thead tr {
-  background-color: #fff;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview table thead th {
-  border-style: solid;
-  padding: 15px 5px;
-  border-width: 1px 0 2px 1px;
-  border-color: #d0d0d0;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview table thead th:last-child {
-  border-right: solid 1px #d0d0d0;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview table tbody tr:nth-child(2n + 1) {
-  background-color: #f9f9f9;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview table tbody tr:nth-child(2n) {
-  background-color: #fff;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview table tbody td {
-  border-style: solid;
-  padding: 15px 5px;
-  border-width: 0 0 1px 1px;
-  border-color: #d0d0d0;
-}
-.ArticleDetail .detailBody .detailPanel .MarkdownPreview table tbody td:last-child {
-  border-right: solid 1px #d0d0d0;
-}
-.ArticleDetail .detailBody .detailPanel .CodeEditor {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 60px;
-  border-top: solid 1px #d0d0d0;
-  min-height: 300px;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-.ArticleDetail.edit .detailInfo .left .Select .Select-control {
-  border: none;
-  background-color: transparent;
-}
-.ArticleDetail.edit .detailInfo .left .folder.Select {
-  width: 150px;
-}
-.ArticleDetail.edit .detailInfo .left .folder.Select .Select-control:hover {
-  background-color: #f2f2f2;
-}
-.ArticleDetail.edit .detailInfo .left .folder.Select.is-focused .Select-control {
-  background-color: #fff;
-}
-.ArticleDetail.edit .detailInfo .left .tags.Select .Select-control {
-  white-space: nowrap;
-  overflow-x: auto;
-  position: relative;
-}
-.ArticleDetail.edit .detailInfo .left .tags.Select .Select-control .Select-arrow-zone,
-.ArticleDetail.edit .detailInfo .left .tags.Select .Select-control .Select-arrow {
-  display: none;
-}
-.ArticleDetail.edit .detailInfo .right button {
-  cursor: pointer;
-  height: 33px;
-  width: 55px;
-  margin-left: 5px;
-  font-size: 14px;
-  color: #888;
-  background-color: #f2f2f2;
-  border: solid 1px #d0d0d0;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-}
-.ArticleDetail.edit .detailInfo .right button:hover {
-  background-color: #fff;
-}
-.ArticleDetail.edit .detailInfo .right button.primary {
-  border: none;
-  background-color: #2bac8f;
-  color: #fff;
-}
-.ArticleDetail.edit .detailInfo .right button.primary:hover {
-  color: #fff;
-  background-color: #31c4a3;
-}
-.ArticleDetail.edit .detailBody .detailPanel>.header .mode {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  display: block;
-  height: 33px;
-  margin-top: 12px;
-  width: 120px;
-  margin-right: 15px;
-}
-.ArticleDetail.edit .detailBody .detailPanel>.header .title {
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 120px;
-  padding: 0 15px;
-}
-.ArticleDetail.edit .detailBody .detailPanel>.header .title input {
-  width: 100%;
-  border: none;
-  background-color: transparent;
-  line-height: 60px;
-  font-size: 32px;
-  font-weight: bold;
-  outline: none;
-}
-.ArticleDetail.show .detailInfo .left {
-  right: 99px;
-}
-.ArticleDetail.show .detailInfo .left .info {
-  padding: 5px;
-  white-space: nowrap;
-  overflow: hidden;
-  -o-text-overflow: ellipsis;
-  text-overflow: ellipsis;
-}
-.ArticleDetail.show .detailInfo .left .tags {
-  padding: 10px 10px 5px;
-  color: articleItemColor;
-}
-.ArticleDetail.show .detailInfo .left .tags a {
-  background-color: #2bac8f;
-  color: #fff;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  padding: 1.5px 5px;
-  margin: 2px;
-  font-size: 10px;
-  opacity: 0.8;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
-  filter: alpha(opacity=80);
-}
-.ArticleDetail.show .detailInfo .left .tags a:hover {
-  opacity: 1;
-  -ms-filter: none;
-  filter: none;
-}
-.ArticleDetail.show .detailInfo .left .tags span.noTags {
-  color: #999;
-}
-.ArticleDetail.show .detailInfo .right button {
-  cursor: pointer;
-  height: 33px;
-  width: 33px;
-  border: none;
-  font-size: 18px;
-  color: #888;
-  background-color: transparent;
-  padding: 0;
-}
-.ArticleDetail.show .detailInfo .right button:hover {
-  color: inherit;
-}
-.ArticleDetail.show .detailBody .detailPanel>.header .mode {
-  display: block;
-  line-height: 60px;
-  width: 45px;
-  height: 60px;
-  font-size: 18px;
-  text-align: center;
-}
-.ArticleDetail.show .detailBody .detailPanel>.header .title {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 45px;
-  right: 15px;
-  font-size: 32px;
-  line-height: 60px;
-  font-weight: bold;
-  white-space: nowrap;
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-.ArticleList {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  top: 60px;
-  width: 250px;
-  border-right: solid 1px #a6a6a6;
-}
-.ArticleList>ul {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  overflow-y: auto;
-  -webkit-user-select: none;
-  cursor: default;
-}
-.ArticleList>ul li .articleItem {
-  border: solid 2px transparent;
-  position: relative;
-  height: 88px;
-  width: 100%;
-  cursor: pointer;
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-  background-color: #fff;
-  padding: 0 10px;
-  font-size: 12px;
-}
-.ArticleList>ul li .articleItem .top {
-  zoom: 1;
-  line-height: 20px;
-  padding: 5px 0;
-  color: #777;
-}
-.ArticleList>ul li .articleItem .top:before,
-.ArticleList>ul li .articleItem .top:after {
-  content: "";
-  display: table;
-}
-.ArticleList>ul li .articleItem .top:after {
-  clear: both;
-}
-.ArticleList>ul li .articleItem .top .profileImage {
-  vertical-align: middle;
-}
-.ArticleList>ul li .articleItem .top .updatedAt {
-  float: right;
-  line-height: 20px;
-}
-.ArticleList>ul li .articleItem .middle {
-  zoom: 1;
-  padding: 3px 0 7px;
-  font-size: 16px;
-}
-.ArticleList>ul li .articleItem .middle:before,
-.ArticleList>ul li .articleItem .middle:after {
-  content: "";
-  display: table;
-}
-.ArticleList>ul li .articleItem .middle:after {
-  clear: both;
-}
-.ArticleList>ul li .articleItem .middle .mode {
-  float: left;
-  font-size: 12px;
-  line-height: 16px;
-}
-.ArticleList>ul li .articleItem .middle .title {
-  float: left;
-  white-space: nowrap;
-  overflow: hidden;
-  -o-text-overflow: ellipsis;
-  text-overflow: ellipsis;
-  padding: 0 5px;
-}
-.ArticleList>ul li .articleItem .bottom {
-  padding: 5px 0;
-  overflow-x: auto;
-  white-space: nowrap;
-}
-.ArticleList>ul li .articleItem .bottom .tags {
-  color: #777;
-}
-.ArticleList>ul li .articleItem .bottom .tags a {
-  background-color: #2bac8f;
-  color: #fff;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  padding: 1.5px 5px;
-  margin: 2px;
-  font-size: 10px;
-  opacity: 0.8;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
-  filter: alpha(opacity=80);
-}
-.ArticleList>ul li .articleItem .bottom .tags a:hover {
-  opacity: 1;
-  -ms-filter: none;
-  filter: none;
-}
-.ArticleList>ul li .articleItem:hover,
-.ArticleList>ul li .articleItem.hover {
-  background-color: #f2f2f2;
-}
-.ArticleList>ul li .articleItem:hover:active,
-.ArticleList>ul li .articleItem.hover:active,
-.ArticleList>ul li .articleItem:hover.active,
-.ArticleList>ul li .articleItem.hover.active {
-  background-color: #fff;
-}
-.ArticleList>ul li .articleItem:active,
-.ArticleList>ul li .articleItem.active {
-  border-color: #3fb399;
-}
-.ArticleList>ul li .divider {
-  border-bottom: solid 1px #d0d0d0;
-}
-.ArticleNavigator {
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: userNavigatorWidth;
-  background-color: userNavigatorBgColor;
-  color: userNavigatorColor;
-  -webkit-user-select: none;
-  cursor: default;
-}
-.ArticleNavigator>.profile {
-  height: 60px;
-  padding: 10px 15px 0;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  position: relative;
-  border-bottom: solid 1px userNavigatorBorderColor;
-  cursor: pointer;
-}
-.ArticleNavigator>.profile>.profileName {
-  color: userNavigatorProfileNameColor;
-  font-size: 22px;
-  cursor: pointer;
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-}
-.ArticleNavigator>.profile>.name {
-  padding: 5px 10px;
-  font-size: 14px;
-  color: userNavigatorColor;
-  cursor: pointer;
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-}
-.ArticleNavigator>.profile>.dropdownIcon {
-  position: absolute;
-  top: 20px;
-  right: 25px;
-  float: right;
-  width: 20px;
-  height: 20px;
-  line-height: 20px;
-  font-size: 8px;
-  border: solid 1px userNavigatorColor;
-  -webkit-border-radius: 12.5px;
-  border-radius: 12.5px;
-  text-align: center;
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-}
-.ArticleNavigator>.profile:hover>.profileName {
-  color: #31c4a3;
-}
-.ArticleNavigator>.profile:hover>.name {
-  color: #fff;
-}
-.ArticleNavigator>.profile:hover>.dropdownIcon {
-  border-color: #fff;
-}
-.ArticleNavigator>.profile:hover:active>.dropdownIcon {
-  background-color: #2bac8f;
-  border-color: #2bac8f;
-}
-.ArticleNavigator>.control {
-  padding: 15px 15px;
-}
-.ArticleNavigator>.control>.newPostButton {
-  background-color: #2bac8f;
-  color: #fff;
-  height: 44px;
-  width: 100%;
-  border: none;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  font-size: 16px;
-  font-weight: 600;
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-}
-.ArticleNavigator>.control>.newPostButton:hover {
-  background-color: #31c4a3;
-}
-.ArticleNavigator>.menu {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 134px;
-  padding: 15px 0;
-  overflow: auto;
-}
-.ArticleNavigator>.menu>.menuGruop>.label {
-  border-bottom: 1px solid userNavigatorBorderColor;
-  padding: 10px 15px;
-  font-size: 18px;
-  margin-bottom: 10px;
-}
-.ArticleNavigator>.menu>.menuGruop>.label>.plusButton {
-  float: right;
-  width: 20px;
-  height: 20px;
-  margin-top: -2.5px;
-  margin-right: -5px;
-  line-height: 15px;
-  font-size: 8px;
-  border: solid 1px userNavigatorColor;
-  -webkit-border-radius: 10px;
-  border-radius: 10px;
-  background-color: transparent;
-  text-align: center;
-  color: userNavigatorColor;
-}
-.ArticleNavigator>.menu>.menuGruop>.label>.plusButton:hover {
-  border-color: #fff;
-  color: #fff;
-}
-.ArticleNavigator>.menu>.menuGruop>.label>.plusButton:hover:active {
-  background-color: #2bac8f;
-  border-color: #2bac8f;
-}
-.ArticleNavigator>.menu>.folders .folderButton {
-  padding: 10px 25px;
-  width: 100%;
-  background-color: transparent;
-  border: none;
-  font-size: 14px;
-  color: userNavigatorColor;
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-  text-align: left;
-}
-.ArticleNavigator>.menu>.folders .folderButton:hover {
-  background-color: rgba(255,255,255,0.2);
-  color: #fff;
-}
-.ArticleNavigator>.menu>.folders .folderButton.active {
-  background-color: #2bac8f;
-  color: #fff;
-}
-.Select {
-  position: relative;
-}
-.Select-control {
-  position: relative;
-  overflow: hidden;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-color: #d9d9d9 #ccc #b3b3b3;
-  -webkit-border-radius: 4px;
-  border-radius: 4px;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  color: #333;
-  cursor: default;
-  outline: none;
-  padding: 8px 52px 8px 10px;
-  -webkit-transition: all 200ms ease;
-  -moz-transition: all 200ms ease;
-  -o-transition: all 200ms ease;
-  -ms-transition: all 200ms ease;
-  transition: all 200ms ease;
-}
-.is-searchable.is-open > .Select-control {
-  cursor: text;
-}
-.is-open > .Select-control {
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-  background: #fff;
-  border-color: #b3b3b3 #ccc #d9d9d9;
-}
-.is-open > .Select-control > .Select-arrow {
-  border-color: transparent transparent #999;
-  border-width: 0 5px 5px;
-}
-.is-searchable.is-focused:not(.is-open) > .Select-control {
-  cursor: text;
-}
-.Select-placeholder {
-  color: #aaa;
-  padding: 8px 52px 8px 10px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: -15px;
-  max-width: 100%;
-  overflow: hidden;
-  -o-text-overflow: ellipsis;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.has-value > .Select-control > .Select-placeholder {
-  color: #333;
-}
-.Select-input > input {
-  cursor: default;
-  background: none transparent;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-  height: auto;
-  border: 0 none;
-  font-family: inherit;
-  font-size: inherit;
-  margin: 0;
-  padding: 0;
-  outline: none;
-  display: inline-block;
-  -webkit-appearance: none;
-}
-.is-focused .Select-input > input {
-  cursor: text;
-}
-.Select-control:not(.is-searchable) > .Select-input {
-  outline: none;
-}
-.Select-loading {
-  -webkit-animation: Select-animation-spin 400ms infinite linear;
-  -o-animation: Select-animation-spin 400ms infinite linear;
-  -webkit-animation: Select-animation-spin 400ms infinite linear;
-  -moz-animation: Select-animation-spin 400ms infinite linear;
-  -o-animation: Select-animation-spin 400ms infinite linear;
-  -ms-animation: Select-animation-spin 400ms infinite linear;
-  animation: Select-animation-spin 400ms infinite linear;
-  width: 16px;
-  height: 16px;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  border: 2px solid #ccc;
-  border-right-color: #333;
-  display: inline-block;
-  position: relative;
-  margin-top: -8px;
-  position: absolute;
-  right: 30px;
-  top: 50%;
-}
-.has-value > .Select-control > .Select-loading {
-  right: 46px;
-}
-.Select-clear {
-  color: #999;
-  cursor: pointer;
-  display: inline-block;
-  font-size: 16px;
-  padding: 6px 10px;
-  position: absolute;
-  right: 17px;
-  top: 0;
-}
-.Select-clear:hover {
-  color: #c0392b;
-}
-.Select-clear > span {
-  font-size: 1.1em;
-}
-.Select-arrow-zone {
-  content: " ";
-  display: block;
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  width: 30px;
-  cursor: pointer;
-}
-.Select-arrow {
-  border-color: #999 transparent transparent;
-  border-style: solid;
-  border-width: 5px 5px 0;
-  content: " ";
-  display: block;
-  height: 0;
-  margin-top: -ceil(2.5px);
-  position: absolute;
-  right: 10px;
-  top: 14px;
-  width: 0;
-  cursor: pointer;
-}
-.Select-menu-outer {
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-top-color: #e6e6e6;
-  -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.06);
-  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  margin-top: -1px;
-  max-height: 200px;
-  position: absolute;
-  top: 100%;
-  width: 100%;
-  z-index: 1000;
-  -webkit-overflow-scrolling: touch;
-}
-.Select-menu {
-  max-height: 198px;
-  overflow-y: auto;
-}
-.Select-option {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  color: #666;
-  cursor: pointer;
-  display: block;
-  padding: 8px 10px;
-}
-.Select-option:last-child {
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-.Select-option.is-focused {
-  background-color: #f2f9fc;
-  color: #333;
-}
-.Select-option.is-disabled {
-  color: #ccc;
-  cursor: not-allowed;
-}
-.Select-noresults {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  color: #999;
-  cursor: default;
-  display: block;
-  padding: 8px 10px;
-}
-.Select.is-multi .Select-control {
-  padding: 2px 52px 2px 3px;
-}
-.Select.is-multi .Select-input {
-  vertical-align: middle;
-  border: 1px solid transparent;
-  margin: 2px;
-  padding: 3px 0;
-}
-.Select-item {
-  background-color: #2bac8f;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  color: #fff;
-  display: inline-block;
-  font-size: 1em;
-  margin: 2px;
-}
-.Select-item-icon,
-.Select-item-label {
-  display: inline-block;
-  vertical-align: middle;
-}
-.Select-item-label {
-  cursor: default;
-  border-bottom-right-radius: 2px;
-  border-top-right-radius: 2px;
-  padding: 3px 5px;
-}
-.Select-item-label .Select-item-label__a {
-  color: #fff;
-  cursor: #fff;
-}
-.Select-item-icon {
-  cursor: pointer;
-  border-bottom-left-radius: 2px;
-  border-top-left-radius: 2px;
-  border-right: 1px solid #279b81;
-  padding: 2px 5px 4px;
-}
-.Select-item-icon:hover,
-.Select-item-icon:focus {
-  background-color: #31c4a3;
-}
-.Select-item-icon:active {
-  background-color: #c9e6f2;
-}
-.Select.is-multi.is-disabled .Select-item {
-  background-color: #f2f2f2;
-  border: 1px solid #d9d9d9;
-  color: #888;
-}
-.Select.is-multi.is-disabled .Select-item-icon {
-  cursor: not-allowed;
-  border-right: 1px solid #d9d9d9;
-}
-.Select.is-multi.is-disabled .Select-item-icon:hover,
-.Select.is-multi.is-disabled .Select-item-icon:focus,
-.Select.is-multi.is-disabled .Select-item-icon:active {
-  background-color: #f2f2f2;
-}
-@-webkit-keyframes Select-animation-spin {
-  to {
-    -webkit-transform: rotate(1turn);
-  }
-}
-@-moz-keyframes Select-animation-spin {
-  to {
-    -webkit-transform: rotate(1turn);
-    -moz-transform: rotate(1turn);
-    -o-transform: rotate(1turn);
-    -ms-transform: rotate(1turn);
-    transform: rotate(1turn);
-  }
-}
-@-webkit-keyframes Select-animation-spin {
-  to {
-    -webkit-transform: rotate(1turn);
-    -moz-transform: rotate(1turn);
-    -o-transform: rotate(1turn);
-    -ms-transform: rotate(1turn);
-    transform: rotate(1turn);
-  }
-}
-@-o-keyframes Select-animation-spin {
-  to {
-    -webkit-transform: rotate(1turn);
-    -moz-transform: rotate(1turn);
-    -o-transform: rotate(1turn);
-    -ms-transform: rotate(1turn);
-    transform: rotate(1turn);
-  }
-}
-@keyframes Select-animation-spin {
-  to {
-    -webkit-transform: rotate(1turn);
-    -moz-transform: rotate(1turn);
-    -o-transform: rotate(1turn);
-    -ms-transform: rotate(1turn);
-    transform: rotate(1turn);
-  }
-}
-.TopBar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 60px;
-  border-bottom: solid 1px #d0d0d0;
-  -webkit-user-select: none;
-  cursor: default;
-}
-.TopBar .left {
-  float: left;
-}
-.TopBar .left .search {
-  position: absolute;
-  top: 13.5px;
-  left: 15px;
-  height: 33px;
-}
-.TopBar .left .search i.fa {
-  position: absolute;
-  line-height: 33px;
-  z-index: 1;
-  width: 33px;
-  text-align: center;
-}
-.TopBar .left .search input.searchInput {
-  position: absolute;
-  top: 0;
-  left: 0;
-  background-color: #fff;
-  border: solid 1px #d0d0d0;
-  padding: 5px 15px;
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-  width: 350px;
-  padding-left: 30px;
-  -webkit-border-radius: 16.5px;
-  border-radius: 16.5px;
-  font-size: 14px;
-  height: 33px;
-  line-height: 33px;
-  outline: none;
-}
-.TopBar .left .search input.searchInput:focus,
-.TopBar .left .search input.searchInput.focus {
-  border-color: #3fb399;
-  outline: none;
-}
-.TopBar .left .search input.searchInput:focus {
-  border-color: #2bac8f;
-}
-.TopBar .right {
-  float: right;
-}
-.TopBar .right .logo>img {
-  margin-top: 7px;
-  margin-right: 15px;
-}
-.TopBar .right .logo .tooltip {
-  position: fixed;
-  z-index: 500;
-  background-color: rgba(31,31,31,0.8);
-  color: #fff;
-  padding: 10px;
-  font-size: 12px;
-  line-height: 12px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  white-space: nowrap;
-  opacity: 0;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-  filter: alpha(opacity=0);
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-  pointer-events: none;
-  right: 5px;
-}
-.TopBar .right .logo:hover .tooltip {
-  opacity: 1;
-  -ms-filter: none;
-  filter: none;
-}
-.HomeContainer .UserNavigator {
-  -webkit-user-select: none;
-  cursor: default;
-  background-color: #1b1c1c;
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 60px;
-  text-align: center;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-.HomeContainer .UserNavigator ul.userList {
-  margin-top: 25px;
-}
-.HomeContainer .UserNavigator ul.userList>li a {
-  display: block;
-  width: 44px;
-  height: 64px;
-  margin: 0 auto 20px;
-  text-align: center;
-  text-decoration: none;
-  color: #979797;
-  line-height: 44px;
-  font-size: 1.1em;
-  cursor: pointer;
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-  opacity: 0.8;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
-  filter: alpha(opacity=80);
-}
-.HomeContainer .UserNavigator ul.userList>li a img.ProfileImage {
-  width: 44px;
-  height: 44px;
-  -webkit-border-radius: 22px;
-  border-radius: 22px;
-}
-.HomeContainer .UserNavigator ul.userList>li a:hover,
-.HomeContainer .UserNavigator ul.userList>li a.active {
-  opacity: 1;
-  -ms-filter: none;
-  filter: none;
-}
-.HomeContainer .UserNavigator ul.userList>li a:hover .userTooltip,
-.HomeContainer .UserNavigator ul.userList>li a.active .userTooltip {
-  opacity: 1;
-  -ms-filter: none;
-  filter: none;
-}
-.HomeContainer .UserNavigator ul.userList>li a .userTooltip {
-  position: absolute;
-  z-index: 500;
-  background-color: rgba(31,31,31,0.8);
-  color: invTextColorq;
-  padding: 10px;
-  line-height: 1em;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  margin-top: -52px;
-  margin-left: 52px;
-  white-space: nowrap;
-  opacity: 0;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-  filter: alpha(opacity=0);
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-  pointer-events: none;
-}
-.HomeContainer .UserNavigator ul.userList>li a .keyLabel {
-  margin-top: -25px;
-  font-size: 0.8em;
-  color: #ddd;
-}
-.HomeContainer .UserNavigator button.newTeamButton {
-  display: block;
-  margin: 0 auto;
-  width: 30px;
-  height: 30px;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  overflow: hidden;
-  border: solid 1px #898989;
-  color: #898989;
-  text-align: center;
-  background-image: none;
-  background-color: transparent;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  bottom: 15px;
-}
-.HomeContainer .UserNavigator button.newTeamButton:hover,
-.HomeContainer .UserNavigator button.newTeamButton.hover,
-.HomeContainer .UserNavigator button.newTeamButton:focus,
-.HomeContainer .UserNavigator button.newTeamButton.focus {
-  border-color: #454545;
-  color: #454545;
-}
-.HomeContainer .UserNavigator button.newTeamButton:active,
-.HomeContainer .UserNavigator button.newTeamButton.active {
-  border-color: #39a18a;
-  background-color: #2bac8f;
-  color: #fff;
-}
-.HomeContainer .UserNavigator button.newTeamButton .tooltip {
-  position: fixed;
-  z-index: 500;
-  background-color: rgba(31,31,31,0.8);
-  color: #fff;
-  padding: 10px;
-  font-size: 12px;
-  line-height: 12px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  white-space: nowrap;
-  opacity: 0;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-  filter: alpha(opacity=0);
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-  pointer-events: none;
-  margin-top: -22px;
-  margin-left: 33px;
-  font-size: 14px;
-}
-.HomeContainer .UserNavigator button.newTeamButton:hover .tooltip {
-  opacity: 1;
-  -ms-filter: none;
-  filter: none;
-}
-.LoginContainer,
-.SignupContainer {
-  margin: 0 auto;
-  padding: 105px 15px;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  color: #888;
-}
-.LoginContainer .logo,
-.SignupContainer .logo {
-  width: 150px;
-  height: 150px;
-  display: block;
-  margin: 0 auto;
-}
-.LoginContainer .authNavigator,
-.SignupContainer .authNavigator {
-  margin: 15px 0 25px;
-}
-.LoginContainer .authNavigator a,
-.SignupContainer .authNavigator a {
-  font-size: 1.5em;
-  text-decoration: none;
-  color: #888;
-}
-.LoginContainer .authNavigator a:hover,
-.SignupContainer .authNavigator a:hover,
-.LoginContainer .authNavigator a.hover,
-.SignupContainer .authNavigator a.hover,
-.LoginContainer .authNavigator a:active,
-.SignupContainer .authNavigator a:active,
-.LoginContainer .authNavigator a.active,
-.SignupContainer .authNavigator a.active {
-  color: #2bac8f;
-}
-.LoginContainer .socialControl,
-.SignupContainer .socialControl {
-  text-align: center;
-  margin: 25px 0;
-}
-.LoginContainer .socialControl p,
-.SignupContainer .socialControl p {
-  margin-bottom: 25px;
-}
-.LoginContainer .socialControl .facebookBtn,
-.SignupContainer .socialControl .facebookBtn,
-.LoginContainer .socialControl .githubBtn,
-.SignupContainer .socialControl .githubBtn {
-  margin: 0 45px;
-  width: 50px;
-  height: 50px;
-  line-height: 50px;
-  font-size: 25px;
-  text-align: center;
-  background-image: none;
-  color: #fff;
-  border: none;
-  -webkit-border-radius: 25px;
-  border-radius: 25px;
-  cursor: pointer;
-}
-.LoginContainer .socialControl .facebookBtn,
-.SignupContainer .socialControl .facebookBtn {
-  background-color: #3b5998;
-}
-.LoginContainer .socialControl .facebookBtn:hover,
-.SignupContainer .socialControl .facebookBtn:hover,
-.LoginContainer .socialControl .facebookBtn.hover,
-.SignupContainer .socialControl .facebookBtn.hover {
-  background-color: #5d7dc0;
-}
-.LoginContainer .socialControl .githubBtn,
-.SignupContainer .socialControl .githubBtn {
-  background-color: #201f1f;
-  font-size: 30px;
-  line-height: 30px;
-}
-.LoginContainer .socialControl .githubBtn:hover,
-.SignupContainer .socialControl .githubBtn:hover,
-.LoginContainer .socialControl .githubBtn.hover,
-.SignupContainer .socialControl .githubBtn.hover {
-  background-color: #595656;
-}
-.LoginContainer .divider .dividerLabel,
-.SignupContainer .divider .dividerLabel {
-  text-align: center;
-  position: relative;
-  top: -27px;
-  font-size: 1.3em;
-  background-color: #fff;
-  margin: 0 auto;
-  width: 50px;
-}
-.LoginContainer form,
-.SignupContainer form {
-  width: 400px;
-  margin: 0 auto 45px;
-}
-.LoginContainer form .alertInfo,
-.SignupContainer form .alertInfo,
-.LoginContainer form .alertError,
-.SignupContainer form .alertError {
-  margin-top: 15px;
-  margin-bottom: 15px;
-  padding: 10px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  line-height: 1.6;
-  text-align: center;
-}
-.LoginContainer form .alertInfo,
-.SignupContainer form .alertInfo {
-  background-color: #d9edf7;
-  color: #34708e;
-}
-.LoginContainer form .alertError,
-.SignupContainer form .alertError {
-  background-color: #f2dede;
-  color: #a64444;
-}
-.LoginContainer form div.formField input,
-.SignupContainer form div.formField input {
-  border: none;
-  border-bottom: 1px solid #d0d0d0;
-  padding: 5px 15px;
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-  height: 33px;
-  width: 100%;
-  margin-bottom: 10px;
-  text-align: center;
-  font-size: 1.1em;
-}
-.LoginContainer form div.formField input:focus,
-.SignupContainer form div.formField input:focus,
-.LoginContainer form div.formField input.focus,
-.SignupContainer form div.formField input.focus {
-  border-bottom: 1px solid #3fb399;
-  outline: none;
-}
-.LoginContainer form div.formField:last-child,
-.SignupContainer form div.formField:last-child {
-  margin-top: 15px;
-}
-.LoginContainer form div.formField button.logInButton,
-.SignupContainer form div.formField button.logInButton {
-  border-style: solid;
-  border-width: 1px;
-  border-color: #3fb399;
-  background-color: transparent;
-  color: #2bac8f;
-  height: 44px;
-  -webkit-border-radius: 22px;
-  border-radius: 22px;
-  display: block;
-  width: 200px;
-  font-size: 1em;
-  margin: 0 auto;
-}
-.LoginContainer form div.formField button.logInButton:hover,
-.SignupContainer form div.formField button.logInButton:hover,
-.LoginContainer form div.formField button.logInButton.hover,
-.SignupContainer form div.formField button.logInButton.hover,
-.LoginContainer form div.formField button.logInButton:focus,
-.SignupContainer form div.formField button.logInButton:focus,
-.LoginContainer form div.formField button.logInButton.focus,
-.SignupContainer form div.formField button.logInButton.focus {
-  border-color: #2c7d6b;
-  color: #1e7864;
-}
-.LoginContainer form div.formField button.logInButton:active,
-.SignupContainer form div.formField button.logInButton:active,
-.LoginContainer form div.formField button.logInButton.active,
-.SignupContainer form div.formField button.logInButton.active {
-  background-color: #2bac8f;
-  color: #fff;
-}
-.LoginContainer form div.formField button.logInButton:disabled,
-.SignupContainer form div.formField button.logInButton:disabled,
-.LoginContainer form div.formField button.logInButton.disabled,
-.SignupContainer form div.formField button.logInButton.disabled {
-  opacity: 0.6;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-  filter: alpha(opacity=60);
-}
-.LoginContainer p.alert,
-.SignupContainer p.alert {
-  text-align: center;
-  font-size: 0.8em;
-}
-.PlanetContainer {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-}
-.PlanetContainer .tags {
-  white-space: nowrap;
-  overflow-x: auto;
-}
-.PlanetContainer .tags a {
-  margin: 0 2px;
-  text-decoration: underline;
-  cursor: pointer;
-  font-size: 0.95em;
-}
-.PlanetContainer .tags a.noTag {
-  color: #888;
-  font-size: 0.8em;
-}
-.PlanetHeader {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  overflow-y: hidden;
-  height: 55px;
-  background-color: #fff;
-  border-bottom: solid 1px #d0d0d0;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  padding: 5px 15px;
-  zoom: 1;
-}
-.PlanetHeader:before,
-.PlanetHeader:after {
-  content: "";
-  display: table;
-}
-.PlanetHeader:after {
-  clear: both;
-}
-.PlanetHeader .headerLabel {
-  -webkit-user-select: none;
-  cursor: default;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  overflow: hidden;
-  display: inline-block;
-  width: 200px;
-}
-.PlanetHeader .headerLabel .userName {
-  position: absolute;
-  left: 15px;
-  top: 30px;
-  width: 140px;
-  font-size: 1em;
-  color: #4d4d4d;
-  text-decoration: none;
-}
-.PlanetHeader .headerLabel .userName:hover {
-  color: #454545;
-  text-decoration: underline;
-}
-.PlanetHeader .headerLabel .planetName {
-  position: absolute;
-  top: 5px;
-  left: 10px;
-  width: 145px;
-  font-size: 1.6em;
-  color: #2bac8f;
-  overflow: hidden;
-  -o-text-overflow: ellipsis;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.PlanetHeader .headerLabel .planetName:hover {
-  color: #2c7d6b;
-}
-.PlanetHeader .headerLabel .private {
-  position: absolute;
-  top: 12px;
-  right: 38px;
-  width: 33px;
-  height: 33px;
-  line-height: 33px;
-  text-align: center;
-  color: inactiveColor;
-}
-.PlanetHeader .headerLabel .private:hover {
-  color: #4d4d4d;
-}
-.PlanetHeader .headerLabel .private .tooltip {
-  position: fixed;
-  z-index: 500;
-  background-color: rgba(31,31,31,0.8);
-  color: #fff;
-  padding: 10px;
-  font-size: 12px;
-  line-height: 12px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  white-space: nowrap;
-  opacity: 0;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-  filter: alpha(opacity=0);
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-  pointer-events: none;
-  margin-left: -30px;
-}
-.PlanetHeader .headerLabel .private:hover .tooltip {
-  opacity: 1;
-  -ms-filter: none;
-  filter: none;
-}
-.PlanetHeader .headerLabel .planetSettingButton {
-  position: absolute;
-  top: 15px;
-  right: 5px;
-  font-size: 0.8em;
-  border-style: solid;
-  border-width: 1px;
-  border-color: #898989;
-  background-color: transparent;
-  color: #898989;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  overflow: hidden;
-  width: 26px;
-  height: 26px;
-  text-align: center;
-  cursor: pointer;
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-}
-.PlanetHeader .headerLabel .planetSettingButton:hover,
-.PlanetHeader .headerLabel .planetSettingButton.hover,
-.PlanetHeader .headerLabel .planetSettingButton:focus,
-.PlanetHeader .headerLabel .planetSettingButton.focus {
-  border-color: #454545;
-  color: #454545;
-}
-.PlanetHeader .headerLabel .planetSettingButton:active,
-.PlanetHeader .headerLabel .planetSettingButton.active {
-  border-color: #39a18a;
-  background-color: #2bac8f;
-  color: #fff;
-}
-.PlanetHeader .headerLabel .planetSettingButton:disabled,
-.PlanetHeader .headerLabel .planetSettingButton.disabled {
-  opacity: 0.6;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-  filter: alpha(opacity=60);
-}
-.PlanetHeader .headerLabel .planetSettingButton:focus,
-.PlanetHeader .headerLabel .planetSettingButton.focus {
-  outline: none;
-}
-.PlanetHeader .headerLabel .planetSettingButton .tooltip {
-  position: fixed;
-  z-index: 500;
-  background-color: rgba(31,31,31,0.8);
-  color: #fff;
-  padding: 10px;
-  font-size: 12px;
-  line-height: 12px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  white-space: nowrap;
-  opacity: 0;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-  filter: alpha(opacity=0);
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-  pointer-events: none;
-  margin-top: 11px;
-  margin-left: -36px;
-}
-.PlanetHeader .headerLabel .planetSettingButton:hover .tooltip {
-  opacity: 1;
-  -ms-filter: none;
-  filter: none;
-}
-.PlanetHeader .headerControl {
-  -webkit-user-select: none;
-  cursor: default;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 200px;
-}
-.PlanetHeader .headerControl .searchInput {
-  display: block;
-  position: absolute;
-  top: 12px;
-  left: 0;
-}
-.PlanetHeader .headerControl .searchInput input {
-  padding-left: 32px;
-  width: 300px;
-}
-.PlanetHeader .headerControl .searchInput .fa {
-  position: absolute;
-  top: 8px;
-  left: 12px;
-  color: #888;
-}
-.PlanetHeader .headerControl .refreshButton {
-  display: block;
-  position: absolute;
-  top: 15px;
-  right: 55px;
-  width: 26px;
-  height: 26px;
-  font-size: 0.8em;
-  border-style: solid;
-  border-width: 1px;
-  border-color: #898989;
-  background-color: transparent;
-  color: #898989;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  overflow: hidden;
-  text-align: center;
-  cursor: pointer;
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-}
-.PlanetHeader .headerControl .refreshButton:hover,
-.PlanetHeader .headerControl .refreshButton.hover,
-.PlanetHeader .headerControl .refreshButton:focus,
-.PlanetHeader .headerControl .refreshButton.focus {
-  border-color: #454545;
-  color: #454545;
-}
-.PlanetHeader .headerControl .refreshButton:active,
-.PlanetHeader .headerControl .refreshButton.active {
-  border-color: #39a18a;
-  background-color: #2bac8f;
-  color: #fff;
-}
-.PlanetHeader .headerControl .refreshButton:disabled,
-.PlanetHeader .headerControl .refreshButton.disabled {
-  opacity: 0.6;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-  filter: alpha(opacity=60);
-}
-.PlanetHeader .headerControl .refreshButton:focus,
-.PlanetHeader .headerControl .refreshButton.focus {
-  outline: none;
-}
-.PlanetHeader .headerControl .refreshButton .tooltip {
-  position: fixed;
-  z-index: 500;
-  background-color: rgba(31,31,31,0.8);
-  color: #fff;
-  padding: 10px;
-  font-size: 12px;
-  line-height: 12px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  white-space: nowrap;
-  opacity: 0;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-  filter: alpha(opacity=0);
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-  pointer-events: none;
-  margin-top: 11px;
-  margin-left: -39px;
-}
-.PlanetHeader .headerControl .refreshButton:hover .tooltip {
-  opacity: 1;
-  -ms-filter: none;
-  filter: none;
-}
-.PlanetHeader .headerControl .logo {
-  display: block;
-  position: absolute;
-  top: 4px;
-  right: 10px;
-  cursor: pointer;
-}
-.PlanetHeader .headerControl .logo img {
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-  opacity: 0.9;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
-  filter: alpha(opacity=90);
-}
-.PlanetHeader .headerControl .logo:hover img,
-.PlanetHeader .headerControl .logo:hover .tooltip {
-  opacity: 1;
-  -ms-filter: none;
-  filter: none;
-}
-.PlanetHeader .headerControl .logo .tooltip {
-  position: fixed;
-  z-index: 500;
-  background-color: rgba(31,31,31,0.8);
-  color: #fff;
-  padding: 10px;
-  font-size: 12px;
-  line-height: 12px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  white-space: nowrap;
-  opacity: 0;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-  filter: alpha(opacity=0);
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-  pointer-events: none;
-  margin-top: -5px;
-  margin-left: -67px;
-}
-.PlanetNavigator {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  -webkit-user-select: none;
-  cursor: default;
-  top: 55px;
-  width: 200px;
-  border-right: solid 1px #a6a6a6;
-  padding: 10px;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-.PlanetNavigator .launchButton {
-  -webkit-border-radius: 22px;
-  border-radius: 22px;
-  font-size: 1.1em;
-}
-.PlanetNavigator nav a {
-  display: block;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  padding: 15px 15px;
-  margin: 10px 0;
-  -webkit-border-radius: 10px;
-  border-radius: 10px;
-  text-decoration: none;
-  background-color: transparent;
-  color: #4d4d4d;
-  cursor: pointer;
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-  border-style: solid;
-  border-width: 1px;
-  border-color: #898989;
-  background-color: transparent;
-  color: #898989;
-  border: none;
-}
-.PlanetNavigator nav a:hover,
-.PlanetNavigator nav a.hover,
-.PlanetNavigator nav a:focus,
-.PlanetNavigator nav a.focus {
-  border-color: #454545;
-  color: #454545;
-}
-.PlanetNavigator nav a:active,
-.PlanetNavigator nav a.active {
-  border-color: #39a18a;
-  background-color: #2bac8f;
-  color: #fff;
-}
-.PlanetNavigator nav a:disabled,
-.PlanetNavigator nav a.disabled {
-  opacity: 0.6;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-  filter: alpha(opacity=60);
-}
-.PlanetArticleList {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  left: 200px;
-  top: 55px;
-  width: 275px;
-  border-right: solid 1px #a6a6a6;
-}
-.PlanetArticleList>ul {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  overflow-y: auto;
-}
-.PlanetArticleList>ul li .articleItem {
-  -webkit-user-select: none;
-  cursor: default;
-  border: solid 2px transparent;
-  position: relative;
-  height: 94px;
-  width: 100%;
-  cursor: pointer;
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-}
-.PlanetArticleList>ul li .articleItem .itemLeft {
-  position: absolute;
-  top: 4px;
-  bottom: 4px;
-  width: 38px;
-  padding: 3px 0 3px 3px;
-  text-align: center;
-}
-.PlanetArticleList>ul li .articleItem .itemLeft .profileImage {
-  margin-bottom: 5px;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  overflow: hidden;
-}
-.PlanetArticleList>ul li .articleItem .itemLeft .fa {
-  line-height: 25px;
-}
-.PlanetArticleList>ul li .articleItem .itemRight {
-  position: absolute;
-  top: 4px;
-  bottom: 4px;
-  right: 2px;
-  left: 40px;
-  overflow-x: hidden;
-  padding: 3px 10px 3px 3px;
-}
-.PlanetArticleList>ul li .articleItem .itemRight .itemInfo {
-  margin: 5px 0 13px;
-  color: #7a7a7a;
-  font-size: 0.7em;
-}
-.PlanetArticleList>ul li .articleItem .itemRight .itemInfo .userProfileName {
-  color: #2bac8f;
-  font-size: 1.2em;
-}
-.PlanetArticleList>ul li .articleItem .itemRight .description {
-  line-height: 120%;
-  margin-bottom: 10px;
-  font-size: 1em;
-  overflow-x: hidden;
-  white-space: nowrap;
-  -o-text-overflow: ellipsis;
-  text-overflow: ellipsis;
-}
-.PlanetArticleList>ul li .articleItem .itemRight .tags {
-  position: absolute;
-  bottom: 5px;
-  font-size: 0.9em;
-}
-.PlanetArticleList>ul li .articleItem:hover,
-.PlanetArticleList>ul li .articleItem.hover {
-  background-color: rgba(0,0,0,0.04);
-}
-.PlanetArticleList>ul li .articleItem:hover:active,
-.PlanetArticleList>ul li .articleItem.hover:active,
-.PlanetArticleList>ul li .articleItem:hover.active,
-.PlanetArticleList>ul li .articleItem.hover.active {
-  background-color: #fff;
-}
-.PlanetArticleList>ul li .articleItem:active,
-.PlanetArticleList>ul li .articleItem.active {
-  border-color: #3fb399;
-}
-.PlanetArticleList>ul li .divider {
-  border-bottom: solid 1px #d0d0d0;
-}
-.PlanetArticleDetail {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  top: 55px;
-  left: 475px;
-}
-.PlanetArticleDetail .detailHeader {
-  border: solid 2px transparent;
-  position: relative;
-  height: 105px;
-  width: 100%;
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-}
-.PlanetArticleDetail .detailHeader .itemLeft {
-  position: absolute;
-  top: 7px;
-  bottom: 4px;
-  width: 38px;
-  padding: 3px 0 3px 3px;
-  text-align: center;
-}
-.PlanetArticleDetail .detailHeader .itemLeft .profileImage {
-  margin-bottom: 5px;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  overflow: hidden;
-}
-.PlanetArticleDetail .detailHeader .itemLeft .fa {
-  line-height: 25px;
-}
-.PlanetArticleDetail .detailHeader .itemRight {
-  position: absolute;
-  top: 7px;
-  bottom: 4px;
-  right: 2px;
-  left: 40px;
-  overflow-x: hidden;
-  padding: 3px 10px 3px 3px;
-}
-.PlanetArticleDetail .detailHeader .itemRight .itemInfo {
-  margin: 5px 0 13px;
-  color: #7a7a7a;
-  font-size: 0.7em;
-}
-.PlanetArticleDetail .detailHeader .itemRight .itemInfo .userProfileName {
-  color: #2bac8f;
-  font-size: 1.2em;
-}
-.PlanetArticleDetail .detailHeader .itemRight .description {
-  line-height: 120%;
-  margin-bottom: 10px;
-  font-size: 1em;
-  overflow-x: auto;
-  white-space: nowrap;
-}
-.PlanetArticleDetail .detailHeader .itemRight .tags {
-  position: absolute;
-  bottom: 5px;
-  font-size: 0.9em;
-}
-.PlanetArticleDetail .detailHeader .itemControl {
-  position: absolute;
-  z-index: 1;
-  top: 2px;
-  right: 2px;
-}
-.PlanetArticleDetail .detailHeader .itemControl .deleteButton,
-.PlanetArticleDetail .detailHeader .itemControl .editButton {
-  border-style: solid;
-  border-width: 1px;
-  border-color: #898989;
-  background-color: transparent;
-  color: #898989;
-  text-align: center;
-  width: 33px;
-  height: 33px;
-  -webkit-border-radius: 16.5px;
-  border-radius: 16.5px;
-  font-size: 15px;
-  margin: 0 3px;
-}
-.PlanetArticleDetail .detailHeader .itemControl .deleteButton:hover,
-.PlanetArticleDetail .detailHeader .itemControl .editButton:hover,
-.PlanetArticleDetail .detailHeader .itemControl .deleteButton.hover,
-.PlanetArticleDetail .detailHeader .itemControl .editButton.hover,
-.PlanetArticleDetail .detailHeader .itemControl .deleteButton:focus,
-.PlanetArticleDetail .detailHeader .itemControl .editButton:focus,
-.PlanetArticleDetail .detailHeader .itemControl .deleteButton.focus,
-.PlanetArticleDetail .detailHeader .itemControl .editButton.focus {
-  border-color: #454545;
-  color: #454545;
-}
-.PlanetArticleDetail .detailHeader .itemControl .deleteButton:active,
-.PlanetArticleDetail .detailHeader .itemControl .editButton:active,
-.PlanetArticleDetail .detailHeader .itemControl .deleteButton.active,
-.PlanetArticleDetail .detailHeader .itemControl .editButton.active {
-  border-color: #39a18a;
-  background-color: #2bac8f;
-  color: #fff;
-}
-.PlanetArticleDetail .detailHeader .itemControl .deleteButton:disabled,
-.PlanetArticleDetail .detailHeader .itemControl .editButton:disabled,
-.PlanetArticleDetail .detailHeader .itemControl .deleteButton.disabled,
-.PlanetArticleDetail .detailHeader .itemControl .editButton.disabled {
-  opacity: 0.6;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-  filter: alpha(opacity=60);
-}
-.PlanetArticleDetail .detailHeader .itemControl .deleteButton .tooltip,
-.PlanetArticleDetail .detailHeader .itemControl .editButton .tooltip {
-  position: fixed;
-  z-index: 500;
-  background-color: rgba(31,31,31,0.8);
-  color: #fff;
-  padding: 10px;
-  font-size: 12px;
-  line-height: 12px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  white-space: nowrap;
-  opacity: 0;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-  filter: alpha(opacity=0);
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-  pointer-events: none;
-  margin-top: 10px;
-}
-.PlanetArticleDetail .detailHeader .itemControl .deleteButton:hover .tooltip,
-.PlanetArticleDetail .detailHeader .itemControl .editButton:hover .tooltip {
-  opacity: 1;
-  -ms-filter: none;
-  filter: none;
-}
-.PlanetArticleDetail .detailHeader .itemControl .editButton .tooltip {
-  margin-left: -12px;
-}
-.PlanetArticleDetail .detailHeader .itemControl .deleteButton .tooltip {
-  margin-left: -26px;
-}
-.PlanetArticleDetail .detailBody {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 105px;
-}
-.PlanetArticleDetail .detailBody .content {
-  position: absolute;
-  top: 5px;
-  bottom: 5px;
-  left: 2px;
-  right: 2px;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  padding: 5px;
-  border-top: solid 1px #d0d0d0;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content {
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content hr {
-  border-top: none;
-  border-bottom: solid 1px #d0d0d0;
-  margin: 15px 0;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content h1 {
-  font-size: 2em;
-  border-bottom: solid 2px #d0d0d0;
-  margin: 0.33em auto 0.67em;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content h2 {
-  font-size: 1.5em;
-  margin: 0.42em auto 0.83em;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content h3 {
-  font-size: 1.17em;
-  margin: 0.5em auto 1em;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content h4 {
-  font-size: 1em;
-  margin: 0.67em auto 1.33em;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content h5 {
-  font-size: 0.83em;
-  margin: 0.84em auto 1.67em;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content h6 {
-  font-size: 0.67em;
-  margin: 1.16em auto 2.33em;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content h1,
-.PlanetArticleDetail.noteDetail .detailBody .content h2,
-.PlanetArticleDetail.noteDetail .detailBody .content h3,
-.PlanetArticleDetail.noteDetail .detailBody .content h4,
-.PlanetArticleDetail.noteDetail .detailBody .content h5,
-.PlanetArticleDetail.noteDetail .detailBody .content h6 {
-  font-weight: 700;
-  line-height: 1.8em;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content p {
-  line-height: 1.8em;
-  margin: 15px 0 25px;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content img {
-  max-width: 100%;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content strong {
-  font-weight: bold;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content em {
-  font-style: italic;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content s {
-  text-decoration: line-through;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content blockquote {
-  border-left: solid 4px #3fb399;
-  margin: 15px 0 25px;
-  padding: 0 25px;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content ul {
-  list-style-type: disc;
-  padding-left: 35px;
-  margin-bottom: 35px;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content ul li {
-  display: list-item;
-  margin: 15px 0;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content ul>li>ul {
-  list-style-type: circle;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content ul>li>ul>li>ul {
-  list-style-type: square;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content ol {
-  list-style-type: decimal;
-  padding-left: 35px;
-  margin-bottom: 35px;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content ol li {
-  display: list-item;
-  margin: 15px 0;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content code {
-  font-family: monospace;
-  padding: 2px 4px;
-  border: solid 1px #d0d0d0;
-  -webkit-border-radius: 4px;
-  border-radius: 4px;
-  font-size: 0.9em;
-  color: #000;
-  text-decoration: none;
-  background-color: #f6f6f6;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content pre {
-  padding: 5px;
-  border: solid 1px #d0d0d0;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  overflow-x: auto;
-  margin: 15px 0 25px;
-  background-color: #f6f6f6;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content pre>code {
-  padding: 0;
-  border: none;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-  color: #000;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content table {
-  width: 100%;
-  margin: 15px 0 25px;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content table thead tr {
-  background-color: #fff;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content table thead th {
-  border-style: solid;
-  padding: 15px 5px;
-  border-width: 1px 0 2px 1px;
-  border-color: #d0d0d0;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content table thead th:last-child {
-  border-right: solid 1px #d0d0d0;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content table tbody tr:nth-child(2n + 1) {
-  background-color: #f9f9f9;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content table tbody tr:nth-child(2n) {
-  background-color: #fff;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content table tbody td {
-  border-style: solid;
-  padding: 15px 5px;
-  border-width: 0 0 1px 1px;
-  border-color: #d0d0d0;
-}
-.PlanetArticleDetail.noteDetail .detailBody .content table tbody td:last-child {
-  border-right: solid 1px #d0d0d0;
-}
-.PlanetArticleDetail.codeDetail .detailBody .content .ace_editor {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-}
-.UserContainer {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 60px;
-}
-.UserContainer .content {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 200px;
-  background-color: #e6e6e6;
-}
-.UserContainer .UserNavigator {
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 200px;
-  background-color: #333;
-  color: #ddd;
-  -webkit-user-select: none;
-  cursor: default;
-}
-.UserContainer .UserNavigator>.profile {
-  height: 60px;
-  padding: 10px 15px 0;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  position: relative;
-  border-bottom: solid 1px #666;
-  cursor: pointer;
-}
-.UserContainer .UserNavigator>.profile>.profileName {
-  color: #2bac8f;
-  font-size: 22px;
-  cursor: pointer;
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-}
-.UserContainer .UserNavigator>.profile>.name {
-  padding: 5px 10px;
-  font-size: 14px;
-  color: #ddd;
-  cursor: pointer;
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-}
-.UserContainer .UserNavigator>.profile>.dropdownIcon {
-  position: absolute;
-  top: 20px;
-  right: 25px;
-  float: right;
-  width: 20px;
-  height: 20px;
-  line-height: 20px;
-  font-size: 8px;
-  border: solid 1px #ddd;
-  -webkit-border-radius: 12.5px;
-  border-radius: 12.5px;
-  text-align: center;
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-}
-.UserContainer .UserNavigator>.profile:hover>.profileName {
-  color: #31c4a3;
-}
-.UserContainer .UserNavigator>.profile:hover>.name {
-  color: #fff;
-}
-.UserContainer .UserNavigator>.profile:hover>.dropdownIcon {
-  border-color: #fff;
-}
-.UserContainer .UserNavigator>.profile:hover:active>.dropdownIcon {
-  background-color: #2bac8f;
-  border-color: #2bac8f;
-}
-.UserContainer .UserNavigator>.control {
-  padding: 15px 15px;
-}
-.UserContainer .UserNavigator>.control>.newPostButton {
-  background-color: #2bac8f;
-  color: #fff;
-  height: 44px;
-  width: 100%;
-  border: none;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  font-size: 16px;
-  font-weight: 600;
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-}
-.UserContainer .UserNavigator>.control>.newPostButton:hover {
-  background-color: #31c4a3;
-}
-.UserContainer .UserNavigator>.menu {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 134px;
-  padding: 15px 0;
-  overflow: auto;
-}
-.UserContainer .UserNavigator>.menu>.menuGruop>.label {
-  border-bottom: 1px solid #666;
-  padding: 10px 15px;
-  font-size: 18px;
-  margin-bottom: 10px;
-}
-.UserContainer .UserNavigator>.menu>.menuGruop>.label>.plusButton {
-  float: right;
-  width: 20px;
-  height: 20px;
-  margin-top: -2.5px;
-  margin-right: -5px;
-  line-height: 15px;
-  font-size: 8px;
-  border: solid 1px #ddd;
-  -webkit-border-radius: 10px;
-  border-radius: 10px;
-  background-color: transparent;
-  text-align: center;
-  color: #ddd;
-}
-.UserContainer .UserNavigator>.menu>.menuGruop>.label>.plusButton:hover {
-  border-color: #fff;
-  color: #fff;
-}
-.UserContainer .UserNavigator>.menu>.menuGruop>.label>.plusButton:hover:active {
-  background-color: #2bac8f;
-  border-color: #2bac8f;
-}
-.UserContainer .UserNavigator>.menu>.folders .folderButton {
-  padding: 10px 25px;
-  width: 100%;
-  background-color: transparent;
-  border: none;
-  font-size: 14px;
-  color: #ddd;
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-  text-align: left;
-}
-.UserContainer .UserNavigator>.menu>.folders .folderButton:hover {
-  background-color: rgba(255,255,255,0.2);
-  color: #fff;
-}
-.UserContainer .UserNavigator>.menu>.folders .folderButton.active {
-  background-color: #2bac8f;
-  color: #fff;
-}
-* {
-  -webkit-app-region: no-drag;
-  -webkit-user-select: none;
-}
-html,
-body {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-body {
-  font-family: "Lato";
-  color: #4d4d4d;
-  font-size: 14px;
-  font-weight: 400;
-}
-button,
-input,
-select {
-  font-family: "Lato";
-}
-div,
-span,
-a,
-button,
-input,
-textarea {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-a {
-  color: #2bac8f;
-}
-a:hover {
-  color: #25927a;
-}
-a:visited {
-  color: #2bac8f;
-}
-hr {
-  border-top: none;
-  border-bottom: solid 1px #d0d0d0;
-  margin: 15px 0;
-}
-button {
-  font-weight: 400;
-  cursor: pointer;
-}
-button:focus,
-button.focus {
-  outline: none;
-}
-.noSelect {
-  -webkit-user-select: none;
-  cursor: default;
-}
-.text-center {
-  text-align: center;
-}
-.form-group {
-  margin-bottom: 15px;
-}
-.form-group>label {
-  display: block;
-  margin-bottom: 5px;
-}
-.block-input,
-.inline-input {
-  border: solid 1px #d0d0d0;
-  padding: 0 10px;
-  font-size: 1em;
-  height: 33px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-.block-input:focus,
-.inline-input:focus,
-.block-input.focus,
-.inline-input.focus {
-  border: solid 1px #3fb399;
-  outline: none;
-}
-.block-input.circleInput,
-.inline-input.circleInput {
-  -webkit-border-radius: 16.5px;
-  border-radius: 16.5px;
-}
-.block-input {
-  display: block;
-  width: 100%;
-}
-.inline-input {
-  display: inline-block;
-  margin-right: 5px;
-}
-.relative {
-  position: relative;
-}
-textarea.block-input {
-  resize: vertical;
-  height: 125px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  padding: 5px 10px;
-}
-#content {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.Main .appUpdateButton {
-  position: fixed;
-  z-index: 2000;
-  bottom: 5px;
-  right: 53px;
-  padding: 10px 15px;
-  border: none;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  background-color: #2bac8f;
-  color: #fff;
-  opacity: 0.7;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
-  filter: alpha(opacity=70);
-}
-.Main .appUpdateButton:hover {
-  opacity: 1;
-  -ms-filter: none;
-  filter: none;
-  background-color: #31c4a3;
-}
-.Main .contactButton {
-  position: fixed;
-  z-index: 2000;
-  bottom: 5px;
-  right: 5px;
-  padding: 10px 15px;
-  border: none;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  background-color: #2bac8f;
-  color: #fff;
-  opacity: 0.7;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
-  filter: alpha(opacity=70);
-}
-.Main .contactButton:hover {
-  opacity: 1;
-  -ms-filter: none;
-  filter: none;
-  background-color: #31c4a3;
-}
-.Main .contactButton .tooltip {
-  position: fixed;
-  z-index: 500;
-  background-color: rgba(31,31,31,0.8);
-  color: #fff;
-  padding: 10px;
-  font-size: 12px;
-  line-height: 12px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  white-space: nowrap;
-  opacity: 0;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-  filter: alpha(opacity=0);
-  -webkit-transition: 0.1s;
-  -moz-transition: 0.1s;
-  -o-transition: 0.1s;
-  -ms-transition: 0.1s;
-  transition: 0.1s;
-  pointer-events: none;
-  margin-top: -22px;
-  margin-left: -97px;
-}
-.Main .contactButton:hover .tooltip {
-  opacity: 1;
-  -ms-filter: none;
-  filter: none;
-}
diff --git a/modules/ace-modes.js b/lib/ace-modes.js
similarity index 100%
rename from modules/ace-modes.js
rename to lib/ace-modes.js
diff --git a/browser/main/HomeContainer/lib/api.js b/lib/api.js
similarity index 72%
rename from browser/main/HomeContainer/lib/api.js
rename to lib/api.js
index 7d5cfdf2..91290feb 100644
--- a/browser/main/HomeContainer/lib/api.js
+++ b/lib/api.js
@@ -1,5 +1,17 @@
 var request = require('superagent-promise')(require('superagent'), Promise)
-var apiUrl = require('../../../../config').apiUrl
+var apiUrl = require('../config').apiUrl
+
+export function login (input) {
+  return request
+    .post(apiUrl + 'auth/login')
+    .send(input)
+}
+
+export function signup (input) {
+  return request
+    .post(apiUrl + 'auth/register')
+    .send(input)
+}
 
 export function fetchCurrentUser () {
   return request
@@ -49,3 +61,12 @@ export function deleteMember (teamId, input) {
     })
     .send(input)
 }
+
+export function sendEmail (input) {
+  return request
+    .post(apiUrl + 'mail')
+    .set({
+      Authorization: 'Bearer ' + localStorage.getItem('token')
+    })
+    .send(input)
+}
diff --git a/browser/main/Components/CodeEditor.jsx b/lib/components/CodeEditor.js
similarity index 98%
rename from browser/main/Components/CodeEditor.jsx
rename to lib/components/CodeEditor.js
index 7aa45d38..9d430065 100644
--- a/browser/main/Components/CodeEditor.jsx
+++ b/lib/components/CodeEditor.js
@@ -1,4 +1,4 @@
-var React = require('react')
+import React from 'react'
 
 var ace = window.ace
 
diff --git a/browser/main/Components/ExternalLink.js b/lib/components/ExternalLink.js
similarity index 100%
rename from browser/main/Components/ExternalLink.js
rename to lib/components/ExternalLink.js
diff --git a/browser/main/Components/MarkdownPreview.js b/lib/components/MarkdownPreview.js
similarity index 95%
rename from browser/main/Components/MarkdownPreview.js
rename to lib/components/MarkdownPreview.js
index 1dbe3c15..8ccc55ba 100644
--- a/browser/main/Components/MarkdownPreview.js
+++ b/lib/components/MarkdownPreview.js
@@ -1,6 +1,6 @@
 import shell from 'shell'
 import React, { PropTypes } from 'react'
-import markdown from '../HomeContainer/lib/markdown'
+import markdown from 'boost/markdown'
 
 function handleAnchorClick (e) {
   shell.openExternal(e.target.href)
diff --git a/browser/main/Components/ModeIcon.js b/lib/components/ModeIcon.js
similarity index 100%
rename from browser/main/Components/ModeIcon.js
rename to lib/components/ModeIcon.js
diff --git a/browser/main/Components/ProfileImage.js b/lib/components/ProfileImage.js
similarity index 100%
rename from browser/main/Components/ProfileImage.js
rename to lib/components/ProfileImage.js
diff --git a/browser/main/Components/ContactModal.jsx b/lib/components/modal/ContactModal.js
similarity index 94%
rename from browser/main/Components/ContactModal.jsx
rename to lib/components/modal/ContactModal.js
index 477e2226..f3106ea6 100644
--- a/browser/main/Components/ContactModal.jsx
+++ b/lib/components/modal/ContactModal.js
@@ -1,6 +1,6 @@
 import React, { PropTypes, findDOMNode } from 'react'
-import linkState from '../helpers/linkState'
-var Hq = require('../Services/Hq')
+import linkState from 'boost/linkState'
+import { sendEmail } from 'boost/api'
 
 export default class ContactModal extends React.Component {
   constructor (props) {
@@ -37,7 +37,7 @@ export default class ContactModal extends React.Component {
   }
 
   sendEmail () {
-    Hq.sendEmail(this.state.mail)
+    sendEmail(this.state.mail)
       .then(function (res) {
         this.setState({isSent: !this.state.isSent})
       }.bind(this))
diff --git a/browser/main/HomeContainer/lib/modal/CreateNewTeam.js b/lib/components/modal/CreateNewTeam.js
similarity index 98%
rename from browser/main/HomeContainer/lib/modal/CreateNewTeam.js
rename to lib/components/modal/CreateNewTeam.js
index aaab8ca6..2a557f82 100644
--- a/browser/main/HomeContainer/lib/modal/CreateNewTeam.js
+++ b/lib/components/modal/CreateNewTeam.js
@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react'
-import ProfileImage from '../../../components/ProfileImage'
-import { searchUser, createTeam, setMember, deleteMember } from '../api'
-import linkState from '../../../helpers/linkState'
+import ProfileImage from 'boost/components/ProfileImage'
+import { searchUser, createTeam, setMember, deleteMember } from 'boost/api'
+import linkState from 'boost/linkState'
 import Select from 'react-select'
 
 function getUsers (input, cb) {
diff --git a/browser/main/helpers/linkState.js b/lib/linkState.js
similarity index 100%
rename from browser/main/helpers/linkState.js
rename to lib/linkState.js
diff --git a/browser/main/HomeContainer/lib/markdown.js b/lib/markdown.js
similarity index 100%
rename from browser/main/HomeContainer/lib/markdown.js
rename to lib/markdown.js
diff --git a/browser/main/HomeContainer/lib/modal/index.js b/lib/modal.js
similarity index 100%
rename from browser/main/HomeContainer/lib/modal/index.js
rename to lib/modal.js
diff --git a/browser/main/helpers/openExternal.js b/lib/openExternal.js
similarity index 100%
rename from browser/main/helpers/openExternal.js
rename to lib/openExternal.js
diff --git a/main.js b/main.js
index 5ff818ee..0b8829c1 100644
--- a/main.js
+++ b/main.js
@@ -21,7 +21,7 @@ var update = null
 var version = app.getVersion()
 var versionText = (version == null || version.length === 0) ? 'DEV version' : 'v' + version
 var nn = require('node-notifier')
-var updater = require('./updater')
+var updater = require('./atom-lib/updater')
 var path = require('path')
 
 var appQuit = false
@@ -48,7 +48,7 @@ app.on('ready', function () {
   updater.setFeedUrl('http://orbital.b00st.io/rokt33r/boost/latest?version=' + version)
   updater.checkForUpdates()
   // menu start
-  var template = require('./modules/menu-template')
+  var template = require('./atom-lib/menu-template')
 
   ipc.on('update-app', function (event, msg) {
     if (update != null) {
@@ -78,7 +78,7 @@ app.on('ready', function () {
   }))
   appIcon.setContextMenu(trayMenu)
 
-  mainWindow = require('./main-window')
+  mainWindow = require('./atom-lib/main-window')
   mainWindow.on('close', function (e) {
     if (appQuit) return true
     e.preventDefault()
@@ -95,7 +95,7 @@ app.on('ready', function () {
     mainWindow.show()
   })
 
-  finderWindow = require('./finder-window')
+  finderWindow = require('./atom-lib/finder-window')
 
   var globalShortcut = require('global-shortcut')
   console.log('jetpack launch')
diff --git a/node_modules/boost b/node_modules/boost
new file mode 120000
index 00000000..dc598c56
--- /dev/null
+++ b/node_modules/boost
@@ -0,0 +1 @@
+../lib
\ No newline at end of file
diff --git a/package.json b/package.json
index 7f948285..264fac0a 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
   },
   "config": {
     "version": "--version=0.33.0 --app-version=$npm_package_version --app-bundle-id=com.maisin.boost",
-    "platform": "--platform=darwin --arch=x64 --prune --icon=app.icns",
+    "platform": "--platform=darwin --arch=x64 --prune --icon=resources/app.icns",
     "ignore": "--ignore=Boost-darwin-x64 --ignore=node_modules/devicon/icons --ignore=submodules/ace/(?!src-min)|submodules/ace/(?=src-min-noconflict)"
   },
   "repository": {
@@ -73,7 +73,6 @@
   },
   "standard": {
     "ignore": [
-      "/browser/ace/"
     ],
     "globals": [
       "localStorage"
diff --git a/app.icns b/resources/app.icns
similarity index 100%
rename from app.icns
rename to resources/app.icns