clean old codes

browser/main/modal/Preference/AppSettingTab.js

@@ -88,58 +88,27 @@ export default class AppSettingTab extends React.Component {
     })
   }
 
-  handleNameSaveButtonClick (e) {
-    let { dispatch } = this.props
-
-    dispatch(updateUser({name: this.state.user.name}))
-    this.setState({
-      userAlert: {
-        type: 'success',
-        message: 'Successfully done!'
-      }
-    })
-  }
-
   render () {
     let keymapAlert = this.state.keymapAlert
     let keymapAlertElement = keymapAlert != null
-      ? (
+      ? <p className={`alert ${keymapAlert.type}`}>
-        <p className={`alert ${keymapAlert.type}`}>
+        {keymapAlert.message}
-          {keymapAlert.message}
+      </p>
-        </p>
+      : null
-      ) : null
+    let aceThemeList = ace.require('ace/ext/themelist')
-    let userAlert = this.state.userAlert
-    let userAlertElement = userAlert != null
-      ? (
-        <p className={`alert ${userAlert.type}`}>
-          {userAlert.message}
-        </p>
-      ) : null
-    let aceThemeList = ace.require("ace/ext/themelist")
     let hljsThemeList = hljsTheme()
 
     return (
       <div className='AppSettingTab content'>
-        <div className='section'>
-          <div className='sectionTitle'>User&apos;s info</div>
-          <div className='sectionInput'>
-            <label>User name</label>
-            <input valueLink={this.linkState('user.name')} type='text'/>
-          </div>
-          <div className='sectionConfirm'>
-            <button onClick={e => this.handleNameSaveButtonClick(e)}>Save</button>
-            {userAlertElement}
-          </div>
-        </div>
         <div className='section'>
           <div className='sectionTitle'>Editor</div>
           <div className='sectionInput'>
             <label>Editor Font Size</label>
-            <input valueLink={this.linkState('config.editor-font-size')} onKeyDown={e => this.handleConfigKeyDown(e)} type='text'/>
+            <input valueLink={this.linkState('config.editor-font-size')} onKeyDown={(e) => this.handleConfigKeyDown(e)} type='text'/>
           </div>
           <div className='sectionInput'>
             <label>Editor Font Family</label>
-            <input valueLink={this.linkState('config.editor-font-family')} onKeyDown={e => this.handleConfigKeyDown(e)} type='text'/>
+            <input valueLink={this.linkState('config.editor-font-family')} onKeyDown={(e) => this.handleConfigKeyDown(e)} type='text'/>
           </div>
           <div className='sectionMultiSelect'>
             <label>Editor Indent Style</label>
@@ -160,11 +129,11 @@ export default class AppSettingTab extends React.Component {
           <div className='sectionTitle'>Preview</div>
           <div className='sectionInput'>
             <label>Preview Font Size</label>
-            <input valueLink={this.linkState('config.preview-font-size')} onKeyDown={e => this.handleConfigKeyDown(e)} type='text'/>
+            <input valueLink={this.linkState('config.preview-font-size')} onKeyDown={(e) => this.handleConfigKeyDown(e)} type='text'/>
           </div>
           <div className='sectionInput'>
             <label>Preview Font Family</label>
-            <input valueLink={this.linkState('config.preview-font-family')} onKeyDown={e => this.handleConfigKeyDown(e)} type='text'/>
+            <input valueLink={this.linkState('config.preview-font-family')} onKeyDown={(e) => this.handleConfigKeyDown(e)} type='text'/>
           </div>
           <div className='sectionSelect'>
             <label>Switching Preview</label>
@@ -194,8 +163,8 @@ export default class AppSettingTab extends React.Component {
             <label>Code block Theme</label>
             <select valueLink={this.linkState('config.theme-code')}>
               {
-                hljsThemeList.map(function(v, i){
+                hljsThemeList.map((theme) => {
-                  return (<option value={v.name} key={v.name}>{v.caption}</option>)
+                  return (<option value={theme.name} key={theme.name}>{theme.caption}</option>)
                 })
               }
             </select>
@@ -204,28 +173,28 @@ export default class AppSettingTab extends React.Component {
             <label>Editor Theme</label>
             <select valueLink={this.linkState('config.theme-syntax')}>
               {
-                aceThemeList.themes.map(function(v, i){
+                aceThemeList.themes.map((theme) => {
-                  return (<option value={v.name} key={v.name}>{v.caption}</option>)
+                  return (<option value={theme.name} key={theme.name}>{theme.caption}</option>)
                 })
               }
             </select>
           </div>
           <div className='sectionConfirm'>
-            <button onClick={e => this.handleConfigSaveButtonClick(e)}>Save</button>
+            <button onClick={(e) => this.handleConfigSaveButtonClick(e)}>Save</button>
           </div>
         </div>
         <div className='section'>
           <div className='sectionTitle'>Hotkey</div>
           <div className='sectionInput'>
             <label>Toggle Main</label>
-            <input onKeyDown={e => this.handleKeyDown(e)} valueLink={this.linkState('keymap.toggleMain')} type='text'/>
+            <input onKeyDown={(e) => this.handleKeyDown(e)} valueLink={this.linkState('keymap.toggleMain')} type='text'/>
           </div>
           <div className='sectionInput'>
             <label>Toggle Finder(popup)</label>
-            <input onKeyDown={e => this.handleKeyDown(e)} valueLink={this.linkState('keymap.toggleFinder')} type='text'/>
+            <input onKeyDown={(e) => this.handleKeyDown(e)} valueLink={this.linkState('keymap.toggleFinder')} type='text'/>
           </div>
           <div className='sectionConfirm'>
-            <button onClick={e => this.handleSaveButtonClick(e)}>Save</button>
+            <button onClick={(e) => this.handleSaveButtonClick(e)}>Save</button>
             {keymapAlertElement}
           </div>
           <div className='description'>

browser/main/modal/Preference/FolderSettingTab.js

@@ -1,96 +0,0 @@
-import React, { PropTypes } from 'react'
-import FolderRow from './FolderRow'
-import linkState from 'browser/lib/linkState'
-
-export default class FolderSettingTab extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      name: ''
-    }
-  }
-
-  handleNewFolderNameKeyDown (e) {
-    if (e.keyCode === 13) {
-      this.handleSaveButtonClick()
-    }
-  }
-
-  handleSaveButtonClick (e) {
-    this.setState({alert: null}, () => {
-      let { dispatch } = this.props
-
-      try {
-        // dispatch(createFolder({
-        //   name: this.state.name
-        // }))
-      } catch (e) {
-        this.setState({alert: {
-          type: 'error',
-          message: e.message
-        }})
-        return
-      }
-
-      this.setState({name: ''})
-    })
-  }
-
-  setAlert (alert, cb) {
-    this.setState({alert: alert}, cb)
-  }
-
-  render () {
-    let { folders } = this.props
-    let folderElements = folders.map((folder, index) => {
-      return (
-        <FolderRow
-          key={'folder-' + folder.key}
-          folder={folder}
-          index={index}
-          count={folders.length}
-          setAlert={(alert, cb) => this.setAlert(alert, cb)}
-        />
-      )
-    })
-
-    let alert = this.state.alert
-    let alertElement = alert != null ? (
-        <p className={`alert ${alert.type}`}>
-          {alert.message}
-        </p>
-      ) : null
-
-    return (
-      <div className='FolderSettingTab content'>
-        <div className='section'>
-          <div className='sectionTitle'>Manage folder</div>
-          <div className='folderTable'>
-            <div className='folderHeader'>
-              <div className='folderName'>Folder</div>
-              <div className='folderControl'>Edit/Delete</div>
-            </div>
-            {folderElements}
-            <div className='newFolder'>
-              <div className='folderName'>
-                <input onKeyDown={(e) => this.handleNewFolderNameKeyDown(e)} valueLink={this.linkState('name')} type='text' placeholder='New Folder'/>
-              </div>
-              <div className='folderControl'>
-                <button onClick={(e) => this.handleSaveButtonClick(e)} className='primary'>Add</button>
-              </div>
-            </div>
-            {alertElement}
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-FolderSettingTab.propTypes = {
-  folders: PropTypes.array,
-  dispatch: PropTypes.func
-}
-
-FolderSettingTab.prototype.linkState = linkState

browser/main/modal/Preferences.js

@@ -3,12 +3,10 @@ import { connect, Provider } from 'react-redux'
 import linkState from 'browser/lib/linkState'
 import store from '../store'
 import AppSettingTab from './Preference/AppSettingTab'
-import FolderSettingTab from './Preference/FolderSettingTab'
 import ContactTab from './Preference/ContactTab'
 import { closeModal } from 'browser/lib/modal'
 
 const APP = 'APP'
-const FOLDER = 'FOLDER'
 const CONTACT = 'CONTACT'
 
 class Preferences extends React.Component {
@@ -25,7 +23,7 @@ class Preferences extends React.Component {
   }
 
   handleNavButtonClick (tab) {
-    return e => {
+    return (e) => {
       this.setState({currentTab: tab})
     }
   }
@@ -35,19 +33,18 @@ class Preferences extends React.Component {
 
     let tabs = [
       {target: APP, label: 'Preferences'},
-      {target: FOLDER, label: 'Manage folder'},
+      {target: CONTACT, label: 'Contact'}
-      {target: CONTACT, label: 'Contact form'}
     ]
 
-    let navButtons = tabs.map(tab => (
+    let navButtons = tabs.map((tab) => (
-      <button key={tab.target} onClick={e => this.handleNavButtonClick(tab.target)(e)} className={this.state.currentTab === tab.target ? 'active' : ''}>{tab.label}</button>
+      <button key={tab.target} onClick={(e) => this.handleNavButtonClick(tab.target)(e)} className={this.state.currentTab === tab.target ? 'active' : ''}>{tab.label}</button>
     ))
 
     return (
       <div className='Preferences modal'>
         <div className='header'>
           <div className='title'>Setting</div>
-          <button onClick={e => closeModal()} className='closeBtn'>Done</button>
+          <button onClick={(e) => closeModal()} className='closeBtn'>Done</button>
         </div>
 
         <div className='nav'>
@@ -60,16 +57,9 @@ class Preferences extends React.Component {
   }
 
   renderContent () {
-    let { user, folders, dispatch } = this.props
+    let { user, dispatch } = this.props
 
     switch (this.state.currentTab) {
-      case FOLDER:
-        return (
-          <FolderSettingTab
-            dispatch={dispatch}
-            folders={folders}
-          />
-        )
       case CONTACT:
         return (
           <ContactTab/>
@@ -90,23 +80,12 @@ Preferences.propTypes = {
   user: PropTypes.shape({
     name: PropTypes.string
   }),
-  folders: PropTypes.array,
   dispatch: PropTypes.func
 }
 
 Preferences.prototype.linkState = linkState
 
-function remap (state) {
+let RootComponent = connect((x) => x)(Preferences)
-  let { user, folders, status } = state
-
-  return {
-    user,
-    folders,
-    status
-  }
-}
-
-let RootComponent = connect(remap)(Preferences)
 export default class PreferencesModal extends React.Component {
   render () {
     return (

browser/main/modal/Tutorial.js

@@ -1,115 +0,0 @@
-import React, { PropTypes } from 'react'
-import MarkdownPreview from 'browser/components/MarkdownPreview'
-import CodeEditor from 'browser/components/CodeEditor'
-
-export default class Tutorial extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      slideIndex: 0
-    }
-  }
-
-  handlePriorSlideClick () {
-    if (this.state.slideIndex > 0) this.setState({slideIndex: this.state.slideIndex - 1})
-  }
-
-  handleNextSlideClick () {
-    if (this.state.slideIndex < 4) this.setState({slideIndex: this.state.slideIndex + 1})
-  }
-
-  startButtonClick (e) {
-    this.props.close()
-  }
-
-  render () {
-    let content = this.renderContent(this.state.slideIndex)
-
-    let dotElements = []
-    for (let i = 0; i < 5; i++) {
-      dotElements.push(<i key={i} className={'fa fa-fw fa-circle' + (i === this.state.slideIndex ? ' active' : '')}/>)
-    }
-
-    return (
-      <div className='Tutorial modal'>
-        <button onClick={(e) => this.handlePriorSlideClick()} className={'priorBtn' + (this.state.slideIndex === 0 ? ' hide' : '')}>
-          <i className='fa fa-fw fa-angle-left'/>
-        </button>
-        <button onClick={(e) => this.handleNextSlideClick()} className={'nextBtn' + (this.state.slideIndex === 4 ? ' hide' : '')}>
-          <i className='fa fa-fw fa-angle-right'/>
-        </button>
-        {content}
-        <div className='dots'>
-          {dotElements}
-        </div>
-      </div>
-    )
-  }
-
-  renderContent (index) {
-    switch (index) {
-      case 0:
-        return (<div className='slide slide0'>
-          <div className='title'>Welcome to Boost</div>
-          <div className='content'>
-            Boost is a brand new note app for software<br/>
-            Don't waste time cleaning up your data.<br/>
-            devote that time to more creative work.<br/>
-            Hack your memory.
-          </div>
-        </div>)
-      case 1:
-        let content = '## Boost is a note app for engineer.\n\n - Write with markdown\n - Stylize beautiful'
-        return (<div className='slide slide1'>
-          <div className='title'>Write with Markdown</div>
-          <div className='content'>
-            Markdown is available.<br/>
-            Your notes will be stylized beautifully and quickly.
-            <div className='markdown'>
-              <pre className='left'>{content}</pre>
-              <MarkdownPreview className='right' content={content}/>
-            </div>
-          </div>
-        </div>)
-      case 2:
-        let code = 'import shell from \'shell\'\r\nvar React = require(\'react\')\r\nvar { PropTypes } = React\r\nimport markdown from \'boost\/markdown\'\r\nvar ReactDOM = require(\'react-dom\')\r\n\r\nfunction handleAnchorClick (e) {\r\n  shell.openExternal(e.target.href)\r\n  e.preventDefault()\r\n}\r\n\r\nexport default class MarkdownPreview extends React.Component {\r\n  componentDidMount () {\r\n    this.addListener()\r\n  }\r\n\r\n  componentDidUpdate () {\r\n    this.addListener()\r\n  }\r\n\r\n  componentWillUnmount () {\r\n    this.removeListener()\r\n  }'
-        return (<div className='slide slide2'>
-          <div className='title'>Beautiful code highlighting</div>
-          <div className='content'>
-            Boost supports code syntax highlighting.<br/>
-            There are more than 100 different type of language.
-            <div className='code'>
-              <CodeEditor readOnly article={{content: code, mode: 'jsx'}}/>
-            </div>
-          </div>
-        </div>)
-      case 3:
-        return (<div className='slide slide3'>
-          <div className='title'>Easy to access with Finder</div>
-          <div className='content'>
-            The Finder helps you organize all of the files and documents.<br/>
-            There is a short-cut key [⌘ + alt + s] to open the Finder.<br/>
-            It is available to save your articles on the Clipboard<br/>
-            by selecting your file with pressing Enter key,<br/>
-            and to paste the contents of the Clipboard with [{process.platform === 'darwin' ? 'Command' : 'Control'}-V]
-
-            <img width='480' src='../resources/finder.png'/>
-          </div>
-        </div>)
-      case 4:
-        return (<div className='slide slide4'>
-          <div className='title'>Are you ready?</div>
-          <div className='content'>
-          <button onClick={(e) => this.startButtonClick(e)}>Start<br/>Boost</button>
-          </div>
-        </div>)
-      default:
-        return null
-    }
-  }
-}
-
-Tutorial.propTypes = {
-  close: PropTypes.func
-}

browser/styles/main/UserNavigator.styl

@@ -1,86 +0,0 @@
-userNavigatorBgColor = #1B1C1C
-userNavigatorColor = #DDD
-userAnchorColor = #979797
-userAnchorBgColor = #BEBEBE
-userAnchorActiveColor = textColor
-userAnchorActiveBgColor = white
-
-.UserNavigator
-  noSelect()
-  background-color userNavigatorBgColor
-  absolute left top bottom
-  width 60px
-  text-align center
-  box-sizing border-box
-  ul.userList
-    position absolute
-    top 25px
-    left 0
-    right 0
-    bottom 70px
-    // overflow-y auto
-    &>li
-      a
-        display block
-        width 38px
-        height 64px
-        margin 0 auto 10px
-        text-align center
-        text-decoration none
-        color userAnchorColor
-        line-height 44px
-        font-size 1.1em
-        cursor pointer
-        transition 0.1s
-
-        img.ProfileImage
-          width 38px
-          height 38px
-          border-radius 22px
-          opacity 0.7
-        &:hover
-          img.ProfileImage
-            opacity 1
-          .userTooltip
-            opacity 1
-        &.active
-          img.ProfileImage
-            opacity 1
-        .userTooltip
-          tooltip()
-          position absolute
-          margin-top -52px
-          margin-left 44px
-        .keyLabel
-          margin-top -25px
-          font-size 0.8em
-          color userNavigatorColor
-  button.createTeamBtn
-    display block
-    margin 0 auto
-    width 30px
-    height 30px
-    border-radius 15px
-    border 2px solid darken(white, 5%)
-    color darken(white, 5%)
-    text-align center
-    background-image none
-    background-color transparent
-    box-sizing border-box
-    absolute left right
-    bottom 15px
-    font-size 22px
-    line-height 22px
-    transition 0.1s
-    .tooltip
-      tooltip()
-      margin-top -26px
-      margin-left 30px
-    &:hover, &.hover, &:focus, &.focus
-      color white
-      border-color white
-      .tooltip
-        opacity 1
-    &:active
-      background-color brandColor
-      border-color brandColor

browser/styles/main/modal/CreateNewFolder.styl

@@ -1,91 +0,0 @@
-tabNavColor = #999999
-iptFocusBorderColor = #369DCD
-
-.CreateNewFolder.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
-    margin 75px auto 20px
-    &:focus
-      border-color iptFocusBorderColor
-  .colorSelect
-    text-align center
-    .option
-      cursor pointer
-      font-size 22px
-      height 48px
-      width 48px
-      margin 0 2px
-      border 1px solid transparent
-      border-radius 5px
-      overflow hidden
-      line-height 45px
-      text-align center
-      transition 0.1s
-      display inline-block
-      &:hover
-        border-color borderColor
-        font-size 28px
-      &.active
-        font-size 28px
-        border-color iptFocusBorderColor
-  .alert
-    color infoTextColor
-    background-color infoBackgroundColor
-    font-size 14px
-    padding 15px 15px
-    width 330px
-    border-radius 5px
-    margin 15px auto 0
-    &.error
-      color errorTextColor
-      background-color errorBackgroundColor
-  .confirmBtn
-    display block
-    position absolute
-    left 205px
-    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

browser/styles/main/modal/CreateNewTeam.styl

@@ -1,199 +0,0 @@
-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
-    white-space nowrap
-    overflow-x auto
-    &.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
-    .memberForm
-      display block
-      margin 25px auto 15px
-      width 330px
-      clearfix()
-      padding 0
-      font-size 14px
-      height 44px
-      line-height 44px
-      outline none
-      .Select.memberName
-        display block
-        margin 0
-        float left
-        width 280px
-        height 44px
-        font-size 14px
-        border none
-        line-height 44px
-        background-color transparent
-        outline none
-        &.is-focus
-          .Select-control
-            border-color iptFocusBorderColor
-        .Select-control
-          height 44px
-          line-height 44px
-          padding 0 0 0 15px
-          border-radius 5px 0 0 5px
-          border 1px solid borderColor
-          border-right none
-          .Select-placeholder
-            padding 0 0 0 15px
-          .Seleect-arrow
-            top 21px
-          .Select-clear
-            padding 0 10px
-        .Select-noresults, .Select-option
-          line-height 44px
-          padding 0 0 0 15px
-
-        &:focus, &.focus
-          border-color iptFocusBorderColor
-      button
-        font-weight 400
-        height 44px
-        cursor pointer
-        margin 0
-        padding 0
-        width 50px
-        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

browser/styles/main/modal/Tutorial.styl

@@ -1,132 +0,0 @@
-
-slideBgColor0 = #2BAC8F
-slideBgColor1 = #F68F92
-slideBgColor2 = #D6AD56
-slideBgColor3 = #26969B
-slideBgColor4 = #00B493
-
-.Tutorial.modal
-  background-color slideBgColor0
-  color white !important
-  width 720px
-  height 480px
-  margin-top 75px
-  border-radius 5px
-  overflow hidden
-
-  .priorBtn, .nextBtn
-    font-size 72px
-    position absolute
-    background-color transparent
-    color transparentify(white, 50%)
-    transition 0.1s
-    border none
-    line-height 72px
-    padding 0
-    width 93px
-    height 72px
-    z-index 2
-    top 189px
-    &:hover
-      color white
-    &.hide
-      opacity 0
-  .priorBtn
-    left 15px
-  .nextBtn
-    right 15px
-  .title
-    text-align center
-    font-size 54px
-    margin 40px 0
-  .content
-    text-align center
-    font-size 22px
-    line-height 1.8
-  .dots
-    position absolute
-    left 0
-    right 0
-    bottom 25px
-    margin 0 auto
-    color gray
-    text-align center
-    z-index 2
-    &>i
-      transition 0.3s
-      &.active
-        color white
-  .slide
-    absolute top bottom left right
-    z-index 1
-  .slide0
-    background-color slideBgColor0
-    .content
-      margin-top 100px
-  .slide1
-    background-color slideBgColor1
-    .content
-      .markdown
-        background-color white
-        color textColor
-        width 480px
-        height 140px
-        margin 45px auto 0
-        clearfix()
-        text-align left
-        border-radius 5px
-        overflow hidden
-        .left
-          float left
-          width 240px
-          height 140px
-          box-sizing border-box
-          font-size 0.5em
-          padding 30px
-          border-right 1px solid borderColor
-        .right
-          width 240px
-          height 140px
-          float right
-          box-sizing border-box
-          padding: 28px 0 0 10px
-          font-size 0.45em
-          marked()
-          ul
-            padding-left 20px
-  .slide2
-    background-color slideBgColor2
-    .code
-      border-radius 5px
-      overflow hidden
-      text-align left
-      width 480px
-      heght 140px
-      margin 45px auto 0
-      font-size 14px
-      .ace_editor
-        height 140px
-  .slide3
-    background-color slideBgColor3
-    .title
-      margin-bottom 15px
-    .content
-      font-size 18px
-      &>img
-        margin-top 25px
-  .slide4
-    background-color slideBgColor4
-    .content
-      &>button
-        background-color white
-        color brandColor
-        font-size 60px
-        width 250px
-        height 250px
-        border-radius 125px
-        border none
-        transition 0.1s
-        &:hover
-          transform scale(1.2)
-
-

browser/styles/shared/modal.styl

@@ -1,390 +0,0 @@
-// .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()