From 1690e6420f548151f5ac0ac3cdd79e146d6078e9 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sun, 11 Oct 2015 18:11:08 +0900
Subject: [PATCH] set design create team modal

---
 browser/main/Components/UserNavigator.jsx     |  53 --
 browser/main/Containers/LoginContainer.js     |   4 +-
 browser/main/Containers/SignupContainer.js    |   2 +-
 .../HomeContainer/Components/UserNavigator.js |  12 +-
 browser/main/HomeContainer/lib/api.js         |  11 +
 .../HomeContainer/lib/modal/CreateNewTeam.js  | 154 ++++
 browser/main/HomeContainer/lib/modal/index.js |  41 +
 browser/main/Services/Hq.js                   |   2 -
 browser/main/helpers/linkState.js             |   6 +-
 .../{ => components}/ArticleDetail.styl       |   0
 .../{ => components}/ArticleList.styl         |   0
 .../{ => components}/ArticleNavigator.styl    |   0
 .../{ => components}/ArticleTopBar.styl       |   0
 .../{ => components}/UserNavigator.styl       |   0
 browser/styles/main/HomeContainer/index.styl  |  13 +-
 .../main/HomeContainer/lib/CreateNewTeam.styl | 172 ++++
 .../styles/main/HomeContainer/lib/modal.styl  |  21 +
 browser/styles/main/index.styl                |   2 +-
 browser/styles/shared/modal.styl              | 780 +++++++++---------
 browser/styles/vars.styl                      |   3 +-
 20 files changed, 815 insertions(+), 461 deletions(-)
 delete mode 100644 browser/main/Components/UserNavigator.jsx
 create mode 100644 browser/main/HomeContainer/lib/api.js
 create mode 100644 browser/main/HomeContainer/lib/modal/CreateNewTeam.js
 create mode 100644 browser/main/HomeContainer/lib/modal/index.js
 rename browser/styles/main/HomeContainer/{ => components}/ArticleDetail.styl (100%)
 rename browser/styles/main/HomeContainer/{ => components}/ArticleList.styl (100%)
 rename browser/styles/main/HomeContainer/{ => components}/ArticleNavigator.styl (100%)
 rename browser/styles/main/HomeContainer/{ => components}/ArticleTopBar.styl (100%)
 rename browser/styles/main/HomeContainer/{ => components}/UserNavigator.styl (100%)
 create mode 100644 browser/styles/main/HomeContainer/lib/CreateNewTeam.styl
 create mode 100644 browser/styles/main/HomeContainer/lib/modal.styl

diff --git a/browser/main/Components/UserNavigator.jsx b/browser/main/Components/UserNavigator.jsx
deleted file mode 100644
index ef6c8993..00000000
--- a/browser/main/Components/UserNavigator.jsx
+++ /dev/null
@@ -1,53 +0,0 @@
-var React = require('react')
-var _ = require('lodash')
-
-module.exports = React.createClass({
-  propTypes: {
-    createNewArticle: React.PropTypes.func,
-    search: React.PropTypes.string,
-    user: React.PropTypes.object
-  },
-  render: function () {
-    var user = this.props.user
-
-    var folders = _.isArray(user.Folders) ? user.Folders.map(function (folder) {
-      var isActive = this.props.search.match(new RegExp('in:' + folder.name))
-      return (
-        <button className={'folderButton' + (isActive ? ' active' : '')}><i className='fa fa-fw fa-square'/> {folder.name}</button>
-      )
-    }.bind(this)) : null
-
-    var members = _.isArray(user.Members) ? user.Members.map(function (member) {
-      return <button className='memberButton'>{member.profileName}</button>
-    }) : null
-
-    return (
-      <div className='UserNavigator'>
-        <div className='profile'>
-          <div className='profileName'>{user.profileName}</div>
-          <div className='name'>{user.name}</div>
-          <div className='dropdownIcon'><i className='fa fa-chevron-down'/></div>
-        </div>
-
-        <div className='control'>
-          <button onClick={this.props.createNewArticle} className='newPostButton'>New Post</button>
-        </div>
-
-        <div className='menu'>
-          <div className='menuGruop folders'>
-            <div className='label'>
-              Folders
-              <button className='plusButton'><i className='fa fa-plus'/></button>
-            </div>
-            <button className={'folderButton' + (this.props.search.match(/in:[a-z0-9-_]/) ? '' : ' active')}>All Folders</button>
-            {folders}
-          </div>
-
-          {user.userType === 'team' ? (
-            <div className='members'>{members}</div>
-          ) : null}
-        </div>
-      </div>
-    )
-  }
-})
diff --git a/browser/main/Containers/LoginContainer.js b/browser/main/Containers/LoginContainer.js
index dbde65aa..725204b2 100644
--- a/browser/main/Containers/LoginContainer.js
+++ b/browser/main/Containers/LoginContainer.js
@@ -39,13 +39,11 @@ export default class LoginPage extends React.Component {
           console.error(err)
           if (err.response == null) {
             return this.setState({
-              error: {name: 'CunnectionRefused', message: 'API server doesn\'t respond. Check your internet connection.'},
+              error: {name: 'CunnectionRefused', message: 'Can\'t connect to API server.'},
               isSending: false
             })
           }
 
-          var res = err.response
-
           // Connection Failed or Whatever
           this.setState({
             error: err.response.body,
diff --git a/browser/main/Containers/SignupContainer.js b/browser/main/Containers/SignupContainer.js
index 2e35d58d..ea279cec 100644
--- a/browser/main/Containers/SignupContainer.js
+++ b/browser/main/Containers/SignupContainer.js
@@ -37,7 +37,7 @@ export default class SignupContainer extends React.Component {
           console.error(err)
           if (err.response == null) {
             return this.setState({
-              error: {name: 'CunnectionRefused', message: 'API server doesn\'t respond. Check your internet connection.'},
+              error: {name: 'CunnectionRefused', message: 'Can\'t connect to API server.'},
               isSending: false
             })
           }
diff --git a/browser/main/HomeContainer/Components/UserNavigator.js b/browser/main/HomeContainer/Components/UserNavigator.js
index 380c9400..8838b00b 100644
--- a/browser/main/HomeContainer/Components/UserNavigator.js
+++ b/browser/main/HomeContainer/Components/UserNavigator.js
@@ -1,8 +1,18 @@
 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'
 
 export default class UserNavigator extends Component {
+  handleClick (e) {
+    openModal(CreateNewTeam)
+  }
+
+  // for dev
+  componentDidMount () {
+    openModal(CreateNewTeam)
+  }
 
   renderUserList () {
     var users = this.props.users.map((user, index) => (
@@ -26,7 +36,7 @@ export default class UserNavigator extends Component {
     return (
       <div className='UserNavigator'>
         {this.renderUserList()}
-        <button className='createTeamBtn'>
+        <button className='createTeamBtn' onClick={e => this.handleClick(e)}>
           +
           <div className='tooltip'>Create a new team</div>
         </button>
diff --git a/browser/main/HomeContainer/lib/api.js b/browser/main/HomeContainer/lib/api.js
new file mode 100644
index 00000000..a9d484fb
--- /dev/null
+++ b/browser/main/HomeContainer/lib/api.js
@@ -0,0 +1,11 @@
+var request = require('superagent-promise')(require('superagent'), Promise)
+var apiUrl = require('../../../../config').apiUrl
+
+export function createTeam (input) {
+  return request
+    .post(apiUrl + 'teams')
+    .set({
+      Authorization: 'Bearer ' + localStorage.getItem('token')
+    })
+    .send(input)
+}
diff --git a/browser/main/HomeContainer/lib/modal/CreateNewTeam.js b/browser/main/HomeContainer/lib/modal/CreateNewTeam.js
new file mode 100644
index 00000000..91b6d113
--- /dev/null
+++ b/browser/main/HomeContainer/lib/modal/CreateNewTeam.js
@@ -0,0 +1,154 @@
+import React, { PropTypes } from 'react'
+import ProfileImage from '../../../components/ProfileImage'
+import { createTeam } from '../api'
+import linkState from '../../../helpers/linkState'
+
+export default class CreateNewTeam extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      create: {
+        name: '',
+        alert: null
+      },
+      select: {
+        team: {"name":"test123",
+          "profileName":"test123",
+          "userType":"team",
+          "updatedAt":"2015-10-11T09:01:01.277Z",
+          "createdAt":"2015-10-11T09:01:01.277Z",
+          "id":220,"Members":[{"id":213,"email":"fluke8259@gmail.com","name":"rokt33r","profileName":"Rokt33r","userType":"person","createdAt":"2015-10-05T09:01:30.000Z","updatedAt":"2015-10-05T09:01:30.000Z","_pivot_TeamId":220,"_pivot_MemberId":213,"_pivot_role":"owner"}]
+        },
+        alert: null
+      },
+      currentTab: 'select'
+    }
+  }
+
+  handleCloseClick (e) {
+    this.props.close()
+  }
+
+  handleContinueClick (e) {
+    let createState = this.state.create
+    createState.isSending = true
+    createState.alert = {
+      type: 'info',
+      message: 'sending...'
+    }
+    this.setState({create: createState})
+
+    function onTeamCreate (res) {
+      let createState = this.state.create
+      createState.isSending = false
+      createState.alert = null
+
+      let selectState = this.state.select
+      selectState.team = res.body
+
+      this.setState({
+        currentTab: 'select',
+        create: createState,
+        select: {
+          team: res.body
+        }
+      })
+    }
+
+    function onError (err) {
+      let errorMessage = err.response != null ? err.response.body.message : err.message
+
+      let createState = this.state.create
+      createState.isSending = false
+      createState.alert = {
+        type: 'error',
+        message: 'Can\'t connect to API server.'
+      }
+
+      this.setState({
+        create: createState
+      })
+    }
+
+    createTeam({name: this.state.create.name})
+      .then(onTeamCreate.bind(this))
+      .catch(onError.bind(this))
+  }
+
+  renderCreateTab () {
+    let createState = this.state.create
+    let alertEl = createState.alert != null ? (
+      <p className={['alert'].concat([createState.alert.type]).join(' ')}>{createState.alert.message}</p>
+    ) : null
+
+    return (
+      <div className='createTab'>
+        <div className='title'>Create new team</div>
+
+        <input valueLink={linkState(this, 'create.name')} className='ipt' type='text' placeholder='Enter your team name'/>
+        {alertEl}
+        <button onClick={e => this.handleContinueClick(e)} disabled={createState.isSending} className='confirmBtn'>Continue <i className='fa fa-arrow-right fa-fw'/></button>
+      </div>
+    )
+  }
+
+  renderSelectTab () {
+    let selectState = this.state.select
+    console.log(selectState)
+    let membersEl = selectState.team.Members.map(member => {
+      return (
+        <li key={'user-' + member.id}>
+          <ProfileImage className='userPhoto' email={member.email} size='30'/>
+          <div className='userInfo'>
+            <div className='userName'>{`${member.profileName} (${member.name})`}</div>
+            <div className='userEmail'>{member.email}</div>
+          </div>
+          <div className='userControl'>
+            <select value={member._pivot_role} className='userRole'>
+              <option value='owner'>Owner</option>
+              <option value='member'>Member</option>
+            </select>
+            <button><i className='fa fa-times fa-fw'/></button>
+          </div>
+        </li>
+      )
+    })
+
+    return (
+      <div className='selectTab'>
+        <div className='title'>Select member</div>
+        <div className='ipt'>
+          <input type='text' placeholder='Enter user name or e-mail'/>
+          <button>add</button>
+        </div>
+        <ul className='memberList'>
+          {membersEl}
+        </ul>
+        <button onClick={e => this.props.close(e)}className='confirmBtn'>Done</button>
+      </div>
+    )
+  }
+
+  render () {
+    let currentTab = this.state.currentTab === 'create'
+      ? this.renderCreateTab()
+      : this.renderSelectTab()
+
+    return (
+      <div className='CreateNewTeam modal'>
+        <button onClick={e => this.handleCloseClick(e)} className='closeBtn'><i className='fa fa-fw fa-times'/></button>
+
+        {currentTab}
+
+        <div className='tabNav'>
+          <i className={'fa fa-circle fa-fw' + (this.state.currentTab === 'create' ? ' active' : '')}/>
+          <i className={'fa fa-circle fa-fw' + (this.state.currentTab === 'select' ? ' active' : '')}/>
+        </div>
+      </div>
+    )
+  }
+}
+
+CreateNewTeam.propTypes = {
+  close: PropTypes.func
+}
diff --git a/browser/main/HomeContainer/lib/modal/index.js b/browser/main/HomeContainer/lib/modal/index.js
new file mode 100644
index 00000000..fc24e5ba
--- /dev/null
+++ b/browser/main/HomeContainer/lib/modal/index.js
@@ -0,0 +1,41 @@
+import React from 'react'
+
+class ModalBase extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      component: null,
+      componentProps: {},
+      isHidden: true
+    }
+  }
+
+  close () {
+    if (modalBase != null) modalBase.setState({component: null, componentProps: null, isHidden: true})
+  }
+
+  render () {
+    return (
+      <div className={'ModalBase' + (this.state.isHidden ? ' hide' : '')}>
+        <div onClick={e => this.close(e)} className='modalBack'/>
+        {this.state.component == null ? null : (
+          <this.state.component {...this.state.componentProps} close={this.close}/>
+        )}
+      </div>
+    )
+  }
+}
+
+let el = document.createElement('div')
+document.body.appendChild(el)
+let modalBase = React.render(<ModalBase/>, el)
+
+export function openModal (component, props) {
+  if (modalBase == null) { return }
+  modalBase.setState({component: component, componentProps: props, isHidden: false})
+}
+
+export function closeModal () {
+  if (modalBase == null) { return }
+  modalBase.setState({isHidden: true})
+}
diff --git a/browser/main/Services/Hq.js b/browser/main/Services/Hq.js
index 5953ef8f..9c241dad 100644
--- a/browser/main/Services/Hq.js
+++ b/browser/main/Services/Hq.js
@@ -1,5 +1,3 @@
-/* global localStorage */
-
 var request = require('superagent-promise')(require('superagent'), Promise)
 var apiUrl = require('../../../config').apiUrl
 
diff --git a/browser/main/helpers/linkState.js b/browser/main/helpers/linkState.js
index 6b2be4a0..b1b85016 100644
--- a/browser/main/helpers/linkState.js
+++ b/browser/main/helpers/linkState.js
@@ -21,9 +21,9 @@ function setPartialState (component, path, value) {
     updateIn(component.state, path, value))
 }
 
-export default function linkState (path) {
+export default function linkState (el, path) {
   return {
-    value: getIn(this.state, path),
-    requestChange: setPartialState.bind(null, this, path)
+    value: getIn(el.state, path),
+    requestChange: setPartialState.bind(null, el, path)
   }
 }
diff --git a/browser/styles/main/HomeContainer/ArticleDetail.styl b/browser/styles/main/HomeContainer/components/ArticleDetail.styl
similarity index 100%
rename from browser/styles/main/HomeContainer/ArticleDetail.styl
rename to browser/styles/main/HomeContainer/components/ArticleDetail.styl
diff --git a/browser/styles/main/HomeContainer/ArticleList.styl b/browser/styles/main/HomeContainer/components/ArticleList.styl
similarity index 100%
rename from browser/styles/main/HomeContainer/ArticleList.styl
rename to browser/styles/main/HomeContainer/components/ArticleList.styl
diff --git a/browser/styles/main/HomeContainer/ArticleNavigator.styl b/browser/styles/main/HomeContainer/components/ArticleNavigator.styl
similarity index 100%
rename from browser/styles/main/HomeContainer/ArticleNavigator.styl
rename to browser/styles/main/HomeContainer/components/ArticleNavigator.styl
diff --git a/browser/styles/main/HomeContainer/ArticleTopBar.styl b/browser/styles/main/HomeContainer/components/ArticleTopBar.styl
similarity index 100%
rename from browser/styles/main/HomeContainer/ArticleTopBar.styl
rename to browser/styles/main/HomeContainer/components/ArticleTopBar.styl
diff --git a/browser/styles/main/HomeContainer/UserNavigator.styl b/browser/styles/main/HomeContainer/components/UserNavigator.styl
similarity index 100%
rename from browser/styles/main/HomeContainer/UserNavigator.styl
rename to browser/styles/main/HomeContainer/components/UserNavigator.styl
diff --git a/browser/styles/main/HomeContainer/index.styl b/browser/styles/main/HomeContainer/index.styl
index 1575d1ec..6210d6ca 100644
--- a/browser/styles/main/HomeContainer/index.styl
+++ b/browser/styles/main/HomeContainer/index.styl
@@ -1,5 +1,8 @@
-@import './UserNavigator'
-@import './ArticleTopBar'
-@import './ArticleNavigator'
-@import './ArticleList'
-@import './ArticleDetail'
+@require './components/UserNavigator'
+@require './components/ArticleNavigator'
+@require './components/ArticleTopBar'
+@require './components/ArticleList'
+@require './components/ArticleDetail'
+
+@require './lib/modal'
+@require './lib/CreateNewTeam'
diff --git a/browser/styles/main/HomeContainer/lib/CreateNewTeam.styl b/browser/styles/main/HomeContainer/lib/CreateNewTeam.styl
new file mode 100644
index 00000000..56a10c6b
--- /dev/null
+++ b/browser/styles/main/HomeContainer/lib/CreateNewTeam.styl
@@ -0,0 +1,172 @@
+tabNavColor = #999999
+iptFocusBorderColor = #369DCD
+stripHoverBtnColor = #333
+stripBtnColor = lighten(stripHoverBtnColor, 35%)
+
+.CreateNewTeam.modal
+  width 600px
+  height 450px
+  .closeBtn
+    position absolute
+    top 15px
+    right 15px
+    width 33px
+    height 33px
+    font-size 18px
+    line-height 33px
+    padding 0
+    text-align center
+    background-color transparent
+    border none
+    color stripBtnColor
+    &hover
+      color stripHoverBtnColor
+  .title
+    font-size 32px
+    text-align center
+    font-weight bold
+    margin-top 25px
+  .ipt
+    display block
+    width 330px
+    font-size 14px
+    height 44px
+    line-height 44px
+    padding 0 15px
+    border-radius 5px
+    border solid 1px borderColor
+    outline none
+    &focus
+      border-color iptFocusBorderColor
+  .alert
+    padding 0 15px
+    height 44px
+    line-height 44px
+    width 300px
+    margin 0 auto
+    border-radius 5px
+    color infoTextColor
+    background-color infoBackgroundColor
+    &.error
+      color errorTextColor
+      background-color errorBackgroundColor
+  .confirmBtn
+    display block
+    position absolute
+    left 180px
+    bottom 44px
+    width 240px
+    font-size 24px
+    height 44px
+    line-height 24px
+    font-weight bold
+    background-color brandColor
+    color white
+    border none
+    border-radius 5px
+    margin 0 auto
+    transition 0.1s
+    &:hover
+      transform scale(1.1)
+    &:disabled
+      opacity 0.7
+  .tabNav
+    absolute left right
+    bottom 15px
+    height 33px
+    line-height 33px
+    width 150px
+    text-align center
+    font-size 12px
+    color tabNavColor
+    margin 0 auto
+    transition 0.1s
+    i.active
+      color brandColor
+  .createTab
+    .ipt
+      margin 105px auto 15px
+  .selectTab
+    .ipt
+      margin 25px auto 15px
+      clearfix()
+      padding 0
+      input
+        display block
+        margin 0
+        float left
+        width 280px
+        height 42px
+        padding 0 0 0 15px
+        font-size 14px
+        border none
+        line-height 44px
+        background-color transparent
+        outline none
+        &:hover
+          border-color iptFocusBorderColor
+      button
+        font-weight 400
+        height 42px
+        cursor pointer
+        margin 0
+        padding 0
+        width 48px
+        float right
+        border none
+        background-color brandColor
+        border-top-right-radius 5px
+        border-bottom-right-radius 5px
+        color white
+        font-size 14px
+    .memberList
+      width 480px
+      margin 0 auto
+      height 190px
+      overflow scroll
+      border-bottom 1px solid borderColor
+      &>li
+        border-bottom 1px solid borderColor
+        height 44px
+        padding 0 25px
+        clearfix()
+        &nth-last-child(1)
+          border-bottom-color transparent
+        .userPhoto
+          width 30px
+          height 30px
+          float left
+          margin-top 7px
+          margin-right 15px
+          border-radius 15px
+        .userInfo
+          float left
+          margin-top 7px
+          .userName
+            font-size 16px
+            margin-bottom 2px
+          .userEmail
+            font-size 12px
+        .userControl
+          float right
+          .userRole
+            float left
+            height 30px
+            background-color transparent
+            border 1px solid transparent
+            margin-top 7px
+            margin-right 35px
+            outline none
+            cursor pointer
+            &hover
+              border-color borderColor
+            &focus
+              border-color iptFocusBorderColor
+          button
+            border none
+            height 30px
+            margin-top 7px
+            background-color transparent
+            color stripBtnColor
+            &hover
+              color stripHoverBtnColor
diff --git a/browser/styles/main/HomeContainer/lib/modal.styl b/browser/styles/main/HomeContainer/lib/modal.styl
new file mode 100644
index 00000000..005ac7b3
--- /dev/null
+++ b/browser/styles/main/HomeContainer/lib/modal.styl
@@ -0,0 +1,21 @@
+modalZIndex= 1000
+modalBackColor = transparentify(black, 65%)
+
+.ModalBase
+  fixed top left bottom right
+  z-index modalZIndex
+  &.hide
+    display none
+  .modalBack
+    absolute top left bottom right
+    background-color modalBackColor
+    z-index modalZIndex + 1
+  .modal
+    position relative
+    width 650px
+    margin 50px auto 0
+    z-index modalZIndex + 2
+    background-color white
+    padding 15px
+    color #666666
+    border-radius 5px
diff --git a/browser/styles/main/index.styl b/browser/styles/main/index.styl
index ad50d0a0..81114ea0 100644
--- a/browser/styles/main/index.styl
+++ b/browser/styles/main/index.styl
@@ -122,6 +122,6 @@ textarea.block-input
     .tooltip
       tooltip()
       margin-top -22px
-      margin-left -97px
+      margin-left -107px
     &:hover .tooltip
       opacity 1
diff --git a/browser/styles/shared/modal.styl b/browser/styles/shared/modal.styl
index aae9f5dd..38377145 100644
--- a/browser/styles/shared/modal.styl
+++ b/browser/styles/shared/modal.styl
@@ -1,390 +1,390 @@
-.ModalBase
-  fixed top left bottom right
-  z-index modalZIndex
-  &.hide
-    display none
-  .modalBack
-    absolute top left bottom right
-    background-color modalBackColor
-    z-index modalZIndex + 1
-  .modal
-    position relative
-    width 650px
-    margin 50px auto 0
-    z-index modalZIndex + 2
-    box-shadow popupShadow
-    background-color white
-    border-radius 10px
-    padding 15px
-    .modal-header
-      border-bottom solid 1px borderColor
-      margin-bottom 10px
-      h1
-        padding 10px 0 15px
-        font-size 1.5em
-    .modal-body
-      p
-        margin-bottom 10px
-    .modal-footer
-      clearfix()
-      border-top solid 1px borderColor
-      padding-top 10px
-      .modal-control
-        float right
-
-  .sideNavModal
-    height 500px
-    .leftPane
-      absolute top bottom left
-      width 175px
-      padding 20px
-      border-right solid 1px borderColor
-      .modalLabel
-        font-size 1.5em
-        margin-top 25px
-        margin-bottom 35px
-        color brandColor
-      .tabList button
-        btnStripDefault()
-        display block
-        width 100%
-        font-size 1.1em
-        padding 10px 5px
-        margin-bottom 15px
-        text-align left
-    .rightPane
-      absolute top bottom right
-      left 175px
-      padding 15px
-      overflow-y auto
-    .tab
-      padding-top 45px
-      .formField
-        position relative
-        clearfix()
-        margin-bottom 15px
-        label
-          width 30%
-          display block
-          line-height 33px
-          float left
-        input
-          width 70%
-          display block
-          borderInput()
-          height 33px
-          font-size 1em
-          border-radius 5px
-          float left
-      .formRadioField
-        margin-bottom 15px
-        input
-          margin-left 25px
-      .formConfirm
-        position relative
-        clearfix()
-        margin-bottom 15px
-        button
-          float right
-          btnDefault()
-          padding 10px 15px
-          border-radius 5px
-          font-size 1em
-          margin-left 5px
-        .alertInfo, .alertSuccess, .alertError
-          float right
-          padding 12px 10px
-          border-radius 5px
-          width 320px
-          font-size 1em
-          overflow-x hidden
-          white-space nowrap
-          transition 0.1s
-          &.hide
-            width 0
-            padding 12px 0
-        .alertInfo
-          alertInfo()
-        .alertSuccess
-          alertSuccess()
-        .alertError
-          alertError()
-  .PreferencesModal
-    .settingsTab
-      .categoryLabel
-        font-size 1.5em
-        margin-bottom 25px
-      .example
-        marked()
-    .aboutTab
-      padding-top 30px
-      .about1
-        margin-bottom 25px
-        .logo
-          display block
-          margin 0 auto
-        .appInfo
-          font-size 1.5em
-          text-align center
-      .about2
-        width 200px
-        margin 0 auto
-        .externalLabel
-          font-size 1.2em
-          margin-bottom 15px
-        .externalList
-          li
-            margin-bottom 15px
-  .PlanetSettingModal
-    .planetDeleteTab
-      padding-top 65px
-      p
-        margin-bottom 25px
-        strong
-          color brandColor
-          font-size 1.1em
-      input
-        borderInput()
-        margin-right 5px
-        height 33px
-        font-size 1em
-        border-radius 10px
-      .formConfirm
-        position relative
-        clearfix()
-        margin-bottom 15px
-        button
-          float right
-          btnDefault()
-          padding 10px 15px
-          border-radius 5px
-          font-size 1em
-          margin-left 5px
-        .alertInfo, .alertSuccess, .alertError
-          float right
-          padding 12px 10px
-          border-radius 5px
-          width 320px
-          font-size 1em
-          overflow-x hidden
-          white-space nowrap
-          transition 0.1s
-          &.hide
-            width 0
-            padding 12px 0
-        .alertInfo
-          alertInfo()
-        .alertSuccess
-          alertSuccess()
-        .alertError
-          alertError()
-  .TeamSettingsModal
-    .membersTab
-      .memberTable
-        width 100%
-        margin-bottom 25px
-        th
-          border-bottom solid 2px borderColor
-        td
-          border-bottom solid 1px borderColor
-          height 38px
-          button
-            btnDefault()
-            padding 5px
-            border-radius 5px
-          .roleSelect
-            height 33px
-            border solid 1px borderColor
-            background-color backgroundColor
-        th, td
-          padding 5px 0
-      .addMemberForm
-        .formLabel
-          margin-bottom 5px
-        .formGroup
-          clearfix()
-          .userNameSelect
-            display block
-            width 200px
-            margin-right 5px
-            float left
-          .roleSelect
-            display block
-            height 33px
-            border solid 1px borderColor
-            background-color backgroundColor
-            float left
-            margin-right 5px
-          .confirmButton
-            display block
-            height 33px
-            btnDefault()
-            border-radius 5px
-            float left
-
-  .LaunchModal
-    .modal-tab
-      text-align center
-      margin-bottom 10px
-      .btn-primary, .btn-default
-        margin 0
-        border-radius 0
-        border-width 1px
-        width 150px
-        border-radius 0
-        &:nth-child(1)
-          border-right solid 1px borderColor
-          border-top-left-radius 5px
-          border-bottom-left-radius 5px
-        &:nth-child(2)
-          border-left none
-          border-top-right-radius 5px
-          border-bottom-right-radius 5px
-  .Select
-    .Select-control
-      border-color borderColor
-    &.is-focused
-      .Select-control
-        border-color brandBorderColor
-    .Select-menu-outer
-      border-color borderColor
-  .ace_editor
-    border-radius 5px
-    border solid 1px borderColor
-  .CodeForm, .NoteForm
-    .form-group
-      margin-bottom 10px
-  .CodeForm
-    textarea.codeDescription
-      height 75px
-      font-size 0.9em
-      margin-bottom 10px
-    .modeSelect.Select
-      display inline-block
-      width 200px
-      height 37px
-      .Select-control
-        height 37px
-    .ace_editor
-      height 258px
-  .NoteForm
-    .ace_editor
-      height 358px
-    .previewMode
-      absolute top right
-      font-size 0.8em
-      line-height 24px
-      padding 5 15px
-      background-color transparentify(invBackgroundColor, 0.2)
-      color invTextColor
-      border-top-right-radius 5px
-  .marked
-    height 360px
-    overflow-x hidden
-    overflow-y auto
-    box-sizing border-box
-    padding 5px
-    border solid 1px borderColor
-    border-radius 5px
-    marked()
-
-
-  .PlanetCreateModal.modal, .TeamCreateModal.modal, .AddMemberModal.modal
-    padding 60px 0
-    .nameInput
-      width 80%
-      font-size 1.3em
-      margin 25px auto 15px
-      text-align center
-    .userNameSelect
-      width 80%
-      font-size 1.3em
-      margin 35px auto
-      text-align center
-    .formField
-      text-align center
-      margin 0 auto 25px
-      select
-        display inline-block
-        width 150px
-        height 33px
-        border solid 1px borderColor
-        background-color white
-        padding 0 10px
-        margin 0 15px
-    .submitButton
-      display block
-      margin 0 auto
-      box-sizing border-box
-      width 55px
-      height 55px
-      circle()
-      btnPrimary()
-    .errorAlert
-      alertError()
-      padding 12px 10px
-      border-radius 5px
-      text-align center
-      display block
-      width 360px
-      margin 0 auto 15px
-
-  .ContactModal
-    padding 15px
-    .contactForm
-      .formField
-        width 100%
-        margin-bottom 10px
-        input, textarea
-          display block
-          width 100%
-          borderInput()
-          border-radius 5px
-        input
-          height 33px
-          font-size 1em
-        textarea
-          height 175px
-          font-size 1em
-      .formControl
-        clearfix()
-        button
-          float right
-          btnDefault()
-          height 44px
-          padding 0 15px
-          border-radius 5px
-          margin-left 5px
-          font-size 1em
-        button.sendButton
-          btnPrimary()
-    .confirmation
-      .confirmationMessage
-        padding 35px 0
-        text-align center
-        font-size 1.1em
-      .doneButton
-        btnDefault()
-        height 44px
-        padding 0 35px
-        border-radius 5px
-        display block
-        margin 0 auto 25px
-
-  .LogoutModal
-    padding 65px 0 45px
-    width 350px
-    .messageLabel
-      text-align center
-      font-size 1.1em
-      margin-bottom 35px
-    .formControl
-      text-align center
-      button
-        btnDefault()
-        border-radius 5px
-        height 44px
-        margin 15px 5px
-        padding 0 15px
-      button.logoutButton
-        btnPrimary()
+// .ModalBase
+//   fixed top left bottom right
+//   z-index modalZIndex
+//   &.hide
+//     display none
+//   .modalBack
+//     absolute top left bottom right
+//     background-color modalBackColor
+//     z-index modalZIndex + 1
+//   .modal
+//     position relative
+//     width 650px
+//     margin 50px auto 0
+//     z-index modalZIndex + 2
+//     box-shadow popupShadow
+//     background-color white
+//     border-radius 10px
+//     padding 15px
+//     .modal-header
+//       border-bottom solid 1px borderColor
+//       margin-bottom 10px
+//       h1
+//         padding 10px 0 15px
+//         font-size 1.5em
+//     .modal-body
+//       p
+//         margin-bottom 10px
+//     .modal-footer
+//       clearfix()
+//       border-top solid 1px borderColor
+//       padding-top 10px
+//       .modal-control
+//         float right
+//
+//   .sideNavModal
+//     height 500px
+//     .leftPane
+//       absolute top bottom left
+//       width 175px
+//       padding 20px
+//       border-right solid 1px borderColor
+//       .modalLabel
+//         font-size 1.5em
+//         margin-top 25px
+//         margin-bottom 35px
+//         color brandColor
+//       .tabList button
+//         btnStripDefault()
+//         display block
+//         width 100%
+//         font-size 1.1em
+//         padding 10px 5px
+//         margin-bottom 15px
+//         text-align left
+//     .rightPane
+//       absolute top bottom right
+//       left 175px
+//       padding 15px
+//       overflow-y auto
+//     .tab
+//       padding-top 45px
+//       .formField
+//         position relative
+//         clearfix()
+//         margin-bottom 15px
+//         label
+//           width 30%
+//           display block
+//           line-height 33px
+//           float left
+//         input
+//           width 70%
+//           display block
+//           borderInput()
+//           height 33px
+//           font-size 1em
+//           border-radius 5px
+//           float left
+//       .formRadioField
+//         margin-bottom 15px
+//         input
+//           margin-left 25px
+//       .formConfirm
+//         position relative
+//         clearfix()
+//         margin-bottom 15px
+//         button
+//           float right
+//           btnDefault()
+//           padding 10px 15px
+//           border-radius 5px
+//           font-size 1em
+//           margin-left 5px
+//         .alertInfo, .alertSuccess, .alertError
+//           float right
+//           padding 12px 10px
+//           border-radius 5px
+//           width 320px
+//           font-size 1em
+//           overflow-x hidden
+//           white-space nowrap
+//           transition 0.1s
+//           &.hide
+//             width 0
+//             padding 12px 0
+//         .alertInfo
+//           alertInfo()
+//         .alertSuccess
+//           alertSuccess()
+//         .alertError
+//           alertError()
+//   .PreferencesModal
+//     .settingsTab
+//       .categoryLabel
+//         font-size 1.5em
+//         margin-bottom 25px
+//       .example
+//         marked()
+//     .aboutTab
+//       padding-top 30px
+//       .about1
+//         margin-bottom 25px
+//         .logo
+//           display block
+//           margin 0 auto
+//         .appInfo
+//           font-size 1.5em
+//           text-align center
+//       .about2
+//         width 200px
+//         margin 0 auto
+//         .externalLabel
+//           font-size 1.2em
+//           margin-bottom 15px
+//         .externalList
+//           li
+//             margin-bottom 15px
+//   .PlanetSettingModal
+//     .planetDeleteTab
+//       padding-top 65px
+//       p
+//         margin-bottom 25px
+//         strong
+//           color brandColor
+//           font-size 1.1em
+//       input
+//         borderInput()
+//         margin-right 5px
+//         height 33px
+//         font-size 1em
+//         border-radius 10px
+//       .formConfirm
+//         position relative
+//         clearfix()
+//         margin-bottom 15px
+//         button
+//           float right
+//           btnDefault()
+//           padding 10px 15px
+//           border-radius 5px
+//           font-size 1em
+//           margin-left 5px
+//         .alertInfo, .alertSuccess, .alertError
+//           float right
+//           padding 12px 10px
+//           border-radius 5px
+//           width 320px
+//           font-size 1em
+//           overflow-x hidden
+//           white-space nowrap
+//           transition 0.1s
+//           &.hide
+//             width 0
+//             padding 12px 0
+//         .alertInfo
+//           alertInfo()
+//         .alertSuccess
+//           alertSuccess()
+//         .alertError
+//           alertError()
+//   .TeamSettingsModal
+//     .membersTab
+//       .memberTable
+//         width 100%
+//         margin-bottom 25px
+//         th
+//           border-bottom solid 2px borderColor
+//         td
+//           border-bottom solid 1px borderColor
+//           height 38px
+//           button
+//             btnDefault()
+//             padding 5px
+//             border-radius 5px
+//           .roleSelect
+//             height 33px
+//             border solid 1px borderColor
+//             background-color backgroundColor
+//         th, td
+//           padding 5px 0
+//       .addMemberForm
+//         .formLabel
+//           margin-bottom 5px
+//         .formGroup
+//           clearfix()
+//           .userNameSelect
+//             display block
+//             width 200px
+//             margin-right 5px
+//             float left
+//           .roleSelect
+//             display block
+//             height 33px
+//             border solid 1px borderColor
+//             background-color backgroundColor
+//             float left
+//             margin-right 5px
+//           .confirmButton
+//             display block
+//             height 33px
+//             btnDefault()
+//             border-radius 5px
+//             float left
+//
+//   .LaunchModal
+//     .modal-tab
+//       text-align center
+//       margin-bottom 10px
+//       .btn-primary, .btn-default
+//         margin 0
+//         border-radius 0
+//         border-width 1px
+//         width 150px
+//         border-radius 0
+//         &:nth-child(1)
+//           border-right solid 1px borderColor
+//           border-top-left-radius 5px
+//           border-bottom-left-radius 5px
+//         &:nth-child(2)
+//           border-left none
+//           border-top-right-radius 5px
+//           border-bottom-right-radius 5px
+//   .Select
+//     .Select-control
+//       border-color borderColor
+//     &.is-focused
+//       .Select-control
+//         border-color brandBorderColor
+//     .Select-menu-outer
+//       border-color borderColor
+//   .ace_editor
+//     border-radius 5px
+//     border solid 1px borderColor
+//   .CodeForm, .NoteForm
+//     .form-group
+//       margin-bottom 10px
+//   .CodeForm
+//     textarea.codeDescription
+//       height 75px
+//       font-size 0.9em
+//       margin-bottom 10px
+//     .modeSelect.Select
+//       display inline-block
+//       width 200px
+//       height 37px
+//       .Select-control
+//         height 37px
+//     .ace_editor
+//       height 258px
+//   .NoteForm
+//     .ace_editor
+//       height 358px
+//     .previewMode
+//       absolute top right
+//       font-size 0.8em
+//       line-height 24px
+//       padding 5 15px
+//       background-color transparentify(invBackgroundColor, 0.2)
+//       color invTextColor
+//       border-top-right-radius 5px
+//   .marked
+//     height 360px
+//     overflow-x hidden
+//     overflow-y auto
+//     box-sizing border-box
+//     padding 5px
+//     border solid 1px borderColor
+//     border-radius 5px
+//     marked()
+//
+//
+//   .PlanetCreateModal.modal, .TeamCreateModal.modal, .AddMemberModal.modal
+//     padding 60px 0
+//     .nameInput
+//       width 80%
+//       font-size 1.3em
+//       margin 25px auto 15px
+//       text-align center
+//     .userNameSelect
+//       width 80%
+//       font-size 1.3em
+//       margin 35px auto
+//       text-align center
+//     .formField
+//       text-align center
+//       margin 0 auto 25px
+//       select
+//         display inline-block
+//         width 150px
+//         height 33px
+//         border solid 1px borderColor
+//         background-color white
+//         padding 0 10px
+//         margin 0 15px
+//     .submitButton
+//       display block
+//       margin 0 auto
+//       box-sizing border-box
+//       width 55px
+//       height 55px
+//       circle()
+//       btnPrimary()
+//     .errorAlert
+//       alertError()
+//       padding 12px 10px
+//       border-radius 5px
+//       text-align center
+//       display block
+//       width 360px
+//       margin 0 auto 15px
+//
+//   .ContactModal
+//     padding 15px
+//     .contactForm
+//       .formField
+//         width 100%
+//         margin-bottom 10px
+//         input, textarea
+//           display block
+//           width 100%
+//           borderInput()
+//           border-radius 5px
+//         input
+//           height 33px
+//           font-size 1em
+//         textarea
+//           height 175px
+//           font-size 1em
+//       .formControl
+//         clearfix()
+//         button
+//           float right
+//           btnDefault()
+//           height 44px
+//           padding 0 15px
+//           border-radius 5px
+//           margin-left 5px
+//           font-size 1em
+//         button.sendButton
+//           btnPrimary()
+//     .confirmation
+//       .confirmationMessage
+//         padding 35px 0
+//         text-align center
+//         font-size 1.1em
+//       .doneButton
+//         btnDefault()
+//         height 44px
+//         padding 0 35px
+//         border-radius 5px
+//         display block
+//         margin 0 auto 25px
+//
+//   .LogoutModal
+//     padding 65px 0 45px
+//     width 350px
+//     .messageLabel
+//       text-align center
+//       font-size 1.1em
+//       margin-bottom 35px
+//     .formControl
+//       text-align center
+//       button
+//         btnDefault()
+//         border-radius 5px
+//         height 44px
+//         margin 15px 5px
+//         padding 0 15px
+//       button.logoutButton
+//         btnPrimary()
diff --git a/browser/styles/vars.styl b/browser/styles/vars.styl
index c8747771..0e6967ff 100644
--- a/browser/styles/vars.styl
+++ b/browser/styles/vars.styl
@@ -25,7 +25,7 @@ btnHighlightenColor = #000
 brandColor = #2BAC8F
 
 popupShadow = 0 0 5px 0 #888
-modalBackColor = transparentify(white, 65%)
+
 
 tableHeadBgColor = white
 tableOddBgColor = #F9F9F9
@@ -41,5 +41,4 @@ errorTextColor= #A64444
 infoBackgroundColor= #D9EDF7
 infoTextColor= #34708E
 
-modalZIndex= 1000
 popupZIndex= 500