Merge branch 'master' into feature/add_multiselect_notes_delete

Backers.md

@@ -37,3 +37,7 @@ Adam - $5
 Steve	- $5
 
 evmin	- $5
+
+[@yeojoy](https://twitter.com/yeojoy) - $5
+
+Scotia Draven - $5

ISSUE_TEMPLATE.md

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

browser/components/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

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
+    &:hover
-      background-color $ui-dark-button--active-backgroundColor
+      transition 0.15s
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-dark-text-color
       .item-simple-title
       .item-simple-title-icon
       .item-simple-bottom-time
-      .item-simple-bottom-tagList-item
         transition 0.15s
         color $ui-dark-text-color
-    &:hover
+      .item-simple-bottom-tagList-item
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+        transition 0.15s
+        background-color alpha(#fff, 20%)
+        color $ui-dark-text-color
+    &:active
+      transition 0.15s
+      background-color $ui-dark-button--active-backgroundColor
+      color $ui-dark-text-color
       .item-simple-title
       .item-simple-title-icon
       .item-simple-bottom-time
+        transition 0.15s
+        color $ui-dark-text-color
       .item-simple-bottom-tagList-item
         transition 0.15s
+        background-color alpha(white, 10%)
         color $ui-dark-text-color  
 
   .item-simple--active
     border-color $ui-dark-borderColor
     background-color $ui-dark-button--active-backgroundColor
+    .item-simple-wrapper
+      border-color transparent
     .item-simple-title
     .item-simple-title-icon
     .item-simple-bottom-time
       color $ui-dark-text-color
     .item-simple-bottom-tagList-item
-      background-color transparent
+      background-color alpha(white, 10%)
       color $ui-dark-text-color
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+      color #c0392b
+      .item-simple-bottom-tagList-item
+        background-color alpha(#fff, 20%)
 
   .item-simple-title
     color $ui-inactive-text-color

browser/components/RealtimeNotification.js

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

browser/components/RealtimeNotification.styl

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

browser/components/SideNavFilter.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

browser/components/StorageItem.js

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

browser/components/StorageItem.styl

@@ -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()

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

browser/main/Detail/InfoPanel.js

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

browser/main/Detail/InfoPanel.styl

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

browser/main/Detail/InfoPanelTrashed.js

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

browser/main/Detail/MarkdownNoteDetail.styl

@@ -3,9 +3,7 @@
 
 .root
   absolute top right bottom
-  border-width 0 0 1px
+  border-width 0
-  border-style solid
-  border-color $ui-borderColor
   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
 

browser/main/Detail/SnippetNoteDetail.styl

@@ -3,9 +3,7 @@
 
 .root
   absolute top bottom right
-  border-width 0 0 1px
+  border-width 0
-  border-style solid
-  border-color $ui-borderColor
   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

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>
     )
   }

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
 

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 { storage, folder } = this.resolveTargetFolder()
-    const targetIndex = this.getTargetIndex()
-
-    const storageKey = this.notes[targetIndex].storage
-    const folderKey = this.notes[targetIndex].folder
 
     if (filepaths === undefined) return
     filepaths.forEach((filepath) => {
@@ -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 (

browser/main/SideNav/SideNav.styl

@@ -26,27 +26,22 @@
 
 .switch-buttons
   background-color transparent
-  border 1px solid $ui-borderColor
+  border 0
-  width 110px
   height 25px
-  margin 20px auto 0px auto
+  margin 20px auto 0px 8px
-  border-radius 1px
 
 .non-active-button
-  navButtonColor()
+  color $ui-inactive-text-color
-  font-weight 600
+  font-size 16px
-  width 54px
+  border 0
-  height 23px
+  background-color transparent
+  transition 0.2s
+  &:hover
+    color alpha(#0B99F1, 60%)
 
 .active-button
   @extend .non-active-button
-  background-color $ui-button--active-backgroundColor
+  color #0B99F1
-  color $ui-text-color
-  &:hover
-    background-color alpha($ui-button--active-backgroundColor, 70%)
-    color alpha($ui-text-color, 70%)
-  &:active, &:active:hover
-    background-color $ui-button--active-backgroundColor
 
 .top-menu-label
   margin-left 5px
@@ -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()
+    color alpha($ui-dark-text-color, 60%)
-
-  .active-button
-    @extend .non-active-button
-    background-color $ui-dark-button--active-backgroundColor
-    color $ui-dark-text-color
     &:hover
-      background-color alpha($ui-dark-button--active-backgroundColor, 70%)
+      color alpha(#0B99F1, 60%)
-      color alpha($ui-dark-text-color, 70%)
-    &:active
-      color $ui-dark-text-color
-      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
-    &:active, &:active:hover
-      color $ui-dark-text-color
-      background-color $ui-dark-button--active-backgroundColor
 
   .tag-title
     p

browser/main/SideNav/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 ? '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)}>Tags</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'

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

browser/main/modals/PreferencesModal/FolderItem.styl

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

browser/main/modals/PreferencesModal/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>
     )
   }

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