v0.8.0

Design renewal (v0.8.0)

browser/components/MarkdownPreview.js

@@ -5,7 +5,7 @@ import CodeMirror from 'codemirror'
 import consts from 'browser/lib/consts'
 import Raphael from 'raphael'
 import flowchart from 'flowchart'
-import SequenceDiagram from 'sequence-diagram'
+import SequenceDiagram from 'js-sequence-diagrams'
 
 function decodeHTMLEntities (text) {
   var entities = [
@@ -54,6 +54,20 @@ code {
   ${lineNumber && 'display: block !important;'}
   font-family: ${codeBlockFontFamily.join(', ')};
 }
+
+h1, h2 {
+  border: none;
+}
+
+h1 {
+  padding-bottom: 4px;
+  margin: 1em 0 8px;
+}
+
+h2 {
+  padding-bottom: 0.2em;
+  margin: 1em 0 0.37em;
+}
 `
 }
 

browser/components/NoteItem.js

@@ -0,0 +1,100 @@
+/**
+ * @fileoverview Note item component.
+ */
+import React, { PropTypes } from 'react'
+import { isArray } from 'lodash'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './NoteItem.styl'
+
+/**
+ * @description Tag element component.
+ * @param {string} tagName
+ * @return {React.Component}
+ */
+const TagElement = ({ tagName }) => (
+  <span styleName='item-bottom-tagList-item' key={tagName}>
+    {tagName}
+  </span>
+)
+
+/**
+ * @description Tag element list component.
+ * @param {Array|null} tags
+ * @return {React.Component}
+ */
+const TagElementList = (tags) => {
+  if (!isArray(tags)) {
+    return []
+  }
+
+  const tagElements = tags.map(tag => (
+    TagElement({tagName: tag})
+  ))
+
+  return tagElements
+}
+
+/**
+ * @description Note item component when using normal display mode.
+ * @param {boolean} isActive
+ * @param {Object} note
+ * @param {Function} handleNoteClick
+ * @param {Function} handleNoteContextMenu
+ * @param {string} dateDisplay
+ */
+const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteContextMenu }) => (
+  <div styleName={isActive
+      ? 'item--active'
+      : 'item'
+    }
+    key={`${note.storage}-${note.key}`}
+    onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)}
+    onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
+  >
+    <div styleName='item-wrapper'>
+      <div styleName='item-bottom-time'>{dateDisplay}</div>
+
+      <div styleName='item-title'>
+        {note.title.trim().length > 0
+          ? note.title
+          : <span styleName='item-title-empty'>Empty</span>
+        }
+      </div>
+
+      <div styleName='item-bottom'>
+        <div styleName='item-bottom-tagList'>
+          {note.tags.length > 0
+            ? TagElementList(note.tags)
+            : ''
+          }
+        </div>
+      </div>
+
+      {note.type === 'SNIPPET_NOTE'
+        ? <i styleName='item-title-icon' className='fa fa-fw fa-code' />
+        : <i styleName='item-title-icon' className='fa fa-fw fa-file-text-o' />
+      }
+
+      {note.isStarred ?
+        <i styleName='item-star' className='fa fa-star' /> : ''
+      }
+    </div>
+  </div>
+)
+
+NoteItem.propTypes = {
+  isActive: PropTypes.bool.isRequired,
+  dateDisplay: PropTypes.string.isRequired,
+  note: PropTypes.shape({
+    storage: PropTypes.string.isRequired,
+    key: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+    title: PropTypes.string.isrequired,
+    tags: PropTypes.array,
+    isStarred: PropTypes.bool.isRequired,
+  }),
+  handleNoteClick: PropTypes.func.isRequired,
+  handleNoteContextMenu: PropTypes.func.isRequired,
+}
+
+export default CSSModules(NoteItem, styles)

browser/components/NoteItem.styl

@@ -0,0 +1,168 @@
+$control-height = 30px
+
+.root
+  absolute left bottom
+  top $topBar-height - 1
+  background-color $ui-noteList-backgroundColor
+
+.item
+  position relative
+  padding 0 25px
+  user-select none
+  cursor pointer
+  background-color $ui-noteList-backgroundColor
+  transition background-color 0.15s
+  &:hover
+    background-color alpha($ui-active-color, 20%)
+  &:active
+    background-color $ui-active-color
+    color white
+    .item-title
+    .item-title-empty
+    .item-bottom-tagList-empty
+    .item-bottom-time
+    .item-title-icon
+      color white
+    .item-bottom-tagList-item
+      background-color transparent
+      color white
+
+.item-wrapper
+  padding 20px 0
+  border-bottom $ui-border
+
+.item--active
+  @extend .item
+  background-color $ui-active-color
+  color white
+  .item-title
+  .item-title-empty
+  .item-bottom-tagList-empty
+  .item-bottom-time
+  .item-title-icon
+    color white
+  .item-bottom-tagList-item
+    background-color transparent
+    color white
+  .item-wrapper
+    border-color transparent
+  &:hover
+    background-color $ui-active-color
+
+.item-title
+  font-size 14px
+  height 40px
+  box-sizing border-box
+  line-height 24px
+  padding-top 5px
+  padding-bottom 20px
+  overflow ellipsis
+  color $ui-text-color
+
+.item-title-icon
+  position absolute
+  top 20px
+  right 25px
+  font-size 14px
+  color $ui-inactive-text-color
+
+.item-title-empty
+  font-weight normal
+  color $ui-inactive-text-color
+
+.item-bottom
+  position relative
+  bottom 0px
+  margin-top 2px
+  height 20px
+  font-size 12px
+  line-height 20px
+  overflow ellipsis
+  display flex
+
+.item-bottom-tagList
+  flex 1
+  overflow ellipsis
+  line-height 20px
+  color #FFFFFF
+
+.item-bottom-tagList-item
+  font-size 12px
+  margin-right 8px
+  padding 0 10px
+  height 20px
+  box-sizing border-box
+  border-radius 20px
+  vertical-align middle
+  background-color $ui-tag-backgroundColor
+  color #FFFFFF
+
+.item-bottom-tagList-empty
+  color $ui-inactive-text-color
+  vertical-align middle
+  font-size 10px
+  margin-left 5px
+
+.item-bottom-time
+  color $ui-inactive-text-color
+  font-size 12px
+
+.item-star
+  position absolute
+  top 20px
+  right 29px
+  width 34px
+  height 34px
+  color $ui-favorite-star-button-color
+  font-size 14px
+  padding 0
+  border-radius 17px
+
+body[data-theme="dark"]
+  .root
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-noteList-backgroundColor
+
+  .item
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-noteList-backgroundColor
+    &:active
+      background-color $ui-active-color
+    &:hover
+      background-color alpha($ui-active-color, 20%)
+
+  .item-wrapper
+    border-color $ui-dark-borderColor
+
+  .item--active
+    @extend .item
+    border-color $ui-dark-borderColor
+    background-color $ui-active-color
+    .item-wrapper
+      border-color transparent
+    .item-title
+      color white
+    .item-bottom-tagList-item
+      background-color transparent
+      color white
+    .item-bottom-tagList-empty
+      color white
+    &:hover
+      background-color $ui-active-color
+
+  .item-title
+    color $ui-dark-text-color
+
+  .item-title-icon
+    color $ui-darkinactive-text-color
+
+  .item-title-empty
+    color $ui-dark-inactive-text-color
+
+  .item-bottom-tagList-item
+    background-color $ui-dark-tag-backgroundColor
+    color $ui-dark-text-color
+
+  .item-bottom-tagList-empty
+    color $ui-inactive-text-color
+    vertical-align middle

browser/components/NoteItemSimple.js

@@ -0,0 +1,49 @@
+/**
+ * @fileoverview Note item component with simple display mode.
+ */
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './NoteItemSimple.styl'
+
+/**
+ * @description Note item component when using simple display mode.
+ * @param {boolean} isActive
+ * @param {Object} note
+ * @param {Function} handleNoteClick
+ * @param {Function} handleNoteContextMenu
+ */
+const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu }) => (
+  <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}`)}
+  >
+    <div styleName='item-simple-title'>
+      {note.type === 'SNIPPET_NOTE'
+        ? <i styleName='item-simple-title-icon' className='fa fa-fw fa-code' />
+        : <i styleName='item-simple-title-icon' className='fa fa-fw fa-file-text-o' />
+      }
+      {note.title.trim().length > 0
+        ? note.title
+        : <span styleName='item-simple-title-empty'>Empty</span>
+      }
+    </div>
+  </div>
+)
+
+NoteItemSimple.propTypes = {
+  isActive: PropTypes.bool.isRequired,
+  note: PropTypes.shape({
+    storage: PropTypes.string.isRequired,
+    key: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+    title: PropTypes.string.isrequired,
+  }),
+  handleNoteClick: PropTypes.func.isRequired,
+  handleNoteContextMenu: PropTypes.func.isRequired,
+}
+
+export default CSSModules(NoteItemSimple, styles)

browser/components/NoteItemSimple.styl

@@ -0,0 +1,89 @@
+$control-height = 30px
+
+.root
+  absolute left bottom
+  top $topBar-height - 1
+  background-color $ui-noteList-backgroundColor
+
+.item-simple
+  position relative
+  padding 0 25px
+  user-select none
+  cursor pointer
+  background-color $ui-noteList-backgroundColor
+  transition background-color 0.15s
+  &:hover
+    background-color alpha($ui-active-color, 20%)
+  &:active
+    background-color $ui-active-color
+    color white
+    .item-simple-title
+    .item-simple-title-empty
+    .item-simple-title-icon
+      color white
+
+.item-simple--active
+  @extend .item-simple
+  background-color $ui-active-color
+  color white
+  .item-simple-title
+  .item-simple-title-empty
+    border-color transparent
+    color white
+  .item-simple-title-icon
+    color white
+  &:hover
+    background-color $ui-active-color
+
+.item-simple-title
+  font-size 14px
+  height 40px
+  box-sizing border-box
+  line-height 24px
+  padding-top 8px
+  overflow ellipsis
+  color $ui-text-color
+  border-bottom $ui-border
+
+.item-simple-title-icon
+  font-size 12px
+  color $ui-inactive-text-color
+  padding-right 6px
+
+.item-simple-title-empty
+  font-weight normal
+  color $ui-inactive-text-color
+
+body[data-theme="dark"]
+  .root
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-noteList-backgroundColor
+
+  .item-simple
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-noteList-backgroundColor
+    &:active
+      background-color $ui-active-color
+    &:hover
+      background-color alpha($ui-active-color, 20%)
+
+  .item-simple--active
+    @extend .item-simple
+    border-color $ui-dark-borderColor
+    background-color $ui-active-color
+    .item-simple-title
+    .item-simple-title-empty
+      color white
+      border-color transparent
+    &:hover
+      background-color $ui-active-color
+
+  .item-simple-title
+    color $ui-dark-text-color
+    border-color $ui-dark-borderColor
+
+  .item-simple-title-icon
+    color $ui-darkinactive-text-color
+
+  .item-simple-title-empty
+    color $ui-dark-inactive-text-color

browser/components/SideNavFilter.js

@@ -0,0 +1,44 @@
+/**
+ * @fileoverview Filter for all notes.
+ */
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './SideNavFilter.styl'
+
+/**
+ * @param {boolean} isFolded
+ * @param {boolean} isHomeActive
+ * @param {Function} handleAllNotesButtonClick
+ * @param {boolean} isStarredActive
+ * @param {Function} handleStarredButtonClick
+ * @return {React.Component}
+ */
+const SideNavFilter = ({
+  isFolded, isHomeActive, handleAllNotesButtonClick,
+  isStarredActive, handleStarredButtonClick
+}) => (
+  <div styleName={ isFolded ? 'menu--folded' : 'menu' }>
+    <button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
+      onClick={handleAllNotesButtonClick}
+    >
+      <i className='fa fa-book fa-fw'/>
+      <span styleName='menu-button-label'>All Notes</span>
+    </button>
+    <button styleName={isStarredActive ? 'menu-button--active' : 'menu-button'}
+      onClick={handleStarredButtonClick}
+    >
+      <i className='fa fa-star fa-fw'/>
+      <span styleName='menu-button-label'>Starred</span>
+    </button>
+  </div>
+)
+
+SideNavFilter.propTypes = {
+  isFolded: PropTypes.bool,
+  isHomeActive: PropTypes.bool.isRequired,
+  handleAllNotesButtonClick: PropTypes.func.isRequired,
+  isStarredActive: PropTypes.bool.isRequired,
+  handleStarredButtonClick: PropTypes.func.isRequired,
+}
+
+export default CSSModules(SideNavFilter, styles)

browser/components/SideNavFilter.styl

@@ -0,0 +1,58 @@
+.menu
+  margin-bottom 30px
+
+.menu-button
+  navButtonColor()
+  height 32px
+  padding 0 15px
+  font-size 14px
+  width 100%
+  text-align left
+  overflow ellipsis
+
+.menu-button--active
+  @extend .menu-button
+  background-color $ui-button--active-backgroundColor
+  color $ui-button--active-color
+  &:hover
+    background-color $ui-button--active-backgroundColor
+
+.menu-button-label
+  margin-left 5px
+
+.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
+    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
+    navDarkButtonColor()
+
+  .menu-button--active
+    @extend .menu-button
+    background-color $ui-dark-button--active-backgroundColor
+    color $ui-dark-button--active-color
+    &:hover
+      background-color $ui-dark-button--active-backgroundColor

browser/components/SnippetTab.styl

@@ -2,9 +2,6 @@
   position relative
   flex 1
   overflow hidden
-  border-right $ui-border
-  &:last-child
-    border-right none
   &:hover
     .deleteButton
       color $ui-inactive-text-color
@@ -13,11 +10,11 @@
       &:active
         color white
         background-color $ui-active-color
+
 .root--active
   @extend .root
   min-width 100px
-  .button
-    border-color $brand-color
+  border-bottom $ui-border
 
 .button
   width 100%
@@ -31,8 +28,6 @@
   border-left 4px solid transparent
   &:hover
     background-color $ui-button--hover-backgroundColor
-  &:active, &:active:hover
-    border-color $brand-color
 
 .deleteButton
   position absolute
@@ -71,8 +66,6 @@ body[data-theme="dark"]
   .root--active
     color $ui-dark-text-color
     border-color $ui-dark-borderColor
-    .button
-      border-color $brand-color
     &:hover
       background-color $ui-dark-button--hover-backgroundColor
       .deleteButton
@@ -92,10 +85,6 @@ body[data-theme="dark"]
     &:hover
       color white
       background-color $ui-dark-button--hover-backgroundColor
-    &:active
-      color $ui-dark-button--active-color
-    &:active, &:active:hover
-      color $ui-dark-button--active-color
 
   .input
     background-color $ui-dark-button--hover-backgroundColor

browser/components/StorageItem.js

@@ -0,0 +1,58 @@
+/**
+ * @fileoverview Micro component for showing storage.
+ */
+import React, { PropTypes } from 'react'
+import styles from './StorageItem.styl'
+import CSSModules from 'browser/lib/CSSModules'
+import { isNumber } from 'lodash'
+
+/**
+ * @param {boolean} isActive
+ * @param {Function} handleButtonClick
+ * @param {Function} handleContextMenu
+ * @param {string} folderName
+ * @param {string} folderColor
+ * @param {boolean} isFolded
+ * @param {number} noteCount
+ * @return {React.Component}
+ */
+const StorageItem = ({
+  isActive, handleButtonClick, handleContextMenu, folderName,
+  folderColor, isFolded, noteCount
+}) => (
+  <button styleName={isActive
+      ? 'folderList-item--active'
+      : 'folderList-item'
+    }
+    onClick={handleButtonClick}
+    onContextMenu={handleContextMenu}
+  >
+    <span styleName={isFolded ?
+      'folderList-item-name--folded' : 'folderList-item-name'
+    }
+      style={{borderColor: folderColor}}
+    >
+      {isFolded ? folderName.substring(0, 1) : folderName}
+    </span>
+    {(!isFolded && isNumber(noteCount)) &&
+      <span styleName='folderList-item-noteCount'>{noteCount}</span>
+    }
+    {isFolded &&
+      <span styleName='folderList-item-tooltip'>
+        {folderName}
+      </span>
+    }
+  </button>
+)
+
+StorageItem.propTypes = {
+  isActive: PropTypes.bool.isRequired,
+  handleButtonClick: PropTypes.func,
+  handleContextMenu: PropTypes.func,
+  folderName: PropTypes.string.isRequired,
+  folderColor: PropTypes.string,
+  isFolded: PropTypes.bool.isRequired,
+  noteCount: PropTypes.number,
+}
+
+export default CSSModules(StorageItem, styles)

browser/components/StorageItem.styl

@@ -0,0 +1,68 @@
+.root
+  width 100%
+  user-select none
+
+.folderList-item
+  display flex
+  width 100%
+  height 26px
+  background-color transparent
+  color $ui-inactive-text-color
+  padding 0
+  margin-bottom 5px
+  text-align left
+  border none
+  overflow ellipsis
+  font-size 14px
+  &:first-child
+    margin-top 0
+  &:hover
+    background-color $ui-button--hover-backgroundColor
+  &:active
+    color $ui-button--active-color
+    background-color $ui-button--active-backgroundColor
+
+.folderList-item--active
+  @extend .folderList-item
+  color $ui-button--active-color
+  background-color $ui-button--active-backgroundColor
+  &:hover
+    color $ui-button--active-color
+    background-color $ui-button--active-backgroundColor
+
+.folderList-item-name
+  display block
+  flex 1
+  padding 0 30px
+  height 26px
+  line-height 26px
+  border-width 0 0 0 3px
+  border-style solid
+  border-color transparent
+
+.folderList-item-noteCount
+  float right
+  line-height 26px
+  padding-right 15px
+  font-size 12px
+
+.folderList-item-tooltip
+  tooltip()
+  position fixed
+  padding 0 10px
+  left 44px
+  z-index 10
+  pointer-events none
+  opacity 0
+  border-top-right-radius 2px
+  border-bottom-right-radius 2px
+  height 26px
+  line-height 26px
+
+.folderList-item:hover, .folderList-item--active:hover
+  .folderList-item-tooltip
+    opacity 1
+
+.folderList-item-name--folded
+  @extend .folderList-item-name
+  padding-left 14px

browser/components/markdown.styl

@@ -55,6 +55,7 @@ body
   line-height 1.6
   overflow-x hidden
   user-select all
+  background-color $ui-noteDetail-backgroundColor
   .katex
     font 400 1.2em 'KaTeX_Main'
     line-height 1.2em
@@ -273,13 +274,14 @@ table
 themeDarkBackground = darken(#21252B, 10%)
 themeDarkText = #DDDDDD
 themeDarkBorder = lighten(themeDarkBackground, 20%)
-themeDarkPreview = #282C34
+themeDarkPreview = $ui-dark-noteDetail-backgroundColor
 themeDarkTableOdd = themeDarkPreview
 themeDarkTableEven = darken(themeDarkPreview, 10%)
 themeDarkTableHead = themeDarkTableEven
 themeDarkTableBorder = themeDarkBorder
 themeDarkModalButtonDefault = themeDarkPreview
 themeDarkModalButtonDanger = #BF360C
+
 body[data-theme="dark"]
   color themeDarkText
   border-color themeDarkBorder

browser/finder/FinderMain.styl

@@ -21,6 +21,7 @@ $list-width = 250px
   outline none
   text-align center
   background-color transparent
+
 .result
   absolute left right bottom
   top $search-height
@@ -32,7 +33,7 @@ $list-width = 250px
   background-color $ui-backgroundColor
 
 .result-nav-filter
-  margin-bottom 5px
+  margin-bottom 10px
 
 .result-nav-filter-option
   height 25px
@@ -62,7 +63,7 @@ $list-width = 250px
 
 .result-nav-storageList
   absolute bottom left right
-  top 80px + 32px + 10px
+  top 80px + 32px + 10px + 10px
   overflow-y auto
 
 .result-list
@@ -70,15 +71,15 @@ $list-width = 250px
   absolute top bottom
   left $nav-width
   width $list-width
-  border-width 0 1px
-  border-style solid
-  border-color $ui-borderColor
   box-sizing border-box
   overflow-y auto
+  box-shadow 2px 0 15px -8px #b1b1b1
+  z-index 1
 
 .result-detail
   absolute top bottom right
   left $nav-width + $list-width
+  background-color $ui-noteDetail-backgroundColor
 
 body[data-theme="dark"]
   .root
@@ -104,7 +105,10 @@ body[data-theme="dark"]
 
   .result-list
     border-color $ui-dark-borderColor
+    box-shadow none
+    top 0
 
   .result-detail
     absolute top bottom right
     left $nav-width + $list-width
+    background-color $ui-dark-noteDetail-backgroundColor

browser/finder/NoteDetail.styl

@@ -1,12 +1,16 @@
+@import('../main/Detail/DetailVars.styl')
+
 .root
   absolute top bottom left right
-  width 100%
+  left $note-detail-left-margin
+  right $note-detail-right-margin
   height 100%
+  width 365px
+  background-color $ui-noteDetail-backgroundColor
 
 .description
   absolute top left right
   height 80px
-  border-bottom $ui-border
   box-sizing border-box
 
 .description-textarea
@@ -18,52 +22,43 @@
   padding 10px
   line-height 1.6
   box-sizing border-box
+  background-color $ui-noteDetail-backgroundColor
 
 .tabList
   absolute left right
   top 80px
   box-sizing border-box
   height 30px
-  border-bottom $ui-border
   display flex
-  background-color $ui-backgroundColor
+  background-color $ui-noteDetail-backgroundColor
 
 .tabList-item
   position relative
   flex 1
-  border-right $ui-border
+  overflow hidden
+  &:hover
+    background-color $ui-button--hover-backgroundColorg
 
 .tabList-item--active
   @extend .tabList-item
-  .tabList-item-button
-    border-color $brand-color
+  border-bottom $ui-border
 
 .tabList-item-button
   width 100%
   height 29px
-  navButtonColor()
-  outline none
-  border-left 4px solid transparent
-
-.tabList-item-deleteButton
-  position absolute
-  top 5px
-  height 20px
-  right 5px
-  width 20px
-  text-align center
+  overflow ellipsis
+  text-align left
+  padding-right 30px
+  padding-left 10px
   border none
-  padding 0
-  color transparent
   background-color transparent
-  border-radius 2px
-.tabList-plusButton
-  navButtonColor()
-  width 30px
+  transition 0.15s
+  &:hover
+    background-color $ui-button--hover-backgroundColor
 
 .tabView
   absolute left right bottom
-  top 110px
+  top 130px
 
 .tabView-content
   absolute top left right bottom
@@ -72,38 +67,31 @@
   width 100%
 
 body[data-theme="dark"]
+  .root
+    background-color $ui-dark-noteDetail-backgroundColor
+
   .description
     border-color $ui-dark-borderColor
+    background-color $ui-dark-noteDetail-backgroundColor
 
   .description-textarea
-    background-color $ui-dark-button--hover-backgroundColor
+    background-color $ui-dark-noteDetail-backgroundColor
     color white
 
   .tabList
-    background-color $ui-button--active-backgroundColor
-    border-bottom-color $ui-dark-borderColor
-    background-color $ui-dark-backgroundColor
+    background-color $ui-dark-noteDetail-backgroundColor
+
   .tabList-item
     border-color $ui-dark-borderColor
     &:hover
       background-color $ui-dark-button--hover-backgroundColor
-  .tabList-item--active
-    border-color $ui-dark-borderColor
-    .tabList-item-button
-      border-color $brand-color
-  .tabList-item-button
-    navDarkButtonColor()
-    border-left 4px solid transparent
-  .tabList-plusButton
-    navDarkButtonColor()
 
-  .tabView-top
-    border-color $ui-dark-borderColor
-  .tabView-top-name
-    border-color $ui-dark-borderColor
+  .tabList-item-button
+    border none
     color $ui-dark-text-color
-    background-color $ui-dark-button--hover-backgroundColor
-  .tabView-top-mode
-    border-color $ui-dark-borderColor
-    background-color $dark-default-button-background
-    color $ui-dark-inactive-text-color
+    background-color transparent
+    transition color background-color 0.15s
+    border-left 4px solid transparent
+    &:hover
+      color white
+      background-color $ui-dark-button--hover-backgroundColor

browser/finder/NoteItem.js

@@ -1,85 +0,0 @@
-import React, { PropTypes } from 'react'
-import CSSModules from 'browser/lib/CSSModules'
-import styles from './NoteItem.styl'
-import moment from 'moment'
-import _ from 'lodash'
-
-class NoteItem extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-    }
-  }
-
-  handleClick (e) {
-    this.props.onClick(e)
-  }
-
-  render () {
-    let { note, folder, storage, isActive } = this.props
-
-    let tagList = _.isArray(note.tags)
-      ? note.tags.map((tag) => {
-        return (
-          <span styleName='bottom-tagList-item'
-            key={tag}>
-            {tag}
-          </span>
-        )
-      })
-      : []
-    return (
-      <div styleName={isActive
-          ? 'root--active'
-          : 'root'
-        }
-        key={note.storage + '-' + note.key}
-        onClick={(e) => this.handleClick(e)}
-      >
-        <div styleName='info'>
-          <div styleName='info-left'>
-            <span styleName='info-left-folder'
-              style={{borderColor: folder.color}}
-            >
-              {folder.name}
-              <span styleName='info-left-folder-surfix'>in {storage.name}</span>
-            </span>
-          </div>
-        </div>
-
-        <div styleName='title'>
-          {note.type === 'SNIPPET_NOTE'
-            ? <i styleName='title-icon' className='fa fa-fw fa-code' />
-            : <i styleName='title-icon' className='fa fa-fw fa-file-text-o' />
-          }
-          {note.title.trim().length > 0
-            ? note.title
-            : <span styleName='title-empty'>Empty</span>
-          }
-        </div>
-
-        <div styleName='bottom'>
-          <i styleName='bottom-tagIcon'
-            className='fa fa-tags fa-fw'
-          />
-          <div styleName='bottom-tagList'>
-            {tagList.length > 0
-              ? tagList
-              : <span styleName='bottom-tagList-empty'>Not tagged yet</span>
-            }
-          </div>
-
-          <div styleName='bottom-time'>
-            {moment(note.updatedAt).fromNow()}
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-NoteItem.propTypes = {
-}
-
-export default CSSModules(NoteItem, styles)

browser/finder/NoteItem.styl

@@ -1,179 +0,0 @@
-.root
-  position relative
-  border-bottom $ui-border
-  padding 2px 5px
-  user-select none
-  cursor pointer
-  transition background-color 0.15s
-  &:hover
-    background-color alpha($ui-active-color, 20%)
-
-.root--active
-  @extend .root
-  background-color $ui-active-color
-  &:hover
-    background-color $ui-active-color
-  color white
-  .info-left-folder
-  .info-left-folder-surfix
-  .title
-  .title-icon
-  .title-empty
-  .bottom-tagIcon
-  .bottom-tagList-item
-  .bottom-tagList-empty
-  .bottom-time
-    color white
-  .bottom-tagList-item
-    color white
-    background-color transparent
-
-.border
-  absolute top bottom left right
-  border-style solid
-  border-width 2px
-  border-color transparent
-  transition 0.15s
-
-.info
-  height 20px
-  clearfix()
-  font-size 12px
-  color $ui-inactive-text-color
-  line-height 20px
-  overflow-y hidden
-
-.info-left
-  float left
-  overflow ellipsis
-
-.info-left-folder
-  border-left 4px solid transparent
-  padding 2px 5px
-  color $ui-text-color
-.info-left-folder-surfix
-  font-size 10px
-  margin-left 5px
-  color $ui-inactive-text-color
-.info-right
-  float right
-
-.title
-  height 24px
-  box-sizing border-box
-  line-height 24px
-  height 20px
-  line-height 20px
-  padding 0 5px 0 0
-  overflow ellipsis
-  color $ui-text-color
-
-.title-icon
-  font-size 12px
-  color $ui-inactive-text-color
-  padding-right 3px
-
-.title-empty
-  font-weight normal
-  color $ui-inactive-text-color
-
-.bottom
-  margin-top 2px
-  height 20px
-  font-size 12px
-  line-height 20px
-  overflow ellipsis
-  display flex
-
-.bottom-tagIcon
-  vertical-align middle
-  color $ui-button-color
-  height 20px
-  line-height 20px
-
-.bottom-tagList
-  flex 1
-  overflow ellipsis
-  line-height 20px
-
-.bottom-tagList-item
-  margin 0 4px
-  padding 0 4px
-  height 20px
-  box-sizing border-box
-  border-radius 3px
-  vertical-align middle
-  border-style solid
-  border-color $ui-button--focus-borderColor
-  border-width 0 0 0 3px
-  background-color $ui-backgroundColor
-  color $ui-text-color
-  transition 0.15s
-
-.bottom-tagList-empty
-  color $ui-inactive-text-color
-  vertical-align middle
-  font-size 10px
-  margin-left 5px
-
-.bottom-time
-  color $ui-inactive-text-color
-  margin-left 5px
-  font-size 10px
-
-body[data-theme="dark"]
-  .root
-    border-color $ui-dark-borderColor
-
-  .root--active
-    @extend .root
-    border-color $ui-dark-borderColor
-    &:hover
-      background-color $ui-active-color
-    .info-left-folder
-    .info-left-folder-surfix
-    .title
-    .title-icon
-    .title-empty
-    .bottom-tagIcon
-    .bottom-tagList-item
-    .bottom-tagList-empty
-    .bottom-time
-      color white
-    .bottom-tagList-item
-      color white
-      background-color transparent
-
-  .info
-    color $ui-dark-inactive-text-color
-
-  .info-left-folder
-    color $ui-dark-text-color
-
-  .info-left-folder-surfix
-    color $ui-dark-inactive-text-color
-
-  .title
-    color $ui-dark-text-color
-
-  .title-icon
-    color $ui-dark-inactive-text-color
-
-  .title-empty
-    color $ui-dark-inactive-text-color
-
-  .tagList-empty
-    color $ui-dark-inactive-text-color
-
-  .bottom-tagIcon
-    color $ui-dark-button-color
-
-  .bottom-tagList-item
-    color $ui-dark-text-color
-    background-color $ui-dark-backgroundColor
-
-  .bottom-tagList-empty
-    color $ui-dark-inactive-text-color
-
-  .bottom-time
-    color $ui-dark-inactive-text-color

browser/finder/NoteList.js

@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react'
-import NoteItem from './NoteItem'
-import _ from 'lodash'
+import NoteItem from 'browser/components/NoteItem'
+import moment from 'moment'
 
 class NoteList extends React.Component {
   constructor (props) {
@@ -59,16 +59,19 @@ class NoteList extends React.Component {
     let notesList = notes
       .slice(0, 10 + 10 * this.state.range)
       .map((note, _index) => {
-        let storage = storageMap[note.storage]
-        let folder = _.find(storage.folders, {key: note.folder})
+
+        const isActive = (index === _index)
+        const key = `${note.storage}-${note.key}`
+        const dateDisplay = moment(note.updatedAt).fromNow()
+
         return (
           <NoteItem
+            isActive={isActive}
             note={note}
-            key={`${note.storage}-${note.key}`}
-            storage={storage}
-            folder={folder}
-            isActive={index === _index}
-            onClick={(e) => this.props.handleNoteClick(e, _index)}
+            dateDisplay={dateDisplay}
+            key={key}
+            handleNoteClick={(e) => this.props.handleNoteClick(e, _index)}
+            handleNoteContextMenu={() => ''}
           />
         )
       })

browser/finder/StorageSection.js

@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './StorageSection.styl'
+import StorageItem from 'browser/components/StorageItem'
 
 class StorageSection extends React.Component {
   constructor (props) {
@@ -30,20 +31,17 @@ class StorageSection extends React.Component {
   render () {
     let { storage, filter } = this.props
     let folderList = storage.folders
-      .map((folder) => {
-        return (
-          <button styleName={filter.type === 'FOLDER' && filter.folder === folder.key && filter.storage === storage.key
-              ? 'folderList-item--active'
-              : 'folderList-item'
-            }
-            style={{borderColor: folder.color}}
-            key={folder.key}
-            onClick={(e) => this.handleFolderClick(e, folder)}
-          >
-            {folder.name}
-          </button>
-        )
-      })
+      .map(folder => (
+        <StorageItem
+          key={folder.key}
+          isActive={filter.type === 'FOLDER' && filter.folder === folder.key && filter.storage === storage.key}
+          handleButtonClick={(e) => this.handleFolderClick(e, folder)}
+          folderName={folder.name}
+          folderColor={folder.color}
+          isFolded={false}
+        />
+      ))
+
     return (
       <div styleName='root'>
         <div styleName='header'>

browser/finder/index.js

@@ -9,6 +9,7 @@ import styles from './FinderMain.styl'
 import StorageSection from './StorageSection'
 import NoteList from './NoteList'
 import NoteDetail from './NoteDetail'
+import SideNavFilter from 'browser/components/SideNavFilter'
 require('!!style!css!stylus?sourceMap!../main/global.styl')
 require('../lib/customMeta')
 
@@ -307,18 +308,12 @@ class FinderMain extends React.Component {
                   /> Only Markdown</label>
               </div>
             </div>
-            <button styleName={filter.type === 'ALL'
-                ? 'result-nav-menu--active'
-                : 'result-nav-menu'
-              }
-              onClick={(e) => this.handleAllNotesButtonClick(e)}
-            ><i className='fa fa-files-o fa-fw'/> All Notes</button>
-            <button styleName={filter.type === 'STARRED'
-                ? 'result-nav-menu--active'
-                : 'result-nav-menu'
-              }
-              onClick={(e) => this.handleStarredButtonClick(e)}
-            ><i className='fa fa-star fa-fw'/> Starred</button>
+            <SideNavFilter
+              isHomeActive={filter.type === 'ALL'}
+              handleAllNotesButtonClick={(e) => this.handleAllNotesButtonClick(e)}
+              isStarredActive={filter.type === 'STARRED'}
+              handleStarredButtonClick={(e) => this.handleStarredButtonClick(e)}
+            />
             <div styleName='result-nav-storageList'>
               {storageList}
             </div>

browser/lib/date-formatter.js

@@ -0,0 +1,18 @@
+/**
+ * @fileoverview Formatting date string.
+ */
+import moment from 'moment';
+
+/**
+ * @description Return date string. For example, 'Sep.9, 2016 12:00'.
+ * @param {mixed}
+ * @return {string}
+ */
+export function getLastUpdated(date) {
+  const m = moment(date)
+  if (!m.isValid()) {
+    throw Error('Invalid argument.');
+  }
+
+  return m.format('MMM D, gggg H:mm')
+}

browser/main/Detail/DetailVars.styl

@@ -0,0 +1,9 @@
+/**
+ * Varibales for note detail space.
+ */
+
+// Margin on the left side and the right side for NoteDetail component.
+$note-detail-left-margin = 25px
+$note-detail-right-margin = 25px
+
+$note-detail-box-shadow = 2px 0 15px -8px #b1b1b1 inset

browser/main/Detail/LastUpdatedString.js

@@ -0,0 +1,27 @@
+/**
+ * @fileoverview Component for show updated date of the detail.
+ */
+import React, { PropTypes } from 'react'
+import { getLastUpdated } from 'browser/lib/date-formatter'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './LastUpdatedString.styl'
+
+const LastUpdatedString = ({ date }) => {
+  let text = ''
+
+  try {
+    text = `Last updated at ${getLastUpdated(date)}`
+  } catch (e) {
+    text = ''
+  }
+
+  return (
+    <p styleName='info-right-date'>{text}</p>
+  )
+}
+
+LastUpdatedString.propTypes = {
+  date: PropTypes.string,
+}
+
+export default CSSModules(LastUpdatedString, styles)

browser/main/Detail/LastUpdatedString.styl

@@ -0,0 +1,8 @@
+.info-right-date
+  display inline
+  font-size 11px
+  color $ui-button-color
+
+body[data-theme="dark"]
+  .info-right-date
+    color $ui-dark-button-color

browser/main/Detail/MarkdownNoteDetail.js

@@ -4,7 +4,7 @@ import styles from './MarkdownNoteDetail.styl'
 import MarkdownEditor from 'browser/components/MarkdownEditor'
 import StarButton from './StarButton'
 import TagSelect from './TagSelect'
-import FolderSelect from './FolderSelect'
+import LastUpdatedString from './LastUpdatedString'
 import dataApi from 'browser/main/lib/dataApi'
 import { hashHistory } from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
@@ -166,20 +166,6 @@ class MarkdownNoteDetail extends React.Component {
 
   }
 
-  handleShareButtonClick (e) {
-    let menu = new Menu()
-    menu.append(new MenuItem({
-      label: 'Export as a File',
-      click: (e) => this.handlePreferencesButtonClick(e)
-    }))
-    menu.append(new MenuItem({
-      label: 'Export to Web',
-      disabled: true,
-      click: (e) => this.handlePreferencesButtonClick(e)
-    }))
-    menu.popup(remote.getCurrentWindow())
-  }
-
   handleContextButtonClick (e) {
     let menu = new Menu()
     menu.append(new MenuItem({
@@ -229,44 +215,22 @@ class MarkdownNoteDetail extends React.Component {
       >
         <div styleName='info'>
           <div styleName='info-left'>
-            <div styleName='info-left-top'>
-              <FolderSelect styleName='info-left-top-folderSelect'
-                value={this.state.note.storage + '-' + this.state.note.folder}
-                ref='folder'
-                data={data}
-                onChange={(e) => this.handleFolderChange(e)}
-              />
-            </div>
-            <div styleName='info-left-bottom'>
-              <TagSelect
-                styleName='info-left-bottom-tagSelect'
-                ref='tags'
-                value={this.state.note.tags}
-                onChange={(e) => this.handleChange(e)}
-              />
-            </div>
-          </div>
-          <div styleName='info-right'>
-            <StarButton styleName='info-right-button'
+            <StarButton styleName='info-left-button'
               onClick={(e) => this.handleStarButtonClick(e)}
               isActive={note.isStarred}
             />
-            <button styleName='info-right-button'
-              onClick={(e) => this.handleShareButtonClick(e)}
-              disabled
-            >
-              <i className='fa fa-share-alt fa-fw' />
-              <span styleName='info-right-button-tooltip'
-                style={{right: 20}}
-              >Share Note</span>
-            </button>
+            <TagSelect
+              ref='tags'
+              value={this.state.note.tags}
+              onChange={(e) => this.handleChange(e)}
+            />
+          </div>
+          <div styleName='info-right'>
+            <LastUpdatedString date={note.updatedAt} />
             <button styleName='info-right-button'
               onClick={(e) => this.handleContextButtonClick(e)}
             >
               <i className='fa fa-ellipsis-v' />
-              <span styleName='info-right-button-tooltip'
-                style={{right: 5}}
-              >More Options</span>
             </button>
           </div>
         </div>

browser/main/Detail/MarkdownNoteDetail.styl

@@ -1,68 +1,19 @@
-$info-height = 75px
+@import('NoteDetailInfo')
+@import('DetailVars')
 
 .root
   absolute top right bottom
   border-width 0 0 1px
   border-style solid
   border-color $ui-borderColor
-
-.info
-  absolute top left right
-  height $info-height
-  border-bottom $ui-border
-  background-color $ui-backgroundColor
-
-.info-left
-  float left
-  padding 0 5px
-
-.info-left-top
-  height 40px
-  line-height 40px
-
-.info-left-top-folderSelect
-  display inline-block
-  height 34px
-  width 200px
-  vertical-align middle
-
-.info-left-bottom
-  height 30px
-
-.info-left-bottom-tagSelect
-  height 30px
-  line-height 30px
-
-.info-right
-  float right
-
-.info-right-button
-  width 34px
-  height 34px
-  border-radius 17px
-  navButtonColor()
-  border $ui-border
-  font-size 14px
-  margin 8px 2px
-  padding 0
-  &:active
-    border-color $ui-button--focus-borderColor
-  &:hover .info-right-button-tooltip
-    opacity 1
-  &:focus
-    border-color $ui-button--focus-borderColor
-
-.info-right-button-tooltip
-  tooltip()
-  position fixed
-  top 45px
-  padding 5px
-  opacity 0
-  border-radius 2px
+  background-color $ui-noteDetail-backgroundColor
+  box-shadow $note-detail-box-shadow
 
 .body
   absolute left right
-  top $info-height
+  left $note-detail-left-margin
+  right $note-detail-right-margin
+  top $info-height + $info-margin-under-border
   bottom $statusBar-height
 
 .body-noteEditor
@@ -71,32 +22,5 @@ $info-height = 75px
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor
-
-  .info
-    border-color $ui-dark-borderColor
-    background-color $ui-dark-backgroundColor
-
-  .info-delete
-    color $ui-dark-text-color
-
-  .info-delete-confirmButton
-    colorDarkDangerButton()
-    color $ui-dark-text-color
-
-  .info-delete-cancelButton
-    colorDarkDefaultButton()
-    border-color $ui-dark-borderColor
-    color $ui-dark-text-color
-
-  .info-right-button
-    navDarkButtonColor()
-    border-color $ui-dark-borderColor
-    &:active
-      border-color $ui-dark-button--focus-borderColor
-    &:hover .info-right-button-tooltip
-      opacity 1
-    &:focus
-      border-color $ui-button--focus-borderColor
-
-  .info-right-button-tooltip
-    darkTooltip()
+    background-color $ui-dark-noteDetail-backgroundColor
+    box-shadow none

browser/main/Detail/NoteDetailInfo.styl

@@ -0,0 +1,85 @@
+@import('DetailVars')
+
+$info-height = 60px
+$info-margin-under-border = 27px
+
+.info
+  absolute top left right
+  left $note-detail-left-margin
+  right $note-detail-right-margin
+  height $info-height
+  border-bottom $ui-border
+  background-color $ui-noteDetail-backgroundColor
+
+.info-left
+  float left
+  padding 0 5px
+  margin 0px 2px
+
+.info-left-button
+  width 34px
+  height 34px
+  navButtonColor()
+  color $ui-favorite-star-button-color
+  font-size 14px
+  margin 13px 2px
+  padding 0
+  border-radius 17px
+  &:hover .info-right-button-tooltip
+    opacity 1
+  &:focus
+    border-color $ui-favorite-star-button-color
+  &:active, &:active:hover
+    background-color $ui-favorite-star-button-color
+    color $ui-button--active-color
+
+.info-right
+  position absolute
+  right 0
+  top 0
+  background $ui-noteDetail-backgroundColor
+  bottom 1px
+  padding-left 30px
+
+.info-right-button
+  width 34px
+  height 34px
+  border-radius 17px
+  font-size 14px
+  margin 13px 7px
+  padding 0
+  border none
+  color $ui-button-color
+  background-color transparent
+  &:hover
+    opacity 1
+    background-color $ui-button--hover-backgroundColor
+
+
+body[data-theme="dark"]
+  .info
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-noteDetail-backgroundColor
+
+  .info-delete
+    color $ui-dark-text-color
+
+  .info-delete-confirmButton
+    colorDarkDangerButton()
+    color $ui-dark-text-color
+
+  .info-delete-cancelButton
+    colorDarkDefaultButton()
+    border-color $ui-dark-borderColor
+    color $ui-dark-text-color
+
+  .info-right
+    background-color $ui-dark-noteDetail-backgroundColor
+
+  .info-right-button
+    navDarkButtonColor()
+    border-color $ui-dark-borderColor
+    &:active
+      border-color $ui-dark-button--focus-borderColor
+    &:focus
+      border-color $ui-button--focus-borderColor

browser/main/Detail/SnippetNoteDetail.js

@@ -5,12 +5,12 @@ import CodeEditor from 'browser/components/CodeEditor'
 import MarkdownEditor from 'browser/components/MarkdownEditor'
 import StarButton from './StarButton'
 import TagSelect from './TagSelect'
-import FolderSelect from './FolderSelect'
+import LastUpdatedString from './LastUpdatedString'
 import dataApi from 'browser/main/lib/dataApi'
 import { hashHistory } from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
 import CodeMirror from 'codemirror'
-import SnippetTab from './SnippetTab'
+import SnippetTab from 'browser/components/SnippetTab'
 import StatusBar from '../StatusBar'
 import context from 'browser/lib/context'
 import ConfigManager from 'browser/main/lib/ConfigManager'
@@ -188,21 +188,6 @@ class SnippetNoteDetail extends React.Component {
 
   }
 
-  handleShareButtonClick (e) {
-    let menu = new Menu()
-    menu.append(new MenuItem({
-      label: 'Export as a File',
-      disabled: true,
-      click: (e) => this.handlePreferencesButtonClick(e)
-    }))
-    menu.append(new MenuItem({
-      label: 'Export to Web',
-      disabled: true,
-      click: (e) => this.handlePreferencesButtonClick(e)
-    }))
-    menu.popup(remote.getCurrentWindow())
-  }
-
   handleContextButtonClick (e) {
     context.popup([{
       label: 'Delete',
@@ -538,44 +523,22 @@ class SnippetNoteDetail extends React.Component {
       >
         <div styleName='info'>
           <div styleName='info-left'>
-            <div styleName='info-left-top'>
-              <FolderSelect styleName='info-left-top-folderSelect'
-                value={this.state.note.storage + '-' + this.state.note.folder}
-                ref='folder'
-                data={data}
-                onChange={(e) => this.handleFolderChange(e)}
-              />
-            </div>
-            <div styleName='info-left-bottom'>
-              <TagSelect
-                styleName='info-left-bottom-tagSelect'
-                ref='tags'
-                value={this.state.note.tags}
-                onChange={(e) => this.handleChange(e)}
-              />
-            </div>
-          </div>
-          <div styleName='info-right'>
-            <StarButton styleName='info-right-button'
+            <StarButton styleName='info-left-button'
               onClick={(e) => this.handleStarButtonClick(e)}
               isActive={note.isStarred}
             />
-            <button styleName='info-right-button'
-              onClick={(e) => this.handleShareButtonClick(e)}
-              disabled
-            >
-              <i className='fa fa-share-alt fa-fw'/>
-              <span styleName='info-right-button-tooltip'
-                style={{right: 20}}
-              >Share Note</span>
-            </button>
+            <TagSelect
+              ref='tags'
+              value={this.state.note.tags}
+              onChange={(e) => this.handleChange(e)}
+            />
+          </div>
+          <div styleName='info-right'>
+            <LastUpdatedString date={note.updatedAt} />
             <button styleName='info-right-button'
               onClick={(e) => this.handleContextButtonClick(e)}
             >
               <i className='fa fa-ellipsis-v'/>
-              <span styleName='info-right-button-tooltip'
-                style={{right: 5}}
-              >More Options</span>
             </button>
           </div>
         </div>

browser/main/Detail/SnippetNoteDetail.styl

@@ -1,72 +1,25 @@
-$info-height = 75px
+@import('NoteDetailInfo')
+@import('DetailVars')
 
 .root
   absolute top bottom right
   border-width 0 0 1px
   border-style solid
   border-color $ui-borderColor
-
-.info
-  absolute top left right
-  height $info-height
-  border-bottom $ui-border
-  background-color $ui-backgroundColor
-
-.info-left
-  float left
-  padding 0 5px
-
-.info-left-top
-  height 40px
-  line-height 40px
-
-.info-left-top-folderSelect
-  display inline-block
-  height 34px
-  width 200px
-  vertical-align middle
-
-.info-left-bottom
-  height 30px
-
-.info-left-bottom-tagSelect
-  height 30px
-  line-height 30px
-
-.info-right
-  float right
-
-.info-right-button
-  width 34px
-  height 34px
-  border-radius 17px
-  navButtonColor()
-  border $ui-border
-  font-size 14px
-  margin 8px 2px
-  padding 0
-  &:active
-    border-color $ui-button--focus-borderColor
-  &:hover .info-right-button-tooltip
-    opacity 1
-  &:focus
-    border-color $ui-button--focus-borderColor
-.info-right-button-tooltip
-  tooltip()
-  position fixed
-  top 45px
-  padding 5px
-  opacity 0
+  background-color $ui-noteDetail-backgroundColor
+  box-shadow $note-detail-box-shadow
 
 .body
   absolute left right
-  top $info-height
+  left $note-detail-left-margin
+  right $note-detail-right-margin
+  top $info-height + $info-margin-under-border
   bottom $statusBar-height
+  background-color $ui-noteDetail-backgroundColor
 
 .body .description
   absolute top left right
   height 80px
-  border-bottom $ui-border
 
 .body .description textarea
   display block
@@ -76,20 +29,19 @@ $info-height = 75px
   border none
   padding 10px
   line-height 1.6
+  background-color $ui-noteDetail-backgroundColor
 
 .tabList
   absolute left right
   top 80px
   height 30px
-  border-bottom $ui-border
   display flex
-  background-color $ui-backgroundColor
+  background-color $ui-noteDetail-backgroundColor
 
 .tabList .list
   flex 1
   display flex
   overflow hidden
-  border-right $ui-border
 
 .tabList .plusButton
   navButtonColor()
@@ -97,7 +49,7 @@ $info-height = 75px
 
 .tabView
   absolute left right bottom
-  top 110px
+  top 130px
 
 .tabView-content
   absolute top left right bottom
@@ -118,47 +70,19 @@ $info-height = 75px
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor
+    background-color $ui-dark-noteDetail-backgroundColor
+    box-shadow none
 
-  .info
-    border-bottom-color $ui-dark-borderColor
-    background-color $ui-dark-backgroundColor
-
-  .info-delete
-    color $ui-dark-text-color
-
-  .info-delete-confirmButton
-    colorDarkDangerButton()
-    color $ui-dark-text-color
-
-  .info-delete-cancelButton
-    colorDarkDefaultButton()
-    border-color $ui-dark-borderColor
-    color $ui-dark-text-color
-
-  .info-right-button
-    navDarkButtonColor()
-    border-color $ui-dark-borderColor
-    &:active
-      border-color $ui-dark-button--focus-borderColor
-    &:hover .info-right-button-tooltip
-      opacity 1
-    &:focus
-      border-color $ui-button--focus-borderColor
-
-  .info-right-button-tooltip
-    darkTooltip()
-
-  .body .description
-    border-bottom-color $ui-dark-borderColor
+  .body
+    background-color $ui-dark-noteDetail-backgroundColor
 
   .body .description textarea
-    background-color $ui-dark-button--hover-backgroundColor
+    background-color $ui-dark-noteDetail-backgroundColor
     color white
 
   .tabList
     background-color $ui-button--active-backgroundColor
-    border-bottom-color $ui-dark-borderColor
-    background-color $ui-dark-backgroundColor
+    background-color $ui-dark-noteDetail-backgroundColor
 
   .tabList .list
     border-color $ui-dark-borderColor

browser/main/Detail/StarButton.js

@@ -53,7 +53,6 @@ class StarButton extends React.Component {
             : 'fa fa-star-o'
           }
         />
-        <span styleName='tooltip'>Star Note</span>
       </button>
     )
   }

browser/main/Detail/StarButton.styl

@@ -1,5 +1,7 @@
 .root
-  position relative
+  position absolute
+  left 7px
+  top 0
   padding 0
   &:hover
     .icon
@@ -9,19 +11,11 @@
 
 .root--active
   @extend .root
-  color $brand-color
+  color $ui-favorite-star-button-color
   &:hover
-    color $brand-color !important
+    color $ui-favorite-star-button-color
   .icon
     transform rotate(-72deg)
+
 .icon
   transition transform 0.15s
-
-.tooltip
-  tooltip()
-  position fixed
-  top 45px
-  right 65px
-  padding 5px
-  opacity 0
-  border-radius 2px

browser/main/Detail/TagSelect.js

@@ -8,7 +8,7 @@ class TagSelect extends React.Component {
     super(props)
 
     this.state = {
-      newTag: ''
+      newTag: '',
     }
   }
 
@@ -107,12 +107,12 @@ class TagSelect extends React.Component {
           <span styleName='tag'
             key={tag}
           >
+            <span styleName='tag-label'>{tag}</span>
             <button styleName='tag-removeButton'
               onClick={(e) => this.handleTagRemoveButtonClick(tag)(e)}
             >
-              <i className='fa fa-times fa-fw'/>
+              <i className='fa fa-times fa-fw tag-removeButton-icon'/>
             </button>
-            <span styleName='tag-label'>{tag}</span>
           </span>
         )
       })
@@ -125,10 +125,7 @@ class TagSelect extends React.Component {
         }
         styleName='root'
       >
-        <i styleName='icon'
-          className='fa fa-tags'
-        />
-          {tagList}
+        {tagList}
         <input styleName='newTag'
           ref='newTag'
           value={this.state.newTag}
@@ -136,7 +133,6 @@ class TagSelect extends React.Component {
           onChange={(e) => this.handleNewTagInputChange(e)}
           onKeyDown={(e) => this.handleNewTagInputKeyDown(e)}
         />
-
       </div>
     )
   }

browser/main/Detail/TagSelect.styl

@@ -1,46 +1,48 @@
 .root
-  position relative
+  position absolute
+  top 19px
+  left 44px
   user-select none
-
-.icon
-  display inline-block
-  width 30px
   vertical-align middle
-  text-align center
-  color $ui-button-color
+  width 300px
+  overflow-x scroll
+  white-space nowrap
+
+.root::-webkit-scrollbar
+  display none
 
 .tag
   display inline-block
   margin 0 2px
+  padding-left 10px
   vertical-align middle
   height 20px
-  background-color white
-  border-radius 3px
+  background-color $ui-tag-backgroundColor
+  border-radius 20px
   overflow hidden
   clearfix()
 
 .tag-removeButton
-  float left
+  float right
   height 20px
   width 18px
   margin 0
   padding 0
   border-style solid
-  border-color $ui-button--focus-borderColor
-  border-width 0 0 0 3px
+  border-width 0
+  border-radius 20px
   line-height 18px
   background-color transparent
   color $ui-button-color
-  &:hover
-    background-color $ui-button--hover-backgroundColor
-  &:active, &:active:hover
-    color $ui-button--active-color
-    background-color $ui-button--active-backgroundColor
-    border-color $ui-button--focus-borderColor
-  &:focus
-    border-color $ui-button--focus-borderColor
+
+.tag-removeButton-icon
+  width 5px
+  padding-right 4px
 
 .tag-label
+  font-size 12px
+  font-weight bold
+  color: #FFFFFF
   float left
   height 20px
   line-height 20px
@@ -62,12 +64,27 @@
   &:disabled
     background-color $ui-input--disabled-backgroundColor = #DDD
 
+.add-tag-button
+  display inline
+  margin-left 5px
+  width 20px
+  height 20px
+  border none
+  border-radius 20px
+  padding 0
+  color #FFFFFF
+  &:hover
+    background-color rgba(0, 0, 0, 0.3)
+  &:active, &:active:hover
+    background-color rgba(0, 0, 0, 0.5)
+    color $ui-button--active-color
+
 body[data-theme="dark"]
   .icon
     color $ui-dark-button-color
 
   .tag
-    background-color $ui-dark-button--hover-backgroundColor
+    background-color $ui-dark-tag-backgroundColor
 
   .tag-removeButton
     border-color $ui-button--focus-borderColor
@@ -85,3 +102,10 @@ body[data-theme="dark"]
       border-color $ui-input--focus-borderColor = #369DCD
     &:disabled
       background-color $ui-input--disabled-backgroundColor = #DDD
+
+  .add-tag-button
+    &:hover
+      background-color rgba(255, 255, 255, 0.3)
+    &:active, &:active:hover
+      background-color rgba(255, 255, 255, 0.5)
+      color $ui-button--active-color

browser/main/Main.js

@@ -26,7 +26,7 @@ class Main extends React.Component {
     this.state = {
       isRightSliderFocused: false,
       listWidth: config.listWidth,
-      navWidth: config.listWidth,
+      navWidth: config.navWidth,
       isLeftSliderFocused: false
     }
   }
@@ -85,6 +85,7 @@ class Main extends React.Component {
   }
 
   handleMouseUp (e) {
+    // Change width of NoteList component.
     if (this.state.isRightSliderFocused) {
       this.setState({
         isRightSliderFocused: false
@@ -99,6 +100,8 @@ class Main extends React.Component {
         })
       })
     }
+
+    // Change width of SideNav component.
     if (this.state.isLeftSliderFocused) {
       this.setState({
         isLeftSliderFocused: false
@@ -106,10 +109,10 @@ class Main extends React.Component {
         let { dispatch } = this.props
         let navWidth = this.state.navWidth
         // TODO: ConfigManager should dispatch itself.
-        ConfigManager.set({listWidth: navWidth})
+        ConfigManager.set({ navWidth })
         dispatch({
           type: 'SET_NAV_WIDTH',
-          listWidth: navWidth
+          navWidth,
         })
       })
     }
@@ -162,7 +165,7 @@ class Main extends React.Component {
         />
         {!config.isSideNavFolded &&
           <div styleName={this.state.isLeftSliderFocused ? 'slider--active' : 'slider'}
-            style={{left: this.state.navWidth - 1}}
+            style={{left: this.state.navWidth}}
             onMouseDown={(e) => this.handleLeftSlideMouseDown(e)}
             draggable='false'
           >
@@ -191,15 +194,15 @@ class Main extends React.Component {
               'location'
             ])}
           />
-          <div styleName={this.state.isRightSliderFocused ? 'slider--active' : 'slider'}
-            style={{left: this.state.listWidth}}
+          <div styleName={this.state.isRightSliderFocused ? 'slider-right--active' : 'slider-right'}
+            style={{left: this.state.listWidth - 1}}
             onMouseDown={(e) => this.handleRightSlideMouseDown(e)}
             draggable='false'
           >
             <div styleName='slider-hitbox' />
           </div>
           <Detail
-            style={{left: this.state.listWidth + 1}}
+            style={{left: this.state.listWidth}}
             {..._.pick(this.props, [
               'dispatch',
               'data',

browser/main/Main.styl

@@ -11,15 +11,18 @@
 
 .slider
   absolute top bottom
+  top -2px
+  width 0
+
+.slider-right
+  @extend .slider
   width 1px
-  background-color $ui-borderColor
-  border-width 0
-  border-style solid
-  border-color $ui-borderColor
 
 .slider--active
   @extend .slider
-  background-color $ui-button--active-backgroundColor
+
+.slider-right--active
+  @extend .slider-right
 
 .slider-hitbox
   absolute top bottom left right
@@ -33,9 +36,6 @@ body[data-theme="dark"]
   .root
     absolute top left bottom right
 
-  .slider
-    background-color $ui-dark-borderColor
-    border-color $ui-dark-borderColor
-
-  .slider--active
-    background-color $ui-button--active-backgroundColor
+  .slider-right
+  .slider-right--active
+    box-shadow none

browser/main/NoteDetail/ShareButton.js

@@ -1,168 +0,0 @@
-import React, { PropTypes } from 'react'
-import ReactDOM from 'react-dom'
-import api from 'browser/lib/api'
-import clientKey from 'browser/lib/clientKey'
-import activityRecord from 'browser/lib/activityRecord'
-const clipboard = require('electron').clipboard
-
-function notify (...args) {
-  return new window.Notification(...args)
-}
-
-function getDefault () {
-  return {
-    openDropdown: false,
-    isSharing: false,
-    // Fetched url
-    url: null,
-    // for tooltip Copy -> Copied!
-    copied: false,
-    failed: false
-  }
-}
-
-export default class ShareButton extends React.Component {
-  constructor (props) {
-    super(props)
-    this.state = getDefault()
-  }
-
-  componentWillReceiveProps (nextProps) {
-    this.setState(getDefault())
-  }
-
-  componentDidMount () {
-    this.dropdownInterceptor = e => {
-      this.dropdownClicked = true
-    }
-    ReactDOM.findDOMNode(this.refs.dropdown).addEventListener('click', this.dropdownInterceptor)
-    this.shareViaPublicURLHandler = e => {
-      this.handleShareViaPublicURLClick(e)
-    }
-  }
-
-  componentWillUnmount () {
-    document.removeEventListener('click', this.dropdownHandler)
-    ReactDOM.findDOMNode(this.refs.dropdown).removeEventListener('click', this.dropdownInterceptor)
-  }
-
-  handleOpenButtonClick (e) {
-    this.openDropdown()
-    if (this.dropdownHandler == null) {
-      this.dropdownHandler = e => {
-        if (!this.dropdownClicked) {
-          this.closeDropdown()
-        } else {
-          this.dropdownClicked = false
-        }
-      }
-    }
-    document.removeEventListener('click', this.dropdownHandler)
-    document.addEventListener('click', this.dropdownHandler)
-  }
-
-  openDropdown () {
-    this.setState({openDropdown: true})
-  }
-
-  closeDropdown () {
-    document.removeEventListener('click', this.dropdownHandler)
-    this.setState({openDropdown: false})
-  }
-
-  handleClipboardButtonClick (e) {
-    activityRecord.emit('MAIN_DETAIL_COPY')
-    clipboard.writeText(this.props.article.content)
-    notify('Saved to Clipboard!', {
-      body: 'Paste it wherever you want!'
-    })
-    this.setState({openDropdown: false})
-  }
-
-  handleShareViaPublicURLClick (e) {
-    let { user } = this.props
-    let input = Object.assign({}, this.props.article, {
-      clientKey: clientKey.get(),
-      writerName: user.name
-    })
-    this.setState({
-      isSharing: true,
-      failed: false
-    }, () => {
-      api.shareViaPublicURL(input)
-        .then(res => {
-          let url = res.body.url
-          this.setState({url: url, isSharing: false})
-          activityRecord.emit('ARTICLE_SHARE')
-        })
-        .catch(err => {
-          console.log(err)
-          this.setState({isSharing: false, failed: true})
-        })
-    })
-  }
-
-  handleCopyURLClick () {
-    clipboard.writeText(this.state.url)
-    this.setState({copied: true})
-  }
-
-  // Restore copy url tooltip
-  handleCopyURLMouseLeave () {
-    this.setState({copied: false})
-  }
-
-  render () {
-    let hasPublicURL = this.state.url != null
-    return (
-      <div className='ShareButton'>
-        <button ref='openButton' onClick={e => this.handleOpenButtonClick(e)} className='ShareButton-open-button'>
-          <i className='fa fa-fw fa-share-alt'/>
-          {
-            this.state.openDropdown ? null : (
-              <span className='tooltip'>Share</span>
-            )
-          }
-        </button>
-        <div ref='dropdown' className={'ShareButton-dropdown' + (this.state.openDropdown ? '' : ' hide')}>
-          {
-            !hasPublicURL ? (
-              <button
-                onClick={e => this.shareViaPublicURLHandler(e)}
-                ref='sharePublicURL'
-                disabled={this.state.isSharing}>
-                <i className='fa fa-fw fa-external-link'/> {this.state.failed ? 'Failed : Click to Try again' : !this.state.isSharing ? 'Share via public URL' : 'Sharing...'}
-              </button>
-            ) : (
-              <div className='ShareButton-url'>
-                <input className='ShareButton-url-input' value={this.state.url} readOnly/>
-                <button
-                  onClick={e => this.handleCopyURLClick(e)}
-                  className='ShareButton-url-button'
-                  onMouseLeave={e => this.handleCopyURLMouseLeave(e)}
-                  >
-                  <i className='fa fa-fw fa-clipboard'/>
-                  <div className='ShareButton-url-button-tooltip'>{this.state.copied ? 'Copied!' : 'Copy URL'}</div>
-                </button>
-                <div className='ShareButton-url-alert'>This url is valid for 7 days.</div>
-              </div>
-            )
-          }
-          <button onClick={e => this.handleClipboardButtonClick(e)}>
-            <i className='fa fa-fw fa-clipboard'/>&nbsp;Copy to clipboard
-          </button>
-        </div>
-      </div>
-    )
-  }
-}
-
-ShareButton.propTypes = {
-  article: PropTypes.shape({
-    publicURL: PropTypes.string,
-    content: PropTypes.string
-  }),
-  user: PropTypes.shape({
-    name: PropTypes.string
-  })
-}

browser/main/NoteList/NoteList.styl

@@ -1,25 +1,28 @@
+$control-height = 30px
+
 .root
   absolute left bottom
-  border-top $ui-border
   top $topBar-height - 1
+  background-color $ui-noteList-backgroundColor
 
 .control
   absolute top left right
   user-select none
-  height 25px
-  font-size 10px
-  border-bottom $ui-border
+  height $control-height
+  font-size 12px
   line-height 25px
   display flex
-  background-color $ui-backgroundColor
+  background-color $ui-noteList-backgroundColor
   color $ui-inactive-text-color
 
 .control-sortBy
   flex 1
-  padding-left 5px
+  padding-left 25px
 
 .control-sortBy-select
-  margin-left 5px
+  margin-left 0
+  font-size 12px
+  color $ui-inactive-text-color
   padding 0
   border none
   background-color transparent
@@ -36,8 +39,6 @@
     color $ui-active-color
   &:hover
     color $ui-text-color
-    .control-button-tooltip
-      opacity 1
 
 .control-button--active
   @extend .control-button
@@ -45,178 +46,22 @@
   &:hover
     color $ui-active-color
 
-.control-button-tooltip
-  tooltip()
-  position absolute
-  top 20px
-  right 5px
-  padding 5px
-  opacity 0
-  white-space nowrap
-  border-radius 2px
-  z-index 1
-
 .list
   absolute left right bottom
-  top 24px
+  top $control-height
   overflow auto
 
-.item
-  position relative
-  border-bottom $ui-border
-  padding 2px 5px
-  user-select none
-  cursor pointer
-  transition background-color 0.15s
-  &:hover
-    background-color alpha($ui-active-color, 20%)
-  &:active
-    background-color $ui-active-color
-    color white
-    .item-title
-    .item-title-empty
-    .item-title-icon
-    .item-bottom-tagIcon
-    .item-bottom-tagList-empty
-    .item-bottom-time
-      color white
-    .item-bottom-tagList-item
-      background-color transparent
-      color white
-
-.item--active
-  @extend .item
-  background-color $ui-active-color
-  color white
-  .item-title
-  .item-title-empty
-  .item-title-icon
-  .item-bottom-tagIcon
-  .item-bottom-tagList-empty
-  .item-bottom-time
-    color white
-  .item-bottom-tagList-item
-    background-color transparent
-    color white
-  &:hover
-    background-color $ui-active-color
-
-.item-border
-  absolute top bottom left right
-  border-style solid
-  border-width 2px
-  border-color transparent
-  transition 0.15s
-
-.item-title
-  height 24px
-  box-sizing border-box
-  line-height 24px
-  padding 0
-  overflow ellipsis
-  color $ui-text-color
-
-.item-title-icon
-  font-size 12px
-  color $ui-inactive-text-color
-  padding-right 3px
-
-.item-title-empty
-  font-weight normal
-  color $ui-inactive-text-color
-
-.item-bottom
-  margin-top 2px
-  height 20px
-  font-size 12px
-  line-height 20px
-  overflow ellipsis
-  display flex
-
-.item-bottom-tagIcon
-  vertical-align middle
-  color $ui-button-color
-  height 20px
-  line-height 20px
-
-.item-bottom-tagList
-  flex 1
-  overflow ellipsis
-  line-height 20px
-
-.item-bottom-tagList-item
-  margin 0 4px
-  padding 0 4px
-  height 20px
-  box-sizing border-box
-  border-radius 3px
-  vertical-align middle
-  border-style solid
-  border-color $ui-button--focus-borderColor
-  border-width 0 0 0 3px
-  background-color $ui-backgroundColor
-  color $ui-text-color
-
-.item-bottom-tagList-empty
-  color $ui-inactive-text-color
-  vertical-align middle
-  font-size 10px
-  margin-left 5px
-
-.item-bottom-time
-  color $ui-inactive-text-color
-  margin-left 5px
-  font-size 10px
-
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor
-    background-color $ui-dark-backgroundColor
-
-  .item
-    border-color $ui-dark-borderColor
-    &:hover
-      background-color alpha($ui-active-color, 20%)
-
-  .item--active
-    @extend .item
-    border-color $ui-dark-borderColor
-    .item-title
-      color white
-    .item-bottom-tagList-item
-      background-color transparent
-      color white
-    .item-bottom-tagList-empty
-      color white
-    &:hover
-      background-color $ui-active-color
-
-  .item-title
-    color $ui-dark-text-color
-
-  .item-title-icon
-    color $ui-darkinactive-text-color
-
-  .item-title-empty
-    color $ui-dark-inactive-text-color
-
-  .item-bottom-tagIcon
-    color $ui-dark-button-color
-
-  .item-bottom-tagList-item
-    border-color $ui-dark-button--focus-borderColor
-    background-color $ui-dark-button--hover-backgroundColor
-    color $ui-dark-text-color
-
-  .item-bottom-tagList-empty
-    color $ui-inactive-text-color
-    vertical-align middle
+    background-color $ui-dark-noteList-backgroundColor
 
   .control
-    background-color $ui-dark-backgroundColor
+    background-color $ui-dark-noteList-backgroundColor
+
+  .control
+    background-color $ui-dark-noteList-backgroundColor
     border-color $ui-dark-borderColor
-  .control-sortBy-select
-    color $ui-dark-text-color
 
   .control-button
     color $ui-dark-inactive-text-color

browser/main/NoteList/index.js

@@ -6,6 +6,8 @@ import _ from 'lodash'
 import ee from 'browser/main/lib/eventEmitter'
 import dataApi from 'browser/main/lib/dataApi'
 import ConfigManager from 'browser/main/lib/ConfigManager'
+import NoteItem from 'browser/components/NoteItem'
+import NoteItemSimple from 'browser/components/NoteItemSimple'
 
 const { remote } = require('electron')
 const { Menu, MenuItem, dialog } = remote
@@ -314,57 +316,40 @@ class NoteList extends React.Component {
       .sort(sortFunc)
 
     let noteList = notes
-      .map((note) => {
-        if (note == null) return null
-        let tagElements = _.isArray(note.tags)
-          ? note.tags.map((tag) => {
-            return (
-              <span styleName='item-bottom-tagList-item'
-                key={tag}>
-                {tag}
-              </span>
-            )
-          })
-          : []
-        let isActive = location.query.key === note.storage + '-' + note.key
+      .map(note => {
+        if (note == null) {
+          return null
+        }
+
+        const isDefault = config.listStyle === 'DEFAULT'
+        const isActive = location.query.key === note.storage + '-' + note.key
+        const dateDisplay = moment(
+          config.sortBy === 'CREATED_AT' ?
+            note.createdAt : note.updatedAt
+        ).fromNow()
+        const key = `${note.storage}-${note.key}`
+
+        if (isDefault) {
+          return (
+            <NoteItem
+              isActive={isActive}
+              note={note}
+              dateDisplay={dateDisplay}
+              key={key}
+              handleNoteClick={this.handleNoteClick.bind(this)}
+              handleNoteContextMenu={this.handleNoteContextMenu.bind(this)}
+            />
+          )
+        }
+
         return (
-          <div styleName={isActive
-              ? 'item--active'
-              : 'item'
-            }
-            key={note.storage + '-' + note.key}
-            onClick={(e) => this.handleNoteClick(e, note.storage + '-' + note.key)}
-            onContextMenu={(e) => this.handleNoteContextMenu(e, note.storage + '-' + note.key)}
-          >
-            <div styleName='item-title'>
-              {note.type === 'SNIPPET_NOTE'
-                ? <i styleName='item-title-icon' className='fa fa-fw fa-code'/>
-                : <i styleName='item-title-icon' className='fa fa-fw fa-file-text-o'/>
-              }
-              {note.title.trim().length > 0
-                ? note.title
-                : <span styleName='item-title-empty'>Empty</span>
-              }
-            </div>
-
-            {config.listStyle === 'DEFAULT' &&
-              <div styleName='item-bottom'>
-                <i styleName='item-bottom-tagIcon'
-                  className='fa fa-tags fa-fw'
-                />
-                <div styleName='item-bottom-tagList'>
-                  {tagElements.length > 0
-                    ? tagElements
-                    : <span styleName='item-bottom-tagList-empty'>Not tagged yet</span>
-                  }
-                </div>
-
-                <div styleName='item-bottom-time'>
-                  {moment(config.sortBy === 'CREATED_AT' ? note.createdAt : note.updatedAt).fromNow()}
-                </div>
-              </div>
-            }
-          </div>
+          <NoteItemSimple
+            isActive={isActive}
+            note={note}
+            key={key}
+            handleNoteClick={this.handleNoteClick.bind(this)}
+            handleNoteContextMenu={this.handleNoteContextMenu.bind(this)}
+          />
         )
       })
 
@@ -391,10 +376,7 @@ class NoteList extends React.Component {
             }
             onClick={(e) => this.handleListStyleButtonClick(e, 'DEFAULT')}
           >
-            <i className='fa fa-th-list'/>
-            <span styleName='control-button-tooltip'>
-              Default Size
-            </span>
+            <i className='fa fa-th-large'/>
           </button>
           <button styleName={config.listStyle === 'SMALL'
               ? 'control-button--active'
@@ -402,10 +384,7 @@ class NoteList extends React.Component {
             }
             onClick={(e) => this.handleListStyleButtonClick(e, 'SMALL')}
           >
-            <i className='fa fa-list'/>
-            <span styleName='control-button-tooltip'>
-              Small Size
-            </span>
+            <i className='fa fa-list-ul'/>
           </button>
         </div>
         <div styleName='list'

browser/main/SideNav/SideNav.styl

@@ -1,19 +1,17 @@
 .root
   absolute top left bottom
   width $sideNav-width
-  border-right $ui-border
   background-color $ui-backgroundColor
   user-select none
   color $ui-text-color
 
 .top
   height $topBar-height
-  border-bottom $ui-border
 
 .top-menu
   navButtonColor()
   height $topBar-height - 1
-  padding 0 10px
+  padding 0 15px
   font-size 14px
   width 100%
   text-align left
@@ -22,32 +20,10 @@
   margin-left 5px
   overflow ellipsis
 
-.menu
-  margin 0
-
-.menu-button
-  navButtonColor()
-  height 32px
-  padding 0 10px
-  font-size 14px
-  width 100%
-  text-align left
-  overflow ellipsis
-
-.menu-button--active
-  @extend .menu-button
-  background-color $ui-button--active-backgroundColor
-  color $ui-button--active-color
-  &:hover
-    background-color $ui-button--active-backgroundColor
-
-.menu-button-label
-  margin-left 5px
-
 .storageList
   absolute left right
-  bottom 32px
-  top 120px
+  bottom 37px
+  top 160px
   overflow-y auto
 
 .storageList-empty
@@ -135,16 +111,6 @@ body[data-theme="dark"]
   .top-menu
     navDarkButtonColor()
 
-  .menu-button
-    navDarkButtonColor()
-
-  .menu-button--active
-    @extend .menu-button
-    background-color $ui-dark-button--active-backgroundColor
-    color $ui-dark-button--active-color
-    &:hover
-      background-color $ui-dark-button--active-backgroundColor
-
   .storageList-empty
     color $ui-dark-inactive-text-color
 

browser/main/SideNav/StorageItem.js

@@ -6,6 +6,7 @@ import modal from 'browser/main/lib/modal'
 import CreateFolderModal from 'browser/main/modals/CreateFolderModal'
 import RenameFolderModal from 'browser/main/modals/RenameFolderModal'
 import dataApi from 'browser/main/lib/dataApi'
+import StorageItemChild from 'browser/components/StorageItem'
 
 const { remote } = require('electron')
 const { Menu, MenuItem, dialog } = remote
@@ -134,34 +135,24 @@ class StorageItem extends React.Component {
     let { storage, location, isFolded, data } = this.props
     let { folderNoteMap } = data
     let folderList = storage.folders.map((folder) => {
-      let isActive = location.pathname.match(new RegExp('\/storages\/' + storage.key + '\/folders\/' + folder.key))
+      let isActive = !!(location.pathname.match(new RegExp('\/storages\/' + storage.key + '\/folders\/' + folder.key)))
       let noteSet = folderNoteMap.get(storage.key + '-' + folder.key)
 
       let noteCount = noteSet != null
         ? noteSet.size
         : 0
-      return <button styleName={isActive
-          ? 'folderList-item--active'
-          : 'folderList-item'
-        }
-        key={folder.key}
-        onClick={(e) => this.handleFolderButtonClick(folder.key)(e)}
-        onContextMenu={(e) => this.handleFolderButtonContextMenu(e, folder)}
-      >
-        <span styleName='folderList-item-name'
-          style={{borderColor: folder.color}}
-        >
-          {isFolded ? folder.name.substring(0, 1) : folder.name}
-        </span>
-        {!isFolded &&
-          <span styleName='folderList-item-noteCount'>{noteCount}</span>
-        }
-        {isFolded &&
-          <span styleName='folderList-item-tooltip'>
-            {folder.name}
-          </span>
-        }
-      </button>
+      return (
+        <StorageItemChild
+          key={folder.key}
+          isActive={isActive}
+          handleButtonClick={(e) => this.handleFolderButtonClick(folder.key)(e)}
+          handleContextMenu={(e) => this.handleFolderButtonContextMenu(e, folder)}
+          folderName={folder.name}
+          folderColor={folder.color}
+          isFolded={isFolded}
+          noteCount={noteCount}
+        />
+      )
     })
 
     let isActive = location.pathname.match(new RegExp('\/storages\/' + storage.key + '$'))

browser/main/SideNav/StorageItem.styl

@@ -1,10 +1,12 @@
 .root
   width 100%
   user-select none
+
 .header
   position relative
   height 26px
   width 100%
+  margin-bottom 5px
   transition 0.15s
   &:hover
     background-color $ui-button--hover-backgroundColor
@@ -45,7 +47,7 @@
 .header-info
   display block
   width 100%
-  height 26px
+  height 30px
   padding-left 25px
   padding-right 10px
   line-height 26px
@@ -78,63 +80,6 @@
   &:active
     color $ui-active-color
 
-.folderList-item
-  display flex
-  width 100%
-  height 26px
-  background-color transparent
-  color $ui-inactive-text-color
-  padding 0
-  margin-bottom 2px
-  text-align left
-  border none
-  overflow ellipsis
-  font-size 14px
-  &:first-child
-    margin-top 0
-  &:hover
-    background-color $ui-button--hover-backgroundColor
-  &:active
-    color $ui-button--active-color
-    background-color $ui-button--active-backgroundColor
-
-.folderList-item--active
-  @extend .folderList-item
-  color $ui-button--active-color
-  background-color $ui-button--active-backgroundColor
-  &:hover
-    color $ui-button--active-color
-    background-color $ui-button--active-backgroundColor
-
-.folderList-item-name
-  display block
-  flex 1
-  padding 0 10px
-  height 26px
-  line-height 26px
-  border-width 0 0 0 6px
-  border-style solid
-  border-color transparent
-
-.folderList-item-noteCount
-  float right
-  line-height 26px
-  padding-right 5px
-  font-size 12px
-
-.folderList-item-tooltip
-  tooltip()
-  position fixed
-  padding 0 10px
-  left 44px
-  z-index 10
-  pointer-events none
-  opacity 0
-  border-top-right-radius 2px
-  border-bottom-right-radius 2px
-  height 26px
-  line-height 26px
-
 .root--folded
   @extend .root
   .header
@@ -161,11 +106,7 @@
   .header-info--folded-tooltip-path
     font-size 10px
     margin 0 5px
-  .folderList-item:hover, .folderList-item--active:hover
-    .folderList-item-tooltip
-      opacity 1
-  .folderList-item-name
-    padding-left 14px
+
 body[data-theme="dark"]
   .header-toggleButton
   .header-addFolderButton

browser/main/SideNav/index.js

@@ -5,6 +5,7 @@ import { openModal } from 'browser/main/lib/modal'
 import PreferencesModal from '../modals/PreferencesModal'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import StorageItem from './StorageItem'
+import SideNavFilter from 'browser/components/SideNavFilter'
 
 const electron = require('electron')
 const { remote } = electron
@@ -39,8 +40,8 @@ class SideNav extends React.Component {
     let { data, location, config, dispatch } = this.props
 
     let isFolded = config.isSideNavFolded
-    let isHomeActive = location.pathname.match(/^\/home$/)
-    let isStarredActive = location.pathname.match(/^\/starred$/)
+    let isHomeActive = !!location.pathname.match(/^\/home$/)
+    let isStarredActive = !!location.pathname.match(/^\/starred$/)
 
     let storageList = data.storageMap.map((storage, key) => {
       return <StorageItem
@@ -69,20 +70,13 @@ class SideNav extends React.Component {
           </button>
         </div>
 
-        <div styleName='menu'>
-          <button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
-            onClick={(e) => this.handleHomeButtonClick(e)}
-          >
-            <i className='fa fa-files-o fa-fw'/>
-            <span styleName='menu-button-label'>All Notes</span>
-          </button>
-          <button styleName={isStarredActive ? 'menu-button--active' : 'menu-button'}
-            onClick={(e) => this.handleStarredButtonClick(e)}
-          >
-            <i className='fa fa-star fa-fw'/>
-            <span styleName='menu-button-label'>Starred</span>
-          </button>
-        </div>
+        <SideNavFilter
+          isFolded={isFolded}
+          isHomeActive={isHomeActive}
+          handleAllNotesButtonClick={(e) => this.handleHomeButtonClick(e)}
+          isStarredActive={isStarredActive}
+          handleStarredButtonClick={(e) => this.handleStarredButtonClick(e)}
+        />
 
         <div styleName='storageList'>
           {storageList.length > 0 ? storageList : (

browser/main/StatusBar/StatusBar.styl

@@ -1,9 +1,12 @@
+@import('../Detail/DetailVars')
+
 .root
   absolute bottom left right
   height $statusBar-height
-  background-color $ui-backgroundColor
+  background-color $ui-noteDetail-backgroundColor
   border-top $ui-border
   display flex
+  box-shadow $note-detail-box-shadow
 
 .blank
   flex 1
@@ -39,8 +42,9 @@
 
 body[data-theme="dark"]
   .root
-    background-color $ui-dark-backgroundColor
+    background-color $ui-dark-noteDetail-backgroundColor
     border-color $ui-dark-borderColor
+    box-shadow none
 
   .zoom
     border-color $ui-dark-borderColor

browser/main/TopBar/TopBar.styl

@@ -1,19 +1,19 @@
 .root
   position relative
-  background-color $ui-backgroundColor
+  background-color $ui-noteList-backgroundColor
   height $topBar-height - 1
+
 .root--expanded
   @extend .root
+
 $control-height = 34px
 
 .control
   position absolute
-  top 8px
+  top 13px
   left 8px
   right 8px
   height $control-height
-  border $ui-border
-  border-radius 20px
   overflow hidden
   display flex
 
@@ -28,6 +28,7 @@ $control-height = 34px
   line-height 32px
   width 35px
   color $ui-inactive-text-color
+  background-color $ui-noteList-backgroundColor
 
 .control-search-input
   display block
@@ -38,6 +39,7 @@ $control-height = 34px
     height 100%
     outline none
     border none
+    background-color $ui-noteList-backgroundColor
 
 .control-search-optionList
   position fixed
@@ -58,6 +60,7 @@ $control-height = 34px
   overflow ellipsis
   &:hover
     background-color alpha($ui-active-color, 10%)
+
 .control-search-optionList-item-folder
   border-left 4px solid transparent
   padding 2px 5px
@@ -66,40 +69,30 @@ $control-height = 34px
   font-size 12px
   height 16px
   margin-bottom 4px
+
 .control-search-optionList-item-folder-surfix
   font-size 10px
   margin-left 5px
   color $ui-inactive-text-color
+
 .control-search-optionList-item-type
   font-size 12px
   color $ui-inactive-text-color
   padding-right 3px
+
 .control-search-optionList-empty
   height 150px
   color $ui-inactive-text-color
   line-height 150px
   text-align center
 
-.control-contextButton
-  display block
-  width 20px
-  height $control-height - 2
-  navButtonColor()
-  border-left $ui-border
-  font-size 14px
-  line-height 28px
-  padding 0
-  &:active
-    border-color $ui-button--active-backgroundColor
-  &:hover .control-newPostButton-tooltip
-    opacity 1
-
 .control-newPostButton
   display block
-  width 36px
+  width 32px
   height $control-height - 2
   navButtonColor()
-  border-left $ui-border
+  border $ui-border
+  border-radius 32px
   font-size 14px
   line-height 28px
   padding 0
@@ -112,17 +105,18 @@ $control-height = 34px
   tooltip()
   position fixed
   pointer-events none
-  top 45px
-  left 385px
-  z-index 10
+  top 50px
+  left 433px
+  z-index 200
   padding 5px
   line-height normal
+  border-radius 2px
   opacity 0
   transition 0.1s
 
 body[data-theme="dark"]
   .root, .root--expanded
-    background-color $ui-dark-backgroundColor
+    background-color $ui-dark-noteList-backgroundColor
 
   .control
     border-color $ui-dark-borderColor
@@ -134,11 +128,13 @@ body[data-theme="dark"]
     line-height 32px
     width 35px
     color $ui-dark-inactive-text-color
+    background-color $ui-dark-noteList-backgroundColor
 
   .control-search-input
     input
-      background-color $dark-background-color
+      background-color $ui-dark-noteList-backgroundColor
       color $ui-dark-text-color
+
   .control-search-optionList
     color white
     background-color $ui-dark-button--hover-backgroundColor
@@ -162,10 +158,10 @@ body[data-theme="dark"]
   .control-search-optionList-empty
     color $ui-inactive-text-color
 
-  .control-contextButton,
   .control-newPostButton
     colorDarkDefaultButton()
     border-color $ui-dark-borderColor
+    background-color $ui-dark-noteList-backgroundColor
     &:active
       border-color $ui-dark-button--active-backgroundColor
 

browser/main/TopBar/index.js

@@ -192,47 +192,6 @@ class TopBar extends React.Component {
     }
   }
 
-  handleContextButtonClick (e) {
-    let { config } = this.props
-
-    let menu = new Menu()
-    menu.append(new MenuItem({
-      label: 'Create Markdown Note',
-      click: (e) => this.createNote('MARKDOWN_NOTE')
-    }))
-    menu.append(new MenuItem({
-      label: 'Create Snippet Note',
-      click: (e) => this.createNote('SNIPPET_NOTE')
-    }))
-    menu.append(new MenuItem({
-      type: 'separator'
-    }))
-    menu.append(new MenuItem({
-      label: 'Change Default Note',
-      submenu: [
-        {
-          type: 'radio',
-          label: 'Markdown Note',
-          checked: config.ui.defaultNote === 'MARKDOWN_NOTE',
-          click: (e) => this.setDefaultNote('MARKDOWN_NOTE')
-        },
-        {
-          type: 'radio',
-          label: 'Snippet Note',
-          checked: config.ui.defaultNote === 'SNIPPET_NOTE',
-          click: (e) => this.setDefaultNote('SNIPPET_NOTE')
-        },
-        {
-          type: 'radio',
-          label: 'Always Ask',
-          checked: config.ui.defaultNote === 'ALWAYS_ASK',
-          click: (e) => this.setDefaultNote('ALWAYS_ASK')
-        }
-      ]
-    }))
-    menu.popup(remote.getCurrentWindow())
-  }
-
   createNote (noteType) {
     let { dispatch, location } = this.props
     if (noteType !== 'MARKDOWN_NOTE' && noteType !== 'SNIPPET_NOTE') throw new Error('Invalid note type.')
@@ -353,14 +312,9 @@ class TopBar extends React.Component {
             onClick={(e) => this.handleNewPostButtonClick(e)}>
             <i className='fa fa-plus'/>
             <span styleName='control-newPostButton-tooltip'>
-              New Note {OSX ? '⌘' : '^'} + n
+              Make a Note {OSX ? '⌘' : '^'} + n
             </span>
           </button>
-          <button styleName='control-contextButton'
-            onClick={(e) => this.handleContextButtonClick(e)}
-          >
-            <i className='fa fa-caret-down'/>
-          </button>
         </div>
       </div>
     )

browser/main/lib/ConfigManager.js

@@ -10,7 +10,7 @@ let isInitialized = false
 export const DEFAULT_CONFIG = {
   zoom: 1,
   isSideNavFolded: false,
-  listWidth: 250,
+  listWidth: 280,
   navWidth: 200,
   sortBy: 'UPDATED_AT', // 'CREATED_AT', 'UPDATED_AT', 'APLHABETICAL'
   listStyle: 'DEFAULT', // 'DEFAULT', 'SMALL'

browser/main/modals/CreateFolderModal.js

@@ -75,24 +75,27 @@ class CreateFolderModal extends React.Component {
         onKeyDown={(e) => this.handleKeyDown(e)}
       >
         <div styleName='header'>
-          <div styleName='title'>New Folder</div>
+          <div styleName='title'>Create new folder</div>
         </div>
-        <button styleName='closeButton'
-          onClick={(e) => this.handleCloseButtonClick(e)}
-        >Close</button>
+        <button styleName='close' onClick={(e) => this.handleCloseButtonClick(e)}>
+          <div styleName='close-mark'>X</div>
+          <div styleName='close-text'>esc</div>
+        </button>
 
         <div styleName='control'>
-          <input styleName='control-input'
-            placeholder='Folder Name'
-            ref='name'
-            value={this.state.name}
-            onChange={(e) => this.handleChange(e)}
-            onKeyDown={(e) => this.handleInputKeyDown(e)}
-          />
+          <div styleName='control-folder'>
+            <div styleName='control-folder-label'>Folder name</div>
+            <input styleName='control-folder-input'
+              ref='name'
+              value={this.state.name}
+              onChange={(e) => this.handleChange(e)}
+              onKeyDown={(e) => this.handleInputKeyDown(e)}
+            />
+          </div>
           <button styleName='control-confirmButton'
             onClick={(e) => this.handleConfirmButtonClick(e)}
           >
-            Confirm
+            Create Folder
           </button>
         </div>
       </div>

browser/main/modals/CreateFolderModal.styl

@@ -1,47 +1,52 @@
 .root
   modal()
-  max-width 340px
+  width 700px
+  height 200px
   overflow hidden
   position relative
+  padding 0 40px
 
 .header
   height 50px
+  margin-bottom 10px
+  margin-top 10px
   font-size 18px
   line-height 50px
-  padding 0 15px
   background-color $ui-backgroundColor
-  border-bottom solid 1px $ui-borderColor
   color $ui-text-color
 
-.closeButton
+.close-mark
+  font-size 15px
+
+.close
+  height 50px
   position absolute
-  top 10px
+  background-color transparent
+  color $ui-inactive-text-color
+  border none
+  top 7px
   right 10px
-  height 30px
-  width 0 25px
-  border $ui-border
-  border-radius 2px
-  color $ui-text-color
-  colorDefaultButton()
-
-.control
-  padding 25px 15px 15px
   text-align center
+  width top-bar--height
+  height top-bar--height
 
-.control-input
+.control-folder-label
+  text-align left
+  font-size 14px
+  color $ui-text-color
+
+.control-folder-input
   display block
   height 30px
-  width 240px
+  width 620px
   padding 0 5px
-  margin 0 auto 15px
-  border none
-  border-bottom solid 1px $border-color
-  border-radius 2px
+  margin 10px auto 15px
+  border 1px solid #C9C9C9 // TODO: use variable.
+  border-radius 5px
   background-color transparent
   outline none
   vertical-align middle
   font-size 18px
-  text-align center
   &:disabled
     background-color $ui-input--disabled-backgroundColor
   &:focus, &:active
@@ -50,21 +55,35 @@
 .control-confirmButton
   display block
   height 30px
+  width 620px
   border none
-  border-radius 2px
+  border-radius 5px
   padding 0 25px
-  margin 0 auto
+  margin 20px auto
+  font-size 14px
   colorPrimaryButton()
 
 body[data-theme="dark"]
   .root
     modalDark()
+    width 700px
+    height 200px
+    overflow hidden
+    position relative
+    padding 0 40px
 
   .header
-    background-color $ui-dark-button--hover-backgroundColor
+    background-color transparent
     border-color $ui-dark-borderColor
     color $ui-dark-text-color
 
+  .control-folder-label
+    color $ui-dark-text-color
+
+  .control-folder-input
+    border 1px solid #C9C9C9 // TODO: use variable.
+    color white
+
   .closeButton
     border-color $ui-dark-borderColor
     color $ui-dark-text-color
@@ -72,8 +91,3 @@ body[data-theme="dark"]
 
   .description
     color $ui-inactive-text-color
-
-  .control-input
-    border-color $ui-dark-borderColor
-    color white
-

browser/main/modals/NewNoteModal.js

@@ -100,7 +100,7 @@ class NewNoteModal extends React.Component {
         onKeyDown={(e) => this.handleKeyDown(e)}
       >
         <div styleName='header'>
-          <div styleName='title'>New Note</div>
+          <div styleName='title'>Make a Note</div>
         </div>
         <button styleName='closeButton'
           onClick={(e) => this.handleCloseButtonClick(e)}

browser/main/modals/PreferencesModal/ConfigTab.styl

@@ -1,39 +1,44 @@
+@import('./Tab')
+
 .root
   padding 15px
   color $ui-text-color
+  margin-bottom 30px
+
 .group
   margin-bottom 45px
+
 .group-header
-  font-size 24px
+  @extend .header
   color $ui-text-color
-  padding 5px
-  border-bottom $default-border
-  margin-bottom 15px
 
 .group-header2
-  font-size 18px
+  font-size 20px
   color $ui-text-color
-  padding 5px
   margin-bottom 15px
+  margin-top 30px
 
 .group-section
-  margin-bottom 15px
+  margin-bottom 20px
   display flex
   line-height 30px
+
 .group-section-label
   width 150px
-  text-align right
+  text-align left
   margin-right 10px
   font-size 14px
+
 .group-section-control
   flex 1
+
 .group-section-control-input
   height 30px
   vertical-align middle
-  width 150px
-  font-size 12px
+  width 400px
+  font-size $tab--button-font-size
   border solid 1px $border-color
-  border-radius 2px
+  border-radius $tab--input-border-radius
   padding 0 5px
   &:disabled
     background-color $ui-input--disabled-backgroundColor
@@ -45,7 +50,6 @@
   padding-left 15px
 
 .group-control
-  border-top $default-border
   padding-top 10px
   box-sizing border-box
   height 40px
@@ -56,22 +60,26 @@
       line-height 30px
       padding 0 5px
       float right
+
 .group-control-leftButton
-  float left
   colorDefaultButton()
-  border $default-border
-  border-radius 2px
-  height 30px
+  border none
+  border-radius 5px
+  font-size $tab--button-font-size
+  height $tab--button-height
   padding 0 15px
-  margin-right 5px
+  margin-right 10px
+
 .group-control-rightButton
   float right
   colorPrimaryButton()
   border none
-  border-radius 2px
-  height 30px
+  border-radius $tab--button-border-radius
+  font-size $tab--button-font-size
+  height $tab--button-height
   padding 0 15px
-  margin-right 5px
+  margin-right 10px
+
 .group-hint
   border $ui-border
   padding 10px 15px

browser/main/modals/PreferencesModal/HotkeyTab.js

@@ -0,0 +1,156 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './ConfigTab.styl'
+import ConfigManager from 'browser/main/lib/ConfigManager'
+import store from 'browser/main/store'
+
+const electron = require('electron')
+const ipc = electron.ipcRenderer
+
+const OSX = global.process.platform === 'darwin'
+
+class HotkeyTab extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isHotkeyHintOpen: false,
+      config: props.config
+    }
+  }
+
+  componentDidMount () {
+    this.handleSettingDone = () => {
+      this.setState({keymapAlert: {
+        type: 'success',
+        message: 'Successfully applied!'
+      }})
+    }
+    this.handleSettingError = (err) => {
+      this.setState({keymapAlert: {
+        type: 'error',
+        message: err.message != null ? err.message : 'Error occurs!'
+      }})
+    }
+    ipc.addListener('APP_SETTING_DONE', this.handleSettingDone)
+    ipc.addListener('APP_SETTING_ERROR', this.handleSettingError)
+  }
+
+  componentWillUnmount () {
+    ipc.removeListener('APP_SETTING_DONE', this.handleSettingDone)
+    ipc.removeListener('APP_SETTING_ERROR', this.handleSettingError)
+  }
+
+  handleSaveButtonClick (e) {
+    let newConfig = {
+      hotkey: this.state.config.hotkey
+    }
+
+    ConfigManager.set(newConfig)
+
+    store.dispatch({
+      type: 'SET_UI',
+      config: newConfig
+    })
+  }
+
+  handleHintToggleButtonClick (e) {
+    this.setState({
+      isHotkeyHintOpen: !this.state.isHotkeyHintOpen
+    })
+  }
+
+  handleHotkeyChange (e) {
+    let { config } = this.state
+    config.hotkey = {
+      toggleFinder: this.refs.toggleFinder.value,
+      toggleMain: this.refs.toggleMain.value
+    }
+    this.setState({
+      config
+    })
+  }
+
+  render () {
+    let keymapAlert = this.state.keymapAlert
+    let keymapAlertElement = keymapAlert != null
+      ? <p className={`alert ${keymapAlert.type}`}>
+        {keymapAlert.message}
+      </p>
+      : null
+    let { config } = this.state
+
+    return (
+      <div styleName='root'>
+        <div styleName='group'>
+          <div styleName='group-header'>Hotkey</div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>Toggle Main</div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                onChange={(e) => this.handleHotkeyChange(e)}
+                ref='toggleMain'
+                value={config.hotkey.toggleMain}
+                type='text'
+              />
+            </div>
+          </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>Toggle Finder(popup)</div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                onChange={(e) => this.handleHotkeyChange(e)}
+                ref='toggleFinder'
+                value={config.hotkey.toggleFinder}
+                type='text'
+              />
+            </div>
+          </div>
+          <div styleName='group-control'>
+            <button styleName='group-control-leftButton'
+              onClick={(e) => this.handleHintToggleButtonClick(e)}
+            >
+              {this.state.isHotkeyHintOpen
+                ? 'Hide Hint'
+                : 'Hint?'
+              }
+            </button>
+            <button styleName='group-control-rightButton'
+              onClick={(e) => this.handleSaveButtonClick(e)}>Save
+            </button>
+            {keymapAlertElement}
+          </div>
+          {this.state.isHotkeyHintOpen &&
+            <div styleName='group-hint'>
+              <p>Available Keys</p>
+              <ul>
+                <li><code>0</code> to <code>9</code></li>
+                <li><code>A</code> to <code>Z</code></li>
+                <li><code>F1</code> to <code>F24</code></li>
+                <li>Punctuations like <code>~</code>, <code>!</code>, <code>@</code>, <code>#</code>, <code>$</code>, etc.</li>
+                <li><code>Plus</code></li>
+                <li><code>Space</code></li>
+                <li><code>Backspace</code></li>
+                <li><code>Delete</code></li>
+                <li><code>Insert</code></li>
+                <li><code>Return</code> (or <code>Enter</code> as alias)</li>
+                <li><code>Up</code>, <code>Down</code>, <code>Left</code> and <code>Right</code></li>
+                <li><code>Home</code> and <code>End</code></li>
+                <li><code>PageUp</code> and <code>PageDown</code></li>
+                <li><code>Escape</code> (or <code>Esc</code> for short)</li>
+                <li><code>VolumeUp</code>, <code>VolumeDown</code> and <code>VolumeMute</code></li>
+                <li><code>MediaNextTrack</code>, <code>MediaPreviousTrack</code>, <code>MediaStop</code> and <code>MediaPlayPause</code></li>
+              </ul>
+            </div>
+          }
+        </div>
+      </div>
+    )
+  }
+}
+
+HotkeyTab.propTypes = {
+  dispatch: PropTypes.func,
+}
+
+export default CSSModules(HotkeyTab, styles)

browser/main/modals/PreferencesModal/InfoTab.js

@@ -22,17 +22,24 @@ class InfoTab extends React.Component {
   render () {
     return (
       <div styleName='root'>
+        <div styleName='header'>Info</div>
+
         <div styleName='top'>
-          <img styleName='icon' src='../resources/app.png' width='150' height='150'/>
-          <div styleName='appId'>Boostnote {appVersion}</div>
-          <div styleName='description'>
-            A simple markdown/snippet note app for developer.
+          <div styleName='icon-space'>
+            <img styleName='icon' src='../resources/app.png' width='92' height='92'/>
+            <div styleName='icon-right'>
+              <div styleName='appId'>Boostnote {appVersion}</div>
+              <div styleName='description'>
+                A simple markdown/snippet note app for developer.
+              </div>
+            </div>
           </div>
+          <div styleName='clear'></div>
           <div styleName='madeBy'>Made by&nbsp;
             <a href='http://maisin.co/'
               onClick={(e) => this.handleLinkClick(e)}
             >MAISIN&CO.</a></div>
-          <div styleName='copyright'>Copyright 2016 MAISIN&CO. All rights reserved.</div>
+          <div styleName='copyright'>Copyright 2017 MAISIN&CO. All rights reserved.</div>
         </div>
         <ul styleName='list'>
           <li>

browser/main/modals/PreferencesModal/InfoTab.styl

@@ -1,3 +1,5 @@
+@import('./Tab')
+
 .root
   padding 15px
   white-space pre
@@ -5,27 +7,39 @@
   color $ui-text-color
   width 100%
 
+.clear
+  clear both
+
 .top
-  text-align center
-  margin-bottom 25px
+  text-align left
+  margin-bottom 20px
+
+.icon-space
+  margin 20px 0
+  height 100px
+
+.icon
+  display inline-block
+  vertical-align middle
+
+.icon-right
+  display inline-block
+  vertical-align middle
+  margin-left 20px
 
 .appId
   font-size 24px
+  margin-bottom 13px
 
 .description
-  overflow hidden
-  white-space normal
-  line-height 1.5
-  margin 5px auto 10px
   font-size 14px
-  text-align center
 
 .madeBy
-  font-size 12px
+  font-size 14px
   $ui-inactive-text-color
 
 .copyright
-  font-size 12px
+  font-size 14px
   $ui-inactive-text-color
 
 .list
@@ -36,7 +50,7 @@
 
 body[data-theme="dark"]
   .root
-    color $ui-dark-text-color
+    color $tab--dark-text-color
 
   .madeBy
     color $ui-dark-inactive-text-color

browser/main/modals/PreferencesModal/PreferencesModal.styl

@@ -1,51 +1,93 @@
+@import('./Tab')
+
+top-bar--height = 50px
+
 .root
   modal()
-  max-width 540px
-  min-height 400px
+  max-width 800px
+  min-height 500px
   height 80%
   overflow hidden
   position relative
 
-.nav
+.top-bar
   absolute top left right
-  height 50px
+  height top-bar--height
   background-color $ui-backgroundColor
   border-bottom solid 1px $ui-borderColor
+  p
+    text-align center
+    font-size 18px
+    line-height top-bar--height
+
+.top-bar-close
+  position absolute
+  background-color transparent
+  color $ui-inactive-text-color
+  border none
+  top 0
+  right 0
+  text-align center
+  width top-bar--height
+  height top-bar--height
+
+.nav
+  absolute top left right
+  top top-bar--height
+  left 0
+  width 140px
+  margin-left 30px
+  margin-top 20px
+  background-color $ui-backgroundColor
 
 .nav-button
-  width 80px
-  height 50px
+  font-size 14px
+  text-align left
+  width 100px
+  margin 4px 0
+  padding 7px 0
+  padding-left 7px
   border none
+  border-radius 3px
   background-color transparent
-  color #939395
+  color $ui-text-color
   font-size 14px
   &:hover
-    color #515151
+    color $ui-active-color
 
 .nav-button--active
   @extend .nav-button
-  color #6AA5E9
+  color white
+  background-color $ui-active-color
   &:hover
-    color #6AA5E9
+    color white
 
 .nav-button-icon
   display block
 
 .content
   absolute left right bottom
-  top 50px
+  top top-bar--height
+  left 140px
+  margin-top 10px
   overflow-y auto
 
 body[data-theme="dark"]
   .root
     modalDark()
 
+  .top-bar
+    background-color transparent
+    border-color #4A4D52
+    p
+      color $tab--dark-text-color
+
   .nav
-    background-color $ui-dark-button--hover-backgroundColor
+    background-color transparent
     border-color $ui-dark-borderColor
 
   .nav-button
     background-color transparent
-    color #939395
+    color $tab--dark-text-color
     &:hover
       color $ui-dark-text-color

browser/main/modals/PreferencesModal/StoragesTab.js

@@ -63,6 +63,7 @@ class StoragesTab extends React.Component {
     })
     return (
       <div styleName='list'>
+        <div styleName='header'>Storages</div>
         {storageList.length > 0
           ? storageList
           : <div styleName='list-empty'>No storage found.</div>

browser/main/modals/PreferencesModal/StoragesTab.styl

@@ -1,3 +1,5 @@
+@import('./Tab')
+
 .root
   padding 15px
   color $ui-text-color
@@ -26,11 +28,12 @@
 .list-control
   height 30px
 .list-control-addStorageButton
-  height 30px
+  height $tab--button-height
   padding 0 15px
   border $ui-border
   colorDefaultButton()
-  border-radius 2px
+  font-size $tab--button-font-size
+  border-radius $tab--button-border-radius
 
 .addStorage
   margin-bottom 15px

browser/main/modals/PreferencesModal/Tab.styl

@@ -0,0 +1,18 @@
+/**
+ * Common style for tabs on config modal.
+ */
+
+$tab--input-border-radius = 5px
+$tab--button-border-radius = 5px
+$tab--button-height = 40px
+$tab--button-font-size = 14px
+
+$tab--dark-text-color = #E5E5E5
+
+.header
+  font-size 24px
+  margin-bottom 30px
+
+body[data-theme="dark"]
+  .header
+    color $tab--dark-text-color

browser/main/modals/PreferencesModal/UiTab.js

@@ -10,97 +10,15 @@ const ipc = electron.ipcRenderer
 
 const OSX = global.process.platform === 'darwin'
 
-class ConfigTab extends React.Component {
+class UiTab extends React.Component {
   constructor (props) {
     super(props)
 
     this.state = {
-      isHotkeyHintOpen: false,
       config: props.config
     }
   }
 
-  componentDidMount () {
-    this.handleSettingDone = () => {
-      this.setState({keymapAlert: {
-        type: 'success',
-        message: 'Successfully applied!'
-      }})
-    }
-    this.handleSettingError = (err) => {
-      this.setState({keymapAlert: {
-        type: 'error',
-        message: err.message != null ? err.message : 'Error occurs!'
-      }})
-    }
-    ipc.addListener('APP_SETTING_DONE', this.handleSettingDone)
-    ipc.addListener('APP_SETTING_ERROR', this.handleSettingError)
-  }
-
-  componentWillUnmount () {
-    ipc.removeListener('APP_SETTING_DONE', this.handleSettingDone)
-    ipc.removeListener('APP_SETTING_ERROR', this.handleSettingError)
-  }
-
-  handleSaveButtonClick (e) {
-    let newConfig = {
-      hotkey: this.state.config.hotkey
-    }
-
-    ConfigManager.set(newConfig)
-
-    store.dispatch({
-      type: 'SET_UI',
-      config: newConfig
-    })
-  }
-
-  handleKeyDown (e) {
-    if (e.keyCode === 13) {
-      this.submitHotKey()
-    }
-  }
-
-  handleConfigKeyDown (e) {
-    if (e.keyCode === 13) {
-      this.submitConfig()
-    }
-  }
-
-  handleLineNumberingClick (e) {
-    let config = this.state.config
-
-    config['preview-line-number'] = e.target.checked
-    this.setState({
-      config
-    })
-  }
-
-  handleDisableDirectWriteClick (e) {
-    let config = this.state.config
-    config['disable-direct-write'] = e.target.checked
-    this.setState({
-      config
-    })
-  }
-
-  handleHintToggleButtonClick (e) {
-    this.setState({
-      isHotkeyHintOpen: !this.state.isHotkeyHintOpen
-    })
-  }
-
-  handleHotkeyChange (e) {
-    let { config } = this.state
-    config.hotkey = {
-      toggleFinder: this.refs.toggleFinder.value,
-      toggleMain: this.refs.toggleMain.value
-    }
-    this.setState({
-      config
-    })
-  }
-
   handleUIChange (e) {
     let { config } = this.state
 
@@ -125,13 +43,11 @@ class ConfigTab extends React.Component {
       lineNumber: this.refs.previewLineNumber.checked
     }
 
-    this.setState({
-      config
-    })
+    this.setState({ config })
   }
 
   handleSaveUIClick (e) {
-    let newConfig = {
+    const newConfig = {
       ui: this.state.config.ui,
       editor: this.state.config.editor,
       preview: this.state.config.preview
@@ -146,84 +62,17 @@ class ConfigTab extends React.Component {
   }
 
   render () {
-    let keymapAlert = this.state.keymapAlert
-    let keymapAlertElement = keymapAlert != null
-      ? <p className={`alert ${keymapAlert.type}`}>
-        {keymapAlert.message}
-      </p>
-      : null
-    let themes = consts.THEMES
-    let { config } = this.state
+    const themes = consts.THEMES
+    const { config } = this.state
 
     return (
       <div styleName='root'>
-        <div styleName='group'>
-          <div styleName='group-header'>Hotkey</div>
-          <div styleName='group-section'>
-            <div styleName='group-section-label'>Toggle Main</div>
-            <div styleName='group-section-control'>
-              <input styleName='group-section-control-input'
-                onChange={(e) => this.handleHotkeyChange(e)}
-                ref='toggleMain'
-                value={config.hotkey.toggleMain}
-                type='text'
-              />
-            </div>
-          </div>
-          <div styleName='group-section'>
-            <div styleName='group-section-label'>Toggle Finder(popup)</div>
-            <div styleName='group-section-control'>
-              <input styleName='group-section-control-input'
-                onChange={(e) => this.handleHotkeyChange(e)}
-                ref='toggleFinder'
-                value={config.hotkey.toggleFinder}
-                type='text'
-              />
-            </div>
-          </div>
-          <div styleName='group-control'>
-            <button styleName='group-control-leftButton'
-              onClick={(e) => this.handleHintToggleButtonClick(e)}
-            >
-              {this.state.isHotkeyHintOpen
-                ? 'Hide Hint'
-                : 'Show Hint'
-              }
-            </button>
-            <button styleName='group-control-rightButton'
-              onClick={(e) => this.handleSaveButtonClick(e)}>Save Hotkey
-            </button>
-            {keymapAlertElement}
-          </div>
-          {this.state.isHotkeyHintOpen &&
-            <div styleName='group-hint'>
-              <p>Available Keys</p>
-              <ul>
-                <li><code>0</code> to <code>9</code></li>
-                <li><code>A</code> to <code>Z</code></li>
-                <li><code>F1</code> to <code>F24</code></li>
-                <li>Punctuations like <code>~</code>, <code>!</code>, <code>@</code>, <code>#</code>, <code>$</code>, etc.</li>
-                <li><code>Plus</code></li>
-                <li><code>Space</code></li>
-                <li><code>Backspace</code></li>
-                <li><code>Delete</code></li>
-                <li><code>Insert</code></li>
-                <li><code>Return</code> (or <code>Enter</code> as alias)</li>
-                <li><code>Up</code>, <code>Down</code>, <code>Left</code> and <code>Right</code></li>
-                <li><code>Home</code> and <code>End</code></li>
-                <li><code>PageUp</code> and <code>PageDown</code></li>
-                <li><code>Escape</code> (or <code>Esc</code> for short)</li>
-                <li><code>VolumeUp</code>, <code>VolumeDown</code> and <code>VolumeMute</code></li>
-                <li><code>MediaNextTrack</code>, <code>MediaPreviousTrack</code>, <code>MediaStop</code> and <code>MediaPlayPause</code></li>
-              </ul>
-            </div>
-          }
-        </div>
-
         <div styleName='group'>
           <div styleName='group-header'>UI</div>
+
+          <div styleName='group-header2'>Theme</div>
+
           <div styleName='group-section'>
-            <div styleName='group-section-label'>Theme</div>
             <div styleName='group-section-control'>
               <select value={config.ui.theme}
                 onChange={(e) => this.handleUIChange(e)}
@@ -398,11 +247,11 @@ class ConfigTab extends React.Component {
   }
 }
 
-ConfigTab.propTypes = {
+UiTab.propTypes = {
   user: PropTypes.shape({
     name: PropTypes.string
   }),
   dispatch: PropTypes.func
 }
 
-export default CSSModules(ConfigTab, styles)
+export default CSSModules(UiTab, styles)

browser/main/modals/PreferencesModal/index.js

@@ -1,7 +1,8 @@
 import React, { PropTypes } from 'react'
 import ReactDOM from 'react-dom'
 import { connect } from 'react-redux'
-import ConfigTab from './ConfigTab'
+import HotkeyTab from './HotkeyTab'
+import UiTab from './UiTab'
 import InfoTab from './InfoTab'
 import StoragesTab from './StoragesTab'
 import CSSModules from 'browser/lib/CSSModules'
@@ -32,6 +33,10 @@ class Preferences extends React.Component {
     }
   }
 
+  handleEscButtonClick () {
+    this.props.close()
+  }
+
   renderContent () {
     const { boundingBox } = this.state
     let { dispatch, config, data } = this.props
@@ -39,9 +44,16 @@ class Preferences extends React.Component {
     switch (this.state.currentTab) {
       case 'INFO':
         return <InfoTab/>
-      case 'CONFIG':
+      case 'HOTKEY':
         return (
-          <ConfigTab
+          <HotkeyTab
+            dispatch={dispatch}
+            config={config}
+          />
+        )
+      case 'UI':
+        return (
+          <UiTab
             dispatch={dispatch}
             config={config}
           />
@@ -73,9 +85,10 @@ class Preferences extends React.Component {
     let content = this.renderContent()
 
     let tabs = [
-      {target: 'STORAGES', label: 'Storages', icon: 'database'},
-      {target: 'CONFIG', label: 'Config', icon: 'cogs'},
-      {target: 'INFO', label: 'Info', icon: 'info-circle'}
+      {target: 'STORAGES', label: 'Storages'},
+      {target: 'HOTKEY',   label: 'Hotkey'},
+      {target: 'UI',       label: 'UI'},
+      {target: 'INFO',     label: 'Info'}
     ]
 
     let navButtons = tabs.map((tab) => {
@@ -88,9 +101,6 @@ class Preferences extends React.Component {
           key={tab.target}
           onClick={(e) => this.handleNavButtonClick(tab.target)(e)}
         >
-          <i styleName='nav-button-icon'
-            className={'fa fa-' + tab.icon}
-          />
           <span styleName='nav-button-label'>
             {tab.label}
           </span>
@@ -104,6 +114,13 @@ class Preferences extends React.Component {
         tabIndex='-1'
         onKeyDown={(e) => this.handleKeyDown(e)}
       >
+        <div styleName='top-bar'>
+          <p>Your menu for Boostnote</p>
+        </div>
+        <button styleName='top-bar-close' onClick={(e) => this.handleEscButtonClick(e)}>
+          <div styleName='top-bar-close-mark'>X</div>
+          <div styleName='top-bar-close-text'>esc</div>
+        </button>
         <div styleName='nav'>
           {navButtons}
         </div>

browser/styles/index.styl

@@ -8,15 +8,18 @@ $danger-lighten-color = lighten(#c9302c, 5%)
 $statusBar-height = 24px
 $sideNav-width = 200px
 $sideNav--folded-width = 44px
-$topBar-height = 50px
+$topBar-height = 60px
 
 // UI default
 $ui-text-color = #515151
 $ui-inactive-text-color = #939395
 $ui-borderColor = #D1D1D1
-$ui-backgroundColor = #FAFAFA
+$ui-backgroundColor = #FFFFFF
+$ui-noteList-backgroundColor = #F3F3F3
+$ui-noteDetail-backgroundColor = #F4F4F4
 $ui-border = solid 1px $ui-borderColor
 $ui-active-color = #6AA5E9
+$ui-tag-backgroundColor = rgba(0, 0, 0, 0.3)
 
 // UI Button
 $ui-button-color = #939395
@@ -44,6 +47,9 @@ tooltip()
 $ui-input--focus-borderColor = #369DCD
 $ui-input--disabled-backgroundColor = #DDD
 
+// Parts
+$ui-favorite-star-button-color = #FFC216
+
 /*
 * # Border
 */
@@ -135,7 +141,10 @@ modal()
 
 // Dark theme
 $ui-dark-borderColor = lighten(#21252B, 20%)
-$ui-dark-backgroundColor = darken(#21252B, 10%)
+$ui-dark-backgroundColor = #1D1D1D
+$ui-dark-noteList-backgroundColor = #181818
+$ui-dark-noteDetail-backgroundColor = #0D0D0D
+$ui-dark-tag-backgroundColor = rgba(255, 255, 255, 0.3)
 $dark-background-color = lighten($ui-dark-backgroundColor, 10%)
 $ui-dark-text-color = #DDDDDD
 $ui-dark-button--active-color = white

docs/build.md

@@ -46,7 +46,7 @@ By this, webpack will watch the code changes and apply it automatically.
 We use Grunt.
 Acutal deploy can be run by `grunt`. However, you shouldn't use because the default task is including codesign and authenticode.
 
-So, we prepare a script which just make an excutable file.
+So, we prepare a script which just make an executable file.
 
 ```
 grunt pre-build

lib/finder.html

@@ -44,7 +44,7 @@
   <script>
     window._ = require('lodash');
   </script>
-  <script src="../compiled/sequence-diagram.js"></script>
+  <script src="../node_modules/js-sequence-diagrams/fucknpm/sequence-diagram-min.js"></script>
   <script>
     const electron = require('electron')
     electron.webFrame.setZoomLevelLimits(1, 1)

lib/main-window.js

@@ -8,7 +8,7 @@ var showMenu = process.platform !== 'win32'
 var mainWindow = new BrowserWindow({
   width: 1080,
   height: 720,
-  minWidth: 420,
+  minWidth: 500,
   minHeight: 320,
   autoHideMenuBar: showMenu,
   webPreferences: {

lib/main.html

@@ -66,7 +66,7 @@
   <script>
     window._ = require('lodash')
   </script>
-  <script src="../compiled/sequence-diagram.js"></script>
+  <script src="../node_modules/js-sequence-diagrams/fucknpm/sequence-diagram-min.js"></script>
 
   <script src="../compiled/katex.js"></script>
   <script src="../compiled/react.js"></script>

oh-my-cdn.json

@@ -8,7 +8,6 @@
     "katex": "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.js",
     "katex-style": "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.css",
     "raphael": "https://raw.githubusercontent.com/DmitryBaranovskiy/raphael/master/raphael.js",
-    "flowchart": "https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.6.3/flowchart.js",
-    "sequence-diagram": "https://cdn.rawgit.com/bramp/js-sequence-diagrams/master/build/sequence-diagram-min.js"
+    "flowchart": "https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.6.3/flowchart.js"
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "boost",
-  "version": "0.7.4",
+  "version": "0.8.0",
   "description": "Boostnote",
   "main": "index.js",
   "license": "GPL-3.0",
@@ -52,6 +52,7 @@
     "electron-gh-releases": "^2.0.2",
     "font-awesome": "^4.3.0",
     "immutable": "^3.8.1",
+    "js-sequence-diagrams": "^1000000.0.6",
     "lodash": "^4.11.1",
     "markdown-it": "^6.0.1",
     "markdown-it-checkbox": "^1.1.0",

readme-ja.md

@@ -2,8 +2,7 @@
 
 > [Boostnote store](https://boostnote.paintory.com/)をはじめました!! :tada: そして、[Pateron](https://www.patreon.com/boostnote)からも私達を支援することができます!
 
-![Boostnote app screenshot](https://cloud.githubusercontent.com/assets/5865853/18662404/3aa42396-7f55-11e6-88bf-f4ec6505ee8f.png)
-![Boostnote app screenshot](https://cloud.githubusercontent.com/assets/5865853/18662139/f491adac-7f53-11e6-8631-2a447af9f36a.png)
+![Boostnote app screenshot](./resources/repository/top.png)
 
 オープンソースノートアプリ
 

readme-ko.md

@@ -2,8 +2,7 @@
 
 > [Boostnote store](https://boostnote.paintory.com/)가 생겼습니다!! :tada: 그리고,[Pateron](https://www.patreon.com/boostnote)에서도 저희를 지원 하실 수 있습니다.!
 
-![Boostnote app screenshot](https://cloud.githubusercontent.com/assets/5865853/18662404/3aa42396-7f55-11e6-88bf-f4ec6505ee8f.png)
-![Boostnote app screenshot](https://cloud.githubusercontent.com/assets/5865853/18662139/f491adac-7f53-11e6-8631-2a447af9f36a.png)
+![Boostnote app screenshot](./resources/repository/top.png)
 
 오픈소스 노트 앱
 

readme.md

@@ -1,5 +1,5 @@
 <h1 align="center">
-  <a href="https://github.com/BoostIO/Boostnote"><img src="http://b00st.io/assets/img/logo.png" alt="Boostnote" width="180"></a>
+  <a href="https://github.com/BoostIO/Boostnote"><img src="./resources/app.png" alt="Boostnote" width="180"></a>
   <br>
   Boostnote
   <br>
@@ -12,8 +12,7 @@
 
 > We launched our [Boostnote store](https://boostnote.paintory.com/)!! :tada: Also, you can support us via [Patreon](https://www.patreon.com/boostnote) and [Open collective](https://opencollective.com/boostnote)!
 
-![Boostnote app screenshot](https://cloud.githubusercontent.com/assets/5865853/18662404/3aa42396-7f55-11e6-88bf-f4ec6505ee8f.png)
-![Boostnote app screenshot](https://cloud.githubusercontent.com/assets/5865853/18662139/f491adac-7f53-11e6-8631-2a447af9f36a.png)
+![Boostnote app screenshot](./resources/repository/top.png)
 
 [日本語](./readme-ja.md) - [한국어](./readme-ko.md)
 

tests/date-formatter-test.js

@@ -0,0 +1,12 @@
+/**
+ * @fileoverview Unit test for browser/lib/date-formatter.js
+ */
+const test = require('ava')
+const { getLastUpdated } = require('browser/lib/date-formatter')
+
+test(t => {
+  t.throws(
+    () => getLastUpdated('invalid argument'),
+    'Invalid argument.'
+  )
+})