Merge branch 'master' into feature/add_multiselect_notes_delete

2025-12-13 09:46:22 +00:00 · 2017-11-07 22:48:50 +09:00
parent c8763063c0 e94b45a7e4
commit f0f23ede3d
24 changed files with 296 additions and 225 deletions
--- a/Backers.md
+++ b/Backers.md
@@ -37,3 +37,7 @@ Adam - $5
 Steve	- $5

 evmin	- $5
+
+[@yeojoy](https://twitter.com/yeojoy) - $5
+
+Scotia Draven - $5
--- a/ISSUE_TEMPLATE.md
+++ b/ISSUE_TEMPLATE.md
@@ -1,3 +1,10 @@
+<!--
 Please paste some **screenshots** with the **developer tool** open (console tab) when you report a bug.

 If your issue is regarding boostnote mobile, move to https://github.com/BoostIO/boostnote-mobile.
+-->
+
+<!--
+Love Boostnote? Please consider supporting us via OpenCollective:
+👉  https://opencollective.com/boostnoteio
+-->
--- a/browser/components/NoteItem.styl
+++ b/browser/components/NoteItem.styl
@@ -59,7 +59,15 @@ $control-height = 30px
  .item-star
    color $ui-favorite-star-button-color
  &:hover
-    background-color $ui-button--active-backgroundColor
+    background-color alpha($ui-button--active-backgroundColor, 50%)
+    color #e74c3c
+    .menu-button-label
+      color $ui-text-color
+  &:active, &:active:hover
+    background-color alpha($ui-button--active-backgroundColor, 50%)
+    color #e74c3c
+    .menu-button-label
+      color $ui-text-color

 .item-title-icon
  position relative
@@ -111,7 +119,7 @@ $control-height = 30px

 .item-bottom-time
  color $ui-inactive-text-color
-  font-size 11px
+  font-size 13px
  padding-left 2px
  padding-bottom 2px

@@ -148,6 +156,7 @@ body[data-theme="dark"]
    &:hover
      transition 0.15s
      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-dark-text-color
      .item-title
      .item-title-icon
      .item-bottom-time
@@ -155,11 +164,12 @@ body[data-theme="dark"]
        color $ui-dark-text-color
      .item-bottom-tagList-item
        transition 0.15s
-        background-color alpha($ui-dark-button--active-backgroundColor, 40%)
+        background-color alpha(#fff, 20%)
        color $ui-dark-text-color
    &:active
      transition 0.15s
      background-color $ui-dark-button--active-backgroundColor
+      color $ui-dark-text-color
      .item-title
      .item-title-icon
      .item-bottom-time
@@ -185,6 +195,11 @@ body[data-theme="dark"]
    .item-bottom-tagList-item
      background-color alpha(white, 10%)
      color $ui-dark-text-color
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+      color #c0392b
+      .item-bottom-tagList-item
+        background-color alpha(#fff, 20%)

  .item-title
    color $ui-inactive-text-color
--- a/browser/components/NoteItemSimple.styl
+++ b/browser/components/NoteItemSimple.styl
@@ -37,7 +37,15 @@ $control-height = 30px
  .item-simple-title-icon
    color $ui-text-color
  &:hover
-    background-color $ui-button--active-backgroundColor
+    background-color alpha($ui-button--active-backgroundColor, 50%)
+    color #e74c3c
+    .menu-button-label
+      color $ui-text-color
+  &:active, &:active:hover
+    background-color alpha($ui-button--active-backgroundColor, 50%)
+    color #e74c3c
+    .menu-button-label
+      color $ui-text-color

 .item-simple-title
  font-size 13px
@@ -67,33 +75,50 @@ body[data-theme="dark"]
  .item-simple
    border-color $ui-dark-borderColor
    background-color $ui-dark-noteList-backgroundColor
-    &:active
-      background-color $ui-dark-button--active-backgroundColor
-      .item-simple-title
-      .item-simple-title-icon
-      .item-simple-bottom-time
-      .item-simple-bottom-tagList-item
-        transition 0.15s
-        color $ui-dark-text-color
    &:hover
+      transition 0.15s
      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-dark-text-color
      .item-simple-title
      .item-simple-title-icon
      .item-simple-bottom-time
-      .item-simple-bottom-tagList-item
        transition 0.15s
        color $ui-dark-text-color
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(#fff, 20%)
+        color $ui-dark-text-color
+    &:active
+      transition 0.15s
+      background-color $ui-dark-button--active-backgroundColor
+      color $ui-dark-text-color
+      .item-simple-title
+      .item-simple-title-icon
+      .item-simple-bottom-time
+        transition 0.15s
+        color $ui-dark-text-color
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(white, 10%)
+        color $ui-dark-text-color  

  .item-simple--active
    border-color $ui-dark-borderColor
    background-color $ui-dark-button--active-backgroundColor
+    .item-simple-wrapper
+      border-color transparent
    .item-simple-title
    .item-simple-title-icon
    .item-simple-bottom-time
      color $ui-dark-text-color
    .item-simple-bottom-tagList-item
-      background-color transparent
+      background-color alpha(white, 10%)
      color $ui-dark-text-color
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+      color #c0392b
+      .item-simple-bottom-tagList-item
+        background-color alpha(#fff, 20%)

  .item-simple-title
    color $ui-inactive-text-color
--- a/browser/components/RealtimeNotification.js
+++ b/browser/components/RealtimeNotification.js
@@ -40,7 +40,7 @@ class RealtimeNotification extends React.Component {
      ? <a styleName='notification-link' href={notifications[0].linkUrl}
        onClick={(e) => this.handleLinkClick(e)}
      >
-        {notifications[0].text}
+        Info: {notifications[0].text}
      </a>
    : ''

--- a/browser/components/RealtimeNotification.styl
+++ b/browser/components/RealtimeNotification.styl
@@ -2,20 +2,20 @@
  z-index 1000
  font-size 12px
  position absolute
-  bottom 0px
-  right 0px
-  background-color #EBEBEB
+  bottom 20px
+  width 100%
+  float left
  height 30px
+  background-color none

 .notification-link
  position absolute
-  right 5px
-  top 5px
  text-decoration none
  color #282A36
+  font-size 14px
  border 1px solid #6FA8E6
  background-color alpha(#6FA8E6, 0.2)
-  padding 3px 9px
+  padding 5px 12px
  border-radius 2px
  transition 0.2s
  &:hover
@@ -23,7 +23,7 @@

 body[data-theme="dark"]
  .notification-area
-    background-color #1E2124
+    background-color none

  .notification-link
    color #fff
--- a/browser/components/SideNavFilter.styl
+++ b/browser/components/SideNavFilter.styl
@@ -5,7 +5,7 @@
  navButtonColor()
  height 32px
  padding 0 15px
-  font-size 12px
+  font-size 13px
  width 100%
  text-align left
  overflow ellipsis
@@ -71,7 +71,7 @@
    border-bottom-right-radius 2px
    pointer-events none
    opacity 0
-    font-size 12px
+    font-size 13px

 body[data-theme="dark"]
  .menu-button
--- a/browser/components/StorageItem.js
+++ b/browser/components/StorageItem.js
@@ -35,10 +35,8 @@ const StorageItem = ({
  >
    <span styleName={isFolded
      ? 'folderList-item-name--folded' : 'folderList-item-name'
-    }
-      style={{borderColor: folderColor}}
-    >
-      {isFolded ? folderName.substring(0, 1) : folderName}
+    }>
+      <text style={{color: folderColor, paddingRight: '10px'}}>{isActive ? <i className='fa fa-folder-open-o' /> : <i className='fa fa-folder-o' />}</text>{isFolded ? folderName.substring(0, 1) : folderName}
    </span>
    {(!isFolded && isNumber(noteCount)) &&
      <span styleName='folderList-item-noteCount'>{noteCount}</span>
--- a/browser/components/StorageItem.styl
+++ b/browser/components/StorageItem.styl
@@ -13,7 +13,7 @@
  text-align left
  border none
  overflow ellipsis
-  font-size 12px
+  font-size 13px
  &:first-child
    margin-top 0
  &:hover
@@ -35,7 +35,7 @@
 .folderList-item-name
  display block
  flex 1
-  padding 0 25px
+  padding 0 12px
  height 26px
  line-height 26px
  border-width 0 0 0 2px
@@ -48,7 +48,7 @@
  float right
  line-height 26px
  padding-right 15px
-  font-size 12px
+  font-size 13px

 .folderList-item-tooltip
  tooltip()
--- a/browser/components/TagListItem.styl
+++ b/browser/components/TagListItem.styl
@@ -9,7 +9,7 @@
  text-align left
  border none
  overflow ellipsis
-  font-size 12px
+  font-size 13px
  &:first-child
    margin-top 0
  &:hover
@@ -30,7 +30,7 @@
  text-align left
  border none
  overflow ellipsis
-  font-size 12px
+  font-size 13px
  &:hover
    background-color alpha($ui-button--active-backgroundColor, 60%)
    transition 0.2s
@@ -38,7 +38,7 @@
 .tagList-item-name
  display block
  flex 1
-  padding 0 25px
+  padding 0 15px
  height 26px
  line-height 26px
  border-width 0 0 0 2px
--- a/browser/main/Detail/InfoPanel.js
+++ b/browser/main/Detail/InfoPanel.js
@@ -6,68 +6,54 @@ const InfoPanel = ({
  storageName, folderName, noteLink, updatedAt, createdAt, exportAsMd, exportAsTxt, wordCount, letterCount, type, print
 }) => (
  <div className='infoPanel' styleName='control-infoButton-panel' style={{display: 'none'}}>
-    <div styleName='group-section'>
-      <div styleName='group-section-label'>
-        Storage
-      </div>
-      <div styleName='group-section-control'>
-        {storageName}
-      </div>
-    </div>
-    <div styleName='group-section'>
-      <div styleName='group-section-label'>
-        Folder
-      </div>
-      <div styleName='group-section-control'>
-        {folderName}
-      </div>
-    </div>
-    <div styleName='group-section'>
-      <div styleName='group-section-label'>
-        Created
-      </div>
-      <div styleName='group-section-control'>
-        {createdAt}
-      </div>
-    </div>
-    <div styleName='group-section'>
-      <div styleName='group-section-label'>
-        Updated
-      </div>
-      <div styleName='group-section-control'>
-        {updatedAt}
-      </div>
-    </div>
-    <div styleName='group-section'>
-      <div styleName='group-section-label'>
-        Note Link
-      </div>
-      <div styleName='group-section-control'>
-        <input value={noteLink} onClick={(e) => { e.target.select() }} />
-      </div>
+    <div>
+      <p styleName='modification-date'>{updatedAt}</p>
+      <p styleName='modification-date-desc'>MODIFICATION DATE</p>
    </div>
+
+    <hr />
+
    {type === 'SNIPPET_NOTE'
      ? ''
-      : <div>
-        <div styleName='group-section'>
-          <div styleName='group-section-label'>
-            Words
-          </div>
-          <div styleName='group-section-control'>
-            {wordCount}
-          </div>
+      : <div styleName='count-wrap'>
+        <div styleName='count-number'>
+          <p styleName='infoPanel-defaul-count'>{wordCount}</p>
+          <p styleName='infoPanel-sub-count'>Words</p>
        </div>
-        <div styleName='group-section'>
-          <div styleName='group-section-label'>
-            Letters
-          </div>
-          <div styleName='group-section-control'>
-            {letterCount}
-          </div>
+        <div styleName='count-number'>
+          <p styleName='infoPanel-defaul-count'>{letterCount}</p>
+          <p styleName='infoPanel-sub-count'>Letters</p>
        </div>
      </div>
    }

+    {type === 'SNIPPET_NOTE'
+      ? ''
+      : <hr />
+    }
+
+    <div>
+      <p styleName='infoPanel-default'>{storageName}</p>
+      <p styleName='infoPanel-sub'>STORAGE</p>
+    </div>
+
+    <div>
+      <p styleName='infoPanel-default'>{folderName}</p>
+      <p styleName='infoPanel-sub'>FOLDER</p>
+    </div>
+
+    <div>
+      <p styleName='infoPanel-default'>{createdAt}</p>
+      <p styleName='infoPanel-sub'>CREATION DATE</p>
+    </div>
+
+    <div>
+      <input styleName='infoPanel-noteLink' value={noteLink} onClick={(e) => { e.target.select() }} />
+      <p styleName='infoPanel-sub'>NOTE LINK</p>
+    </div>
+
+    <hr />
+
    <div id='export-wrap'>
      <button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
        <i className='fa fa-file-code-o fa-fw' />
--- a/browser/main/Detail/InfoPanel.styl
+++ b/browser/main/Detail/InfoPanel.styl
@@ -10,57 +10,86 @@

 .control-infoButton-panel
  z-index 200
-  margin-top 45px
-  margin-left -210px
+  margin-top 38px
+  margin-left -140px
  position absolute
-  padding 20px 20px 0 20px
-  width 340px
+  padding 20px 25px 0 25px
+  width 300px
+  height 500px
+  overflow auto
  background-color $ui-noteList-backgroundColor
-  border 1px solid $border-color
+  box-shadow 2px 12px 15px 2px rgba(0, 0, 0, 0.1), 2px 1px 50px 2px rgba(0, 0, 0, 0.1)
+  border-radius 2px
+
+.modification-date
+  font-size 18px
+  line-height 30px
+  color $ui-text-color
+
+.modification-date-desc
+  font-size 18px
+  color $ui-inactive-text-color

 .control-infoButton-panel-trash
  z-index 200
  margin-top 45px
-  margin-left -230px
+  margin-left -190px
  position absolute
-  padding 20px 20px 0 20px
-  width 320px
+  padding 20px 25px 0 25px
+  width 300px
  background-color $ui-noteList-backgroundColor
-  border 1px solid $border-color
+  box-shadow 2px 12px 15px 2px rgba(0, 0, 0, 0.1), 2px 1px 50px 2px rgba(0, 0, 0, 0.1)
+  border-radius 2px

-.group-section
-  display flex
+.count-wrap 
+	display flex
+	position relative
+	width 100%
+
+.count-number 
+	position relative
+	display block
+	width 50%
+	overflow hidden
+	margin 0
+	padding 0
+
+.infoPanel-defaul-count
+  font-size 16px
  line-height 30px
-  font-size 13px
-
-.group-section-label
-  width 70px
-  height 20px
-  text-align left
-  margin-right 50px
-  font-size 13px
-  color $ui-inactive-text-color
-
-.group-section-control
-  flex 1
-  font-size 13px
  color $ui-text-color

-.group-section-control input
-  width 160px
-  height 25px
+.infoPanel-sub-count
+  font-size 16px
+  color $ui-inactive-text-color
+  padding-bottom 8px

-.group-section-control text
-  color #EA4447
-  font-weight 600
+.infoPanel-default
+  font-size 14px
+  line-height 30px
+  color $ui-text-color
+
+.infoPanel-sub
+  font-size 14px
+  color $ui-inactive-text-color
+  padding-bottom 8px
+
+.infoPanel-noteLink
+  padding-right 5px
+  width 200px
+  height 25px
+  margin-bottom 6px
+
+.infoPanel-trash
+  color #EA4447		
+  font-weight 600		
  font-size 14px
  width 70px
-  height 25px
  background-color rgba(226,33,113,0.1)
-  border none
+  border none		
  outline none
-  border-radius 2px
-  margin-right 5px
+  border-radius 2px		
+  margin-right 5px		
  padding 2px 5px

 [id=export-wrap]
@@ -96,20 +125,30 @@
 body[data-theme="dark"]
  .control-infoButton-panel
    background-color $ui-dark-noteList-backgroundColor
-    border 1px solid $ui-dark-borderColor

  .control-infoButton-panel-trash
    background-color $ui-dark-noteList-backgroundColor
-    border 1px solid $ui-dark-borderColor

-  .group-section-label
-    color $ui-inactive-text-color
-
-  .group-section-control
+  .modification-date
    color $ui-dark-text-color

-  .group-section-control input
-    background-color alpha($ui-dark-borderColor, 80%)
+  .modification-date-desc
+    color $ui-inactive-text-color
+
+  .infoPanel-defaul-count
+    color $ui-dark-text-color
+
+  .infoPanel-sub-count
+    color $ui-inactive-text-color
+
+  .infoPanel-default
+    color $ui-dark-text-color
+
+  .infoPanel-sub
+    color $ui-inactive-text-color
+
+  .infoPanel-noteLink
+    background-color alpha($ui-dark-borderColor, 60%)
    color $ui-dark-text-color

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

    <div id='export-wrap'>
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -3,9 +3,7 @@

 .root
  absolute top right bottom
-  border-width 0 0 1px
-  border-style solid
-  border-color $ui-borderColor
+  border-width 0
  background-color $ui-noteDetail-backgroundColor
  box-shadow $note-detail-box-shadow

@@ -44,7 +42,6 @@

 body[data-theme="dark"]
  .root
-    border-color $ui-dark-borderColor
    background-color $ui-dark-noteDetail-backgroundColor
    box-shadow none

--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -3,9 +3,7 @@

 .root
  absolute top bottom right
-  border-width 0 0 1px
-  border-style solid
-  border-color $ui-borderColor
+  border-width 0
  background-color $ui-noteDetail-backgroundColor
  box-shadow $note-detail-box-shadow

@@ -57,7 +55,7 @@

 .override
  absolute bottom left
-  bottom 30px
+  bottom 2px
  left 60px
  height 23px
  z-index 101
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -14,7 +14,6 @@ import InitModal from 'browser/main/modals/InitModal'
 import mixpanel from 'browser/main/lib/mixpanel'
 import mobileAnalytics from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import eventEmitter from 'browser/main/lib/eventEmitter'
-import RealtimeNotification from 'browser/components/RealtimeNotification'

 function focused () {
  mixpanel.track('MAIN_FOCUSED')
@@ -192,14 +191,6 @@ class Main extends React.Component {

    // the width of the navigation bar when it is folded/collapsed
    const foldedNavigationWidth = 44
-    let notificationBarOffsetLeft
-    if (this.state.fullScreen) {
-      notificationBarOffsetLeft = 0
-    } else if (config.isSideNavFolded) {
-      notificationBarOffsetLeft = foldedNavigationWidth
-    } else {
-      notificationBarOffsetLeft = this.state.navWidth
-    }

    return (
      <div
@@ -268,9 +259,6 @@ class Main extends React.Component {
            ignorePreviewPointerEvents={this.state.isRightSliderFocused}
          />
        </div>
-        <RealtimeNotification
-          style={{left: notificationBarOffsetLeft}}
-        />
      </div>
    )
  }
--- a/browser/main/NoteList/NoteList.styl
+++ b/browser/main/NoteList/NoteList.styl
@@ -2,7 +2,6 @@ $control-height = 30px

 .root
  absolute left bottom
-  bottom 30px
  top $topBar-height - 1
  background-color $ui-noteList-backgroundColor

--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -575,11 +575,7 @@ class NoteList extends React.Component {
  // Add notes to the current folder
  addNotesFromFiles (filepaths) {
    const { dispatch, location } = this.props
-
-    const targetIndex = this.getTargetIndex()
-
-    const storageKey = this.notes[targetIndex].storage
-    const folderKey = this.notes[targetIndex].folder
+    const { storage, folder } = this.resolveTargetFolder()

    if (filepaths === undefined) return
    filepaths.forEach((filepath) => {
@@ -588,11 +584,11 @@ class NoteList extends React.Component {
        const content = data.toString()
        const newNote = {
          content: content,
-          folder: folderKey,
+          folder: folder.key,
          title: markdown.strip(findNoteTitle(content)),
          type: 'MARKDOWN_NOTE'
        }
-        dataApi.createNote(storageKey, newNote)
+        dataApi.createNote(storage.key, newNote)
        .then((note) => {
          dispatch({
            type: 'UPDATE_NOTE',
@@ -615,6 +611,36 @@ class NoteList extends React.Component {
    return targetIndex
  }

+  resolveTargetFolder () {
+    const { data, params } = this.props
+    let storage = data.storageMap.get(params.storageKey)
+
+    // Find first storage
+    if (storage == null) {
+      for (let kv of data.storageMap) {
+        storage = kv[1]
+        break
+      }
+    }
+
+    if (storage == null) this.showMessageBox('No storage for importing note(s)')
+    const folder = _.find(storage.folders, {key: params.folderKey}) || storage.folders[0]
+    if (folder == null) this.showMessageBox('No folder for importing note(s)')
+
+    return {
+      storage,
+      folder
+    }
+  }
+
+  showMessageBox (message) {
+    dialog.showMessageBox(remote.getCurrentWindow(), {
+      type: 'warning',
+      message: message,
+      buttons: ['OK']
+    })
+  }
+
  render () {
    let { location, notes, config, dispatch } = this.props
    let { selectedNoteKeys } = this.state
@@ -631,6 +657,25 @@ class NoteList extends React.Component {
      if (note.isTrashed !== true || location.pathname === '/trashed') return true
    })

+    moment.locale('en', {
+      relativeTime: {
+        future: 'in %s',
+        past: '%s ago',
+        s: '%ds',
+        ss: '%ss',
+        m: '1m',
+        mm: '%dm',
+        h: 'an hour',
+        hh: '%dh',
+        d: '1d',
+        dd: '%dd',
+        M: '1M',
+        MM: '%dM',
+        y: '1Y',
+        yy: '%dY'
+      }
+    })
+
    let noteList = notes
      .map(note => {
        if (note == null) {
@@ -644,6 +689,7 @@ class NoteList extends React.Component {
          config.sortBy === 'CREATED_AT'
            ? note.createdAt : note.updatedAt
        ).fromNow('D')
+        const key = `${note.storage}-${note.key}`

        if (isDefault) {
          return (
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -26,27 +26,22 @@

 .switch-buttons
  background-color transparent
-  border 1px solid $ui-borderColor
-  width 110px
+  border 0
  height 25px
-  margin 20px auto 0px auto
-  border-radius 1px
+  margin 20px auto 0px 8px

 .non-active-button
-  navButtonColor()
-  font-weight 600
-  width 54px
-  height 23px
+  color $ui-inactive-text-color
+  font-size 16px
+  border 0
+  background-color transparent
+  transition 0.2s
+  &:hover
+    color alpha(#0B99F1, 60%)

 .active-button
  @extend .non-active-button
-  background-color $ui-button--active-backgroundColor
-  color $ui-text-color
-  &:hover
-    background-color alpha($ui-button--active-backgroundColor, 70%)
-    color alpha($ui-text-color, 70%)
-  &:active, &:active:hover
-    background-color $ui-button--active-backgroundColor
+  color #0B99F1

 .top-menu-label
  margin-left 5px
@@ -100,7 +95,7 @@
    border-top-right-radius 2px
    border-bottom-right-radius 2px
    pointer-events none
-    font-size 12px
+    font-size 13px

 body[data-theme="dark"]
  .root, .root--folded
@@ -118,25 +113,10 @@ body[data-theme="dark"]
    &:hover
      background-color alpha($ui-dark-button--active-backgroundColor, 20%)

-  .switch-buttons
-    border-color $ui-dark-borderColor
-
  .non-active-button
-    navDarkButtonColor()
-
-  .active-button
-    @extend .non-active-button
-    background-color $ui-dark-button--active-backgroundColor
-    color $ui-dark-text-color
+    color alpha($ui-dark-text-color, 60%)
    &:hover
-      background-color alpha($ui-dark-button--active-backgroundColor, 70%)
-      color alpha($ui-dark-text-color, 70%)
-    &:active
-      color $ui-dark-text-color
-      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
-    &:active, &:active:hover
-      color $ui-dark-text-color
-      background-color $ui-dark-button--active-backgroundColor
+      color alpha(#0B99F1, 60%)

  .tag-title
    p
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -148,8 +148,8 @@ class SideNav extends React.Component {
      >
        <div styleName='top'>
          <div styleName='switch-buttons'>
-            <button styleName={isTagActive ? 'non-active-button' : 'active-button'} onClick={this.handleSwitchFoldersButtonClick.bind(this)}>Folders</button>
-            <button styleName={isTagActive ? 'active-button' : 'non-active-button'} onClick={this.handleSwitchTagsButtonClick.bind(this)}>Tags</button>
+            <button styleName={isTagActive ? 'non-active-button' : 'active-button'} onClick={this.handleSwitchFoldersButtonClick.bind(this)}><i className='fa fa-folder fa-fw' /></button>
+            <button styleName={isTagActive ? 'active-button' : 'non-active-button'} onClick={this.handleSwitchTagsButtonClick.bind(this)}><i className='fa fa-tags fa-fw' /></button>
          </div>
          <div>
            <button styleName='top-menu'
--- a/browser/main/StatusBar/StatusBar.styl
+++ b/browser/main/StatusBar/StatusBar.styl
@@ -2,8 +2,6 @@

 .root
  absolute bottom left right
-  height $statusBar-height
-  bottom 16px
  z-index 100
  background-color $ui-noteDetail-backgroundColor
  display flex
--- a/browser/main/modals/PreferencesModal/FolderItem.styl
+++ b/browser/main/modals/PreferencesModal/FolderItem.styl
@@ -25,7 +25,7 @@

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

--- a/browser/main/modals/PreferencesModal/index.js
+++ b/browser/main/modals/PreferencesModal/index.js
@@ -9,6 +9,7 @@ import StoragesTab from './StoragesTab'
 import ModalEscButton from 'browser/components/ModalEscButton'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './PreferencesModal.styl'
+import RealtimeNotification from 'browser/components/RealtimeNotification'

 class Preferences extends React.Component {
  constructor (props) {
@@ -136,6 +137,7 @@ class Preferences extends React.Component {
        <div ref='content' styleName='content'>
          {content}
        </div>
+        <RealtimeNotification />
      </div>
    )
  }
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -5,7 +5,7 @@ $danger-color = #c9302c
 $danger-lighten-color = lighten(#c9302c, 5%)

 // Layouts
-$statusBar-height = 36px
+$statusBar-height = 0px
 $sideNav-width = 200px
 $sideNav--folded-width = 44px
 $topBar-height = 60px