Merge branch 'master' into feature-editor-line-lines

2025-12-13 17:56:25 +00:00 · 2017-12-23 23:06:26 +01:00
parent 85065357e2 16d264ebfa
commit da1098e441
222 changed files with 6346 additions and 2127 deletions
--- a/browser/main/modals/CreateFolderModal.js
+++ b/browser/main/modals/CreateFolderModal.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './CreateFolderModal.styl'
 import dataApi from 'browser/main/lib/dataApi'
@@ -51,8 +52,8 @@ class CreateFolderModal extends React.Component {
  confirm () {
    AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_FOLDER')
    if (this.state.name.trim().length > 0) {
-      let { storage } = this.props
-      let input = {
+      const { storage } = this.props
+      const input = {
        name: this.state.name.trim(),
        color: consts.FOLDER_COLORS[Math.floor(Math.random() * 7) % 7]
      }
--- a/browser/main/modals/CreateFolderModal.styl
+++ b/browser/main/modals/CreateFolderModal.styl
@@ -4,10 +4,9 @@
  height 270px
  overflow hidden
  position relative
-  padding 0 40px

 .header
-  height 70px
+  height 80px
  margin-bottom 10px
  margin-top 20px
  font-size 18px
@@ -15,23 +14,27 @@
  background-color $ui-backgroundColor
  color $ui-text-color

+.title
+  font-size 36px
+  font-weight 600
+
 .control-folder-label
  text-align left
-  font-size 12px
+  font-size 14px
  color $ui-text-color

 .control-folder-input
  display block
-  height 30px
-  width 420px
+  height 40px
+  width 490px
  padding 0 5px
-  margin 10px auto 15px
+  margin 10px 0
  border 1px solid #C9C9C9 // TODO: use variable.
  border-radius 2px
  background-color transparent
  outline none
  vertical-align middle
-  font-size 14px
+  font-size 16px
  &:disabled
    background-color $ui-input--disabled-backgroundColor
  &:focus, &:active
@@ -39,14 +42,13 @@

 .control-confirmButton
  display block
-  float right
-  height 30px
-  width 100px
+  height 35px
+  width 140px
  border none
  border-radius 2px
  padding 0 25px
  margin 20px auto
-  font-size 12px
+  font-size 14px
  colorPrimaryButton()

 body[data-theme="dark"]
@@ -56,7 +58,6 @@ body[data-theme="dark"]
    height 270px
    overflow hidden
    position relative
-    padding 0 40px

  .header
    background-color transparent
--- a/browser/main/modals/InitModal.js
+++ b/browser/main/modals/InitModal.js
@@ -5,7 +5,6 @@ import dataApi from 'browser/main/lib/dataApi'
 import store from 'browser/main/store'
 import { hashHistory } from 'react-router'
 import _ from 'lodash'
-import ModalEscButton from 'browser/components/ModalEscButton'

 const CSON = require('@rokt33r/season')
 const path = require('path')
@@ -13,9 +12,9 @@ const electron = require('electron')
 const { remote } = electron

 function browseFolder () {
-  let dialog = remote.dialog
+  const dialog = remote.dialog

-  let defaultPath = remote.app.getPath('home')
+  const defaultPath = remote.app.getPath('home')
  return new Promise((resolve, reject) => {
    dialog.showOpenDialog({
      title: 'Select Directory',
@@ -55,7 +54,7 @@ class InitModal extends React.Component {
    } catch (err) {
      console.error(err)
    }
-    let newState = {
+    const newState = {
      isLoading: false
    }
    if (data != null) {
@@ -122,7 +121,7 @@ class InitModal extends React.Component {
            notes: data.notes
          })

-          let defaultSnippetNote = dataApi
+          const defaultSnippetNote = dataApi
            .createNote(data.storage.key, {
              type: 'SNIPPET_NOTE',
              folder: data.storage.folders[0].key,
@@ -147,12 +146,12 @@ class InitModal extends React.Component {
                note: note
              })
            })
-          let defaultMarkdownNote = dataApi
+          const defaultMarkdownNote = dataApi
            .createNote(data.storage.key, {
              type: 'MARKDOWN_NOTE',
              folder: data.storage.folders[0].key,
              title: 'Welcome to Boostnote!',
-              content: '# Welcome to Boostnote! \n### _Click to edit this note._\n\n---\n\nBoostnote is an *open source* note-taking app. \nRepository is published on [GitHub](https://github.com/BoostIO/Boostnote), and tweeting everyday on [@Boostnoteapp](https://twitter.com/boostnoteapp)!\n\n## Features \n- [x] No Internet and Registration Required. \n- [ ] Quick search and copy the content of note. `macOS: Cmd + Alt + S / windows: Ctrl + Alt + S` \n- [ ] Markdown & Snippet note. \n- [ ] Available for `vim` and `emacs` mode. \n- [ ] Choose your favorite theme on UI, Editor and Code Block! \n--- \n\n- Copy Codeblock on Markdown Preview.\n```javascript\nvar boostnote = document.getElementById(\'enjoy\').innerHTML\n\nconsole.log(boostnote)\n```'
+              content: '# Welcome to Boostnote!\n## Click here to edit markdown :wave:\n\n<iframe width="560" height="315" src="https://www.youtube.com/embed/L0qNPLsvmyM" frameborder="0" allowfullscreen></iframe>\n\n## Docs :memo:\n- [Boostnote | Boost your happiness, productivity and creativity.](https://hackernoon.com/boostnote-boost-your-happiness-productivity-and-creativity-315034efeebe)\n- [Cloud Syncing & Backups](https://github.com/BoostIO/Boostnote/wiki/Cloud-Syncing-and-Backup)\n- [How to sync your data across Desktop and Mobile apps](https://github.com/BoostIO/Boostnote/wiki/Sync-Data-Across-Desktop-and-Mobile-apps)\n- [Convert data from **Evernote** to Boostnote.](https://github.com/BoostIO/Boostnote/wiki/Evernote)\n- [Keyboard Shortcuts](https://github.com/BoostIO/Boostnote/wiki/Keyboard-Shortcuts)\n- [Keymaps in Editor mode](https://github.com/BoostIO/Boostnote/wiki/Keymaps-in-Editor-mode)\n- [How to set syntax highlight in Snippet note](https://github.com/BoostIO/Boostnote/wiki/Syntax-Highlighting)\n\n---\n\n## Article Archive :books:\n- [Reddit English](http://bit.ly/2mOJPu7)\n- [Reddit Spanish](https://www.reddit.com/r/boostnote_es/)\n- [Reddit Chinese](https://www.reddit.com/r/boostnote_cn/)\n- [Reddit Japanese](https://www.reddit.com/r/boostnote_jp/)\n\n---\n\n## Community :beers:\n- [GitHub](http://bit.ly/2AWWzkD)\n- [Twitter](http://bit.ly/2z8BUJZ)\n- [Facebook Group](http://bit.ly/2jcca8t)'
            })
            .then((note) => {
              store.dispatch({
@@ -184,6 +183,12 @@ class InitModal extends React.Component {
    })
  }

+  handleKeyDown (e) {
+    if (e.keyCode === 27) {
+      this.props.close()
+    }
+  }
+
  render () {
    if (this.state.isLoading) {
      return <div styleName='root--loading'>
@@ -196,17 +201,12 @@ class InitModal extends React.Component {
        tabIndex='-1'
        onKeyDown={(e) => this.handleKeyDown(e)}
      >
-
-        <div styleName='header'>
-          <div styleName='header-title'>Initialize Storage</div>
-        </div>
-        <ModalEscButton handleEscButtonClick={(e) => this.handleCloseButtonClick(e)} />
        <div styleName='body'>
          <div styleName='body-welcome'>
-            Welcome!
+            Welcome to Boostnote!
          </div>
          <div styleName='body-description'>
-           Please select a directory for Boostnote storage.
+           Please select a directory for data storage.
          </div>
          <div styleName='body-path'>
            <input styleName='body-path-input'
@@ -237,7 +237,7 @@ class InitModal extends React.Component {
                ? <span>
                  <i className='fa fa-spin fa-spinner' /> Loading...
                </span>
-                : 'Let\'s Go!'
+                : 'CREATE'
              }
            </button>
          </div>
--- a/browser/main/modals/InitModal.styl
+++ b/browser/main/modals/InitModal.styl
@@ -1,7 +1,11 @@
 .root
  modal()
-  max-width 540px
+  background-color #fff
+  max-width 100vw
+  max-height 100vh
  overflow hidden
+  margin 0
+  padding 150px 0
  position relative
 .root--loading
  @extend .root
@@ -13,14 +17,6 @@
 .loadingMessage
  color $ui-text-color
  margin 15px auto 35px
-.header
-  height 50px
-  font-size 18px
-  line-height 50px
-  padding 0 15px
-  background-color $ui-backgroundColor
-  border-bottom solid 1px $ui-borderColor
-  color $ui-text-color

 .body
  padding 30px
@@ -32,20 +28,20 @@
  color $ui-text-color

 .body-description
-  font-size 14px
+  font-size 16px
  color $ui-text-color
  text-align center
  margin-bottom 25px

 .body-path
  margin 0 auto 25px
-  width 280px
+  width 330px

 .body-path-input
-  height 30px
+  height 40px
  vertical-align middle
-  width 250px
-  font-size 12px
+  width 300px
+  font-size 14px
  border-style solid
  border-width 1px 0 1px 1px
  border-color $border-color
@@ -54,7 +50,10 @@
  padding 0 5px

 .body-path-button
-  height 30px
+  height 42px
+  width 30px
+  font-size 16px
+  font-weight 600
  border none
  border-top-right-radius 2px
  border-bottom-right-radius 2px
@@ -69,6 +68,8 @@

 .body-control-createButton
  colorPrimaryButton()
+  font-size 14px
+  font-weight 600
  border none
  border-radius 2px
  height 40px
--- a/browser/main/modals/NewNoteModal.js
+++ b/browser/main/modals/NewNoteModal.js
@@ -26,7 +26,7 @@ class NewNoteModal extends React.Component {
  handleMarkdownNoteButtonClick (e) {
    AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_MARKDOWN')
    AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_ALLNOTE')
-    let { storage, folder, dispatch, location } = this.props
+    const { storage, folder, dispatch, location } = this.props
    dataApi
      .createNote(storage, {
        type: 'MARKDOWN_NOTE',
@@ -58,7 +58,7 @@ class NewNoteModal extends React.Component {
  handleSnippetNoteButtonClick (e) {
    AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_SNIPPET')
    AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_ALLNOTE')
-    let { storage, folder, dispatch, location } = this.props
+    const { storage, folder, dispatch, location } = this.props

    dataApi
      .createNote(storage, {
--- a/browser/main/modals/NewNoteModal.styl
+++ b/browser/main/modals/NewNoteModal.styl
@@ -9,16 +9,19 @@
  font-size 18px
  line-height 50px
  padding 0 15px
-  background-color $ui-backgroundColor
-  border-bottom solid 1px $ui-borderColor
  color $ui-text-color
+  margin-bottom 20px
+
+.title
+  font-size 36px
+  font-weight 600

 .control
-  padding 25px 15px 15px
+  padding 25px 0px
  text-align center

 .control-button
-  width 220px
+  width 240px
  height 220px
  margin 0 15px
  border $ui-border
@@ -30,8 +33,8 @@
    colorPrimaryButton()

 .control-button-icon
-  font-size 50px
-  margin-bottom 15px
+  font-size 48px
+  margin-bottom 25px

 .control-button-label
  font-size 18px
@@ -49,8 +52,6 @@ body[data-theme="dark"]
    modalDark()

  .header
-    background-color $ui-dark-button--hover-backgroundColor
-    border-color $ui-dark-borderColor
    color $ui-dark-text-color

  .control-button
@@ -63,3 +64,20 @@ body[data-theme="dark"]
  .description
    color $ui-inactive-text-color

+body[data-theme="solarized-dark"]
+  .root
+    background-color transparent
+
+  .header
+    color $ui-solarized-dark-text-color
+
+  .control-button
+    border-color $ui-solarized-dark-borderColor
+    color $ui-solarized-dark-text-color
+    background-color transparent
+    &:focus
+      colorDarkPrimaryButton()
+
+  .description
+    color $ui-solarized-dark-text-color
+
--- a/browser/main/modals/PreferencesModal/ConfigTab.styl
+++ b/browser/main/modals/PreferencesModal/ConfigTab.styl
@@ -31,10 +31,15 @@

 .group-section-control
  flex 1
+  margin-left 5px

 .group-section-control select
  outline none
  border 1px solid $ui-borderColor
+  font-size 16px
+  height 30px
+  width 250px
+  margin-bottom 5px
  background-color transparent

 .group-section-control-input
@@ -62,10 +67,17 @@
  text-align right
  :global
    .alert
-      font-size 12px
-      line-height 30px
-      padding 0 5px
-      float right
+      display inline-block
+      position absolute
+      top 60px
+      right 15px
+      font-size 14px
+    .success
+      color #1EC38B
+    .error
+      color red
+
+

 .group-control-leftButton
  colorDefaultButton()
@@ -77,14 +89,16 @@
  margin-right 10px

 .group-control-rightButton
-  float right
+  position absolute
+  top 10px
+  right 20px
  colorPrimaryButton()
  border none
  border-radius 2px
  font-size $tab--button-font-size
-  height 35px
-  width 100px
-  margin-right 10px
+  height 40px
+  width 120px
+  padding 0 15px

 .group-hint
  border $ui-border
@@ -101,7 +115,6 @@
    line-height 1.2

 .note-for-keymap
-  margin-left: 10px
  font-size: 12px

 .code-mirror
@@ -114,6 +127,12 @@ colorDarkControl()
  border-color $ui-dark-borderColor
  background-color $ui-dark-backgroundColor
  color $ui-dark-text-color
+  
+colorSolarizedDarkControl()
+  border none
+  background-color $ui-solarized-dark-button-backgroundColor
+  color $ui-solarized-dark-text-color
+

 body[data-theme="dark"]
  .root
@@ -141,3 +160,33 @@ body[data-theme="dark"]
  .group-section-control
    select, .group-section-control-input
      colorDarkControl()
+     
+      
+body[data-theme="solarized-dark"]
+  .root
+    color $ui-solarized-dark-text-color
+
+  .group-header
+    color $ui-solarized-dark-text-color
+    border-color $ui-solarized-dark-borderColor 
+
+  .group-header2
+    color $ui-solarized-dark-text-color
+
+  .group-section-control-input
+    border-color $ui-solarized-dark-borderColor 
+
+  .group-control
+    border-color $ui-solarized-dark-borderColor 
+  .group-control-leftButton
+    colorDarkDefaultButton()
+    border-color $ui-solarized-dark-borderColor 
+  .group-control-rightButton
+    colorSolarizedDarkPrimaryButton()
+  .group-hint
+    colorSolarizedDarkControl()
+  .group-section-control
+    select, .group-section-control-input
+      colorSolarizedDarkControl()
+
+
--- a/browser/main/modals/PreferencesModal/Crowdfunding.js
+++ b/browser/main/modals/PreferencesModal/Crowdfunding.js
@@ -0,0 +1,49 @@
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './Crowdfunding.styl'
+
+const electron = require('electron')
+const { shell } = electron
+
+class Crowdfunding extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+    }
+  }
+
+  handleLinkClick (e) {
+    shell.openExternal(e.currentTarget.href)
+    e.preventDefault()
+  }
+
+  render () {
+    return (
+      <div styleName='root'>
+        <div styleName='header'>Crowdfunding</div>
+        <p>Dear all,</p>
+        <br />
+        <p>Thanks for your using!</p>
+        <p>Boostnote is used in about 200 countries and regions, it is a awesome developer community.</p>
+        <br />
+        <p>To continue supporting this growth, and to satisfy community expectations,</p>
+        <p>we would like to invest more time in this project.</p>
+        <br />
+        <p>If you like this project and see its potential, you can help!</p>
+        <br />
+        <p>Thanks,</p>
+        <p>Boostnote maintainers.</p>
+        <br />
+        <button styleName='cf-link'>
+          <a href='https://opencollective.com/boostnoteio' onClick={(e) => this.handleLinkClick(e)}>Support via OpenCollective</a>
+        </button>
+      </div>
+    )
+  }
+}
+
+Crowdfunding.propTypes = {
+}
+
+export default CSSModules(Crowdfunding, styles)
--- a/browser/main/modals/PreferencesModal/Crowdfunding.styl
+++ b/browser/main/modals/PreferencesModal/Crowdfunding.styl
@@ -0,0 +1,36 @@
+@import('./Tab')
+
+.root
+  padding 15px
+  white-space pre
+  line-height 1.4
+  color alpha($ui-text-color, 90%)
+  width 100%
+  font-size 14px
+p
+  font-size 16px
+
+.cf-link
+  width 250px
+  height 35px
+  border-radius 2px
+  border none
+  background-color alpha(#1EC38B, 90%)
+  &:hover
+    background-color #1EC38B
+    transition 0.2s
+  a
+    text-decoration none
+    color white
+    font-weight 600
+    font-size 16px
+
+body[data-theme="dark"]
+  p
+    color $ui-dark-text-color
+    
+body[data-theme="solarized-dark"]
+  .root
+    color $ui-solarized-dark-text-color
+  p
+    color $ui-solarized-dark-text-color
--- a/browser/main/modals/PreferencesModal/FolderItem.js
+++ b/browser/main/modals/PreferencesModal/FolderItem.js
@@ -0,0 +1,304 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import ReactDOM from 'react-dom'
+import styles from './FolderItem.styl'
+import dataApi from 'browser/main/lib/dataApi'
+import store from 'browser/main/store'
+import { SketchPicker } from 'react-color'
+import { SortableElement, SortableHandle } from 'react-sortable-hoc'
+
+class FolderItem extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      status: 'IDLE',
+      folder: {
+        showColumnPicker: false,
+        colorPickerPos: { left: 0, top: 0 },
+        color: props.color,
+        name: props.name
+      }
+    }
+  }
+
+  handleEditChange (e) {
+    const { folder } = this.state
+
+    folder.name = this.refs.nameInput.value
+    this.setState({
+      folder
+    })
+  }
+
+  handleConfirmButtonClick (e) {
+    this.confirm()
+  }
+
+  confirm () {
+    const { storage, folder } = this.props
+    dataApi
+      .updateFolder(storage.key, folder.key, {
+        color: this.state.folder.color,
+        name: this.state.folder.name
+      })
+      .then((data) => {
+        store.dispatch({
+          type: 'UPDATE_FOLDER',
+          storage: data.storage
+        })
+        this.setState({
+          status: 'IDLE'
+        })
+      })
+  }
+
+  handleColorButtonClick (e) {
+    const folder = Object.assign({}, this.state.folder, { showColumnPicker: true, colorPickerPos: { left: 0, top: 0 } })
+    this.setState({ folder }, function () {
+      // After the color picker has been painted, re-calculate its position
+      // by comparing its dimensions to the host dimensions.
+      const { hostBoundingBox } = this.props
+      const colorPickerNode = ReactDOM.findDOMNode(this.refs.colorPicker)
+      const colorPickerBox = colorPickerNode.getBoundingClientRect()
+      const offsetTop = hostBoundingBox.bottom - colorPickerBox.bottom
+      const folder = Object.assign({}, this.state.folder, {
+        colorPickerPos: {
+          left: 25,
+          top: offsetTop < 0 ? offsetTop - 5 : 0  // subtract 5px for aestetics
+        }
+      })
+      this.setState({ folder })
+    })
+  }
+
+  handleColorChange (color) {
+    const folder = Object.assign({}, this.state.folder, { color: color.hex })
+    this.setState({ folder })
+  }
+
+  handleColorPickerClose (event) {
+    const folder = Object.assign({}, this.state.folder, { showColumnPicker: false })
+    this.setState({ folder })
+  }
+
+  handleCancelButtonClick (e) {
+    this.setState({
+      status: 'IDLE'
+    })
+  }
+
+  handleFolderItemBlur (e) {
+    let el = e.relatedTarget
+    while (el != null) {
+      if (el === this.refs.root) {
+        return false
+      }
+      el = el.parentNode
+    }
+    this.confirm()
+  }
+
+  renderEdit (e) {
+    const popover = { position: 'absolute', zIndex: 2 }
+    const cover = {
+      position: 'fixed',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0
+    }
+    const pickerStyle = Object.assign({}, {
+      position: 'absolute'
+    }, this.state.folder.colorPickerPos)
+    return (
+      <div styleName='folderItem'
+        onBlur={(e) => this.handleFolderItemBlur(e)}
+        tabIndex='-1'
+        ref='root'
+      >
+        <div styleName='folderItem-left'>
+          <button styleName='folderItem-left-colorButton' style={{color: this.state.folder.color}}
+            onClick={(e) => !this.state.folder.showColumnPicker && this.handleColorButtonClick(e)}
+          >
+            {this.state.folder.showColumnPicker
+              ? <div style={popover}>
+                <div style={cover}
+                  onClick={() => this.handleColorPickerClose()}
+                />
+                <div style={pickerStyle}>
+                  <SketchPicker
+                    ref='colorPicker'
+                    color={this.state.folder.color}
+                    onChange={(color) => this.handleColorChange(color)}
+                    onChangeComplete={(color) => this.handleColorChange(color)}
+                  />
+                </div>
+              </div>
+              : null
+            }
+            <i className='fa fa-square' />
+          </button>
+          <input styleName='folderItem-left-nameInput'
+            value={this.state.folder.name}
+            ref='nameInput'
+            onChange={(e) => this.handleEditChange(e)}
+          />
+        </div>
+        <div styleName='folderItem-right'>
+          <button styleName='folderItem-right-confirmButton'
+            onClick={(e) => this.handleConfirmButtonClick(e)}
+          >
+            Confirm
+          </button>
+          <button styleName='folderItem-right-button'
+            onClick={(e) => this.handleCancelButtonClick(e)}
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  handleDeleteConfirmButtonClick (e) {
+    const { storage, folder } = this.props
+    dataApi
+      .deleteFolder(storage.key, folder.key)
+      .then((data) => {
+        store.dispatch({
+          type: 'DELETE_FOLDER',
+          storage: data.storage,
+          folderKey: data.folderKey
+        })
+      })
+  }
+
+  renderDelete () {
+    return (
+      <div styleName='folderItem'>
+        <div styleName='folderItem-left'>
+          Are you sure to <span styleName='folderItem-left-danger'>delete</span> this folder?
+        </div>
+        <div styleName='folderItem-right'>
+          <button styleName='folderItem-right-dangerButton'
+            onClick={(e) => this.handleDeleteConfirmButtonClick(e)}
+          >
+            Confirm
+          </button>
+          <button styleName='folderItem-right-button'
+            onClick={(e) => this.handleCancelButtonClick(e)}
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  handleEditButtonClick (e) {
+    const { folder: propsFolder } = this.props
+    const { folder: stateFolder } = this.state
+    const folder = Object.assign({}, stateFolder, propsFolder)
+    this.setState({
+      status: 'EDIT',
+      folder
+    }, () => {
+      this.refs.nameInput.select()
+    })
+  }
+
+  handleDeleteButtonClick (e) {
+    this.setState({
+      status: 'DELETE'
+    })
+  }
+
+  renderIdle () {
+    const { folder } = this.props
+    return (
+      <div styleName='folderItem'
+        onDoubleClick={(e) => this.handleEditButtonClick(e)}
+      >
+        <div styleName='folderItem-left'
+          style={{borderColor: folder.color}}
+        >
+          <span styleName='folderItem-left-name'>{folder.name}</span>
+          <span styleName='folderItem-left-key'>({folder.key})</span>
+        </div>
+        <div styleName='folderItem-right'>
+          <button styleName='folderItem-right-button'
+            onClick={(e) => this.handleEditButtonClick(e)}
+          >
+            Edit
+          </button>
+          <button styleName='folderItem-right-button'
+            onClick={(e) => this.handleDeleteButtonClick(e)}
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  render () {
+    switch (this.state.status) {
+      case 'DELETE':
+        return this.renderDelete()
+      case 'EDIT':
+        return this.renderEdit()
+      case 'IDLE':
+      default:
+        return this.renderIdle()
+    }
+  }
+}
+
+FolderItem.propTypes = {
+  hostBoundingBox: PropTypes.shape({
+    bottom: PropTypes.number,
+    height: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number,
+    width: PropTypes.number
+  }),
+  storage: PropTypes.shape({
+    key: PropTypes.string
+  }),
+  folder: PropTypes.shape({
+    key: PropTypes.string,
+    color: PropTypes.string,
+    name: PropTypes.string
+  })
+}
+
+class Handle extends React.Component {
+  render () {
+    return (
+      <div styleName='folderItem-drag-handle'>
+        <i className='fa fa-reorder' />
+      </div>
+    )
+  }
+}
+
+class SortableFolderItemComponent extends React.Component {
+  render () {
+    const StyledHandle = CSSModules(Handle, this.props.styles)
+    const DragHandle = SortableHandle(StyledHandle)
+
+    const StyledFolderItem = CSSModules(FolderItem, this.props.styles)
+
+    return (
+      <div>
+        <DragHandle />
+        <StyledFolderItem {...this.props} />
+      </div>
+    )
+  }
+}
+
+export default CSSModules(SortableElement(SortableFolderItemComponent), styles)
--- a/browser/main/modals/PreferencesModal/FolderItem.styl
+++ b/browser/main/modals/PreferencesModal/FolderItem.styl
@@ -0,0 +1,128 @@
+.folderItem
+  height 35px
+  box-sizing border-box
+  padding 2.5px 15px
+  &:hover
+    background-color darken(white, 3%)
+
+.folderItem-drag-handle
+  height 35px
+  border none
+  padding 0 10px
+  line-height 35px
+  float left
+  cursor row-resize
+
+.folderItem-left
+  height 30px
+  border-left solid 2px transparent
+  padding 0 10px
+  line-height 30px
+  float left
+.folderItem-left-danger
+  color $danger-color
+  font-weight bold
+
+.folderItem-left-key
+  color $ui-inactive-text-color
+  font-size 13px
+  margin 0 5px
+  border none
+
+.folderItem-left-colorButton
+  colorDefaultButton()
+  height 25px
+  width 25px
+  line-height 23px
+  padding 0
+  box-sizing border-box
+  vertical-align middle
+  border $ui-border
+  border-radius 2px
+  margin-right 5px
+  margin-left -15px
+
+.folderItem-left-nameInput
+  height 25px
+  box-sizing border-box
+  vertical-align middle
+  border $ui-border
+  border-radius 2px
+  padding 0 5px
+  outline none
+
+.folderItem-right
+  float right
+
+.folderItem-right-button
+  vertical-align middle
+  height 25px
+  margin-top 2.5px
+  colorDefaultButton()
+  border-radius 2px
+  border $ui-border
+  margin-right 5px
+  padding 0 5px
+  &:last-child
+    margin-right 0
+
+.folderItem-right-confirmButton
+  @extend .folderItem-right-button
+  border none
+  colorPrimaryButton()
+
+.folderItem-right-dangerButton
+  @extend .folderItem-right-button
+  border none
+  colorDangerButton()
+
+body[data-theme="dark"]
+  .folderItem
+    &:hover
+      background-color lighten($ui-dark-button--hover-backgroundColor, 5%)
+
+  .folderItem-left-danger
+    color $danger-color
+    font-weight bold
+
+  .folderItem-left-key
+    color $ui-dark-inactive-text-color
+
+  .folderItem-left-colorButton
+    colorDarkDefaultButton()
+    border-color $ui-dark-borderColor
+
+  .folderItem-right-button
+    colorDarkDefaultButton()
+    border-color $ui-dark-borderColor
+
+  .folderItem-right-confirmButton
+    colorDarkPrimaryButton()
+
+  .folderItem-right-dangerButton
+    colorDarkDangerButton()
+
+
+
+body[data-theme="solarized-dark"]
+  .folderItem
+    &:hover
+      background-color $ui-solarized-dark-button-backgroundColor
+
+  .folderItem-left-danger
+    color $danger-color
+
+  .folderItem-left-key
+    color $ui-dark-inactive-text-color
+
+  .folderItem-left-colorButton
+    colorSolarizedDarkPrimaryButton()
+
+  .folderItem-right-button
+    colorSolarizedDarkPrimaryButton()
+
+  .folderItem-right-confirmButton
+    colorSolarizedDarkPrimaryButton()
+
+  .folderItem-right-dangerButton
+    colorSolarizedDarkPrimaryButton()
--- a/browser/main/modals/PreferencesModal/FolderList.js
+++ b/browser/main/modals/PreferencesModal/FolderList.js
@@ -0,0 +1,85 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import dataApi from 'browser/main/lib/dataApi'
+import styles from './FolderList.styl'
+import store from 'browser/main/store'
+import FolderItem from './FolderItem'
+import { SortableContainer } from 'react-sortable-hoc'
+
+class FolderList extends React.Component {
+  render () {
+    const { storage, hostBoundingBox } = this.props
+
+    const folderList = storage.folders.map((folder, index) => {
+      return <FolderItem key={folder.key}
+        folder={folder}
+        storage={storage}
+        index={index}
+        hostBoundingBox={hostBoundingBox}
+      />
+    })
+
+    return (
+      <div styleName='folderList'>
+        {folderList.length > 0
+          ? folderList
+          : <div styleName='folderList-empty'>No Folders</div>
+        }
+      </div>
+    )
+  }
+}
+
+FolderList.propTypes = {
+  hostBoundingBox: PropTypes.shape({
+    bottom: PropTypes.number,
+    height: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number,
+    width: PropTypes.number
+  }),
+  storage: PropTypes.shape({
+    key: PropTypes.string
+  }),
+  folder: PropTypes.shape({
+    key: PropTypes.number,
+    color: PropTypes.string,
+    name: PropTypes.string
+  })
+}
+
+class SortableFolderListComponent extends React.Component {
+  constructor (props) {
+    super(props)
+    this.onSortEnd = ({oldIndex, newIndex}) => {
+      const { storage } = this.props
+      dataApi
+        .reorderFolder(storage.key, oldIndex, newIndex)
+        .then((data) => {
+          store.dispatch({
+            type: 'REORDER_FOLDER',
+            storage: data.storage
+          })
+          this.setState()
+        })
+    }
+  }
+
+  render () {
+    const StyledFolderList = CSSModules(FolderList, this.props.styles)
+    const SortableFolderList = SortableContainer(StyledFolderList)
+
+    return (
+      <SortableFolderList
+        helperClass='sortableItemHelper'
+        onSortEnd={this.onSortEnd}
+        useDragHandle
+        {...this.props}
+      />
+    )
+  }
+}
+
+export default CSSModules(SortableFolderListComponent, styles)
--- a/browser/main/modals/PreferencesModal/FolderList.styl
+++ b/browser/main/modals/PreferencesModal/FolderList.styl
--- a/browser/main/modals/PreferencesModal/HotkeyTab.js
+++ b/browser/main/modals/PreferencesModal/HotkeyTab.js
@@ -1,8 +1,10 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './ConfigTab.styl'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import store from 'browser/main/store'
+import _ from 'lodash'

 const electron = require('electron')
 const ipc = electron.ipcRenderer
@@ -40,7 +42,7 @@ class HotkeyTab extends React.Component {
  }

  handleSaveButtonClick (e) {
-    let newConfig = {
+    const newConfig = {
      hotkey: this.state.config.hotkey
    }

@@ -50,6 +52,7 @@ class HotkeyTab extends React.Component {
      type: 'SET_UI',
      config: newConfig
    })
+    this.clearMessage()
  }

  handleHintToggleButtonClick (e) {
@@ -59,7 +62,7 @@ class HotkeyTab extends React.Component {
  }

  handleHotkeyChange (e) {
-    let { config } = this.state
+    const { config } = this.state
    config.hotkey = {
      toggleFinder: this.refs.toggleFinder.value,
      toggleMain: this.refs.toggleMain.value
@@ -69,14 +72,22 @@ class HotkeyTab extends React.Component {
    })
  }

+  clearMessage () {
+    _.debounce(() => {
+      this.setState({
+        keymapAlert: null
+      })
+    }, 2000)()
+  }
+
  render () {
-    let keymapAlert = this.state.keymapAlert
-    let keymapAlertElement = keymapAlert != null
+    const keymapAlert = this.state.keymapAlert
+    const keymapAlertElement = keymapAlert != null
      ? <p className={`alert ${keymapAlert.type}`}>
        {keymapAlert.message}
      </p>
      : null
-    let { config } = this.state
+    const { config } = this.state

    return (
      <div styleName='root'>
@@ -94,7 +105,7 @@ class HotkeyTab extends React.Component {
            </div>
          </div>
          <div styleName='group-section'>
-            <div styleName='group-section-label'>Toggle Finder(popup)</div>
+            <div styleName='group-section-label'>Toggle Finder (Quick search)</div>
            <div styleName='group-section-control'>
              <input styleName='group-section-control-input'
                onChange={(e) => this.handleHotkeyChange(e)}
--- a/browser/main/modals/PreferencesModal/InfoTab.js
+++ b/browser/main/modals/PreferencesModal/InfoTab.js
@@ -4,6 +4,7 @@ import styles from './InfoTab.styl'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import store from 'browser/main/store'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
+import _ from 'lodash'

 const electron = require('electron')
 const { shell, remote } = electron
@@ -36,8 +37,21 @@ class InfoTab extends React.Component {

    if (!newConfig.amaEnabled) {
      AwsMobileAnalyticsConfig.recordDynamicCustomEvent('DISABLE_AMA')
+      this.setState({
+        amaMessage: 'We hope we will gain your trust'
+      })
+    } else {
+      this.setState({
+        amaMessage: 'Thank\'s for trust us'
+      })
    }

+    _.debounce(() => {
+      this.setState({
+        amaMessage: ''
+      })
+    }, 3000)()
+
    ConfigManager.set(newConfig)

    store.dispatch({
@@ -46,10 +60,49 @@ class InfoTab extends React.Component {
    })
  }

+  infoMessage () {
+    const { amaMessage } = this.state
+    return amaMessage ? <p styleName='policy-confirm'>{amaMessage}</p> : null
+  }
+
  render () {
    return (
      <div styleName='root'>
-        <div styleName='header'>Info</div>
+
+        <div styleName='header--sub'>Community</div>
+        <div styleName='top'>
+          <ul styleName='list'>
+            <li>
+              <a href='https://boostnote.io/#subscribe'
+                onClick={(e) => this.handleLinkClick(e)}
+              >Subscribe to Newsletter</a>
+            </li>
+            <li>
+              <a href='https://github.com/BoostIO/Boostnote/issues'
+                onClick={(e) => this.handleLinkClick(e)}
+              >GitHub</a>
+            </li>
+            <li>
+              <a href='https://medium.com/boostnote'
+                onClick={(e) => this.handleLinkClick(e)}
+              >Blog</a>
+            </li>
+            <li>
+              <a href='https://www.facebook.com/groups/boostnote'
+                onClick={(e) => this.handleLinkClick(e)}
+              >Facebook Group</a>
+            </li>
+            <li>
+              <a href='https://twitter.com/boostnoteapp'
+                onClick={(e) => this.handleLinkClick(e)}
+              >Twitter</a>
+            </li>
+          </ul>
+        </div>
+
+        <hr />
+
+        <div styleName='header--sub'>Info</div>

        <div styleName='top'>
          <div styleName='icon-space'>
@@ -62,31 +115,17 @@ class InfoTab extends React.Component {
            </div>
          </div>
        </div>
+
        <ul styleName='list'>
          <li>
            <a href='https://boostnote.io'
              onClick={(e) => this.handleLinkClick(e)}
            >Website</a>
          </li>
-          <li>
-            <a href='https://boostnote.paintory.com/'
-              onClick={(e) => this.handleLinkClick(e)}
-            >Boostnote Shop</a> : Products are shipped to all over the world 🌏
-          </li>
-          <li>
-            <a href='https://salt.bountysource.com/teams/boostnote'
-              onClick={(e) => this.handleLinkClick(e)}
-            >Donate via Bountysource</a> : Thank you for your support 🎉
-          </li>
-          <li>
-            <a href='https://github.com/BoostIO/Boostnote/issues'
-              onClick={(e) => this.handleLinkClick(e)}
-            >GitHub Issues</a> : We&apos;d love to hear your feedback 🙌
-          </li>
          <li>
            <a href='https://github.com/BoostIO/Boostnote/blob/master/docs/build.md'
              onClick={(e) => this.handleLinkClick(e)}
-            >Development</a> : Development configurations for Boostnote 🚀
+            >Development</a> : Development configurations for Boostnote.
          </li>
          <li styleName='cc'>
            Copyright (C) 2017 Maisin&Co.
@@ -95,11 +134,13 @@ class InfoTab extends React.Component {
            License: GPL v3
          </li>
        </ul>
-        <hr />
+
+        <hr styleName='separate-line' />
+
        <div styleName='policy'>Data collection policy</div>
-        <p>We collect only the number of DAU for Boostnote and DO NOT collect any detail information</p>
-        <p>such as your note content. You can see how it works on <a href='https://github.com/BoostIO/Boostnote' onClick={(e) => this.handleLinkClick(e)}>GitHub</a>.</p>
-        <p>These data are only used for Boostnote improvements.</p>
+        <div>We collect only the number of DAU for Boostnote and **DO NOT collect** any detail information such as your note content.</div>
+        <div>You can see how it works on <a href='https://github.com/BoostIO/Boostnote' onClick={(e) => this.handleLinkClick(e)}>GitHub</a>.</div>
+        <div>This data is only used for Boostnote improvements.</div>
        <input onChange={(e) => this.handleConfigChange(e)}
          checked={this.state.config.amaEnabled}
          ref='amaEnabled'
@@ -107,6 +148,7 @@ class InfoTab extends React.Component {
        />
        Enable to send analytics to our servers<br />
        <button styleName='policy-submit' onClick={(e) => this.handleSaveButtonClick(e)}>Save</button>
+        {this.infoMessage()}
      </div>
    )
  }
--- a/browser/main/modals/PreferencesModal/InfoTab.styl
+++ b/browser/main/modals/PreferencesModal/InfoTab.styl
@@ -42,13 +42,29 @@
    color #4E8EC6
    text-decoration none

+.separate-line
+  margin 40px 0
+
 .policy
+  width 100%
  font-size 20px
  margin-bottom 10px

 .policy-submit
  margin-top 10px

+.policy-confirm
+  margin-top 10px
+  font-size 12px
+
 body[data-theme="dark"]
  .root
    color alpha($tab--dark-text-color, 80%)
+    
+
+body[data-theme="solarized-dark"]
+  .root
+    color $ui-solarized-dark-text-color
+.list
+  a
+    color $ui-solarized-dark-active-color
--- a/browser/main/modals/PreferencesModal/PreferencesModal.styl
+++ b/browser/main/modals/PreferencesModal/PreferencesModal.styl
@@ -4,9 +4,10 @@ top-bar--height = 50px

 .root
  modal()
-  max-width 800px
-  min-height 500px
-  height 80%
+  max-width 100vw
+  min-height 100vh
+  height 100vh
+  width 100vw
  overflow hidden
  position relative

@@ -24,23 +25,23 @@ top-bar--height = 50px
  absolute top left right
  top top-bar--height
  left 0
-  width 140px
-  margin-left 30px
+  width 170px
+  margin-left 10px
  margin-top 20px
  background-color $ui-backgroundColor

 .nav-button
  font-size 14px
  text-align left
-  width 100px
-  margin 4px 0
-  padding 5px 0
+  width 150px
+  margin 5px 0
+  padding 7px 0
  padding-left 10px
  border none
  border-radius 2px
  background-color transparent
  color $ui-text-color
-  font-size 14px
+  font-size 16px

 .nav-button--active
  @extend .nav-button
@@ -55,7 +56,7 @@ top-bar--height = 50px
 .content
  absolute left right bottom
  top top-bar--height
-  left 140px
+  left 170px
  margin-top 10px
  overflow-y auto

@@ -85,3 +86,29 @@ body[data-theme="dark"]
    background-color $dark-primary-button-background--active
    &:hover
      color white
+      
+
+body[data-theme="solarized-dark"]
+  .root
+    background-color transparent
+  .top-bar
+    background-color transparent
+    border-color $ui-solarized-dark-borderColor
+    p
+      color $ui-solarized-dark-text-color
+  .nav
+    background-color transparent
+    border-color $ui-solarized-dark-borderColor
+  .nav-button
+    background-color transparent
+    color $ui-solarized-dark-text-color
+    &:hover
+      color $ui-solarized-dark-text-color
+
+  .nav-button--active
+    @extend .nav-button
+    color $ui-solarized-dark-button--active-color
+    background-color $ui-solarized-dark-button--active-backgroundColor
+    &:hover
+      color white
+
--- a/browser/main/modals/PreferencesModal/StorageItem.js
+++ b/browser/main/modals/PreferencesModal/StorageItem.js
@@ -1,265 +1,14 @@
-import React, { PropTypes } from 'react'
-import ReactDOM from 'react-dom'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './StorageItem.styl'
 import consts from 'browser/lib/consts'
 import dataApi from 'browser/main/lib/dataApi'
 import store from 'browser/main/store'
+import FolderList from './FolderList'

 const { shell, remote } = require('electron')
 const { dialog } = remote
-import { SketchPicker } from 'react-color'
-
-class UnstyledFolderItem extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      status: 'IDLE',
-      folder: {
-        showColumnPicker: false,
-        colorPickerPos: { left: 0, top: 0 },
-        color: props.color,
-        name: props.name
-      }
-    }
-  }
-
-  handleEditChange (e) {
-    let { folder } = this.state
-
-    folder.name = this.refs.nameInput.value
-    this.setState({
-      folder
-    })
-  }
-
-  handleConfirmButtonClick (e) {
-    this.confirm()
-  }
-
-  confirm () {
-    let { storage, folder } = this.props
-    dataApi
-      .updateFolder(storage.key, folder.key, {
-        color: this.state.folder.color,
-        name: this.state.folder.name
-      })
-      .then((data) => {
-        store.dispatch({
-          type: 'UPDATE_FOLDER',
-          storage: data.storage
-        })
-        this.setState({
-          status: 'IDLE'
-        })
-      })
-  }
-
-  handleColorButtonClick (e) {
-    const folder = Object.assign({}, this.state.folder, { showColumnPicker: true, colorPickerPos: { left: 0, top: 0 } })
-    this.setState({ folder }, function () {
-      // After the color picker has been painted, re-calculate its position
-      // by comparing its dimensions to the host dimensions.
-      const { hostBoundingBox } = this.props
-      const colorPickerNode = ReactDOM.findDOMNode(this.refs.colorPicker)
-      const colorPickerBox = colorPickerNode.getBoundingClientRect()
-      const offsetTop = hostBoundingBox.bottom - colorPickerBox.bottom
-      const folder = Object.assign({}, this.state.folder, {
-        colorPickerPos: {
-          left: 25,
-          top: offsetTop < 0 ? offsetTop - 5 : 0  // subtract 5px for aestetics
-        }
-      })
-      this.setState({ folder })
-    })
-  }
-
-  handleColorChange (color) {
-    const folder = Object.assign({}, this.state.folder, { color: color.hex })
-    this.setState({ folder })
-  }
-
-  handleColorPickerClose (event) {
-    const folder = Object.assign({}, this.state.folder, { showColumnPicker: false })
-    this.setState({ folder })
-  }
-
-  handleCancelButtonClick (e) {
-    this.setState({
-      status: 'IDLE'
-    })
-  }
-
-  handleFolderItemBlur (e) {
-    let el = e.relatedTarget
-    while (el != null) {
-      if (el === this.refs.root) {
-        return false
-      }
-      el = el.parentNode
-    }
-    this.confirm()
-  }
-
-  renderEdit (e) {
-    const popover = { position: 'absolute', zIndex: 2 }
-    const cover = {
-      position: 'fixed',
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0
-    }
-    const pickerStyle = Object.assign({}, {
-      position: 'absolute'
-    }, this.state.folder.colorPickerPos)
-    return (
-      <div styleName='folderList-item'
-        onBlur={(e) => this.handleFolderItemBlur(e)}
-        tabIndex='-1'
-        ref='root'
-      >
-        <div styleName='folderList-item-left'>
-          <button styleName='folderList-item-left-colorButton' style={{color: this.state.folder.color}}
-            onClick={(e) => !this.state.folder.showColumnPicker && this.handleColorButtonClick(e)}
-          >
-            {this.state.folder.showColumnPicker
-              ? <div style={popover}>
-                <div style={cover}
-                  onClick={() => this.handleColorPickerClose()}
-                />
-                <div style={pickerStyle}>
-                  <SketchPicker
-                    ref='colorPicker'
-                    color={this.state.folder.color}
-                    onChange={(color) => this.handleColorChange(color)}
-                    onChangeComplete={(color) => this.handleColorChange(color)}
-                  />
-                </div>
-              </div>
-              : null
-            }
-            <i className='fa fa-square' />
-          </button>
-          <input styleName='folderList-item-left-nameInput'
-            value={this.state.folder.name}
-            ref='nameInput'
-            onChange={(e) => this.handleEditChange(e)}
-          />
-        </div>
-        <div styleName='folderList-item-right'>
-          <button styleName='folderList-item-right-confirmButton'
-            onClick={(e) => this.handleConfirmButtonClick(e)}
-          >
-            Confirm
-          </button>
-          <button styleName='folderList-item-right-button'
-            onClick={(e) => this.handleCancelButtonClick(e)}
-          >
-            Cancel
-          </button>
-        </div>
-      </div>
-    )
-  }
-
-  handleDeleteConfirmButtonClick (e) {
-    let { storage, folder } = this.props
-    dataApi
-      .deleteFolder(storage.key, folder.key)
-      .then((data) => {
-        store.dispatch({
-          type: 'DELETE_FOLDER',
-          storage: data.storage,
-          folderKey: data.folderKey
-        })
-      })
-  }
-
-  renderDelete () {
-    return (
-      <div styleName='folderList-item'>
-        <div styleName='folderList-item-left'>
-          Are you sure to <span styleName='folderList-item-left-danger'>delete</span> this folder?
-        </div>
-        <div styleName='folderList-item-right'>
-          <button styleName='folderList-item-right-dangerButton'
-            onClick={(e) => this.handleDeleteConfirmButtonClick(e)}
-          >
-            Confirm
-          </button>
-          <button styleName='folderList-item-right-button'
-            onClick={(e) => this.handleCancelButtonClick(e)}
-          >
-            Cancel
-          </button>
-        </div>
-      </div>
-    )
-  }
-
-  handleEditButtonClick (e) {
-    let { folder: propsFolder } = this.props
-    let { folder: stateFolder } = this.state
-    const folder = Object.assign({}, stateFolder, propsFolder)
-    this.setState({
-      status: 'EDIT',
-      folder
-    }, () => {
-      this.refs.nameInput.select()
-    })
-  }
-
-  handleDeleteButtonClick (e) {
-    this.setState({
-      status: 'DELETE'
-    })
-  }
-
-  renderIdle () {
-    let { folder } = this.props
-    return (
-      <div styleName='folderList-item'
-        onDoubleClick={(e) => this.handleEditButtonClick(e)}
-      >
-        <div styleName='folderList-item-left'
-          style={{borderColor: folder.color}}
-        >
-          <span styleName='folderList-item-left-name'>{folder.name}</span>
-          <span styleName='folderList-item-left-key'>({folder.key})</span>
-        </div>
-        <div styleName='folderList-item-right'>
-          <button styleName='folderList-item-right-button'
-            onClick={(e) => this.handleEditButtonClick(e)}
-          >
-            Edit
-          </button>
-          <button styleName='folderList-item-right-button'
-            onClick={(e) => this.handleDeleteButtonClick(e)}
-          >
-            Delete
-          </button>
-        </div>
-      </div>
-
-    )
-  }
-
-  render () {
-    switch (this.state.status) {
-      case 'DELETE':
-        return this.renderDelete()
-      case 'EDIT':
-        return this.renderEdit()
-      case 'IDLE':
-      default:
-        return this.renderIdle()
-    }
-  }
-}
-
-const FolderItem = CSSModules(UnstyledFolderItem, styles)

 class StorageItem extends React.Component {
  constructor (props) {
@@ -271,8 +20,8 @@ class StorageItem extends React.Component {
  }

  handleNewFolderButtonClick (e) {
-    let { storage } = this.props
-    let input = {
+    const { storage } = this.props
+    const input = {
      name: 'Untitled',
      color: consts.FOLDER_COLORS[Math.floor(Math.random() * 7) % 7]
    }
@@ -290,12 +39,12 @@ class StorageItem extends React.Component {
  }

  handleExternalButtonClick () {
-    let { storage } = this.props
+    const { storage } = this.props
    shell.showItemInFolder(storage.path)
  }

  handleUnlinkButtonClick (e) {
-    let index = dialog.showMessageBox(remote.getCurrentWindow(), {
+    const index = dialog.showMessageBox(remote.getCurrentWindow(), {
      type: 'warning',
      message: 'Unlink Storage',
      detail: 'Unlinking removes this linked storage from Boostnote. No data is removed, please manually delete the folder from your hard drive if needed.',
@@ -303,7 +52,7 @@ class StorageItem extends React.Component {
    })

    if (index === 0) {
-      let { storage } = this.props
+      const { storage } = this.props
      dataApi.removeStorage(storage.key)
        .then(() => {
          store.dispatch({
@@ -318,7 +67,7 @@ class StorageItem extends React.Component {
  }

  handleLabelClick (e) {
-    let { storage } = this.props
+    const { storage } = this.props
    this.setState({
      isLabelEditing: true,
      name: storage.name
@@ -333,7 +82,7 @@ class StorageItem extends React.Component {
  }

  handleLabelBlur (e) {
-    let { storage } = this.props
+    const { storage } = this.props
    dataApi
      .renameStorage(storage.key, this.state.name)
      .then((_storage) => {
@@ -348,14 +97,8 @@ class StorageItem extends React.Component {
  }

  render () {
-    let { storage, hostBoundingBox } = this.props
-    let folderList = storage.folders.map((folder) => {
-      return <FolderItem key={folder.key}
-        folder={folder}
-        storage={storage}
-        hostBoundingBox={hostBoundingBox}
-      />
-    })
+    const { storage, hostBoundingBox } = this.props
+
    return (
      <div styleName='root' key={storage.key}>
        <div styleName='header'>
@@ -404,12 +147,9 @@ class StorageItem extends React.Component {
            </button>
          </div>
        </div>
-        <div styleName='folderList'>
-          {folderList.length > 0
-            ? folderList
-            : <div styleName='folderList-empty'>No Folders</div>
-          }
-        </div>
+        <FolderList storage={storage}
+          hostBoundingBox={hostBoundingBox}
+        />
      </div>
    )
  }
@@ -426,11 +166,6 @@ StorageItem.propTypes = {
  }),
  storage: PropTypes.shape({
    key: PropTypes.string
-  }),
-  folder: PropTypes.shape({
-    key: PropTypes.string,
-    color: PropTypes.string,
-    name: PropTypes.string
  })
 }

--- a/browser/main/modals/PreferencesModal/StorageItem.styl
+++ b/browser/main/modals/PreferencesModal/StorageItem.styl
@@ -63,75 +63,6 @@
  z-index 10
  white-space nowrap

-.folderList-item
-  height 35px
-  box-sizing border-box
-  padding 2.5px 15px
-  &:hover
-    background-color darken(white, 3%)
-.folderList-item-left
-  height 30px
-  border-left solid 2px transparent
-  padding 0 10px
-  line-height 30px
-  float left
-.folderList-item-left-danger
-  color $danger-color
-  font-weight bold
-
-.folderList-item-left-key
-  color $ui-inactive-text-color
-  font-size 10px
-  margin 0 5px
-  border none
-
-.folderList-item-left-colorButton
-  colorDefaultButton()
-  height 25px
-  width 25px
-  line-height 23px
-  padding 0
-  box-sizing border-box
-  vertical-align middle
-  border $ui-border
-  border-radius 2px
-  margin-right 5px
-  margin-left -15px
-
-.folderList-item-left-nameInput
-  height 25px
-  box-sizing border-box
-  vertical-align middle
-  border $ui-border
-  border-radius 2px
-  padding 0 5px
-  outline none
-
-.folderList-item-right
-  float right
-
-.folderList-item-right-button
-  vertical-align middle
-  height 25px
-  margin-top 2.5px
-  colorDefaultButton()
-  border-radius 2px
-  border $ui-border
-  margin-right 5px
-  padding 0 5px
-  &:last-child
-    margin-right 0
-
-.folderList-item-right-confirmButton
-  @extend .folderList-item-right-button
-  border none
-  colorPrimaryButton()
-
-.folderList-item-right-dangerButton
-  @extend .folderList-item-right-button
-  border none
-  colorDangerButton()
-
 body[data-theme="dark"]
  .header
    border-color $ui-dark-borderColor
@@ -153,28 +84,3 @@ body[data-theme="dark"]
    top 25px
    z-index 10
    white-space nowrap
-
-  .folderList-item
-    &:hover
-      background-color lighten($ui-dark-button--hover-backgroundColor, 5%)
-
-  .folderList-item-left-danger
-    color $danger-color
-    font-weight bold
-
-  .folderList-item-left-key
-    color $ui-dark-inactive-text-color
-
-  .folderList-item-left-colorButton
-    colorDarkDefaultButton()
-    border-color $ui-dark-borderColor
-
-  .folderList-item-right-button
-    colorDarkDefaultButton()
-    border-color $ui-dark-borderColor
-
-  .folderList-item-right-confirmButton
-    colorDarkPrimaryButton()
-
-  .folderList-item-right-dangerButton
-    colorDarkDangerButton()
--- a/browser/main/modals/PreferencesModal/StoragesTab.js
+++ b/browser/main/modals/PreferencesModal/StoragesTab.js
@@ -1,16 +1,17 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './StoragesTab.styl'
 import dataApi from 'browser/main/lib/dataApi'
 import StorageItem from './StorageItem'

 const electron = require('electron')
-const remote = electron.remote
+const { shell, remote } = electron

 function browseFolder () {
-  let dialog = remote.dialog
+  const dialog = remote.dialog

-  let defaultPath = remote.app.getPath('home')
+  const defaultPath = remote.app.getPath('home')
  return new Promise((resolve, reject) => {
    dialog.showOpenDialog({
      title: 'Select Directory',
@@ -50,11 +51,16 @@ class StoragesTab extends React.Component {
    })
  }

+  handleLinkClick (e) {
+    shell.openExternal(e.currentTarget.href)
+    e.preventDefault()
+  }
+
  renderList () {
-    let { data, boundingBox } = this.props
+    const { data, boundingBox } = this.props

    if (!boundingBox) { return null }
-    let storageList = data.storageMap.map((storage) => {
+    const storageList = data.storageMap.map((storage) => {
      return <StorageItem
        key={storage.key}
        storage={storage}
@@ -83,7 +89,7 @@ class StoragesTab extends React.Component {
    browseFolder()
      .then((targetPath) => {
        if (targetPath.length > 0) {
-          let { newStorage } = this.state
+          const { newStorage } = this.state
          newStorage.path = targetPath
          this.setState({
            newStorage
@@ -97,7 +103,7 @@ class StoragesTab extends React.Component {
  }

  handleAddStorageChange (e) {
-    let { newStorage } = this.state
+    const { newStorage } = this.state
    newStorage.name = this.refs.addStorageName.value
    newStorage.path = this.refs.addStoragePath.value
    this.setState({
@@ -112,7 +118,7 @@ class StoragesTab extends React.Component {
        path: this.state.newStorage.path
      })
      .then((data) => {
-        let { dispatch } = this.props
+        const { dispatch } = this.props
        dispatch({
          type: 'ADD_STORAGE',
          storage: data.storage,
@@ -161,7 +167,10 @@ class StoragesTab extends React.Component {
                <option value='FILESYSTEM'>File System</option>
              </select>
              <div styleName='addStorage-body-section-type-description'>
-                3rd party cloud integration(such as Google Drive and Dropbox) will be available soon.
+                3rd party cloud integration:
+                <a href='https://github.com/BoostIO/Boostnote/wiki/Cloud-Syncing-and-Backup'
+                  onClick={(e) => this.handleLinkClick(e)}
+                >Cloud-Syncing-and-Backup</a>
              </div>
            </div>
          </div>
--- a/browser/main/modals/PreferencesModal/StoragesTab.styl
+++ b/browser/main/modals/PreferencesModal/StoragesTab.styl
@@ -158,3 +158,44 @@ body[data-theme="dark"]
  .addStorage-body-control-cancelButton
    colorDarkDefaultButton()
    border-color $ui-dark-borderColor
+    
+
+
+body[data-theme="solarized-dark"]
+  .root
+    color $ui-solarized-dark-text-color
+
+  .folderList-item
+    border-bottom $ui-solarized-dark-borderColor
+
+  .folderList-empty
+    color $ui-solarized-dark-text-color
+
+  .list-empty
+    color $ui-solarized-dark-text-color
+  .list-control-addStorageButton
+    border-color $ui-solarized-dark-button-backgroundColor
+    background-color $ui-solarized-dark-button-backgroundColor
+    color $ui-solarized-dark-text-color
+
+  .addStorage-header
+    color $ui-solarized-dark-text-color
+    border-color $ui-solarized-dark-borderColor
+
+  .addStorage-body-section-name-input
+    border-color $$ui-solarized-dark-borderColor
+
+  .addStorage-body-section-type-description
+    color $ui-solarized-dark-text-color
+
+  .addStorage-body-section-path-button
+    colorPrimaryButton()
+  .addStorage-body-control
+    border-color $ui-solarized-dark-borderColor
+
+  .addStorage-body-control-createButton
+    colorDarkPrimaryButton()
+  .addStorage-body-control-cancelButton
+    colorDarkDefaultButton()
+    border-color $ui-solarized-dark-borderColor
+
--- a/browser/main/modals/PreferencesModal/Tab.styl
+++ b/browser/main/modals/PreferencesModal/Tab.styl
@@ -10,8 +10,12 @@ $tab--button-font-size = 14px
 $tab--dark-text-color = #E5E5E5

 .header
-  font-size 24px
-  margin-bottom 30px
+  font-size 36px
+  margin-bottom 60px
+
+.header--sub
+  font-size 36px
+  margin-bottom 20px

 body[data-theme="dark"]
  .header
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './ConfigTab.styl'
 import ConfigManager from 'browser/main/lib/ConfigManager'
@@ -9,6 +10,11 @@ import CodeMirror from 'codemirror'

 const OSX = global.process.platform === 'darwin'

+import _ from 'lodash'
+
+const electron = require('electron')
+const ipc = electron.ipcRenderer
+
 class UiTab extends React.Component {
  constructor (props) {
    super(props)
@@ -18,8 +24,27 @@ class UiTab extends React.Component {
    }
  }

-  componentWillMount () {
-    CodeMirror.autoLoadMode(ReactCodeMirror, 'javascript')
+  componentDidMount () {
+    CodeMirror.autoLoadMode(this.codeMirrorInstance.getCodeMirror(), 'javascript')
+    this.handleSettingDone = () => {
+      this.setState({UiAlert: {
+        type: 'success',
+        message: 'Successfully applied!'
+      }})
+    }
+    this.handleSettingError = (err) => {
+      this.setState({UiAlert: {
+        type: 'error',
+        message: err.message != null ? err.message : 'Error occurs!'
+      }})
+    }
+    ipc.addListener('APP_SETTING_DONE', this.handleSettingDone)
+    ipc.addListener('APP_SETTING_ERROR', this.handleSettingError)
+  }
+
+  componentWillUnmount () {
+    ipc.removeListener('APP_SETTING_DONE', this.handleSettingDone)
+    ipc.removeListener('APP_SETTING_ERROR', this.handleSettingError)
  }

  handleUIChange (e) {
@@ -36,6 +61,7 @@ class UiTab extends React.Component {
    const newConfig = {
      ui: {
        theme: this.refs.uiTheme.value,
+        showCopyNotification: this.refs.showCopyNotification.checked,
        disableDirectWrite: this.refs.uiD2w != null
          ? this.refs.uiD2w.checked
          : false
@@ -48,20 +74,25 @@ class UiTab extends React.Component {
        indentSize: this.refs.editorIndentSize.value,
        displayLineNumbers: this.refs.editorDisplayLineNumbers.checked,
        switchPreview: this.refs.editorSwitchPreview.value,
-        keyMap: this.refs.editorKeyMap.value
+        keyMap: this.refs.editorKeyMap.value,
+        scrollPastEnd: this.refs.scrollPastEnd.checked
      },
      preview: {
        fontSize: this.refs.previewFontSize.value,
        fontFamily: this.refs.previewFontFamily.value,
        codeBlockTheme: this.refs.previewCodeBlockTheme.value,
-        lineNumber: this.refs.previewLineNumber.checked
+        lineNumber: this.refs.previewLineNumber.checked,
+        latexInlineOpen: this.refs.previewLatexInlineOpen.value,
+        latexInlineClose: this.refs.previewLatexInlineClose.value,
+        latexBlockOpen: this.refs.previewLatexBlockOpen.value,
+        latexBlockClose: this.refs.previewLatexBlockClose.value
      }
    }

    const newCodemirrorTheme = this.refs.editorTheme.value

    if (newCodemirrorTheme !== codemirrorTheme) {
-      checkHighLight.setAttribute('href', `../node_modules/codemirror/theme/${newCodemirrorTheme}.css`)
+      checkHighLight.setAttribute('href', `../node_modules/codemirror/theme/${newCodemirrorTheme.split(' ')[0]}.css`)
    }

    this.setState({ config: newConfig, codemirrorTheme: newCodemirrorTheme })
@@ -80,9 +111,25 @@ class UiTab extends React.Component {
      type: 'SET_UI',
      config: newConfig
    })
+    this.clearMessage()
+  }
+
+  clearMessage () {
+    _.debounce(() => {
+      this.setState({
+        UiAlert: null
+      })
+    }, 2000)()
  }

  render () {
+    const UiAlert = this.state.UiAlert
+    const UiAlertElement = UiAlert != null
+      ? <p className={`alert ${UiAlert.type}`}>
+        {UiAlert.message}
+      </p>
+      : null
+
    const themes = consts.THEMES
    const { config, codemirrorTheme } = this.state
    const codemirrorSampleCode = 'function iamHappy (happy) {\n\tif (happy) {\n\t  console.log("I am Happy!")\n\t} else {\n\t  console.log("I am not Happy!")\n\t}\n};'
@@ -91,19 +138,30 @@ class UiTab extends React.Component {
        <div styleName='group'>
          <div styleName='group-header'>UI</div>

-          <div styleName='group-header2'>Theme</div>
-
          <div styleName='group-section'>
+            Color Theme
            <div styleName='group-section-control'>
              <select value={config.ui.theme}
                onChange={(e) => this.handleUIChange(e)}
                ref='uiTheme'
              >
-                <option value='default'>Light</option>
+                <option value='default'>Default</option>
+                <option value='white'>White</option>
+                <option value='solarized-dark'>Solarized Dark</option>
                <option value='dark'>Dark</option>
              </select>
            </div>
          </div>
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.ui.showCopyNotification}
+                ref='showCopyNotification'
+                type='checkbox'
+              />&nbsp;
+              Show &quot;Saved to Clipboard&quot; notification when copying
+            </label>
+          </div>
          {
            global.process.platform === 'win32'
            ? <div styleName='group-checkBoxSection'>
@@ -137,7 +195,7 @@ class UiTab extends React.Component {
                }
              </select>
              <div styleName='code-mirror'>
-                <ReactCodeMirror value={codemirrorSampleCode} options={{ lineNumbers: true, readOnly: true, mode: 'javascript', theme: codemirrorTheme }} />
+                <ReactCodeMirror ref={e => (this.codeMirrorInstance = e)} value={codemirrorSampleCode} options={{ lineNumbers: true, readOnly: true, mode: 'javascript', theme: codemirrorTheme }} />
              </div>
            </div>
          </div>
@@ -219,7 +277,7 @@ class UiTab extends React.Component {
                <option value='vim'>vim</option>
                <option value='emacs'>emacs</option>
              </select>
-              <span styleName='note-for-keymap'>Please restart boostnote after you change the keymap</span>
+              <p styleName='note-for-keymap'>⚠️ Please restart boostnote after you change the keymap</p>
            </div>
          </div>

@@ -234,6 +292,18 @@ class UiTab extends React.Component {
            </label>
          </div>

+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.editor.scrollPastEnd}
+                ref='scrollPastEnd'
+                type='checkbox'
+              />&nbsp;
+              Allow editor to scroll past the last line
+            </label>
+          </div>
+
+
          <div styleName='group-header2'>Preview</div>
          <div styleName='group-section'>
            <div styleName='group-section-label'>
@@ -286,13 +356,64 @@ class UiTab extends React.Component {
              Show line numbers for preview code blocks
            </label>
          </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              LaTeX Inline Open Delimiter
+            </div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                ref='previewLatexInlineOpen'
+                value={config.preview.latexInlineOpen}
+                onChange={(e) => this.handleUIChange(e)}
+                type='text'
+              />
+            </div>
+          </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              LaTeX Inline Close Delimiter
+            </div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                ref='previewLatexInlineClose'
+                value={config.preview.latexInlineClose}
+                onChange={(e) => this.handleUIChange(e)}
+                type='text'
+              />
+            </div>
+          </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              LaTeX Block Open Delimiter
+            </div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                ref='previewLatexBlockOpen'
+                value={config.preview.latexBlockOpen}
+                onChange={(e) => this.handleUIChange(e)}
+                type='text'
+              />
+            </div>
+          </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              LaTeX Block Close Delimiter
+            </div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                ref='previewLatexBlockClose'
+                value={config.preview.latexBlockClose}
+                onChange={(e) => this.handleUIChange(e)}
+                type='text'
+              />
+            </div>
+          </div>

-          <div className='group-control'>
+          <div styleName='group-control'>
            <button styleName='group-control-rightButton'
-              onClick={(e) => this.handleSaveUIClick(e)}
-            >
-              Save
+              onClick={(e) => this.handleSaveUIClick(e)}>Save
            </button>
+            {UiAlertElement}
          </div>
        </div>
      </div>
--- a/browser/main/modals/PreferencesModal/index.js
+++ b/browser/main/modals/PreferencesModal/index.js
@@ -1,13 +1,16 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import ReactDOM from 'react-dom'
 import { connect } from 'react-redux'
 import HotkeyTab from './HotkeyTab'
 import UiTab from './UiTab'
 import InfoTab from './InfoTab'
+import Crowdfunding from './Crowdfunding'
 import StoragesTab from './StoragesTab'
 import ModalEscButton from 'browser/components/ModalEscButton'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './PreferencesModal.styl'
+import RealtimeNotification from 'browser/components/RealtimeNotification'

 class Preferences extends React.Component {
  constructor (props) {
@@ -40,7 +43,7 @@ class Preferences extends React.Component {

  renderContent () {
    const { boundingBox } = this.state
-    let { dispatch, config, data } = this.props
+    const { dispatch, config, data } = this.props

    switch (this.state.currentTab) {
      case 'INFO':
@@ -64,6 +67,10 @@ class Preferences extends React.Component {
            config={config}
          />
        )
+      case 'CROWDFUNDING':
+        return (
+          <Crowdfunding />
+        )
      case 'STORAGES':
      default:
        return (
@@ -88,17 +95,18 @@ class Preferences extends React.Component {
  }

  render () {
-    let content = this.renderContent()
+    const content = this.renderContent()

-    let tabs = [
+    const tabs = [
      {target: 'STORAGES', label: 'Storages'},
      {target: 'HOTKEY', label: 'Hotkey'},
      {target: 'UI', label: 'UI'},
-      {target: 'INFO', label: 'Info'}
+      {target: 'INFO', label: 'Community / Info'},
+      {target: 'CROWDFUNDING', label: 'Crowdfunding'}
    ]

-    let navButtons = tabs.map((tab) => {
-      let isActive = this.state.currentTab === tab.target
+    const navButtons = tabs.map((tab) => {
+      const isActive = this.state.currentTab === tab.target
      return (
        <button styleName={isActive
            ? 'nav-button--active'
@@ -130,6 +138,7 @@ class Preferences extends React.Component {
        <div ref='content' styleName='content'>
          {content}
        </div>
+        <RealtimeNotification />
      </div>
    )
  }
--- a/browser/main/modals/RenameFolderModal.js
+++ b/browser/main/modals/RenameFolderModal.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './RenameFolderModal.styl'
 import dataApi from 'browser/main/lib/dataApi'
@@ -48,7 +49,7 @@ class RenameFolderModal extends React.Component {

  confirm () {
    if (this.state.name.trim().length > 0) {
-      let { storage, folder } = this.props
+      const { storage, folder } = this.props
      dataApi
        .updateFolder(storage.key, folder.key, {
          name: this.state.name,