Merge pull request #1172 from BoostIO/feature-v0-8-17

v0.8.17

Backers.md

@@ -1,39 +1,49 @@
-Dear all,
+<h1 align="center">Sponsors &amp; Backers</h1>
 
-Thanks for your using!
+Boostnote is an open source project. It's an independent project with its ongoing development made possible entirely thanks to the support by these awesome [backers](https://github.com/BoostIO/Boostnote/blob/master/Backers.md). If you'd like to join them, please consider:
-Boostnote is used in about 200 countries and regions, it is a awesome developer community.
 
-To continue supporting this growth, and to satisfy community expectations,
+- [Become a backer or sponsor on Open Collective.](https://opencollective.com/boostnoteio)
-we would like to invest more time in this project.
-
-If you like this project and see its potential, you can help!
-
-Thanks,
-Boostnote maintainers.
-
-### >> [Support via OpenCollective](https://opencollective.com/boostnoteio)
 
 ---
 
-## Backers
+## Backers via OpenCollective
-[Kazz](https://twitter.com/kazup_bot) - $65
+<a href="https://opencollective.com/boostnoteio#backers" target="_blank"><img src="https://opencollective.com/boostnoteio/backers.svg?width=890"></a>
 
-Intense Raiden - $45
+- [Ralph03](https://opencollective.com/ralph03) - $24
 
-ravy22 - $25
+- [Nikolas Dan](https://opencollective.com/nikolas-dan) - $20
 
-trentpolack	- $20
+- [tatoosh11](https://twitter.com/ta11) - $10
 
-hikariru - $10
+- [Alexander Borovkov](https://opencollective.com/alexander-borovkov) - $10
 
-kolchan11 - $10
+- [Yeojong Kim](https://twitter.com/yeojoy) - $5
 
-RonWalker22 - $10
+- [Scotia Draven](https://opencollective.com/scotia-draven) - $5
 
-hocchuc	- $5
+- [spoonhoop](https://opencollective.com/spoonhoop) - $5
 
-Adam - $5
+## Backers via Bountysource
+https://salt.bountysource.com/teams/boostnote
 
-Steve	- $5
+- Kuzz - $65
 
-evmin	- $5
+- Intense Raiden - $45
+
+- ravy22 - $25
+
+- trentpolack	- $20
+
+- hikariru - $10
+
+- kolchan11 - $10
+
+- RonWalker22 - $10
+
+- hocchuc	- $5
+
+- Adam - $5
+
+- Steve	- $5
+
+- evmin	- $5

ISSUE_TEMPLATE.md

@@ -1,3 +1,10 @@
+<!--
 Please paste some **screenshots** with the **developer tool** open (console tab) when you report a bug.
 
 If your issue is regarding boostnote mobile, move to https://github.com/BoostIO/boostnote-mobile.
+-->
+
+<!--
+Love Boostnote? Please consider supporting us via OpenCollective:
+👉  https://opencollective.com/boostnoteio
+-->

browser/components/CodeEditor.js

@@ -67,7 +67,7 @@ export default class CodeEditor extends React.Component {
           if (cm.somethingSelected()) cm.indentSelection('add')
           else {
             const tabs = cm.getOption('indentWithTabs')
-            if (line.trimLeft() === '- ' || line.trimLeft() === '* ' || line.trimLeft() === '+ ') {
+            if (line.trimLeft().match(/^(-|\*|\+) (\[( |x)\] )?$/)) {
               cm.execCommand('goLineStart')
               if (tabs) {
                 cm.execCommand('insertTab')
@@ -110,6 +110,7 @@ export default class CodeEditor extends React.Component {
     CodeMirror.Vim.defineEx('q!', 'q!', this.quitEditor)
     CodeMirror.Vim.defineEx('wq', 'wq', this.quitEditor)
     CodeMirror.Vim.defineEx('qw', 'qw', this.quitEditor)
+    CodeMirror.Vim.map('ZZ', ':q', 'normal')
   }
 
   quitEditor () {
@@ -213,9 +214,7 @@ export default class CodeEditor extends React.Component {
   }
 
   insertImageMd (imageMd) {
-    const textarea = this.editor.getInputField()
+    this.editor.replaceSelection(imageMd)
-    const cm = this.editor
-    cm.replaceSelection(`${textarea.value.substr(0, textarea.selectionStart)}${imageMd}${textarea.value.substr(textarea.selectionEnd)}`)
   }
 
   handlePaste (editor, e) {

browser/components/MarkdownPreview.js

@@ -33,6 +33,15 @@ function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber) {
   font-weight: normal;
   text-rendering: optimizeLegibility;
 }
+@font-face {
+  font-family: 'Lato';
+  src: url('${appPath}/resources/fonts/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
+       url('${appPath}/resources/fonts/Lato-Black.woff') format('woff'), /* Modern Browsers */
+       url('${appPath}/resources/fonts/Lato-Black.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 700;
+  text-rendering: optimizeLegibility;
+}
 ${markdownStyle}
 body {
   font-family: '${fontFamily.join("','")}';
@@ -92,7 +101,7 @@ const OSX = global.process.platform === 'darwin'
 
 const defaultFontFamily = ['helvetica', 'arial', 'sans-serif']
 if (!OSX) {
-  defaultFontFamily.unshift('\'Microsoft YaHei\'')
+  defaultFontFamily.unshift('Microsoft YaHei')
   defaultFontFamily.unshift('meiryo')
 }
 const defaultCodeBlockFontFamily = ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'monospace']
@@ -185,12 +194,14 @@ export default class MarkdownPreview extends React.Component {
   }
 
   fixDecodedURI (node) {
+    if (node && node.children.length === 1 && typeof node.children[0] === 'string') {
       const { innerText, href } = node
 
       node.innerText = mdurl.decode(href) === innerText
         ? href
         : innerText
     }
+  }
 
   componentDidMount () {
     this.refs.root.setAttribute('sandbox', 'allow-scripts')
@@ -256,7 +267,9 @@ export default class MarkdownPreview extends React.Component {
     theme = consts.THEMES.some((_theme) => _theme === theme) && theme !== 'default'
       ? theme
       : 'elegant'
-    this.getWindow().document.getElementById('codeTheme').href = `${appPath}/node_modules/codemirror/theme/${theme}.css`
+    this.getWindow().document.getElementById('codeTheme').href = theme.startsWith('solarized')
+      ? `${appPath}/node_modules/codemirror/theme/solarized.css`
+      : `${appPath}/node_modules/codemirror/theme/${theme}.css`
   }
 
   rewriteIframe () {
@@ -328,7 +341,12 @@ export default class MarkdownPreview extends React.Component {
         }
         el.parentNode.appendChild(copyIcon)
         el.innerHTML = ''
+        if (codeBlockTheme.indexOf('solarized') === 0) {
+          const [refThema, color] = codeBlockTheme.split(' ')
+          el.parentNode.className += ` cm-s-${refThema} cm-s-${color} CodeMirror`
+        } else {
           el.parentNode.className += ` cm-s-${codeBlockTheme} CodeMirror`
+        }
         CodeMirror.runMode(content, syntax.mime, el, {
           tabSize: indentSize
         })

browser/components/NavToggleButton.styl

@@ -10,6 +10,9 @@
   line-height 32px
   padding 0
 
+body[data-theme="white"]
+  navWhiteButtonColor()
+
 body[data-theme="dark"]
   .navToggle
     &:hover

browser/components/NoteItem.js

@@ -70,7 +70,7 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont
 
       <div styleName='item-bottom-time'>{dateDisplay}</div>
       {note.isStarred
-        ? <i styleName='item-star' className='fa fa-star' /> : ''
+        ? <img styleName='item-star' src='../resources/icon/icon-starred.svg' /> : ''
       }
       {note.isPinned && !pathname.match(/\/home|\/starred|\/trash/)
         ? <i styleName='item-pin' className='fa fa-thumb-tack' /> : ''

browser/components/NoteItem.styl

@@ -11,9 +11,9 @@ $control-height = 30px
   user-select none
   cursor pointer
   background-color $ui-noteList-backgroundColor
-  transition background-color 0.2s
+  transition 0.2s
   &:hover
-    background-color alpha($ui-button--active-backgroundColor, 40%)
+    background-color alpha($ui-button--active-backgroundColor, 20%)
     .item-title
     .item-title-icon
     .item-bottom-time
@@ -25,7 +25,7 @@ $control-height = 30px
     .item-star
       color $ui-favorite-star-button-color
   &:active
-    background-color $ui-button--active-backgroundColor
+    background-color alpha($ui-button--active-backgroundColor, 40%)
     color $ui-text-color
     .item-title
     .item-title-icon
@@ -43,7 +43,7 @@ $control-height = 30px
 
 .item--active
   @extend .item
-  background-color $ui-button--active-backgroundColor
+  background-color alpha($ui-button--active-backgroundColor, 60%)
   color $ui-text-color
   .item-title
   .item-title-empty
@@ -59,7 +59,15 @@ $control-height = 30px
   .item-star
     color $ui-favorite-star-button-color
   &:hover
-    background-color $ui-button--active-backgroundColor
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color #e74c3c
+    .menu-button-label
+      color $ui-text-color
+  &:active, &:active:hover
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color #e74c3c
+    .menu-button-label
+      color $ui-text-color
 
 .item-title-icon
   position relative
@@ -67,7 +75,8 @@ $control-height = 30px
   color $ui-inactive-text-color
 
 .item-title
-  font-size 14px
+  font-size 15px
+  font-weight 700
   position relative
   top -12px
   left 20px
@@ -83,7 +92,7 @@ $control-height = 30px
 .item-bottom
   position relative
   bottom 0px
-  margin-top 2px
+  margin-top 10px
   font-size 12px
   line-height 20px
   overflow ellipsis
@@ -92,35 +101,33 @@ $control-height = 30px
 .item-bottom-tagList
   flex 1
   overflow ellipsis
-  line-height 20px
+  line-height 25px
-  padding-top 7px
   padding-left 2px
-  margin-right 27px
+  margin-right 40px
 
 .item-bottom-tagList-item
   font-size 11px
   margin-right 8px
   padding 0
-  height 20px
   box-sizing border-box
   border-radius 2px
-  padding 1px 2px
+  padding 4px
   vertical-align middle
   background-color white
   color $ui-inactive-text-color
 
 .item-bottom-time
   color $ui-inactive-text-color
-  font-size 11px
+  font-size 13px
   padding-left 2px
   padding-bottom 2px
 
 .item-star
   position absolute
-  right -20px
+  right -6px
-  bottom 2px
+  bottom 23px
-  width 34px
+  width 16px
-  height 34px
+  height 16px
   color alpha($ui-favorite-star-button-color, 60%)
   font-size 12px
   padding 0
@@ -128,8 +135,8 @@ $control-height = 30px
 
 .item-pin
   position absolute
-  right -21px
+  right 0px
-  bottom 28px
+  bottom 2px
   width 34px
   height 34px
   color #E54D42
@@ -137,6 +144,20 @@ $control-height = 30px
   padding 0
   border-radius 17px
 
+body[data-theme="white"]
+  .item
+    background-color $ui-white-noteList-backgroundColor
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 60%)
+    &:active
+      background-color $ui-button--active-backgroundColor
+
+  .item--active
+    @extend .item
+    background-color $ui-button--active-backgroundColor
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 60%)
+
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor
@@ -148,6 +169,7 @@ body[data-theme="dark"]
     &:hover
       transition 0.15s
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-dark-text-color
       .item-title
       .item-title-icon
       .item-bottom-time
@@ -155,11 +177,12 @@ body[data-theme="dark"]
         color $ui-dark-text-color
       .item-bottom-tagList-item
         transition 0.15s
-        background-color alpha($ui-dark-button--active-backgroundColor, 40%)
+        background-color alpha(#fff, 20%)
         color $ui-dark-text-color
     &:active
       transition 0.15s
       background-color $ui-dark-button--active-backgroundColor
+      color $ui-dark-text-color
       .item-title
       .item-title-icon
       .item-bottom-time
@@ -185,6 +208,11 @@ body[data-theme="dark"]
     .item-bottom-tagList-item
       background-color alpha(white, 10%)
       color $ui-dark-text-color
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
+      color #c0392b
+      .item-bottom-tagList-item
+        background-color alpha(#fff, 20%)
 
   .item-title
     color $ui-inactive-text-color

browser/components/NoteItemSimple.js

@@ -10,15 +10,17 @@ import styles from './NoteItemSimple.styl'
  * @param {boolean} isActive
  * @param {Object} note
  * @param {Function} handleNoteClick
+ * @param {Function} handleNoteContextMenu
  * @param {Function} handleDragStart
  */
-const NoteItemSimple = ({ isActive, note, handleNoteClick, handleDragStart }) => (
+const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu, handleDragStart }) => (
   <div styleName={isActive
       ? 'item-simple--active'
       : 'item-simple'
     }
     key={`${note.storage}-${note.key}`}
     onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)}
+    onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
     onDragStart={e => handleDragStart(e, note)}
     draggable='true'
   >
@@ -44,6 +46,7 @@ NoteItemSimple.propTypes = {
     title: PropTypes.string.isrequired
   }),
   handleNoteClick: PropTypes.func.isRequired,
+  handleNoteContextMenu: PropTypes.func.isRequired,
   handleDragStart: PropTypes.func.isRequired
 }
 

browser/components/NoteItemSimple.styl

@@ -11,15 +11,15 @@ $control-height = 30px
   user-select none
   cursor pointer
   background-color $ui-noteList-backgroundColor
-  transition background-color 0.15s
+  transition 0.2s
   &:hover
-    background-color alpha($ui-button--active-backgroundColor, 40%)
+    background-color alpha($ui-button--active-backgroundColor, 20%)
     .item-simple-title
     .item-simple-title-empty
     .item-simple-title-icon
       color $ui-text-color
   &:active
-    background-color $ui-button--active-backgroundColor
+    background-color alpha($ui-button--active-backgroundColor, 40%)
     color $ui-text-color
     .item-simple-title
     .item-simple-title-empty
@@ -28,7 +28,7 @@ $control-height = 30px
 
 .item-simple--active
   @extend .item-simple
-  background-color $ui-button--active-backgroundColor
+  background-color alpha($ui-button--active-backgroundColor, 60%)
   color $ui-text-color
   .item-simple-title
   .item-simple-title-empty
@@ -37,7 +37,15 @@ $control-height = 30px
   .item-simple-title-icon
     color $ui-text-color
   &:hover
-    background-color $ui-button--active-backgroundColor
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color #e74c3c
+    .menu-button-label
+      color $ui-text-color
+  &:active, &:active:hover
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color #e74c3c
+    .menu-button-label
+      color $ui-text-color
 
 .item-simple-title
   font-size 13px
@@ -59,6 +67,20 @@ $control-height = 30px
   font-weight normal
   color $ui-inactive-text-color
 
+body[data-theme="white"]
+  .item-simple
+    background-color $ui-white-noteList-backgroundColor
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 60%)
+    &:active
+      background-color $ui-button--active-backgroundColor
+
+  .item-simple--active
+    @extend .item-simple
+    background-color $ui-button--active-backgroundColor
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 60%)
+
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor
@@ -67,33 +89,50 @@ body[data-theme="dark"]
   .item-simple
     border-color $ui-dark-borderColor
     background-color $ui-dark-noteList-backgroundColor
-    &:active
+    &:hover
-      background-color $ui-dark-button--active-backgroundColor
+      transition 0.15s
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-dark-text-color
       .item-simple-title
       .item-simple-title-icon
       .item-simple-bottom-time
-      .item-simple-bottom-tagList-item
         transition 0.15s
         color $ui-dark-text-color
-    &:hover
+      .item-simple-bottom-tagList-item
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+        transition 0.15s
+        background-color alpha(#fff, 20%)
+        color $ui-dark-text-color
+    &:active
+      transition 0.15s
+      background-color $ui-dark-button--active-backgroundColor
+      color $ui-dark-text-color
       .item-simple-title
       .item-simple-title-icon
       .item-simple-bottom-time
+        transition 0.15s
+        color $ui-dark-text-color
       .item-simple-bottom-tagList-item
         transition 0.15s
+        background-color alpha(white, 10%)
         color $ui-dark-text-color  
 
   .item-simple--active
     border-color $ui-dark-borderColor
     background-color $ui-dark-button--active-backgroundColor
+    .item-simple-wrapper
+      border-color transparent
     .item-simple-title
     .item-simple-title-icon
     .item-simple-bottom-time
       color $ui-dark-text-color
     .item-simple-bottom-tagList-item
-      background-color transparent
+      background-color alpha(white, 10%)
       color $ui-dark-text-color
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
+      color #c0392b
+      .item-simple-bottom-tagList-item
+        background-color alpha(#fff, 20%)
 
   .item-simple-title
     color $ui-inactive-text-color

browser/components/RealtimeNotification.js

@@ -40,7 +40,7 @@ class RealtimeNotification extends React.Component {
       ? <a styleName='notification-link' href={notifications[0].linkUrl}
         onClick={(e) => this.handleLinkClick(e)}
       >
-        {notifications[0].text}
+        Info: {notifications[0].text}
       </a>
     : ''
 

browser/components/RealtimeNotification.styl

@@ -2,20 +2,20 @@
   z-index 1000
   font-size 12px
   position absolute
-  bottom 0px
+  bottom 20px
-  right 0px
+  width 100%
-  background-color #EBEBEB
+  float left
   height 30px
+  background-color none
 
 .notification-link
   position absolute
-  right 5px
-  top 5px
   text-decoration none
   color #282A36
+  font-size 14px
   border 1px solid #6FA8E6
   background-color alpha(#6FA8E6, 0.2)
-  padding 3px 9px
+  padding 5px 12px
   border-radius 2px
   transition 0.2s
   &:hover
@@ -23,7 +23,7 @@
 
 body[data-theme="dark"]
   .notification-area
-    background-color #1E2124
+    background-color none
 
   .notification-link
     color #fff

browser/components/SideNavFilter.js

@@ -15,27 +15,53 @@ import styles from './SideNavFilter.styl'
  */
 const SideNavFilter = ({
   isFolded, isHomeActive, handleAllNotesButtonClick,
-  isStarredActive, handleStarredButtonClick, isTrashedActive, handleTrashedButtonClick
+  isStarredActive, handleStarredButtonClick, isTrashedActive, handleTrashedButtonClick, counterDelNote,
+  counterTotalNote, counterStarredNote
 }) => (
   <div styleName={isFolded ? 'menu--folded' : 'menu'}>
+
     <button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
       onClick={handleAllNotesButtonClick}
     >
-      <i className='fa fa-archive fa-fw' />
+      <div styleName='iconWrap'>
+        <img src={isHomeActive
+            ? '../resources/icon/icon-all-active.svg'
+            : '../resources/icon/icon-all.svg'
+          }
+        />
+      </div>
       <span styleName='menu-button-label'>All Notes</span>
+      <span styleName='counters'>{counterTotalNote}</span>
     </button>
+
     <button styleName={isStarredActive ? 'menu-button-star--active' : 'menu-button'}
       onClick={handleStarredButtonClick}
     >
-      <i className='fa fa-star fa-fw' />
+      <div styleName='iconWrap'>
+        <img src={isStarredActive
+            ? '../resources/icon/icon-star-active.svg'
+            : '../resources/icon/icon-star.svg'
+          }
+        />
+      </div>
       <span styleName='menu-button-label'>Starred</span>
+      <span styleName='counters'>{counterStarredNote}</span>
     </button>
-    <button styleName={isTrashedActive ? 'menu-button--active' : 'menu-button'}
+
+    <button styleName={isTrashedActive ? 'menu-button-trash--active' : 'menu-button'}
       onClick={handleTrashedButtonClick}
     >
-      <i className='fa fa-trash fa-fw' />
+      <div styleName='iconWrap'>
+        <img src={isTrashedActive
+            ? '../resources/icon/icon-trash-active.svg'
+            : '../resources/icon/icon-trash.svg'
+          }
+        />
+      </div>
       <span styleName='menu-button-label'>Trash</span>
+      <span styleName='counters'>{counterDelNote}</span>
     </button>
+
   </div>
 )
 

browser/components/SideNavFilter.styl

@@ -3,12 +3,89 @@
 
 .menu-button
   navButtonColor()
-  height 32px
+  height 36px
-  padding 0 15px
+  padding 0 15px 0 20px
-  font-size 12px
+  font-size 14px
   width 100%
   text-align left
   overflow ellipsis
+  display flex
+  align-items center
+  &:hover, &:active, &:active:hover
+    color #1EC38B
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
+
+.iconWrap
+  width 20px
+  text-align center
+  
+.counters
+  float right
+  color $ui-inactive-text-color
+
+.menu-button--active
+  @extend .menu-button
+  SideNavFilter()
+  color #1EC38B
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
+  .menu-button-label, .counters
+    color #1EC38B
+  &:hover
+    color #1EC38B
+
+.menu-button-star--active
+  @extend .menu-button
+  SideNavFilter()
+  color #1EC38B
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
+  .menu-button-label, .counters
+    color #1EC38B
+
+.menu-button-trash--active
+  @extend .menu-button
+  SideNavFilter()
+  color #1EC38B
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
+  .menu-button-label, .counters
+    color #1EC38B
+
+.menu-button-label
+  margin-left 10px
+  flex 1
+
+.menu--folded
+  @extend .menu
+  .menu-button, .menu-button--active
+    text-align center
+    &:hover .menu-button-label
+      transition opacity 0.15s
+      opacity 1
+
+  .menu-button-label
+    position fixed
+    display inline-block
+    height 32px
+    left 44px
+    padding 0 10px
+    margin-top -8px
+    margin-left 0
+    overflow ellipsis
+    z-index 10
+    line-height 32px
+    border-top-right-radius 2px
+    border-bottom-right-radius 2px
+    pointer-events none
+    opacity 0
+    font-size 13px
+  .counters
+    display none
+
+body[data-theme="white"]
+  .menu-button
+    navWhiteButtonColor()
+
+  .counters
+    color $ui-inactive-text-color
 
   .menu-button--active
     @extend .menu-button
@@ -44,34 +121,22 @@
       .menu-button-label
         color $ui-text-color
 
+  .menu-button-trash--active
+    @extend .menu-button
+    color #5D9E36
+    background-color $ui-button--active-backgroundColor
     .menu-button-label
-  margin-left 5px
+      color $ui-text-color
-
+    &:hover
-.menu--folded
+      background-color alpha($ui-button--active-backgroundColor, 50%)
-  @extend .menu
+      color #5D9E36
-  .menu-button, .menu-button--active
-    text-align center
-    &:hover .menu-button-label
-      transition opacity 0.15s
-      opacity 1
       .menu-button-label
-    position fixed
+        color $ui-text-color
-    display inline-block
+    &:active, &:active:hover
-    height 32px
+      background-color alpha($ui-button--active-backgroundColor, 50%)
-    left 44px
+      color #5D9E36
-    padding 0 10px
+      .menu-button-label
-    margin-top -8px
+        color $ui-text-color
-    margin-left 0
-    overflow ellipsis
-    background-color $ui-tooltip-backgroundColor
-    z-index 10
-    color white
-    line-height 32px
-    border-top-right-radius 2px
-    border-bottom-right-radius 2px
-    pointer-events none
-    opacity 0
-    font-size 12px
 
 body[data-theme="dark"]
   .menu-button
@@ -103,3 +168,14 @@ body[data-theme="dark"]
       color $ui-favorite-star-button-color
       .menu-button-label
         color $ui-dark-text-color
+
+  .menu-button-trash--active
+    color #5D9E36
+    background-color $ui-dark-button--active-backgroundColor
+    .menu-button-label
+      color $ui-dark-text-color
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+      color #5D9E36
+      .menu-button-label
+        color $ui-dark-text-color

browser/components/StorageItem.js

@@ -35,10 +35,8 @@ const StorageItem = ({
   >
     <span styleName={isFolded
       ? 'folderList-item-name--folded' : 'folderList-item-name'
-    }
+    }>
-      style={{borderColor: folderColor}}
+      <text style={{color: folderColor, paddingRight: '10px'}}>{isActive ? <i className='fa fa-folder-open-o' /> : <i className='fa fa-folder-o' />}</text>{isFolded ? folderName.substring(0, 1) : folderName}
-    >
-      {isFolded ? folderName.substring(0, 1) : folderName}
     </span>
     {(!isFolded && isNumber(noteCount)) &&
       <span styleName='folderList-item-noteCount'>{noteCount}</span>

browser/components/StorageItem.styl

@@ -5,37 +5,36 @@
 .folderList-item
   display flex
   width 100%
-  height 26px
+  height 34px
   background-color transparent
   color $ui-inactive-text-color
   padding 0
-  margin-bottom 5px
   text-align left
   border none
   overflow ellipsis
-  font-size 12px
+  font-size 14px
   &:first-child
     margin-top 0
   &:hover
-    color $ui-text-color
+    color #1EC38B;
-    background-color alpha($ui-button--active-backgroundColor, 20%)
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
     transition background-color 0.15s
   &:active
-    color $ui-text-color
+    color $$ui-button-default-color
-    background-color $ui-button--active-backgroundColor
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
     
 .folderList-item--active
   @extend .folderList-item
-  color $ui-text-color
+  color #1EC38B
-  background-color $ui-button--active-backgroundColor
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
   &:hover
-    color $ui-text-color
+    color #1EC38B;
-    background-color alpha($ui-button--active-backgroundColor, 50%)
+    background-color alpha($ui-button-default--active-backgroundColor, 50%)
 
 .folderList-item-name
   display block
   flex 1
-  padding 0 25px
+  padding 0 12px
   height 26px
   line-height 26px
   border-width 0 0 0 2px
@@ -48,7 +47,7 @@
   float right
   line-height 26px
   padding-right 15px
-  font-size 12px
+  font-size 13px
 
 .folderList-item-tooltip
   tooltip()
@@ -69,8 +68,28 @@
 
 .folderList-item-name--folded
   @extend .folderList-item-name
-  padding-left 12px
+  padding-left 17px
+  text
+    display none
 
+body[data-theme="white"]
+  .folderList-item
+    color $ui-inactive-text-color
+    &:hover
+      color $ui-text-color
+      background-color alpha($ui-button--active-backgroundColor, 20%)
+      transition background-color 0.15s
+    &:active
+      color $ui-text-color
+      background-color $ui-button--active-backgroundColor
+
+  .folderList-item--active
+    @extend .folderList-item
+    color $ui-text-color
+    background-color $ui-button--active-backgroundColor
+    &:hover
+      color $ui-text-color
+      background-color alpha($ui-button--active-backgroundColor, 50%)
 
 body[data-theme="dark"]
   .folderList-item

browser/components/StorageList.js

@@ -2,7 +2,7 @@
 * @fileoverview Micro component for showing StorageList
 */
 import React, { PropTypes } from 'react'
-import styles from './StorgaeList.styl'
+import styles from './StorageList.styl'
 import CSSModules from 'browser/lib/CSSModules'
 
 /**

browser/components/StorageList.styl

@@ -1,7 +1,7 @@
 .storageList
   absolute left right
   bottom 37px
-  top 160px
+  top 180px
   overflow-y auto
 
 .storageList-empty

browser/components/TagListItem.styl

@@ -9,19 +9,19 @@
   text-align left
   border none
   overflow ellipsis
-  font-size 12px
+  font-size 13px
   &:first-child
     margin-top 0
   &:hover
-    color $ui-text-color
+    color $ui-button-default-color
-    background-color alpha($ui-button--active-backgroundColor, 20%)
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
     transition background-color 0.15s
-  &:active
+  &:active, &:active:hover
-    color $ui-text-color
+    color $ui-button-default-color
-    background-color $ui-button--active-backgroundColor
+    background-color $ui-button-default--active-backgroundColor
 
 .tagList-item-active
-  background-color $ui-button--active-backgroundColor
+  background-color $ui-button-default--active-backgroundColor
   display flex
   width 100%
   height 26px
@@ -30,15 +30,16 @@
   text-align left
   border none
   overflow ellipsis
-  font-size 12px
+  font-size 13px
+  color $ui-button-default-color
   &:hover
-    background-color alpha($ui-button--active-backgroundColor, 60%)
+    background-color alpha($ui-button-default--active-backgroundColor, 60%)
     transition 0.2s
 
 .tagList-item-name
   display block
   flex 1
-  padding 0 25px
+  padding 0 15px
   height 26px
   line-height 26px
   border-width 0 0 0 2px
@@ -47,6 +48,22 @@
   overflow hidden
   text-overflow ellipsis
 
+body[data-theme="white"]
+  .tagList-item
+    color $ui-inactive-text-color
+    &:hover
+      color $ui-text-color
+      background-color alpha($ui-button--active-backgroundColor, 20%)
+    &:active
+      color $ui-text-color
+      background-color $ui-button--active-backgroundColor
+
+  .tagList-item-active
+    background-color $ui-button--active-backgroundColor
+    color $ui-text-color
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 60%)
+
 body[data-theme="dark"]
   .tagList-item
     color $ui-dark-inactive-text-color

browser/components/TodoListPercentage.styl

@@ -1,24 +1,25 @@
 .percentageBar
   position absolute
-  top 58px
+  top 50px
-  right: 0px
+  right 0px
   left 0px
   background-color #DADFE1
   width 100%
-  height: 15px
+  height: 17px
   font-size: 12px
   z-index 100
   border-radius 2px
 
 .progressBar
-  background-color: #6C7A89
+  background-color: #1EC38B
-  height 15px
+  height 17px
   border-radius 2px
-  transition 0.3s
+  transition 0.4s cubic-bezier(0.4, 0.4, 0, 1)
 
 .percentageText
   color #f4f4f4
   padding: 2px 43%
+  font-weight 600
 
 body[data-theme="dark"]
   .percentageBar

browser/components/markdown.styl

@@ -118,7 +118,7 @@ hr
 h1, h2, h3, h4, h5, h6
   font-weight bold
 h1
-  font-size 2.25em
+  font-size 2.55em
   padding-bottom 0.3em
   line-height 1.2em
   border-bottom solid 1px borderColor

browser/finder/FinderMain.styl

@@ -64,7 +64,7 @@ $list-width = 250px
 
 .result-nav-storageList
   absolute bottom left right
-  top 110px + 32px + 10px + 10px
+  top 110px + 32px + 10px + 10px + 20px
   overflow-y auto
 
 .result-list

browser/finder/ipcClient.js

@@ -84,6 +84,8 @@ nodeIpc.connectTo(
       const { config } = payload
       if (config.ui.theme === 'dark') {
         document.body.setAttribute('data-theme', 'dark')
+      } else if (config.ui.theme === 'white') {
+        document.body.setAttribute('data-theme', 'white')
       } else {
         document.body.setAttribute('data-theme', 'default')
       }

browser/lib/markdown.js

@@ -3,6 +3,7 @@ import emoji from 'markdown-it-emoji'
 import math from '@rokt33r/markdown-it-math'
 import _ from 'lodash'
 
+// FIXME We should not depend on global variable.
 const katex = window.katex
 
 function createGutter (str) {
@@ -69,6 +70,8 @@ md.use(require('markdown-it-named-headers'), {
   }
 })
 md.use(require('markdown-it-kbd'))
+md.use(require('markdown-it-plantuml'))
+
 // Override task item
 md.block.ruler.at('paragraph', function (state, startLine/*, endLine */) {
   let content, terminate, i, l, token
@@ -135,37 +138,9 @@ md.renderer.render = function render (tokens, options, env) {
   let result = originalRender.call(md.renderer, tokens, options, env)
   return result
 }
+// FIXME We should not depend on global variable.
 window.md = md
 
-function strip (input) {
-  var output = input
-  try {
-    output = output
-      .replace(/^([\s\t]*)([\*\-\+]|\d\.)\s+/gm, '$1')
-      .replace(/\n={2,}/g, '\n')
-      .replace(/~~/g, '')
-      .replace(/`{3}.*\n/g, '')
-      .replace(/<(.*?)>/g, '$1')
-      .replace(/^[=\-]{2,}\s*$/g, '')
-      .replace(/\[\^.+?\](: .*?$)?/g, '')
-      .replace(/\s{0,2}\[.*?\]: .*?$/g, '')
-      .replace(/!\[.*?\][\[\(].*?[\]\)]/g, '')
-      .replace(/\[(.*?)\][\[\(].*?[\]\)]/g, '$1')
-      .replace(/>/g, '')
-      .replace(/^\s{1,2}\[(.*?)\]: (\S+)( ".*?")?\s*$/g, '')
-      .replace(/^#{1,6}\s*([^#]*)\s*(#{1,6})?/gm, '$1')
-      .replace(/([\*_]{1,3})(\S.*?\S)\1/g, '$2')
-      .replace(/(`{3,})(.*?)\1/gm, '$2')
-      .replace(/^-{3,}\s*$/g, '')
-      .replace(/`(.+?)`/g, '$1')
-      .replace(/\n{2,}/g, '\n\n')
-  } catch (e) {
-    console.error(e)
-    return input
-  }
-  return output
-}
-
 function normalizeLinkText (linkText) {
   return md.normalizeLinkText(linkText)
 }
@@ -176,7 +151,7 @@ const markdown = {
     const renderedContent = md.render(content)
     return renderedContent
   },
-  strip,
   normalizeLinkText
 }
+
 export default markdown

browser/lib/markdownTextHelper.js

@@ -0,0 +1,39 @@
+/**
+ * @fileoverview Text trimmer for markdown note.
+ */
+
+/**
+ * @param {string} input
+ * @return {string}
+ */
+export function strip (input) {
+  let output = input
+  try {
+    output = output
+      .replace(/^([\s\t]*)([\*\-\+]|\d+\.)\s+/gm, '$1')
+      .replace(/\n={2,}/g, '\n')
+      .replace(/~~/g, '')
+      .replace(/`{3}.*\n/g, '')
+      .replace(/<(.*?)>/g, '$1')
+      .replace(/^[=\-]{2,}\s*$/g, '')
+      .replace(/\[\^.+?\](: .*?$)?/g, '')
+      .replace(/\s{0,2}\[.*?\]: .*?$/g, '')
+      .replace(/!\[.*?\][\[\(].*?[\]\)]/g, '')
+      .replace(/\[(.*?)\][\[\(].*?[\]\)]/g, '$1')
+      .replace(/>/g, '')
+      .replace(/^\s{1,2}\[(.*?)\]: (\S+)( ".*?")?\s*$/g, '')
+      .replace(/^#{1,6}\s*([^#]*)\s*(#{1,6})?/gm, '$1')
+      .replace(/(`{3,})(.*?)\1/gm, '$2')
+      .replace(/^-{3,}\s*$/g, '')
+      .replace(/`(.+?)`/g, '$1')
+      .replace(/\n{2,}/g, '\n\n')
+  } catch (e) {
+    console.error(e)
+    return input
+  }
+  return output
+}
+
+export default {
+  strip
+}

browser/main/Detail/Detail.styl

@@ -1,5 +1,8 @@
 .root
   absolute top bottom right
+  display flex
+  align-items center
+  justify-content center
 
 .empty
   height 320px
@@ -8,8 +11,9 @@
 
 .empty-message
   width 100%
-  font-size 42px
+  font-size 36px
-  line-height 72px
+  font-weight 600
+  line-height 56px
   text-align center
   color $ui-inactive-text-color
 

browser/main/Detail/DetailVars.styl

@@ -3,7 +3,9 @@
  */
 
 // Margin on the left side and the right side for NoteDetail component.
-$note-detail-left-margin = 25px
+$note-detail-left-margin = 100px
-$note-detail-right-margin = 25px
+$note-detail-right-margin = 120px
+$snippet-note-detail-left-margin = 60px
+$snippet-note-detail-right-margin = 80px
 
 $note-detail-box-shadow = 2px 0 15px -8px #b1b1b1 inset

browser/main/Detail/FolderSelect.js

@@ -259,12 +259,11 @@ class FolderSelect extends React.Component {
               {optionList}
             </div>
           </div>
-          : <div styleName='idle'>
+          : <div styleName='idle' style={{color: currentOption.folder.color}}>
             <div styleName='idle-label'>
-              <span styleName='idle-label-name'
+              <i className='fa fa-folder' />
-                style={{color: currentOption.folder.color}}
+              <span styleName='idle-label-name'>
-              >
+                {currentOption.folder.name}
-                {currentOption.folder.name} /
               </span>
             </div>
           </div>

browser/main/Detail/FolderSelect.styl

@@ -1,21 +1,22 @@
 .root
   position relative
   border solid 1px transparent
-  line-height 26px
   vertical-align middle
   border-radius 2px
   transition 0.15s
   user-select none
+  margin-right 10px
   &:hover
     background-color $ui-button--hover-backgroundColor
 
 .root--search, .root--focus
   @extend .root
-  background-color $ui-noteDetail-backgroundColor = #F4F4F4
+  background-color $ui-noteDetail-backgroundColor = #fff
   border-color $ui-input--focus-borderColor
-  width 100px
+  width 154px
+  height 30px
   &:hover
-    border-color $ui-input--focus-borderColor
+    border-color $ui-input--focus-borderColor = #fff
 
 .idle
   position relative
@@ -24,13 +25,16 @@
 .idle-label
   right 20px
   overflow ellipsis
+  display flex
+  align-items center
 
 .idle-label-name
-  font-size 14px
+  font-size 13px
-  padding 2px
+  font-weight 600
+  margin-left 4px
 
 .idle-label-name-surfix
-  font-size 10px
+  font-size 15px
   color $ui-inactive-text-color
   margin-left 5px
 .idle-caret
@@ -39,35 +43,37 @@
   width 20px
   line-height 34px
   
-.search
-  absolute top left right bottom
-  line-height 34px
-
 .search-input
   vertical-align middle
   position relative
-  top -2px
+  top 0
+  font-size 14px
   outline none
   border none
-  height 20px
+  width 100%
-  line-height 20px
   background-color transparent
   padding 0 10px
 
 .search-optionList
-  position fixed
+  position absolute
+  top 30px
   max-height 450px
+  min-width 150px
   overflow auto
   z-index 200
   border $ui-border
   background-color white
   border-radius 2px
+  padding 10px 6px
 
 .search-optionList-item
+  width 140px
   height 34px
-  width 250px
+  display flex
+  align-items center
   box-sizing border-box
-  padding 0 5px
+  padding 0
+  margin-bottom 10px
   overflow ellipsis
   cursor pointer
   &:hover
@@ -81,13 +87,17 @@
     background-color $ui-button--active-backgroundColor
     color $ui-button--active-color
 .search-optionList-item-name
-  border-left solid 2px transparent
+  border-left solid 3px transparent
-  padding 2px 5px
+  padding 6px
 .search-optionList-item-name-surfix
   font-size 10px
   color $ui-inactive-text-color
   margin-left 5px
 
+
+
+
+
 body[data-theme="dark"]
   .root
     color $ui-dark-text-color

browser/main/Detail/InfoButton.js

@@ -6,9 +6,9 @@ const InfoButton = ({
   onClick
 }) => (
   <button styleName='control-infoButton'
-    onClick={onClick}
+    onClick={(e) => onClick(e)}
   >
-    <i className='fa fa-info infoButton' styleName='info-button' />
+    <img className='infoButton' src='../resources/icon/icon-info.svg' />
   </button>
 )
 

browser/main/Detail/InfoButton.styl

@@ -1,20 +1,10 @@
 .control-infoButton
-  float right
+  top 10px
+  margin-bottom 10px
   topBarButtonLight()
 
-.control-infoPanel
-  position fixed
-  pointer-events none
-  top 50px
-  z-index 200
-  line-height normal
-  border-radius 2px
-  opacity 0
-  transition 0.1s
-
 .infoButton
   padding 0px
-  margin 15px 0
 
 body[data-theme="dark"]
   .control-infoButton

browser/main/Detail/InfoPanel.js

@@ -6,68 +6,54 @@ const InfoPanel = ({
   storageName, folderName, noteLink, updatedAt, createdAt, exportAsMd, exportAsTxt, wordCount, letterCount, type, print
 }) => (
   <div className='infoPanel' styleName='control-infoButton-panel' style={{display: 'none'}}>
-    <div styleName='group-section'>
+    <div>
-      <div styleName='group-section-label'>
+      <p styleName='modification-date'>{updatedAt}</p>
-        Storage
+      <p styleName='modification-date-desc'>MODIFICATION DATE</p>
-      </div>
-      <div styleName='group-section-control'>
-        {storageName}
-      </div>
-    </div>
-    <div styleName='group-section'>
-      <div styleName='group-section-label'>
-        Folder
-      </div>
-      <div styleName='group-section-control'>
-        {folderName}
-      </div>
-    </div>
-    <div styleName='group-section'>
-      <div styleName='group-section-label'>
-        Created
-      </div>
-      <div styleName='group-section-control'>
-        {createdAt}
-      </div>
-    </div>
-    <div styleName='group-section'>
-      <div styleName='group-section-label'>
-        Updated
-      </div>
-      <div styleName='group-section-control'>
-        {updatedAt}
-      </div>
-    </div>
-    <div styleName='group-section'>
-      <div styleName='group-section-label'>
-        Note Link
-      </div>
-      <div styleName='group-section-control'>
-        <input value={noteLink} onClick={(e) => { e.target.select() }} />
-      </div>
     </div>
+
+    <hr />
+
     {type === 'SNIPPET_NOTE'
       ? ''
-      : <div>
+      : <div styleName='count-wrap'>
-        <div styleName='group-section'>
+        <div styleName='count-number'>
-          <div styleName='group-section-label'>
+          <p styleName='infoPanel-defaul-count'>{wordCount}</p>
-            Words
+          <p styleName='infoPanel-sub-count'>Words</p>
-          </div>
-          <div styleName='group-section-control'>
-            {wordCount}
-          </div>
-        </div>
-        <div styleName='group-section'>
-          <div styleName='group-section-label'>
-            Letters
-          </div>
-          <div styleName='group-section-control'>
-            {letterCount}
         </div>
+        <div styleName='count-number'>
+          <p styleName='infoPanel-defaul-count'>{letterCount}</p>
+          <p styleName='infoPanel-sub-count'>Letters</p>
         </div>
       </div>
     }
 
+    {type === 'SNIPPET_NOTE'
+      ? ''
+      : <hr />
+    }
+
+    <div>
+      <p styleName='infoPanel-default'>{storageName}</p>
+      <p styleName='infoPanel-sub'>STORAGE</p>
+    </div>
+
+    <div>
+      <p styleName='infoPanel-default'>{folderName}</p>
+      <p styleName='infoPanel-sub'>FOLDER</p>
+    </div>
+
+    <div>
+      <p styleName='infoPanel-default'>{createdAt}</p>
+      <p styleName='infoPanel-sub'>CREATION DATE</p>
+    </div>
+
+    <div>
+      <input styleName='infoPanel-noteLink' value={noteLink} onClick={(e) => { e.target.select() }} />
+      <p styleName='infoPanel-sub'>NOTE LINK</p>
+    </div>
+
+    <hr />
+
     <div id='export-wrap'>
       <button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
         <i className='fa fa-file-code-o fa-fw' />

browser/main/Detail/InfoPanel.styl

@@ -10,52 +10,81 @@
 
 .control-infoButton-panel
   z-index 200
-  margin-top 45px
+  margin-top 0px
-  margin-left -210px
+  right 0
   position absolute
-  padding 20px 20px 0 20px
+  padding 20px 25px 0 25px
-  width 340px
+  width 300px
+  height 350px
+  overflow auto
   background-color $ui-noteList-backgroundColor
-  border 1px solid $border-color
+  box-shadow 2px 12px 15px 2px rgba(0, 0, 0, 0.1), 2px 1px 50px 2px rgba(0, 0, 0, 0.1)
+  border-radius 2px
+
+.modification-date
+  font-size 18px
+  line-height 30px
+  color $ui-text-color
+
+.modification-date-desc
+  font-size 18px
+  color $ui-inactive-text-color
 
 .control-infoButton-panel-trash
   z-index 200
-  margin-top 45px
+  margin-top 0px
-  margin-left -230px
+  right 0px
   position absolute
-  padding 20px 20px 0 20px
+  padding 20px 25px 0 25px
-  width 320px
+  width 300px
   background-color $ui-noteList-backgroundColor
-  border 1px solid $border-color
+  box-shadow 2px 12px 15px 2px rgba(0, 0, 0, 0.1), 2px 1px 50px 2px rgba(0, 0, 0, 0.1)
+  border-radius 2px
 
-.group-section
+.count-wrap 
 	display flex
+	position relative
+	width 100%
+
+.count-number 
+	position relative
+	display block
+	width 50%
+	overflow hidden
+	margin 0
+	padding 0
+
+.infoPanel-defaul-count
+  font-size 16px
   line-height 30px
-  font-size 13px
-
-.group-section-label
-  width 70px
-  height 20px
-  text-align left
-  margin-right 50px
-  font-size 13px
-  color $ui-inactive-text-color
-
-.group-section-control
-  flex 1
-  font-size 13px
   color $ui-text-color
 
-.group-section-control input
+.infoPanel-sub-count
-  width 160px
+  font-size 16px
-  height 25px
+  color $ui-inactive-text-color
+  padding-bottom 8px
 
-.group-section-control text
+.infoPanel-default
+  font-size 14px
+  line-height 30px
+  color $ui-text-color
+
+.infoPanel-sub
+  font-size 14px
+  color $ui-inactive-text-color
+  padding-bottom 8px
+
+.infoPanel-noteLink
+  padding-right 5px
+  width 200px
+  height 25px
+  margin-bottom 6px
+
+.infoPanel-trash
   color #EA4447		
   font-weight 600		
   font-size 14px
   width 70px
-  height 25px
   background-color rgba(226,33,113,0.1)
   border none		
   outline none
@@ -96,20 +125,30 @@
 body[data-theme="dark"]
   .control-infoButton-panel
     background-color $ui-dark-noteList-backgroundColor
-    border 1px solid $ui-dark-borderColor
 
   .control-infoButton-panel-trash
     background-color $ui-dark-noteList-backgroundColor
-    border 1px solid $ui-dark-borderColor
 
-  .group-section-label
+  .modification-date
-    color $ui-inactive-text-color
-
-  .group-section-control
     color $ui-dark-text-color
 
-  .group-section-control input
+  .modification-date-desc
-    background-color alpha($ui-dark-borderColor, 80%)
+    color $ui-inactive-text-color
+
+  .infoPanel-defaul-count
+    color $ui-dark-text-color
+
+  .infoPanel-sub-count
+    color $ui-inactive-text-color
+
+  .infoPanel-default
+    color $ui-dark-text-color
+
+  .infoPanel-sub
+    color $ui-inactive-text-color
+
+  .infoPanel-noteLink
+    background-color alpha($ui-dark-borderColor, 60%)
     color $ui-dark-text-color
 
   [id=export-wrap]

browser/main/Detail/InfoPanelTrashed.js

@@ -6,37 +6,26 @@ const InfoPanelTrashed = ({
   storageName, folderName, updatedAt, createdAt, exportAsMd, exportAsTxt
 }) => (
   <div className='infoPanel' styleName='control-infoButton-panel-trash' style={{display: 'none'}}>
-    <div styleName='group-section'>
+    <div>
-      <div styleName='group-section-label'>
+      <p styleName='modification-date'>{updatedAt}</p>
-        Storage
+      <p styleName='modification-date-desc'>MODIFICATION DATE</p>
     </div>
-      <div styleName='group-section-control'>
+
-        {storageName}
+    <hr />
+
+    <div>
+      <p styleName='infoPanel-default'>{storageName}</p>
+      <p styleName='infoPanel-sub'>STORAGE</p>
     </div>
+
+    <div>
+      <p styleName='infoPanel-default'><text styleName='infoPanel-trash'>Trash</text>{folderName}</p>
+      <p styleName='infoPanel-sub'>FOLDER</p>
     </div>
-    <div styleName='group-section'>
+
-      <div styleName='group-section-label'>
+    <div>
-        Folder
+      <p styleName='infoPanel-default'>{createdAt}</p>
-      </div>
+      <p styleName='infoPanel-sub'>CREATION DATE</p>
-      <div styleName='group-section-control'>
-        <text>Trash</text>{folderName}
-      </div>
-    </div>
-    <div styleName='group-section'>
-      <div styleName='group-section-label'>
-        Created
-      </div>
-      <div styleName='group-section-control'>
-        {createdAt}
-      </div>
-    </div>
-    <div styleName='group-section'>
-      <div styleName='group-section-label'>
-        Updated
-      </div>
-      <div styleName='group-section-control'>
-        {updatedAt}
-      </div>
     </div>
 
     <div id='export-wrap'>

browser/main/Detail/MarkdownNoteDetail.js

@@ -9,12 +9,13 @@ import FolderSelect from './FolderSelect'
 import dataApi from 'browser/main/lib/dataApi'
 import { hashHistory } from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
-import markdown from 'browser/lib/markdown'
+import markdown from 'browser/lib/markdownTextHelper'
 import StatusBar from '../StatusBar'
 import _ from 'lodash'
 import { findNoteTitle } from 'browser/lib/findNoteTitle'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import TrashButton from './TrashButton'
+import PermanentDeleteButton from './PermanentDeleteButton'
 import InfoButton from './InfoButton'
 import InfoPanel from './InfoPanel'
 import InfoPanelTrashed from './InfoPanelTrashed'
@@ -231,7 +232,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   getToggleLockButton () {
-    return this.state.isLocked ? 'fa-lock' : 'fa-unlock'
+    return this.state.isLocked ? '../resources/icon/icon-lock.svg' : '../resources/icon/icon-unlock.svg'
   }
 
   handleDeleteKeyDown (e) {
@@ -285,7 +286,7 @@ class MarkdownNoteDetail extends React.Component {
         />
       </div>
       <div styleName='info-right'>
-        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+        <PermanentDeleteButton onClick={(e) => this.handleTrashButtonClick(e)} />
         <InfoButton
           onClick={(e) => this.handleInfoButtonClick(e)}
         />
@@ -302,10 +303,6 @@ class MarkdownNoteDetail extends React.Component {
 
     const detailTopBar = <div styleName='info'>
       <div styleName='info-left'>
-        <StarButton styleName='info-left-button'
-          onClick={(e) => this.handleStarButtonClick(e)}
-          isActive={note.isStarred}
-        />
         <div styleName='info-left-top'>
           <FolderSelect styleName='info-left-top-folderSelect'
             value={this.state.note.storage + '-' + this.state.note.folder}
@@ -325,31 +322,38 @@ class MarkdownNoteDetail extends React.Component {
         />
       </div>
       <div styleName='info-right'>
+        <InfoButton
+          onClick={(e) => this.handleInfoButtonClick(e)}
+        />
+
+        <StarButton
+          onClick={(e) => this.handleStarButtonClick(e)}
+          isActive={note.isStarred}
+        />
+
         {(() => {
-          const faClassName = `fa ${this.getToggleLockButton()}`
+          const imgSrc = `${this.getToggleLockButton()}`
           const lockButtonComponent =
             <button styleName='control-lockButton'
               onFocus={(e) => this.handleFocus(e)}
               onMouseDown={(e) => this.handleLockButtonMouseDown(e)}
             >
-              <i className={faClassName} styleName='lock-button' />
+              <img styleName='iconInfo' src={imgSrc} />
-              <span styleName='control-lockButton-tooltip'>
-                {this.state.isLocked ? 'Unlock Editor' : 'Keep Editor Locked'}
-              </span>
             </button>
+
           return (
             this.state.isLockButtonShown ? lockButtonComponent : ''
           )
         })()}
-        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+
         <button styleName='control-fullScreenButton'
           onMouseDown={(e) => this.handleFullScreenButton(e)}
         >
-          <i className='fa fa-window-maximize' styleName='fullScreen-button' />
+          <img styleName='iconInfo' src='../resources/icon/icon-sidebar.svg' />
         </button>
-        <InfoButton
+
-          onClick={(e) => this.handleInfoButtonClick(e)}
+        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
-        />
+
         <InfoPanel
           storageName={currentOption.storage.name}
           folderName={currentOption.folder.name}

browser/main/Detail/MarkdownNoteDetail.styl

@@ -3,50 +3,48 @@
 
 .root
   absolute top right bottom
-  border-width 0 0 1px
+  border-left 1px solid alpha(#DEDEDE, 60%)
-  border-style solid
-  border-color $ui-borderColor
   background-color $ui-noteDetail-backgroundColor
-  box-shadow $note-detail-box-shadow
+  box-shadow none
+  padding 20px 40px
 
 .lock-button
   padding-bottom 3px
 
 .control-lockButton
+  top 160px
+  margin-bottom 10px
   topBarButtonLight()
 
-.control-lockButton-tooltip
+.trashed-infopanel
-  tooltip()
+  top 40px
-  position fixed
+  position relative
-  pointer-events none
-  top 50px
-  z-index 200
-  padding 5px
-  line-height normal
-  border-radius 2px
-  opacity 0
-  transition 0.1s
 
 .control-fullScreenButton
-  float right
+  top 80px
-  padding 0 0 2px 0
   topBarButtonLight()
 
 .body
   absolute left right
-  left $note-detail-left-margin
+  left 0
-  right $note-detail-right-margin
+  right 0
   top $info-height + $info-margin-under-border
   bottom $statusBar-height
-
+  max-width 600px
+  margin 0 auto
 .body-noteEditor
   absolute top bottom left right
 
+body[data-theme="white"]
+  .root
+    box-shadow $note-detail-box-shadow
+    border none
+
 body[data-theme="dark"]
   .root
-    border-color $ui-dark-borderColor
     background-color $ui-dark-noteDetail-backgroundColor
     box-shadow none
+    border none
 
   .control-lockButton
     topBarButtonDark()

browser/main/Detail/NoteDetailInfo.styl

@@ -1,33 +1,31 @@
 @import('DetailVars')
 
-$info-height = 60px
+$info-height = 50px
-$info-margin-under-border = 27px
+$info-margin-under-border = 30px
 
 .info
   absolute top left right
-  left $note-detail-left-margin
+  left 0
-  right $note-detail-right-margin
+  right 0
   height $info-height
-  border-bottom $ui-border
+  border-bottom 1px solid #eee
   background-color $ui-noteDetail-backgroundColor
+  width 100%
+  display flex
+  align-items center
 
 .info-left
-  float left
+  padding 0 10px
-  padding 0 5px
+  width 100%
-  margin 0px 2px
+  display flex
-.info-left-top
+  align-items center
-  display inline-block
+
-  height $info-height
-  line-height $info-height
 
 .info-left-top-folderSelect
-  padding 0 3px
-  height 34px
-  line-height 26px
   display flex
   align-items center
   justify-content center
-  border-radius 3px
+
 .info-left-button
   width 34px
   height 34px
@@ -48,18 +46,18 @@ $info-margin-under-border = 27px
 
 .info-right
   position absolute
-  right 0
+  right 40px
-  top 0
+  top 60px
-  background $ui-noteDetail-backgroundColor
   bottom 1px
   padding-left 30px
+  z-index 101
 
 .undo-button
   width 34px
   height 34px
   border-radius 17px
   font-size 14px
-  margin 15px 7px
+  margin 5px 0px
   border none
   color $ui-button-color
   display flex
@@ -72,6 +70,7 @@ $info-margin-under-border = 27px
     border-color $ui-button--active-backgroundColor
   &:hover
     background-color alpha($ui-button--hover-backgroundColor, 60%)
+    transition 0.2s
     .control-lockButton-tooltip
       opacity 1
 

browser/main/Detail/PermanentDeleteButton.js

@@ -0,0 +1,19 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './TrashButton.styl'
+
+const PermanentDeleteButton = ({
+  onClick
+}) => (
+  <button styleName='control-trashButton--in-trash'
+    onClick={(e) => onClick(e)}
+  >
+    <img styleName='iconInfo' src='../resources/icon/icon-trash.svg' />
+  </button>
+)
+
+PermanentDeleteButton.propTypes = {
+  onClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(PermanentDeleteButton, styles)

browser/main/Detail/SnippetNoteDetail.js

@@ -18,6 +18,7 @@ import _ from 'lodash'
 import { findNoteTitle } from 'browser/lib/findNoteTitle'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import TrashButton from './TrashButton'
+import PermanentDeleteButton from './PermanentDeleteButton'
 import InfoButton from './InfoButton'
 import InfoPanel from './InfoPanel'
 import InfoPanelTrashed from './InfoPanelTrashed'
@@ -566,7 +567,7 @@ class SnippetNoteDetail extends React.Component {
         />
       </div>
       <div styleName='info-right'>
-        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+        <PermanentDeleteButton onClick={(e) => this.handleTrashButtonClick(e)} />
         <InfoButton
           onClick={(e) => this.handleInfoButtonClick(e)}
         />
@@ -583,10 +584,6 @@ class SnippetNoteDetail extends React.Component {
 
     const detailTopBar = <div styleName='info'>
       <div styleName='info-left'>
-        <StarButton styleName='info-left-button'
-          onClick={(e) => this.handleStarButtonClick(e)}
-          isActive={note.isStarred}
-        />
         <div styleName='info-left-top'>
           <FolderSelect styleName='info-left-top-folderSelect'
             value={this.state.note.storage + '-' + this.state.note.folder}
@@ -603,15 +600,21 @@ class SnippetNoteDetail extends React.Component {
         />
       </div>
       <div styleName='info-right'>
-        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
-        <button styleName='control-fullScreenButton'
-          onMouseDown={(e) => this.handleFullScreenButton(e)}
-        >
-          <i className='fa fa-window-maximize' styleName='fullScreen-button' />
-        </button>
         <InfoButton
           onClick={(e) => this.handleInfoButtonClick(e)}
         />
+
+        <StarButton
+          onClick={(e) => this.handleStarButtonClick(e)}
+          isActive={note.isStarred}
+        />
+
+        <button styleName='control-fullScreenButton'
+          onMouseDown={(e) => this.handleFullScreenButton(e)}>
+          <img styleName='iconInfo' src='../resources/icon/icon-sidebar.svg' />
+        </button>
+
+        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
         <InfoPanel
           storageName={currentOption.storage.name}
           folderName={currentOption.folder.name}

browser/main/Detail/SnippetNoteDetail.styl

@@ -3,16 +3,14 @@
 
 .root
   absolute top bottom right
-  border-width 0 0 1px
+  border-left 1px solid alpha(#DEDEDE, 60%)
-  border-style solid
-  border-color $ui-borderColor
   background-color $ui-noteDetail-backgroundColor
-  box-shadow $note-detail-box-shadow
+  box-shadow none
 
 .body
   absolute left right
-  left $note-detail-left-margin
+  left $snippet-note-detail-left-margin
-  right $note-detail-right-margin
+  right $snippet-note-detail-right-margin
   top $info-height + $info-margin-under-border
   bottom $statusBar-height
   background-color $ui-noteDetail-backgroundColor
@@ -45,7 +43,7 @@
   overflow hidden
 
 .tabList .plusButton
-  navButtonColor()
+  navWhiteButtonColor()
   width 30px
 
 .tabView
@@ -57,24 +55,30 @@
 
 .override
   absolute bottom left
-  bottom 30px
+  bottom 1px
   left 60px
-  height 23px
   z-index 101
   button
     navButtonColor()
-    height 24px
+    padding 0 6px
+    &:hover
+      color $ui-active-color
     &:active .update-icon
-      color white
+      color $ui-active-color
 
 .control-fullScreenButton
-  float right
+  top 80px
-  padding 0 0 2px 0
+  margin-bottom 10px
   topBarButtonLight()
 
+body[data-theme="white"]
+  .root
+    box-shadow $note-detail-box-shadow
+    border none
+
 body[data-theme="dark"]
   .root
-    border-color $ui-dark-borderColor
+    border none
     background-color $ui-dark-noteDetail-backgroundColor
     box-shadow none
 

browser/main/Detail/StarButton.js

@@ -47,10 +47,10 @@ class StarButton extends React.Component {
         onMouseLeave={(e) => this.handleMouseLeave(e)}
         onClick={this.props.onClick}
       >
-        <i styleName='icon'
+        <img styleName='icon'
-          className={this.state.isActive || this.props.isActive
+          src={this.state.isActive || this.props.isActive
-            ? 'fa fa-star'
+            ? '../resources/icon/icon-starred.svg'
-            : 'fa fa-star-o'
+            : '../resources/icon/icon-star.svg'
           }
         />
       </button>

browser/main/Detail/StarButton.styl

@@ -1,47 +1,24 @@
 .root
-  left 7px
+  top 45px
-  top 0
+  topBarButtonLight()
-  padding 0
-  color alpha($ui-favorite-star-button-color, 60%)
   &:hover
-    transition 0.15s
+    transition 0.2s
-    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color alpha($ui-favorite-star-button-color, 0.6)
-    color $ui-favorite-star-button-color
-  &:active
-    transition 0.15s
-    background-color alpha($ui-button--active-backgroundColor, 40%)
-    color $ui-favorite-star-button-color
 
 .root--active
   @extend .root
+  transition 0.15s
   color $ui-favorite-star-button-color
   &:hover
-    transition 0.15s
+    transition 0.2s
-    color $ui-favorite-star-button-color
+    color alpha($ui-favorite-star-button-color, 0.6)
-    background-color alpha($ui-button--active-backgroundColor, 40%)
-  &:active
-    transition 0.15s
-    color $ui-favorite-star-button-color
-    background-color alpha($ui-button--active-backgroundColor, 40%)
 
 .icon
   transition transform 0.15s
 
 body[data-theme="dark"]
   .root
+    topBarButtonDark()
     &:hover
-      transition 0.15s
+      transition 0.2s
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color alpha($ui-favorite-star-button-color, 0.6)
-      color $ui-favorite-star-button-color
-    &:active
-      transition 0.15s
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
-      color $ui-favorite-star-button-color
-
-  .root--active
-    @extend .root
-    color $ui-favorite-star-button-color
-    &:hover
-      transition 0.15s
-      color $ui-favorite-star-button-color
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)

browser/main/Detail/TagSelect.js

@@ -113,7 +113,7 @@ class TagSelect extends React.Component {
             <button styleName='tag-removeButton'
               onClick={(e) => this.handleTagRemoveButtonClick(tag)(e)}
             >
-              <i className='fa fa-times fa-fw tag-removeButton-icon' />
+              <img className='tag-removeButton-icon' src='../resources/icon/icon-x.svg' width='8px' />
             </button>
           </span>
         )

browser/main/Detail/TagSelect.styl

@@ -1,9 +1,9 @@
 .root
-  display inline-block
+  display flex
+  align-items center
   user-select none
-  height 23px
   vertical-align middle
-  width 300px
+  width 100%
   overflow-x scroll
   white-space nowrap
 
@@ -11,51 +11,42 @@
   display none
 
 .tag
-  display inline-block
+  display flex
-  margin 1px 3px
+  align-items center
-  padding 0
+  margin 0px 2px
-  height 20px
+  padding 2px 4px
-  background-color alpha($ui-tag-backgroundColor, 10%)
+  background-color alpha($ui-tag-backgroundColor, 3%)
-  border-radius 3px
+  border-radius 4px
-  overflow hidden
+  position relative
   clearfix()
 
 .tag-removeButton
-  float right
-  height 20px
-  width 18px
   margin 0
   padding 0
   border-style solid
   border-width 0
   border-radius 20px
-  line-height 18px
   background-color transparent
   color $ui-button-color
+  position absolute
+  right 6px
 
 .tag-removeButton-icon
   width 5px
   padding-right 4px
 
 .tag-label
-  font-size 11px
+  font-size 13px
-  font-weight 600
+  color: $ui-text-color
-  color: alpha($ui-text-color, 80%)
+  padding 4px 16px 4px 8px
-  float left
-  height 20px
-  line-height 20px
-  padding 0 6px
 
 .newTag
-  display inline-block
-  margin 2px 0 15px 2px
-  vertical-align middle
-  height 18px
   box-sizing border-box
   border none
   background-color transparent
   outline none
   padding 0 4px
+  font-size 13px
 
 body[data-theme="dark"]
   .tag

browser/main/Detail/TrashButton.js

@@ -8,7 +8,7 @@ const TrashButton = ({
   <button styleName='control-trashButton'
     onClick={(e) => onClick(e)}
   >
-    <i className='fa fa-trash trashButton' styleName='info-button' />
+    <img styleName='iconInfo' src='../resources/icon/icon-trash.svg' />
   </button>
 )
 

browser/main/Detail/TrashButton.styl

@@ -1,10 +1,14 @@
 .control-trashButton
-  float right
+  top 120px
+  margin-bottom 10px
+  topBarButtonLight()
+
+.control-trashButton--in-trash
+  top 60px
   topBarButtonLight()
 
 .trashButton
   padding 0px
-  margin 15px 0
 
 body[data-theme="dark"]
   .control-trashButton

browser/main/Main.js

@@ -11,14 +11,8 @@ import _ from 'lodash'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import modal from 'browser/main/lib/modal'
 import InitModal from 'browser/main/modals/InitModal'
-import mixpanel from 'browser/main/lib/mixpanel'
 import mobileAnalytics from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import eventEmitter from 'browser/main/lib/eventEmitter'
-import RealtimeNotification from 'browser/components/RealtimeNotification'
-
-function focused () {
-  mixpanel.track('MAIN_FOCUSED')
-}
 
 class Main extends React.Component {
 
@@ -58,6 +52,8 @@ class Main extends React.Component {
 
     if (config.ui.theme === 'dark') {
       document.body.setAttribute('data-theme', 'dark')
+    } else if (config.ui.theme === 'white') {
+      document.body.setAttribute('data-theme', 'white')
     } else {
       document.body.setAttribute('data-theme', 'default')
     }
@@ -77,11 +73,9 @@ class Main extends React.Component {
       })
 
     eventEmitter.on('editor:fullscreen', this.toggleFullScreen)
-    window.addEventListener('focus', focused)
   }
 
   componentWillUnmount () {
-    window.removeEventListener('focus', focused)
     eventEmitter.off('editor:fullscreen', this.toggleFullScreen)
   }
 
@@ -192,14 +186,6 @@ class Main extends React.Component {
 
     // the width of the navigation bar when it is folded/collapsed
     const foldedNavigationWidth = 44
-    let notificationBarOffsetLeft
-    if (this.state.fullScreen) {
-      notificationBarOffsetLeft = 0
-    } else if (config.isSideNavFolded) {
-      notificationBarOffsetLeft = foldedNavigationWidth
-    } else {
-      notificationBarOffsetLeft = this.state.navWidth
-    }
 
     return (
       <div
@@ -268,9 +254,6 @@ class Main extends React.Component {
             ignorePreviewPointerEvents={this.state.isRightSliderFocused}
           />
         </div>
-        <RealtimeNotification
-          style={{left: notificationBarOffsetLeft}}
-        />
       </div>
     )
   }

browser/main/NewNoteButton/NewNoteButton.styl

@@ -44,6 +44,13 @@ $control-height = 34px
   opacity 0
   transition 0.1s
 
+body[data-theme="white"]
+  .root, .root--expanded
+    background-color $ui-white-noteList-backgroundColor
+
+  .control-newNoteButton
+    background-color $ui-white-noteList-backgroundColor
+
 body[data-theme="dark"]
   .root, .root--expanded
     background-color $ui-dark-noteList-backgroundColor

browser/main/NewNoteButton/index.js

@@ -85,7 +85,7 @@ class NewNoteButton extends React.Component {
         <div styleName='control'>
           <button styleName='control-newNoteButton'
             onClick={(e) => this.handleNewNoteButtonClick(e)}>
-            <i className='fa fa-pencil-square-o' />
+            <img styleName='iconTag' src='../resources/icon/icon-newnote.svg' />
             <span styleName='control-newNoteButton-tooltip'>
               Make a Note {OSX ? '⌘' : '^'} + n
             </span>

browser/main/NoteList/NoteList.styl

@@ -2,7 +2,6 @@ $control-height = 30px
 
 .root
   absolute left bottom
-  bottom 30px
   top $topBar-height - 1
   background-color $ui-noteList-backgroundColor
 
@@ -22,14 +21,14 @@ $control-height = 30px
 
 .control-sortBy-select
   appearance: none;
-  margin-left 3px
+  margin-left 5px
   color $ui-inactive-text-color
   padding 0
   border none
   background-color transparent
   outline none
   cursor pointer
-  font-size 11px
+  font-size 12px
   &:hover
     transition 0.2s
     color $ui-text-color
@@ -60,6 +59,13 @@ $control-height = 30px
   top $control-height
   overflow auto
 
+body[data-theme="white"]
+  .root
+    background-color $ui-white-noteList-backgroundColor
+
+  .control
+    background-color $ui-white-noteList-backgroundColor
+
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor

browser/main/NoteList/index.js

@@ -285,11 +285,18 @@ class NoteList extends React.Component {
   }
 
   sortByPin (unorderedNotes) {
-    const pinnedNotes = unorderedNotes.filter((note) => {
+    const pinnedNotes = []
-      return note.isPinned
+    const unpinnedNotes = []
+
+    unorderedNotes.forEach((note) => {
+      if (note.isPinned) {
+        pinnedNotes.push(note)
+      } else {
+        unpinnedNotes.push(note)
+      }
     })
 
-    return pinnedNotes.concat(unorderedNotes)
+    return pinnedNotes.concat(unpinnedNotes)
   }
 
   handleNoteClick (e, uniqueKey) {
@@ -351,19 +358,23 @@ class NoteList extends React.Component {
 
   handleNoteContextMenu (e, uniqueKey) {
     const { location } = this.props
-    const targetIndex = this.getTargetIndex()
+    const note = this.notes.find((note) => {
-    let note = this.notes[targetIndex]
+      const noteKey = `${note.storage}-${note.key}`
-    const label = note.isPinned ? 'Remove pin' : 'Pin to Top'
+      return noteKey === uniqueKey
+    })
 
-    let menu = new Menu()
+    const pinLabel = note.isPinned ? 'Remove pin' : 'Pin to Top'
+    const deleteLabel = 'Delete Note'
+
+    const menu = new Menu()
     if (!location.pathname.match(/\/home|\/starred|\/trash/)) {
       menu.append(new MenuItem({
-        label: label,
+        label: pinLabel,
         click: (e) => this.pinToTop(e, uniqueKey)
       }))
     }
     menu.append(new MenuItem({
-      label: 'Delete Note',
+      label: deleteLabel,
       click: (e) => this.deleteNote(e, uniqueKey)
     }))
     menu.popup()
@@ -377,6 +388,7 @@ class NoteList extends React.Component {
     const currentStorage = data.storageMap.get(storageKey)
     const currentFolder = _.find(currentStorage.folders, {key: folderKey})
 
+    this.handleNoteClick(e, uniqueKey)
     const targetIndex = this.getTargetIndex()
     let note = this.notes[targetIndex]
     note.isPinned = !note.isPinned
@@ -421,11 +433,7 @@ class NoteList extends React.Component {
   // Add notes to the current folder
   addNotesFromFiles (filepaths) {
     const { dispatch, location } = this.props
-
+    const { storage, folder } = this.resolveTargetFolder()
-    const targetIndex = this.getTargetIndex()
-
-    const storageKey = this.notes[targetIndex].storage
-    const folderKey = this.notes[targetIndex].folder
 
     if (filepaths === undefined) return
     filepaths.forEach((filepath) => {
@@ -434,11 +442,11 @@ class NoteList extends React.Component {
         const content = data.toString()
         const newNote = {
           content: content,
-          folder: folderKey,
+          folder: folder.key,
           title: markdown.strip(findNoteTitle(content)),
           type: 'MARKDOWN_NOTE'
         }
-        dataApi.createNote(storageKey, newNote)
+        dataApi.createNote(storage.key, newNote)
         .then((note) => {
           dispatch({
             type: 'UPDATE_NOTE',
@@ -461,6 +469,36 @@ class NoteList extends React.Component {
     return targetIndex
   }
 
+  resolveTargetFolder () {
+    const { data, params } = this.props
+    let storage = data.storageMap.get(params.storageKey)
+
+    // Find first storage
+    if (storage == null) {
+      for (let kv of data.storageMap) {
+        storage = kv[1]
+        break
+      }
+    }
+
+    if (storage == null) this.showMessageBox('No storage for importing note(s)')
+    const folder = _.find(storage.folders, {key: params.folderKey}) || storage.folders[0]
+    if (folder == null) this.showMessageBox('No folder for importing note(s)')
+
+    return {
+      storage,
+      folder
+    }
+  }
+
+  showMessageBox (message) {
+    dialog.showMessageBox(remote.getCurrentWindow(), {
+      type: 'warning',
+      message: message,
+      buttons: ['OK']
+    })
+  }
+
   render () {
     let { location, notes, config, dispatch } = this.props
     let sortFunc = config.sortBy === 'CREATED_AT'
@@ -476,6 +514,25 @@ class NoteList extends React.Component {
       if (note.isTrashed !== true || location.pathname === '/trashed') return true
     })
 
+    moment.locale('en', {
+      relativeTime: {
+        future: 'in %s',
+        past: '%s ago',
+        s: '%ds',
+        ss: '%ss',
+        m: '1m',
+        mm: '%dm',
+        h: 'an hour',
+        hh: '%dh',
+        d: '1d',
+        dd: '%dd',
+        M: '1M',
+        MM: '%dM',
+        y: '1Y',
+        yy: '%dY'
+      }
+    })
+
     let noteList = notes
       .map(note => {
         if (note == null) {
@@ -487,7 +544,7 @@ class NoteList extends React.Component {
         const dateDisplay = moment(
           config.sortBy === 'CREATED_AT'
             ? note.createdAt : note.updatedAt
-        ).fromNow()
+        ).fromNow('D')
         const key = `${note.storage}-${note.key}`
 
         if (isDefault) {
@@ -510,6 +567,7 @@ class NoteList extends React.Component {
             isActive={isActive}
             note={note}
             key={key}
+            handleNoteContextMenu={this.handleNoteContextMenu.bind(this)}
             handleNoteClick={this.handleNoteClick.bind(this)}
             handleDragStart={this.handleDragStart.bind(this)}
           />
@@ -541,7 +599,7 @@ class NoteList extends React.Component {
               }
               onClick={(e) => this.handleListStyleButtonClick(e, 'DEFAULT')}
             >
-              <i className='fa fa-th-large' />
+              <img styleName='iconTag' src='../resources/icon/icon-column.svg' />
             </button>
             <button styleName={config.listStyle === 'SMALL'
                 ? 'control-button--active'
@@ -549,7 +607,7 @@ class NoteList extends React.Component {
               }
               onClick={(e) => this.handleListStyleButtonClick(e, 'SMALL')}
             >
-              <i className='fa fa-list-ul' />
+              <img styleName='iconTag' src='../resources/icon/icon-column-list.svg' />
             </button>
           </div>
         </div>

browser/main/SideNav/SideNav.styl

@@ -1,7 +1,7 @@
 .root
   absolute top left bottom
   width $sideNav-width
-  background-color #f9f9f9
+  background-color #2E3235
   user-select none
   color $ui-text-color
   height: 100vh
@@ -11,42 +11,41 @@
 .top
   padding-bottom 15px
 
-.top-menu
+.top-menu-preference
   navButtonColor()
   position absolute
   top 22px
-  right 5px
+  right 10px
-  height 23px
   width 2em
+  background-color transparent
   &:hover
-    color $ui-text-color
+    color $ui-button-default--active-backgroundColor
+    background-color transparent
   &:active, &:active:hover
-    color $ui-text-color
+    color $ui-button-default--active-backgroundColor
-    background-color alpha($ui-button--active-backgroundColor, 20%)
 
 .switch-buttons
   background-color transparent
-  border 1px solid $ui-borderColor
+  border 0
-  width 110px
+  margin 24px auto 4px 14px
-  height 25px
+  display flex
-  margin 20px auto 0px auto
+  text-align center
-  border-radius 1px
 
 .non-active-button
-  navButtonColor()
+  color $ui-inactive-text-color
-  font-weight 600
+  font-size 16px
-  width 54px
+  border 0
-  height 23px
+  background-color transparent
+  transition 0.2s
+  display flex
+  text-align center
+  margin-right 4px;
+  &:hover
+    color alpha(#239F86, 60%)
 
 .active-button
   @extend .non-active-button
-  background-color $ui-button--active-backgroundColor
+  color $ui-button-default--active-backgroundColor
-  color $ui-text-color
-  &:hover
-    background-color alpha($ui-button--active-backgroundColor, 70%)
-    color alpha($ui-text-color, 70%)
-  &:active, &:active:hover
-    background-color $ui-button--active-backgroundColor
   
 .top-menu-label
   margin-left 5px
@@ -62,7 +61,7 @@
   padding-left 15px
   padding-bottom 13px
   p
-    color $ui-text-color
+    color $ui-button-default-color
 
 .tagList
   overflow-y auto
@@ -71,6 +70,7 @@
 .root--folded
   height 100vh
   width $sideNav--folded-width
+  background-color #2E3235
   .switch-buttons
     display none
   .top
@@ -93,14 +93,48 @@
     opacity 0
     margin-left 0
     overflow hidden
-    background-color $ui-tooltip-backgroundColor
     z-index 10
     color white
     line-height 30px
     border-top-right-radius 2px
     border-bottom-right-radius 2px
     pointer-events none
-    font-size 12px
+    font-size 13px
+  .top-menu-preference
+    position absolute
+    left 11px
+
+body[data-theme="white"]
+  .root, .root--folded
+    background-color #f9f9f9
+    color $ui-text-color
+
+  .top-menu-preference
+    navWhiteButtonColor()
+    background-color transparent
+    &:hover
+      color #0B99F1
+      background-color transparent
+    &:active, &:active:hover
+      color #0B99F1
+      background-color transparent
+
+  .non-active-button
+    color $ui-inactive-text-color
+    &:hover
+      color alpha(#0B99F1, 60%)
+
+  .tag-title
+    p
+      color $ui-text-color
+
+  .non-active-button
+    &:hover
+      color alpha(#0B99F1, 60%)
+
+  .active-button
+    @extend .non-active-button
+    color #0B99F1
 
 body[data-theme="dark"]
   .root, .root--folded
@@ -111,32 +145,20 @@ body[data-theme="dark"]
   .top
     border-color $ui-dark-borderColor
 
-  .top-menu
+  .top-menu-preference
     navDarkButtonColor()
+    background-color transparent
     &:active
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      background-color transparent
     &:hover
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
-
+      background-color transparent
-  .switch-buttons
-    border-color $ui-dark-borderColor
 
   .non-active-button
-    navDarkButtonColor()
+    color alpha($ui-dark-text-color, 60%)
-
-  .active-button
-    @extend .non-active-button
-    background-color $ui-dark-button--active-backgroundColor
-    color $ui-dark-text-color
     &:hover
-      background-color alpha($ui-dark-button--active-backgroundColor, 70%)
+      color alpha(#0B99F1, 60%)
-      color alpha($ui-dark-text-color, 70%)
-    &:active
-      color $ui-dark-text-color
-      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
-    &:active, &:active:hover
-      color $ui-dark-text-color
-      background-color $ui-dark-button--active-backgroundColor
 
   .tag-title
     p

browser/main/SideNav/StorageItem.js

@@ -226,9 +226,9 @@ class StorageItem extends React.Component {
           <button styleName='header-toggleButton'
             onMouseDown={(e) => this.handleToggleButtonClick(e)}
           >
-            <i className={this.state.isOpen
+            <img src={this.state.isOpen
-                ? 'fa fa-caret-down'
+                ? '../resources/icon/icon-down.svg'
-                : 'fa fa-caret-right'
+                : '../resources/icon/icon-right.svg'
               }
             />
           </button>
@@ -237,7 +237,7 @@ class StorageItem extends React.Component {
             <button styleName='header-addFolderButton'
               onClick={(e) => this.handleAddFolderButtonClick(e)}
             >
-              <i className='fa fa-plus' />
+              <img styleName='iconTag' src='../resources/icon/icon-plus.svg' />
             </button>
           }
 

browser/main/SideNav/StorageItem.styl

@@ -5,27 +5,23 @@
 
 .header
   position relative
-  height 25px
+  height 36px
   width 100%
   margin-bottom 5px
   transition 0.15s
+  display flex
+  align-items center
 
 .header--active
   margin-bottom 5px
-  background-color $ui-button--active-backgroundColor
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
   transition color background-color  0.15s
-
+  display flex
-.header--active
+  align-items center
   .header-toggleButton
-    color $ui-text-color
-
-.header--active
   .header-info
-    color $ui-text-color
-
-.header--active
   .header-addFolderButton
-    color $ui-text-color
+    color #1EC38B
 
 .header-toggleButton
   navButtonColor()
@@ -38,23 +34,31 @@
   border-radius 50%
   &:hover
     transition 0.2s
-    background-color alpha($ui-button--active-backgroundColor, 40%)
+    background-color alpha($ui-button-default--hover-backgroundColor, 40%)
     color $ui-text-color
 
 .header-info
   navButtonColor()
   display block
   width 100%
-  height 25px
+  height 36px
-  padding-left 23px
+  padding-left 25px
-  padding-right 10px
+  padding-right 15px
   line-height 22px
   cursor pointer
-  font-size 13px
+  font-size 14px
   border none
   overflow ellipsis
   text-align left
-  background-color alpha($ui-button--active-backgroundColor, 20%)
+  font-weight 600;
+  background-color transparent
+  &:hover
+    color #1EC38B
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
+    transition background-color 0.15s
+  &:active, &:active:hover
+    color #1EC38B
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
 
 .header-info-path
   font-size 10px
@@ -63,17 +67,14 @@
 .header-addFolderButton
   navButtonColor()
   position absolute
-  right 0
+  right 7px
   width 25px
   height 25px
   padding 0
   border none
-  margin-right 5px
   border-radius 50%
   &:hover
     transition 0.2s
-    background-color alpha($ui-button--active-backgroundColor, 40%)
-    color $ui-text-color
 
 .root--folded
   @extend .root
@@ -102,6 +103,33 @@
     font-size 10px
     margin 0 5px
 
+body[data-theme="white"]
+  .header--active
+    background-color $ui-button--active-backgroundColor
+    transition color background-color  0.15s
+    .header-toggleButton
+      color $ui-text-color
+    .header-info
+      color $ui-text-color
+    .header-addFolderButton
+      color $ui-text-color
+
+  .header-toggleButton
+    navWhiteButtonColor()
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 40%)
+      color $ui-text-color
+
+  .header-info
+    navWhiteButtonColor()
+    background-color alpha($ui-button--active-backgroundColor, 20%)
+
+  .header-addFolderButton
+    navWhiteButtonColor()
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 40%)
+      color $ui-text-color
+
 body[data-theme="dark"]
   .header--active
     background-color $ui-dark-button--active-backgroundColor

browser/main/SideNav/index.js

@@ -9,9 +9,19 @@ import TagListItem from 'browser/components/TagListItem'
 import SideNavFilter from 'browser/components/SideNavFilter'
 import StorageList from 'browser/components/StorageList'
 import NavToggleButton from 'browser/components/NavToggleButton'
+import EventEmitter from 'browser/main/lib/eventEmitter'
 
 class SideNav extends React.Component {
   // TODO: should not use electron stuff v0.7
+
+  componentDidMount () {
+    EventEmitter.on('side:preferences', this.handleMenuButtonClick)
+  }
+
+  componentWillUnmount () {
+    EventEmitter.off('side:preferences', this.handleMenuButtonClick)
+  }
+
   handleMenuButtonClick (e) {
     openModal(PreferencesModal)
   }
@@ -72,6 +82,9 @@ class SideNav extends React.Component {
             isTrashedActive={isTrashedActive}
             handleStarredButtonClick={(e) => this.handleStarredButtonClick(e)}
             handleTrashedButtonClick={(e) => this.handleTrashedButtonClick(e)}
+            counterTotalNote={data.noteMap._map.size}
+            counterStarredNote={data.starredSet._set.size}
+            counterDelNote={data.trashedSet._set.size}
           />
 
           <StorageList storageList={storageList} />
@@ -104,13 +117,19 @@ class SideNav extends React.Component {
         <TagListItem
           name={tag}
           handleClickTagListItem={this.handleClickTagListItem.bind(this)}
-          isActive={!!location.pathname.match(tag)}
+          isActive={this.getTagActive(location.pathname, tag)}
           key={tag}
         />
       ))
     )
   }
 
+  getTagActive (path, tag) {
+    const pathSegments = path.split('/')
+    const pathTag = pathSegments[pathSegments.length - 1]
+    return pathTag === tag
+  }
+
   handleClickTagListItem (name) {
     const { router } = this.context
     router.push(`/tags/${name}`)
@@ -142,15 +161,26 @@ class SideNav extends React.Component {
       >
         <div styleName='top'>
           <div styleName='switch-buttons'>
-            <button styleName={isTagActive ? 'non-active-button' : 'active-button'} onClick={this.handleSwitchFoldersButtonClick.bind(this)}>Folders</button>
+            <button styleName={isTagActive ? 'non-active-button' : 'active-button'} onClick={this.handleSwitchFoldersButtonClick.bind(this)}>
-            <button styleName={isTagActive ? 'active-button' : 'non-active-button'} onClick={this.handleSwitchTagsButtonClick.bind(this)}>Tags</button>
+              <img src={isTagActive
+                  ? '../resources/icon/icon-list.svg'
+                  : '../resources/icon/icon-list-active.svg'
+                }
+              />
+            </button>
+            <button styleName={isTagActive ? 'active-button' : 'non-active-button'} onClick={this.handleSwitchTagsButtonClick.bind(this)}>
+              <img src={isTagActive
+                  ? '../resources/icon/icon-tag-active.svg'
+                  : '../resources/icon/icon-tag.svg'
+                }
+              />
+            </button>
           </div>
           <div>
-            <button styleName='top-menu'
+            <button styleName='top-menu-preference'
               onClick={(e) => this.handleMenuButtonClick(e)}
             >
-              <i className='fa fa-wrench fa-fw' />
+              <img styleName='iconTag' src='../resources/icon/icon-setting.svg' />
-              <span styleName='top-menu-label'>Preferences</span>
             </button>
           </div>
         </div>

browser/main/StatusBar/StatusBar.styl

@@ -1,11 +1,10 @@
 @import('../Detail/DetailVars')
 
 .root
-  absolute bottom left right
+  position absolute
-  height $statusBar-height
+  bottom 10px
-  bottom 16px
+  right 10px
   z-index 100
-  background-color $ui-noteDetail-backgroundColor
   display flex
 
 .blank
@@ -23,7 +22,18 @@
 
 .zoom
   navButtonColor()
-  height 24px
+  color rgba(0,0,0,.54)
+  height 20px
+  display flex
+  padding 0
+  align-items center
+  background-color transparent
+  &:hover
+    color $ui-active-color
+  &:active
+    color $ui-active-color
+  span
+    margin-left 5px
   
 .update
   navButtonColor()
@@ -39,14 +49,14 @@
 
 body[data-theme="dark"]
   .root
-    background-color $ui-dark-noteDetail-backgroundColor
     border-color $ui-dark-borderColor
     box-shadow none
 
   .zoom
     border-color $ui-dark-borderColor
+    background-color transparent
+    color #f9f9f9
     &:hover
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
       transition 0.15s
       color $ui-dark-text-color
 

browser/main/StatusBar/index.js

@@ -55,8 +55,8 @@ class StatusBar extends React.Component {
         <button styleName='zoom'
           onClick={(e) => this.handleZoomButtonClick(e)}
         >
-          <i className='fa fa-search-plus' />&nbsp;
+          <img src='../resources/icon/icon-zoom.svg' />
-          {Math.floor(config.zoom * 100)}%
+          <span>{Math.floor(config.zoom * 100)}%</span>
         </button>
 
         {status.updateReady

browser/main/TopBar/TopBar.styl

@@ -36,7 +36,7 @@ $control-height = 34px
     outline none
     border none
     color $ui-text-color
-    font-size 16px
+    font-size 18px
     padding-bottom 2px
     background-color $ui-noteList-backgroundColor
 
@@ -112,6 +112,21 @@ $control-height = 34px
   opacity 0
   transition 0.1s
 
+body[data-theme="white"]
+  .root, .root--expanded
+    background-color $ui-white-noteList-backgroundColor
+
+  .control
+    border-color $ui-dark-borderColor
+
+  .control-search
+    background-color $ui-white-noteList-backgroundColor
+
+  .control-search-input
+    background-color $ui-white-noteList-backgroundColor
+    input
+      background-color $ui-white-noteList-backgroundColor
+
 body[data-theme="dark"]
   .root, .root--expanded
     background-color $ui-dark-noteList-backgroundColor

browser/main/global.styl

@@ -12,6 +12,7 @@ body
   color textColor
   font-size fontSize
   font-weight 200
+  -webkit-font-smoothing antialiased
 
 button, input, select, textarea
   font-family DEFAULT_FONTS

browser/main/lib/ConfigManager.js

@@ -91,9 +91,13 @@ function get () {
       : 'default'
 
     if (config.editor.theme !== 'default') {
+      if (config.editor.theme.startsWith('solarized')) {
+        editorTheme.setAttribute('href', '../node_modules/codemirror/theme/solarized.css')
+      } else {
         editorTheme.setAttribute('href', '../node_modules/codemirror/theme/' + config.editor.theme + '.css')
       }
     }
+  }
 
   return config
 }
@@ -106,6 +110,8 @@ function set (updates) {
 
   if (newConfig.ui.theme === 'dark') {
     document.body.setAttribute('data-theme', 'dark')
+  } else if (newConfig.ui.theme === 'white') {
+    document.body.setAttribute('data-theme', 'white')
   } else {
     document.body.setAttribute('data-theme', 'default')
   }
@@ -122,8 +128,12 @@ function set (updates) {
     : 'default'
 
   if (newTheme !== 'default') {
+    if (newTheme.startsWith('solarized')) {
+      editorTheme.setAttribute('href', '../node_modules/codemirror/theme/solarized.css')
+    } else {
       editorTheme.setAttribute('href', '../node_modules/codemirror/theme/' + newTheme + '.css')
     }
+  }
 
   ipcRenderer.send('config-renew', {
     config: get()

browser/main/lib/mixpanel.js

@@ -1,121 +0,0 @@
-import store from 'browser/main/store'
-
-const _ = require('lodash')
-const keygen = require('browser/lib/keygen')
-const Mixpanel = require('mixpanel')
-const mixpanel = Mixpanel.init('7a0aca437d72dfd07cbcbf58d3b61f27', {key: 'fde4fd23f4d550f1b646bcd7d4374b1f'})
-const moment = require('moment')
-const electron = require('electron')
-
-function _getClientKey () {
-  let clientKey = localStorage.getItem('clientKey')
-  if (!_.isString(clientKey) || clientKey.length !== 40) {
-    clientKey = keygen(20)
-    _setClientKey(clientKey)
-  }
-
-  return clientKey
-}
-
-function _setClientKey (newKey) {
-  localStorage.setItem('clientKey', newKey)
-}
-
-function _fetch () {
-  let events
-  try {
-    events = JSON.parse(localStorage.getItem('events'))
-    if (!_.isArray(events)) throw new Error('events is not an array.')
-  } catch (err) {
-    console.warn(err)
-    events = []
-    localStorage.setItem('events', JSON.stringify(events))
-    console.info('Events cache initialzed')
-  }
-  return events
-}
-
-function _keep (name, properties) {
-  let events = _fetch()
-  properties.time = new Date()
-  events.push({
-    name,
-    properties
-  })
-  localStorage.setItem('events', JSON.stringify(events))
-}
-
-function _keepUnique (name, properties) {
-  let events = _fetch()
-  properties.time = new Date()
-  events = events.filter((event) => event.name !== name)
-  events.push({
-    name,
-    properties
-  })
-  localStorage.setItem('events', JSON.stringify(events))
-}
-
-function _flush () {
-  let events = _fetch()
-  let spliced = events.splice(0, 50)
-  localStorage.setItem('events', JSON.stringify(events))
-
-  if (spliced.length > 0) {
-    let parsedEvents = spliced
-      .filter((event) => {
-        if (!_.isObject(event)) return false
-        if (!_.isString(event.name)) return false
-        if (!_.isObject(event.properties)) return false
-        if (!moment(event.properties.time).isValid()) return false
-        if (new Date() - moment(event.properties.time).toDate() > 1000 * 3600 * 24 * 3) return false
-        return true
-      })
-      .map((event) => {
-        return {
-          event: event.name,
-          properties: event.properties
-        }
-      })
-
-    mixpanel.import_batch(parsedEvents, {}, (errs) => {
-      if (errs.length > 0) {
-        let events = _fetch()
-        events = events.concat(spliced)
-        localStorage.setItem('events', JSON.stringify(events))
-      } else {
-        _flush()
-      }
-    })
-
-    let state = store.getState()
-    mixpanel.people.set(_getClientKey(), {
-      storage_count: state.data.storageMap.size,
-      note_count: state.data.noteMap.size,
-      version: electron.remote.app.getVersion()
-    })
-  }
-}
-
-setInterval(_flush, 1000 * 60 * 60)
-
-function track (name, properties) {
-  switch (name) {
-    case 'MAIN_FOCUSED':
-      properties = Object.assign({}, properties, {
-        distinct_id: _getClientKey()
-      })
-      _keepUnique(name, properties)
-      break
-    default:
-      properties = Object.assign({}, properties, {
-        distinct_id: _getClientKey()
-      })
-      _keep(name, properties)
-  }
-}
-
-module.exports = {
-  _mp: mixpanel,
-  track
-}

browser/main/modals/InitModal.js

@@ -152,7 +152,7 @@ class InitModal extends React.Component {
               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 or registration required. \n- [ ] Quick search and copy the content of note. macOS: <kbd>Cmd</kbd> + <kbd>Alt</kbd> + <kbd>S</kbd> / windows: <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>S</kbd> \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({

browser/main/modals/PreferencesModal/ConfigTab.styl

@@ -73,7 +73,7 @@
       right 15px
       font-size 14px
     .success
-      color green
+      color #1EC38B
     .error
       color red
 
@@ -115,7 +115,6 @@
     line-height 1.2
 
 .note-for-keymap
-  margin-left: 10px
   font-size: 12px
 
 .code-mirror

browser/main/modals/PreferencesModal/FolderItem.styl

@@ -25,7 +25,7 @@
 
 .folderItem-left-key
   color $ui-inactive-text-color
-  font-size 10px
+  font-size 13px
   margin 0 5px
   border none
 

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://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.reddit.com/r/Boostnote/'
+                onClick={(e) => this.handleLinkClick(e)}
+              >Reddit</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://opencollective.com/boostnoteio'
-              onClick={(e) => this.handleLinkClick(e)}
-            >Crowdfunding</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,7 +134,9 @@ class InfoTab extends React.Component {
             License: GPL v3
           </li>
         </ul>
-        <hr />
+
+        <hr styleName='separate-line' />
+
         <div styleName='policy'>Data collection policy</div>
         <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>
@@ -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>
     )
   }

browser/main/modals/PreferencesModal/InfoTab.styl

@@ -42,6 +42,9 @@
     color #4E8EC6
     text-decoration none
 
+.separate-line
+  margin 40px 0
+
 .policy
   width 100%
   font-size 20px
@@ -50,6 +53,10 @@
 .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%)

browser/main/modals/PreferencesModal/Tab.styl

@@ -13,6 +13,10 @@ $tab--dark-text-color = #E5E5E5
   font-size 36px
   margin-bottom 60px
 
+.header--sub
+  font-size 36px
+  margin-bottom 20px
+
 body[data-theme="dark"]
   .header
     color $tab--dark-text-color

browser/main/modals/PreferencesModal/UiTab.js

@@ -9,6 +9,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,10 +23,32 @@ class UiTab extends React.Component {
     }
   }
 
+  componentDidMount () {
+    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)
+  }
+
   componentWillMount () {
     CodeMirror.autoLoadMode(ReactCodeMirror, 'javascript')
   }
 
+  componentWillUnmount () {
+    ipc.removeListener('APP_SETTING_DONE', this.handleSettingDone)
+    ipc.removeListener('APP_SETTING_ERROR', this.handleSettingError)
+  }
+
   handleUIChange (e) {
     const { codemirrorTheme } = this.state
     let checkHighLight = document.getElementById('checkHighLight')
@@ -80,9 +107,25 @@ class UiTab extends React.Component {
       type: 'SET_UI',
       config: newConfig
     })
+    this.clearMessage()
+  }
+
+  clearMessage () {
+    _.debounce(() => {
+      this.setState({
+        UiAlert: null
+      })
+    }, 2000)()
   }
 
   render () {
+    let UiAlert = this.state.UiAlert
+    let 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};'
@@ -98,7 +141,8 @@ class UiTab extends React.Component {
                 onChange={(e) => this.handleUIChange(e)}
                 ref='uiTheme'
               >
-                <option value='default'>Light</option>
+                <option value='default'>Default</option>
+                <option value='white'>White</option>
                 <option value='dark'>Dark</option>
               </select>
             </div>
@@ -228,7 +272,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>
 
@@ -285,12 +329,11 @@ class UiTab extends React.Component {
             </label>
           </div>
 
-          <div className='group-control'>
+          <div styleName='group-control'>
             <button styleName='group-control-rightButton'
-              onClick={(e) => this.handleSaveUIClick(e)}
+              onClick={(e) => this.handleSaveUIClick(e)}>Save
-            >
-              Save
             </button>
+            {UiAlertElement}
           </div>
         </div>
       </div>

browser/main/modals/PreferencesModal/index.js

@@ -9,6 +9,7 @@ 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) {
@@ -99,7 +100,7 @@ class Preferences extends React.Component {
       {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'}
     ]
 
@@ -136,6 +137,7 @@ class Preferences extends React.Component {
         <div ref='content' styleName='content'>
           {content}
         </div>
+        <RealtimeNotification />
       </div>
     )
   }

browser/styles/index.styl

@@ -5,7 +5,7 @@ $danger-color = #c9302c
 $danger-lighten-color = lighten(#c9302c, 5%)
 
 // Layouts
-$statusBar-height = 36px
+$statusBar-height = 0px
 $sideNav-width = 200px
 $sideNav--folded-width = 44px
 $topBar-height = 60px
@@ -15,18 +15,18 @@ $ui-text-color = #333333
 $ui-inactive-text-color = #939395
 $ui-borderColor = #D1D1D1
 $ui-backgroundColor = #FFFFFF
-$ui-noteList-backgroundColor = #F3F3F3
+$ui-noteList-backgroundColor = #FBFBFB
-$ui-noteDetail-backgroundColor = #F4F4F4
+$ui-noteDetail-backgroundColor = #FFFFFF
 $ui-border = solid 1px $ui-borderColor
 $ui-active-color = #6AA5E9
 $ui-tag-backgroundColor = rgba(0, 0, 0, 0.3)
 
-// UI Button
+// UI Default Button
-$ui-button-color = #939395
+$ui-button-default-color = #FBFBFB
-$ui-button--hover-backgroundColor = #D9D9D9
+$ui-button-default--hover-backgroundColor = #2B8976
-$ui-button--active-color = white
+$ui-button-default--active-color = white
-$ui-button--active-backgroundColor = #D9D9D9
+$ui-button-default--active-backgroundColor = #2B8976
-$ui-button--focus-borderColor = lighten(#369DCD, 25%)
+$ui-button-default--focus-borderColor = lighten(#369DCD, 25%)
 
 // UI Tooltip
 $ui-tooltip-text-color = white
@@ -119,6 +119,22 @@ colorDangerButton()
   &:active:hover
     background-color $danger-button-background--active
 
+/**
+* SideNav
+*/
+SideNavFilter()
+  background-color $ui-button-default--active-backgroundColor
+  .counters
+    color $ui-button-default-color
+  .menu-button-label
+    color $ui-button-default-color
+  &:hover
+    background-color alpha($ui-button-default--hover-backgroundColor, 20%)
+  &:active, &:active:hover
+    background-color alpha($ui-button-default--hover-backgroundColor, 20%)
+    .menu-button-label
+      color #1EC38B
+
 /**
 * Nav
 */
@@ -129,13 +145,12 @@ navButtonColor()
   background-color transparent
   transition 0.15s
   &:hover
-    background-color alpha($ui-button--active-backgroundColor, 20%)
     transition  0.15s
-    color $ui-text-color
+    color $ui-button-default-color
   &:active, &:active:hover
-    background-color $ui-button--active-backgroundColor
+    color $ui-button-default-color
-    color $ui-text-color
     transition 0.15s
+
 /**
 * # Modal Stuff
 * These will be moved lib/modal
@@ -159,23 +174,53 @@ modal()
   border-radius $modal-border-radius
 
 topBarButtonLight()
+  position absolute
   width 34px
   height 34px
   border-radius 17px
   font-size 14px
-  margin 15px 7px
   border none
-  color $ui-button-color
+  color alpha($ui-button-color, 0.4)
   fill $ui-button-color
   background-color transparent
   &:active
     border-color $ui-button--active-backgroundColor
   &:hover
-    background-color alpha($ui-button--hover-backgroundColor, 60%)
+    transform scale(1.1)
+    transition 0.4s
+    color $ui-button-color
     .control-lockButton-tooltip
       opacity 1
 
-// Dark theme
+// White theme
+$ui-white-noteList-backgroundColor = #F3F3F3
+$ui-white-noteDetail-backgroundColor = #F4F4F4
+
+/**
+* Nav
+*/
+navWhiteButtonColor()
+  border none
+  color $ui-button-color
+  background-color transparent
+  transition 0.15s
+  &:hover
+    background-color alpha($ui-button--active-backgroundColor, 20%)
+    transition  0.15s
+    color $ui-text-color
+  &:active, &:active:hover
+    background-color $ui-button--active-backgroundColor
+    color $ui-text-color
+    transition 0.15s
+
+// UI Button
+$ui-button-color = #939395
+$ui-button--hover-backgroundColor = #F6F6F6
+$ui-button--active-color = white
+$ui-button--active-backgroundColor = #D9D9D9
+$ui-button--focus-borderColor = lighten(#369DCD, 25%)
+
+/******* Dark theme ********/
 $ui-dark-active-color = #3A404C
 $ui-dark-borderColor = lighten(#21252B, 20%)
 $ui-dark-backgroundColor = #1E2124
@@ -233,12 +278,10 @@ topBarButtonDark()
   border-color $ui-dark-borderColor
   color $ui-dark-topbar-button-color
   &:hover
-    background-color $dark-default-button-background--hover
     color $ui-dark-tooltip-text-color
   &:active
     border-color $ui-dark-button--focus-borderColor
   &:active:hover
-    background-color $ui-dark-button--active-backgroundColor
     color $ui-dark-tooltip-text-color
   &:focus
     border-color $ui-button--focus-borderColor

docs/build.md

@@ -1,5 +1,5 @@
 # Build
-This page is also available in [Japanese](https://github.com/BoostIO/Boostnote/blob/master/docs/jp/build.md), [Korean](https://github.com/BoostIO/Boostnote/blob/master/docs/ko/build.md), [Russain](https://github.com/BoostIO/Boostnote/blob/master/docs/ru/build.md), and [Simplified Chinese](https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/build.md).
+This page is also available in [Japanese](https://github.com/BoostIO/Boostnote/blob/master/docs/jp/build.md), [Korean](https://github.com/BoostIO/Boostnote/blob/master/docs/ko/build.md), [Russain](https://github.com/BoostIO/Boostnote/blob/master/docs/ru/build.md), [Simplified Chinese](https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/build.md), and [French](https://github.com/BoostIO/Boostnote/blob/master/docs/fr/build.md).
 
 ## Environments
 * npm: 4.x
@@ -53,3 +53,32 @@ grunt pre-build
 You will find the executable in the `dist` directory. Note, the auto updater won't work because the app isn't signed.
 
 If you find it necessary, you can use codesign or authenticode with this executable.
+
+## Make own distribution packages (deb, rpm)
+
+Distribution packages are created by exec `grunt build` on Linux platform (e.g. Ubuntu, Fedora).
+
+> Note: You can create both `.deb` and `.rpm` in a single environment.
+
+After installing the supported version of `node` and `npm`, install build dependency packages.
+
+
+Ubuntu/Debian:
+
+```
+$ sudo apt-get install -y rpm fakeroot
+```
+
+Fedora:
+
+```
+$ sudo dnf install -y dpkg dpkg-dev rpm-build fakeroot
+```
+
+Then execute `grunt build`.
+
+```
+$ grunt build
+```
+
+You will find `.deb` and `.rpm` in the `dist` directory.

docs/debug.md

@@ -1,5 +1,5 @@
 # How to debug Boostnote (Electron app)
-This page is also available in [Japanese](https://github.com/BoostIO/Boostnote/blob/master/docs/jp/debug.md), [Korean](https://github.com/BoostIO/Boostnote/blob/master/docs/ko/debug.md), [Russain](https://github.com/BoostIO/Boostnote/blob/master/docs/ru/debug.md), and [Simplified Chinese](https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/debug.md)
+This page is also available in [Japanese](https://github.com/BoostIO/Boostnote/blob/master/docs/jp/debug.md), [Korean](https://github.com/BoostIO/Boostnote/blob/master/docs/ko/debug.md), [Russain](https://github.com/BoostIO/Boostnote/blob/master/docs/ru/debug.md), [Simplified Chinese](https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/debug.md), and [French](https://github.com/BoostIO/Boostnote/blob/master/docs/fr/debug.md).
 
 Boostnote is an Electron app so it's based on Chromium; developers can use `Developer Tools` just like Google Chrome.
 

docs/fr/build.md

@@ -0,0 +1,83 @@
+# Build
+Cette page est également disponible en [Japonais](https://github.com/BoostIO/Boostnote/blob/master/docs/jp/build.md), [Coréen](https://github.com/BoostIO/Boostnote/blob/master/docs/ko/build.md), [Russe](https://github.com/BoostIO/Boostnote/blob/master/docs/ru/build.md), et en [Chinois Simplifié](https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/build.md).
+
+## Environnements
+* npm: 4.x
+* node: 7.x
+
+Il est conseillé d'utiliser `npm v4.x` car `$ grunt pre-build` ne marche pas sur la `v5.x`.
+
+## Développement
+
+Webpack HMR est utilisé pour développer Boostnote.
+En utilisant les commandes suivantes à la racine du projet, cela va démarrer Boostnote avec les configurations par défaut.
+
+Installez les paquets requis à l'aide de `yarn`.
+
+```
+$ yarn
+```
+Build et start
+
+```
+$ yarn run dev-start
+```
+
+Cette commande lance `yarn run webpack` et `yarn run hot` en parallèle. Cela revient au même que si on utilisait ces deux commandes dans 2 terminaux.
+
+La commande `webpack` va surveiller les changements de code et les appliquer automatiquement.
+
+Si l'erreur suivante apparait : `Failed to load resource: net::ERR_CONNECTION_REFUSED`, relancez Boostnote.
+
+![net::ERR_CONNECTION_REFUSED](https://cloud.githubusercontent.com/assets/11307908/24343004/081e66ae-1279-11e7-8d9e-7f478043d835.png)
+
+> ### Notice
+> Il y a certains cas où vous voudrez relancer l'application manuellement.
+> 1. Quand vous éditez la méthode constructeur dans un composant
+> 2. Quand vous ajoutez une nouvelle classe css. (Comme pour 1: la classe est réécrite pour chaque composant. Le process intervient dans la méthode constructeur)
+
+## Déploiement
+
+On utilise Grunt pour le déploiement automatique.
+Vous pouvez build le programme en utilisant `grunt`. Cependant, nous ne recommandons pas cette méthode car la task par défaut inclut codesign et authenticode.
+
+Nous avons donc préparé un script séparé qui va rendre un fichier exécutable.
+
+Le build ne fonctionne pas sur `npm v5.3.0`. Il faut donc utiliser `npm v5.2.0` quand vous faites le build.
+
+```
+grunt pre-build
+```
+Vous trouverez l'exécutable dans le dossier `dist`.
+Note : l'auto updater ne marchera pas car l'application n'est pas signée.
+
+Si vous trouvez ça nécessaire, vous pouvez utiliser codesign ou authenticode avec cet exécutable.
+
+## Faire un paquet (deb, rpm)
+
+Les paquets sont créés en exécutant `grunt build` sur une plateforme Linux (e.g. Ubuntu, Fedora).
+
+> Note: Vous pouvez créer à la fois un `.deb` et un `.rpm` dans un seul et même environnement.
+
+Après avoir installé la version supportée de `node` et de `npm`, installer les paquets de builds.
+
+
+Ubuntu/Debian:
+
+```
+$ sudo apt-get install -y rpm fakeroot
+```
+
+Fedora:
+
+```
+$ sudo dnf install -y dpkg dpkg-dev rpm-build fakeroot
+```
+
+Puis exécutez `grunt build`.
+
+```
+$ grunt build
+```
+
+Vous trouverez le `.deb` et le `.rpm` dans le dossier `dist`.

docs/fr/debug.md

@@ -0,0 +1,22 @@
+# Comment débugger Boostnote (Application Electron)
+Cette page est également disponible en [Japonais](https://github.com/BoostIO/Boostnote/blob/master/docs/jp/debug.md), [Coréen](https://github.com/BoostIO/Boostnote/blob/master/docs/ko/debug.md), [Russe](https://github.com/BoostIO/Boostnote/blob/master/docs/ru/debug.md), et en [Chinois Simplifié](https://github.com/BoostIO/Boostnote/blob/master/docs/zh_CN/debug.md)
+
+Boostnote est une application Electron donc basée sur Chromium. Il est possible d'utiliser les `Developer Tools` comme dans Google Chrome.
+
+Vous pouvez utiliser les `Developer Tools` de la façon suivante :
+![how_to_toggle_devTools](https://cloud.githubusercontent.com/assets/11307908/24343585/162187e2-127c-11e7-9c01-23578db03ecf.png)
+
+Les `Developer Tools` ressemblent à ça :
+![Developer_Tools](https://cloud.githubusercontent.com/assets/11307908/24343545/eff9f3a6-127b-11e7-94cf-cb67bfda634a.png)
+
+Quand une erreur arrive, les messages d'erreurs sont affichés dans la `console`.
+
+## Debugging
+Par exemple, vous pouvez utiliser le `debugger` pour placer un point d'arrêt dans le code de la façon suivante:
+
+![debugger](https://cloud.githubusercontent.com/assets/11307908/24343879/9459efea-127d-11e7-9943-f60bf7f66d4a.png)
+
+C'est une façon comme une autre de faire, vous pouvez trouver une façon de débugger que vous trouverez plus adaptée.
+
+## Références
+* [Documentation officiel de Google Chrome sur le debugging](https://developer.chrome.com/devtools)

docs/jp/build.md

@@ -46,3 +46,32 @@ grunt pre-build
 実行ファイルは`dist`から見つかります。この場合、認証されていないため、自動アップデーターは使えません。
 
 必要であれば、この実行ファイルからCodesignやAuthenticodeなどの署名ができます。
+
+## ディストリビューション用パッケージ (deb, rpm)
+
+ディストリビューション用パッケージはLinuxプラットフォーム(Ubuntu や Fedora)上で `grunt build` を実行する事で作成されます。
+
+> 一つの環境で `.deb` と `.rpm` の両方を作成する事が出来ます。
+
+
+対応するバージョンの `node` と `npm` をインストールした後、必要なパッケージをインストールします。
+
+Ubuntu/Debian:
+
+```
+$ sudo apt-get install -y rpm fakeroot
+```
+
+Fedora:
+
+```
+$ sudo dnf install -y dpkg dpkg-dev rpm-build fakeroot
+```
+
+`grunt build` を実行します。
+
+```
+$ grunt build
+```
+
+`.deb` と `.rpm` は `dist` 配下に作成されます。

gruntfile.js

@@ -50,6 +50,25 @@ module.exports = function (grunt) {
         src: path.join(__dirname, 'dist', 'Boostnote-linux-x64'),
         dest: path.join(__dirname, 'dist')
       }
+    },
+    'electron-installer-redhat': {
+      app: {
+        options: {
+          name: 'boostnote',
+          productName: 'Boostnote',
+          genericName: 'Boostnote',
+          productDescription: 'The opensource note app for developer.',
+          arch: 'x86_64',
+          categories: [
+            'Development',
+            'Utility'
+          ],
+          icon: path.join(__dirname, 'resources/app.png'),
+          bin: 'Boostnote'
+        },
+        src: path.join(__dirname, 'dist', 'Boostnote-linux-x64'),
+        dest: path.join(__dirname, 'dist')
+      }
     }
   }
 
@@ -57,6 +76,7 @@ module.exports = function (grunt) {
   grunt.loadNpmTasks('grunt-electron-installer')
   if (!WIN) {
     grunt.loadNpmTasks('grunt-electron-installer-debian')
+    grunt.loadNpmTasks('grunt-electron-installer-redhat')
   }
 
   grunt.registerTask('compile', function () {
@@ -244,7 +264,7 @@ module.exports = function (grunt) {
         grunt.task.run(['compile', 'pack:osx', 'codesign', 'create-osx-installer', 'zip:osx'])
         break
       case 'linux':
-        grunt.task.run(['compile', 'pack:linux', 'electron-installer-debian'])
+        grunt.task.run(['compile', 'pack:linux', 'electron-installer-debian', 'electron-installer-redhat'])
         break
     }
   })

lib/main-menu.js

@@ -18,6 +18,15 @@ const boost = macOS
       {
         type: 'separator'
       },
+      {
+        label: 'Preferences',
+        click () {
+          mainWindow.webContents.send('side:preferences')
+        }
+      },
+      {
+        type: 'separator'
+      },
       {
         label: 'Hide Boostnote',
         accelerator: 'Command+H',
@@ -37,7 +46,8 @@ const boost = macOS
       },
       {
         label: 'Quit Boostnote',
-        role: 'quit'
+        role: 'quit',
+        accelerator: 'CommandOrControl+Q'
       }
     ]
   }
@@ -45,7 +55,17 @@ const boost = macOS
     label: 'Boostnote',
     submenu: [
       {
-        role: 'quit'
+        label: 'Preferences',
+        click () {
+          mainWindow.webContents.send('side:preferences')
+        }
+      },
+      {
+        type: 'separator'
+      },
+      {
+        role: 'quit',
+        accelerator: 'Control+Q'
       }
     ]
   }
@@ -131,7 +151,15 @@ if (LINUX) {
   file.submenu.push({
     type: 'separator'
   }, {
-    role: 'quit'
+    label: 'Preferences',
+    click () {
+      mainWindow.webContents.send('side:preferences')
+    }
+  }, {
+    type: 'separator'
+  }, {
+    role: 'quit',
+    accelerator: 'Control+Q'
   })
 }
 

lib/main-window.js

@@ -43,7 +43,7 @@ if (process.platform !== 'linux' || process.env.DESKTOP_SESSION === 'cinnamon')
   mainWindow.on('close', function (e) {
     e.preventDefault()
     if (process.platform === 'win32') {
-      mainWindow.minimize()
+      quitApp()
     } else {
       if (mainWindow.isFullScreen()) {
         mainWindow.once('leave-full-screen', function () {
@@ -57,18 +57,27 @@ if (process.platform !== 'linux' || process.env.DESKTOP_SESSION === 'cinnamon')
   })
 
   app.on('before-quit', function (e) {
+    storeWindowSize()
+    mainWindow.removeAllListeners()
+  })
+} else {
+  app.on('window-all-closed', function () {
+    quitApp()
+  })
+}
+
+function quitApp () {
+  storeWindowSize()
+  app.quit()
+}
+
+function storeWindowSize () {
   try {
     config.set('windowsize', mainWindow.getBounds())
   } catch (e) {
     // ignore any errors because an error occurs only on update
     // refs: https://github.com/BoostIO/Boostnote/issues/243
   }
-    mainWindow.removeAllListeners()
-  })
-} else {
-  app.on('window-all-closed', function () {
-    app.quit()
-  })
 }
 
 app.on('activate', function () {

lib/main.html

@@ -53,6 +53,10 @@
     font-weight: 100;
     color: #888;
   }
+  .CodeEditor {
+    opacity: 1 !important;
+    pointer-events: auto !important;
+  }
   </style>
 </head>
 <body>
@@ -67,6 +71,7 @@
   <script src="../node_modules/codemirror/mode/meta.js"></script>
   <script src="../node_modules/codemirror/addon/mode/overlay.js"></script>
   <script src="../node_modules/codemirror/addon/mode/loadmode.js"></script>
+  <script src="../node_modules/codemirror/addon/mode/simple.js"></script>
   <script src="../node_modules/codemirror/keymap/sublime.js"></script>
   <script src="../node_modules/codemirror/keymap/vim.js"></script>
   <script src="../node_modules/codemirror/keymap/emacs.js"></script>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "boost",
   "productName": "Boostnote",
-  "version": "0.8.16",
+  "version": "0.8.17",
   "main": "index.js",
   "description": "Boostnote",
   "license": "GPL-3.0",
@@ -16,7 +16,7 @@
     "dev-start": "concurrently --kill-others \"npm run webpack\" \"npm run hot\""
   },
   "config": {
-    "electron-version": "1.2.8"
+    "electron-version": "1.6.15"
   },
   "repository": {
     "type": "git",
@@ -67,12 +67,12 @@
     "markdown-it-emoji": "^1.1.1",
     "markdown-it-footnote": "^3.0.0",
     "markdown-it-imsize": "^2.0.1",
-    "markdown-it-kbd": "^1.1.0",
+    "markdown-it-kbd": "^1.1.1",
     "markdown-it-multimd-table": "^2.0.1",
     "markdown-it-named-headers": "^0.0.4",
+    "markdown-it-plantuml": "^0.3.0",
     "md5": "^2.0.0",
     "mdurl": "^1.0.1",
-    "mixpanel": "^0.4.1",
     "moment": "^2.10.3",
     "node-ipc": "^8.1.0",
     "raphael": "^2.2.7",
@@ -103,7 +103,7 @@
     "devtron": "^1.1.0",
     "dom-storage": "^2.0.2",
     "electron-packager": "^6.0.0",
-    "electron-prebuilt": "^1.2.8",
+    "electron": "^1.6.15",
     "eslint": "^3.13.1",
     "eslint-config-standard": "^6.2.1",
     "eslint-config-standard-jsx": "^3.2.0",
@@ -129,7 +129,8 @@
     "webpack-dev-server": "^1.12.0"
   },
   "optionalDependencies": {
-    "grunt-electron-installer-debian": "^0.2.0"
+    "grunt-electron-installer-debian": "^0.2.0",
+    "grunt-electron-installer-redhat": "^0.3.1"
   },
   "optional": false,
   "ava": {

readme.md

@@ -1,12 +1,12 @@
 New:zap:
 
-[Android and iOS apps](https://github.com/BoostIO/Boostnote-mobile) are released!
+Open sourcing our [Android and iOS apps](https://github.com/BoostIO/Boostnote-mobile)!
 
 ![Boostnote app screenshot](./resources/repository/top.png)
 
 <h4 align="center">Note-taking app for programmers. </h4>
-<h5 align="center">Apps available for Mac, Windows, Linux, Android and iOS!</h5>
+<h5 align="center">Apps available for Mac, Windows, Linux, Android and iOS.</h5>
-<h5 align="center">Built with Electron, React + Redux, Webpack and CSSModules</h5>
+<h5 align="center">Built with Electron, React + Redux, Webpack and CSSModules.</h5>
 
 [![Build Status](https://travis-ci.org/BoostIO/Boostnote.svg?branch=master)](https://travis-ci.org/BoostIO/Boostnote)
 
@@ -14,21 +14,26 @@ New:zap:
 - [Rokt33r](https://github.com/rokt33r)
 - [sota1235](https://github.com/sota1235)
 - [Kohei TAKATA](https://github.com/kohei-takata)
-- [asmsuechan](https://github.com/asmsuechan)
+- [Sosuke](https://github.com/sosukesuzuki)
-- [Kazu Yokomizo](https://github.com/kazup01)
+- [Kazz](https://github.com/kazup01)
 
 ## Contributors
-[Great contributors](https://github.com/BoostIO/Boostnote/graphs/contributors) :tada:
+Thank you to all the people who already contributed to Boostnote!
+
+<a href="https://github.com/BoostIO/Boostnote/graphs/contributors"><img src="https://opencollective.com/boostnoteio/contributors.svg?width=890" /></a>
+
+## Supporting Boostnote
+Boostnote is an open source project. It's an independent project with its ongoing development made possible entirely thanks to the support by these awesome [backers](https://github.com/BoostIO/Boostnote/blob/master/Backers.md). If you'd like to join them, please consider:
+- [Become a backer or sponsor on Open Collective.](https://opencollective.com/boostnoteio)
 
 ## Slack Group
 Let's talk about Boostnote! <br>
-[Join us](https://join.slack.com/t/boostnote-group/shared_invite/enQtMjU5NTUwNjcwMjkyLWI3N2I1YWIzNWRlZDZmZjVlYzRiNDc1YTcxZWNmY2UyZjc3MTQwMDUxMzAxZjg0NjNmZmIwNDFhMDkwZDlmZDc)
+[Join us](https://join.slack.com/t/boostnote-group/shared_invite/enQtMjc2MDM0MDEyODk2LThlZDlhYmYwMjdkMmJjMGM5MGFiMGJmNzk5ZTdhNzFhMmNmMDFlY2M2YTE1MTZkOThiOGZmNTI3YzJiOTBhMTQ)
 
 ## More Information
 * [Website](https://boostnote.io)
-* [10hz](https://boostnote.io/team/) : Boostnote for the creative hacker teams. Share your markdown notes and snippets instantly with your team. **We will release it at October!** 🏃💨
+* [Subscribe to the Newsletter](https://boostnote.io/#community): Get updates on Boostnote progress. No spam, ever :)
-* [Support us via OpenCollective](https://opencollective.com/boostnoteio) : Thank you for your support 🎉
+* [Development](https://github.com/BoostIO/Boostnote/blob/master/docs/build.md): Development configurations for Boostnote.
-* [Development](https://github.com/BoostIO/Boostnote/blob/master/docs/build.md) : Development configurations for Boostnote 🚀
 * Copyright (C) 2017 Maisin&Co.
 
 ## License

resources/icon/icon-all-active.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="18px" viewBox="0 0 14 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-all</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-112.000000, -289.000000)">
+            <g id="icon-all" transform="translate(109.000000, 288.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="book" transform="translate(4.000000, 2.500000)" stroke="#1EC38B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M0,13.125 C0,12.0894661 0.839466094,11.25 1.875,11.25 L12,11.25" id="Shape"></path>
+                    <path d="M1.875,0 L12,0 L12,15 L1.875,15 C0.839466094,15 0,14.1605339 0,13.125 L0,1.875 C0,0.839466094 0.839466094,3.33066907e-16 1.875,0 Z" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icon/icon-all.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="18px" viewBox="0 0 14 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-all</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-86.000000, -289.000000)">
+            <g id="icon-all" transform="translate(83.000000, 288.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="book" transform="translate(4.000000, 2.500000)" stroke="#8A8C8D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M0,13.125 C0,12.0894661 0.839466094,11.25 1.875,11.25 L12,11.25" id="Shape"></path>
+                    <path d="M1.875,0 L12,0 L12,15 L1.875,15 C0.839466094,15 0,14.1605339 0,13.125 L0,1.875 C0,0.839466094 0.839466094,3.33066907e-16 1.875,0 Z" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icon/icon-column-list.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="10px" viewBox="0 0 14 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-column-list</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-461.000000, -199.000000)">
+            <g id="icon-column-list" transform="translate(458.000000, 194.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="align-justify" transform="translate(4.000000, 6.000000)" stroke="#8A8C8D" stroke-width="1.33333333" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M12,2.76923077 L0,2.76923077" id="Shape"></path>
+                    <path d="M12,0 L0,0" id="Shape"></path>
+                    <path d="M12,5.53846154 L0,5.53846154" id="Shape"></path>
+                    <path d="M12,8.30769231 L0,8.30769231" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icon/icon-column.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-column</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-440.000000, -198.000000)">
+            <g id="icon-column" transform="translate(436.000000, 194.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="server" transform="translate(5.000000, 5.000000)" stroke="#8A8C8D" stroke-linecap="round" stroke-linejoin="round">
+                    <rect id="Rectangle-path" x="0" y="0" width="10" height="4" rx="1"></rect>
+                    <rect id="Rectangle-path" x="0" y="6" width="10" height="4" rx="1"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icon/icon-down.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="10px" height="6px" viewBox="0 0 10 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-down</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-191.000000, -325.000000)">
+            <g id="icon-down" transform="translate(186.000000, 318.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="chevron-right" transform="translate(10.000000, 10.000000) rotate(90.000000) translate(-10.000000, -10.000000) translate(8.000000, 6.000000)" stroke-linecap="round" stroke-width="1.33333333" stroke="#8A8C8D" stroke-linejoin="round">
+                    <polyline id="Shape" points="0 8 4 4 0 0"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icon/icon-info-24.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-info-24</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-1431.000000, -144.000000)">
+            <g id="icon-info-24" transform="translate(1429.000000, 142.000000)">
+                <rect id="Rectangle-7" fill="#BFBFBF" opacity="0" x="0" y="0" width="24" height="24"></rect>
+                <g id="info" transform="translate(3.000000, 3.000000)">
+                    <circle id="Oval" stroke="#8A8C8D" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" cx="9" cy="9" r="9"></circle>
+                    <path d="M9,14.1428571 L9,9" id="Shape" stroke="#8A8C8D" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <circle id="Oval-2" fill="#8A8C8D" cx="9" cy="5.14285714" r="1.28571429"></circle>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icon/icon-info.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-info</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-1440.000000, -152.000000)">
+            <g id="icon-info" transform="translate(1439.000000, 151.000000)">
+                <rect id="Rectangle-7" fill="#BFBFBF" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="info" transform="translate(2.000000, 2.000000)">
+                    <circle id="Oval" stroke="#8A8C8D" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" cx="8" cy="8" r="8"></circle>
+                    <path d="M8,12.5714286 L8,8" id="Shape" stroke="#8A8C8D" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <circle id="Oval-2" fill="#8A8C8D" cx="8" cy="4.57142857" r="1.14285714"></circle>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icon/icon-list-active.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="14px" viewBox="0 0 20 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-list-active</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-84.000000, -175.000000)">
+            <g id="icon-list-active" transform="translate(84.000000, 172.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="align-left" transform="translate(1.000000, 4.000000)" stroke="#1EC38B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M14,4 L0,4" id="Shape"></path>
+                    <path d="M18,0 L0,0" id="Shape"></path>
+                    <path d="M18,8 L0,8" id="Shape"></path>
+                    <path d="M14,12 L0,12" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icon/icon-list.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="14px" viewBox="0 0 20 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-list</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-84.000000, -155.000000)">
+            <g id="icon-list" transform="translate(84.000000, 152.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="align-left" transform="translate(1.000000, 4.000000)" stroke="#8A8C8D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M14,4 L0,4" id="Shape"></path>
+                    <path d="M18,0 L0,0" id="Shape"></path>
+                    <path d="M18,8 L0,8" id="Shape"></path>
+                    <path d="M14,12 L0,12" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icon/icon-lock.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="18px" viewBox="0 0 16 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-lock</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-1463.000000, -309.000000)">
+            <g id="icon-lock" transform="translate(1461.000000, 308.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="lock" transform="translate(3.000000, 2.000000)" stroke="#1EC38B" stroke-width="1.55555556" stroke-linecap="round" stroke-linejoin="round">
+                    <rect id="Rectangle-path" x="0" y="7.2" width="14" height="8.8" rx="1.55555556"></rect>
+                    <path d="M3.11111111,7.2 L3.11111111,4 C3.11111111,1.790861 4.85222597,1.24344979e-15 7,8.8817842e-16 C9.14777403,1.77635684e-16 10.8888889,1.790861 10.8888889,4 L10.8888889,7.2" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icon/icon-newnote.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-newnote3</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-448.000000, -153.000000)">
+            <g id="icon-newnote3" transform="translate(446.000000, 151.000000)">
+                <rect id="Rectangle-7" fill="#BFBFBF" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="edit" transform="translate(3.000000, 3.000000)" stroke="#8A8C8D" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M12.6,8.862 L12.6,12.6 C12.6,13.3731986 11.9731986,14 11.2,14 L1.4,14 C0.62680135,14 0,13.3731986 0,12.6 L0,2.8 C-1.55431223e-16,2.02680135 0.62680135,1.4 1.4,1.4 L5.138,1.4" id="Shape"></path>
+                    <polygon id="Shape" points="11.2 0 14 2.8 7 9.8 4.2 9.8 4.2 7"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icon/icon-note-code.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-note-code</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-344.000000, -267.000000)">
+            <g id="icon-note-code" transform="translate(340.000000, 265.000000)">
+                <rect id="Rectangle-7" fill="#BFBFBF" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="file-code" transform="translate(5.000000, 3.500000)">
+                    <path d="M6.25,0 L1.25,0 C0.559644063,0 0,0.582029825 0,1.3 L0,11.7 C0,12.4179702 0.559644063,13 1.25,13 L8.75,13 C9.44035594,13 10,12.4179702 10,11.7 L10,3.9 L6.25,0 Z" id="Shape" stroke="#8A8C8D" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <polyline id="Shape" stroke="#8A8C8D" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" points="6.25 0 6.25 3.9 10 3.9"></polyline>
+                    <path d="M6.62135922,7.5 L5.34466019,8.60504202 L5.34466019,8.60504202 C5.17990298,8.747647 5.16194505,8.9968133 5.30455003,9.16157051 C5.31694041,9.17588561 5.3303451,9.1892903 5.34466019,9.20168067 L5.41240363,9.26031575 L5.41240363,9.26031575 C5.57137564,9.39791337 5.80726514,9.39791337 5.96623715,9.26031575 L7.63036872,7.81993296 L7.63036872,7.81993296 C7.80706281,7.66699605 7.82632182,7.39977733 7.67338492,7.22308324 C7.66009684,7.207731 7.64572097,7.19335512 7.63036872,7.18006704 L5.96623715,5.73968425 L5.96623715,5.73968425 C5.80726514,5.60208663 5.57137564,5.60208663 5.41240363,5.73968425 L5.34466019,5.79831933 L5.34466019,5.79831933 C5.17990298,5.94092431 5.16194505,6.19009061 5.30455003,6.35484782 C5.31694041,6.36916292 5.3303451,6.38256761 5.34466019,6.39495798 L6.62135922,7.5 Z" id="Shape" fill="#8A8C8D" fill-rule="nonzero"></path>
+                    <path d="M2.36963128,7.81993296 L4.03376285,9.26031575 L4.03376285,9.26031575 C4.19273486,9.39791337 4.42862436,9.39791337 4.58759637,9.26031575 L4.65533981,9.20168067 L4.65533981,9.20168067 C4.82009702,9.05907569 4.83805495,8.80990939 4.69544997,8.64515218 C4.68305959,8.63083708 4.6696549,8.61743239 4.65533981,8.60504202 L3.37864078,7.5 L4.65533981,6.39495798 L4.65533981,6.39495798 C4.82009702,6.252353 4.83805495,6.0031867 4.69544997,5.83842949 C4.68305959,5.82411439 4.6696549,5.8107097 4.65533981,5.79831933 L4.58759637,5.73968425 L4.58759637,5.73968425 C4.42862436,5.60208663 4.19273486,5.60208663 4.03376285,5.73968425 L2.36963128,7.18006704 L2.36963128,7.18006704 C2.19293719,7.33300395 2.17367818,7.60022267 2.32661508,7.77691676 C2.33990316,7.792269 2.35427903,7.80664488 2.36963128,7.81993296 Z" id="Shape" fill="#8A8C8D" fill-rule="nonzero"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icon/icon-note-text.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-note-text</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-323.000000, -266.000000)">
+            <g id="icon-note-text" transform="translate(319.000000, 264.000000)">
+                <rect id="Rectangle-7" fill="#BFBFBF" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="file-text" transform="translate(5.000000, 3.500000)" stroke="#8A8C8D" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M6.25,0 L1.25,0 C0.559644063,0 0,0.582029825 0,1.3 L0,11.7 C0,12.4179702 0.559644063,13 1.25,13 L8.75,13 C9.44035594,13 10,12.4179702 10,11.7 L10,3.9 L6.25,0 Z" id="Shape"></path>
+                    <polyline id="Shape" points="6.25 0 6.25 3.9 10 3.9"></polyline>
+                    <path d="M7.5,7.15 L2.5,7.15" id="Shape"></path>
+                    <path d="M7.5,9.75 L2.5,9.75" id="Shape"></path>
+                    <polyline id="Shape" points="3.75 4.55 3.125 4.55 2.5 4.55"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icon/icon-plus.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-plus</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-242.000000, -318.000000)">
+            <g id="icon-plus" transform="translate(239.000000, 315.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="plus" transform="translate(4.000000, 4.000000)" stroke="#8A8C8D" stroke-width="1.71428571" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M6,0 L6,12" id="Shape"></path>
+                    <path d="M0,6 L12,6" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icon/icon-right.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="6px" height="10px" viewBox="0 0 6 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-right</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-169.000000, -323.000000)">
+            <g id="icon-right" transform="translate(162.000000, 318.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="chevron-right" transform="translate(8.000000, 6.000000)" stroke-linecap="round" stroke-width="1.33333333" stroke="#8A8C8D" stroke-linejoin="round">
+                    <polyline id="Shape" points="0 8 4 4 0 0"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icon/icon-setting.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="6px" viewBox="0 0 18 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-setting</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-234.000000, -159.000000)">
+            <g id="icon-setting" transform="translate(233.000000, 152.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="more-horizontal" transform="translate(2.000000, 8.500000)" stroke="#8A8C8D" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+                    <ellipse id="Oval" cx="8" cy="1.5" rx="1.6" ry="1.5"></ellipse>
+                    <ellipse id="Oval" cx="14.4" cy="1.5" rx="1.6" ry="1.5"></ellipse>
+                    <ellipse id="Oval" cx="1.6" cy="1.5" rx="1.6" ry="1.5"></ellipse>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icon/icon-sidebar-24.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-sidebar-24</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-1400.000000, -219.000000)">
+            <g id="icon-sidebar-24" transform="translate(1397.000000, 216.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="24" height="24"></rect>
+                <g id="sidebar" transform="translate(4.000000, 4.000000)" stroke="#8A8C8D" stroke-width="1.77777778" stroke-linecap="round" stroke-linejoin="round">
+                    <rect id="Rectangle-path" x="0" y="0" width="16" height="16" rx="1.77777778"></rect>
+                    <path d="M5.33333333,0 L5.33333333,16" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>