design update 2

boostnote.json

@@ -0,0 +1,10 @@
+{
+  "folders": [
+    {
+      "key": "3115e37e3d7131add9c6",
+      "color": "#E10051",
+      "name": "Notes"
+    }
+  ],
+  "version": "1.0"
+}

browser/components/NoteItem.js

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

browser/components/NoteItem.styl

@@ -125,10 +125,10 @@ $control-height = 30px
 
 .item-star
   position absolute
-  right -20px
+  right -10px
-  bottom 2px
+  bottom 12px
-  width 34px
+  width 16px
-  height 34px
+  height 16px
   color alpha($ui-favorite-star-button-color, 60%)
   font-size 12px
   padding 0

browser/components/SideNavFilter.js

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

browser/components/SideNavFilter.styl

@@ -3,41 +3,55 @@
 
 .menu-button
   navButtonColor()
-  height 32px
+  height 36px
-  padding 0 15px
+  padding 0 15px 0 20px
-  font-size 13px
+  font-size 14px
   width 100%
   text-align left
   overflow ellipsis
-  &:hover
+  display flex
-    color $ui-button-default-color
+  align-items center
+  &:hover, &:active, &:active:hover
+    color #1EC38B
     background-color alpha($ui-button-default--active-backgroundColor, 20%)
-    transition background-color 0.15s
-  &:active, &:active:hover
-    color $ui-button-default-color
-    background-color $ui-button-default--active-backgroundColor
 
+.iconWrap
+  width 20px
+  text-align center
+  
 .counters
   float right
   color $ui-inactive-text-color
 
 .menu-button--active
   @extend .menu-button
-  color #e74c3c
   SideNavFilter()
+  color #1EC38B
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
+  .menu-button-label, .counters
+    color #1EC38B
+  &:hover
+    color #1EC38B
 
 .menu-button-star--active
   @extend .menu-button
-  color #F9BF3B
   SideNavFilter()
+  color #1EC38B
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
+  .menu-button-label, .counters
+    color #1EC38B
 
 .menu-button-trash--active
   @extend .menu-button
-  color #5D9E36
   SideNavFilter()
+  color #1EC38B
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
+  .menu-button-label, .counters
+    color #1EC38B
 
 .menu-button-label
-  margin-left 5px
+  margin-left 10px
+  flex 1
 
 .menu--folded
   @extend .menu
@@ -46,6 +60,7 @@
     &:hover .menu-button-label
       transition opacity 0.15s
       opacity 1
+
   .menu-button-label
     position fixed
     display inline-block
@@ -55,9 +70,7 @@
     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
@@ -67,6 +80,9 @@
   .counters
     display none
 
+
+
+
 body[data-theme="white"]
   .menu-button
     navWhiteButtonColor()

browser/components/StorageItem.styl

@@ -5,31 +5,30 @@
 .folderList-item
   display flex
   width 100%
-  height 26px
+  height 34px
   background-color transparent
   color $ui-inactive-text-color
   padding 0
-  margin-bottom 5px
   text-align left
   border none
   overflow ellipsis
-  font-size 13px
+  font-size 14px
   &:first-child
     margin-top 0
   &:hover
-    color $ui-button-default-color
+    color #1EC38B;
     background-color alpha($ui-button-default--active-backgroundColor, 20%)
     transition background-color 0.15s
   &:active
     color $$ui-button-default-color
-    background-color $ui-button-default--active-backgroundColor
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
-
+    
 .folderList-item--active
   @extend .folderList-item
-  color $ui-button-default-color
+  color #1EC38B
-  background-color $ui-button-default--active-backgroundColor
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
   &:hover
-    color $ui-button-default-color
+    color #1EC38B;
     background-color alpha($ui-button-default--active-backgroundColor, 50%)
 
 .folderList-item-name

browser/components/StorageList.styl

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

browser/main/Detail/InfoButton.js

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

browser/main/Detail/InfoButton.styl

@@ -14,7 +14,7 @@
 
 .infoButton
   padding 0px
-  margin 15px 0
+  margin 45px 0
 
 body[data-theme="dark"]
   .control-infoButton

browser/main/Detail/InfoPanel.styl

@@ -11,7 +11,7 @@
 .control-infoButton-panel
   z-index 200
   margin-top 38px
-  right 0px
+  right 0
   position absolute
   padding 20px 25px 0 25px
   width 300px

browser/main/Detail/MarkdownNoteDetail.js

@@ -232,7 +232,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   getToggleLockButton () {
-    return this.state.isLocked ? 'fa-eye-slash' : 'fa-eye'
+    return this.state.isLocked ? '../resources/icon/icon-lock.svg' : '../resources/icon/icon-unlock.svg'
   }
 
   handleDeleteKeyDown (e) {
@@ -332,23 +332,25 @@ class MarkdownNoteDetail extends React.Component {
         />
 
         {(() => {
-          const faClassName = `fa ${this.getToggleLockButton()}`
+          const imgSrc = `${this.getToggleLockButton()}`
           const lockButtonComponent =
             <button styleName='control-lockButton'
               onFocus={(e) => this.handleFocus(e)}
               onMouseDown={(e) => this.handleLockButtonMouseDown(e)}
             >
-              <i className={faClassName} styleName='lock-button' />
+              <img styleName='iconInfo' src={imgSrc}/>
             </button>
+
           return (
             this.state.isLockButtonShown ? lockButtonComponent : ''
           )
         })()}
 
+
         <button styleName='control-fullScreenButton'
           onMouseDown={(e) => this.handleFullScreenButton(e)}
         >
-          <i className='fa fa-window-maximize' styleName='fullScreen-button' />
+          <img styleName='iconInfo' src='../resources/icon/icon-sidebar.svg'/>
         </button>
 
         <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />

browser/main/Detail/MarkdownNoteDetail.styl

@@ -12,6 +12,7 @@
 
 .control-lockButton
   top 160px
+  margin-bottom 10px
   topBarButtonLight()
 
 .trashed-infopanel
@@ -28,7 +29,6 @@
   right $note-detail-right-margin
   top $info-height + $info-margin-under-border
   bottom $statusBar-height
-
 .body-noteEditor
   absolute top bottom left right
 

browser/main/Detail/NoteDetailInfo.styl

@@ -52,7 +52,7 @@ $info-margin-under-border = 15px
 .info-right
   position absolute
   right -20px
-  top 0
+  top 10px
   background $ui-noteDetail-backgroundColor
   bottom 1px
   padding-left 30px

browser/main/Detail/SnippetNoteDetail.js

@@ -610,7 +610,7 @@ class SnippetNoteDetail extends React.Component {
 
         <button styleName='control-fullScreenButton'
           onMouseDown={(e) => this.handleFullScreenButton(e)}>
-          <i className='fa fa-window-maximize' styleName='fullScreen-button' />
+          <img styleName='iconInfo' src='../resources/icon/icon-sidebar.svg'/>
         </button>
 
         <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />

browser/main/Detail/SnippetNoteDetail.styl

@@ -67,6 +67,7 @@
 
 .control-fullScreenButton
   top 80px
+  margin-bottom 10px
   topBarButtonLight()
 
 body[data-theme="white"]

browser/main/Detail/StarButton.js

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

browser/main/Detail/TrashButton.js

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

browser/main/Detail/TrashButton.styl

@@ -1,5 +1,6 @@
 .control-trashButton
   top 120px
+  margin-bottom 10px
   topBarButtonLight()
 
 .control-trashButton--in-trash
@@ -8,7 +9,6 @@
 
 .trashButton
   padding 0px
-  margin 15px 0
 
 body[data-theme="dark"]
   .control-trashButton

browser/main/NewNoteButton/index.js

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

browser/main/NoteList/NoteList.styl

@@ -21,14 +21,14 @@ $control-height = 30px
 
 .control-sortBy-select
   appearance: none;
-  margin-left 3px
+  margin-left 5px
   color $ui-inactive-text-color
   padding 0
   border none
   background-color transparent
   outline none
   cursor pointer
-  font-size 11px
+  font-size 12px
   &:hover
     transition 0.2s
     color $ui-text-color

browser/main/NoteList/index.js

@@ -599,7 +599,7 @@ class NoteList extends React.Component {
               }
               onClick={(e) => this.handleListStyleButtonClick(e, 'DEFAULT')}
             >
-              <i className='fa fa-th-large' />
+              <img styleName='iconTag' src='../resources/icon/icon-column.svg'/>
             </button>
             <button styleName={config.listStyle === 'SMALL'
                 ? 'control-button--active'
@@ -607,7 +607,7 @@ class NoteList extends React.Component {
               }
               onClick={(e) => this.handleListStyleButtonClick(e, 'SMALL')}
             >
-              <i className='fa fa-list-ul' />
+              <img styleName='iconTag' src='../resources/icon/icon-column-list.svg'/>
             </button>
           </div>
         </div>

browser/main/SideNav/SideNav.styl

@@ -23,13 +23,13 @@
     background-color transparent
   &:active, &:active:hover
     color $ui-button-default--active-backgroundColor
-    background-color transparent
 
 .switch-buttons
   background-color transparent
   border 0
-  height 25px
+  margin 24px auto 4px 14px
-  margin 20px auto 0px 8px
+  display flex
+  text-align center
 
 .non-active-button
   color $ui-inactive-text-color
@@ -37,13 +37,16 @@
   border 0
   background-color transparent
   transition 0.2s
+  display flex
+  text-align center
+  margin-right 4px;
   &:hover
     color alpha(#239F86, 60%)
 
 .active-button
   @extend .non-active-button
   color $ui-button-default--active-backgroundColor
-
+  
 .top-menu-label
   margin-left 5px
   overflow ellipsis

browser/main/SideNav/StorageItem.js

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

browser/main/SideNav/StorageItem.styl

@@ -5,19 +5,23 @@
 
 .header
   position relative
-  height 25px
+  height 36px
   width 100%
   margin-bottom 5px
   transition 0.15s
+  display flex
+  align-items center
 
 .header--active
   margin-bottom 5px
-  background-color $ui-button-default--active-backgroundColor
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
   transition color background-color  0.15s
+  display flex
+  align-items center
   .header-toggleButton
   .header-info
   .header-addFolderButton
-    color $ui-button-default-color
+    color #1EC38B
 
 .header-toggleButton
   navButtonColor()
@@ -37,23 +41,24 @@
   navButtonColor()
   display block
   width 100%
-  height 25px
+  height 36px
-  padding-left 23px
+  padding-left 25px
-  padding-right 10px
+  padding-right 15px
   line-height 22px
   cursor pointer
-  font-size 13px
+  font-size 14px
   border none
   overflow ellipsis
   text-align left
+  font-weight 600;
   background-color transparent
   &:hover
-    color $ui-button-default-color
+    color #1EC38B
     background-color alpha($ui-button-default--active-backgroundColor, 20%)
     transition background-color 0.15s
   &:active, &:active:hover
-    color $ui-button-default-color
+    color #1EC38B
-    background-color $ui-button-default--active-backgroundColor
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
 
 .header-info-path
   font-size 10px
@@ -62,12 +67,11 @@
 .header-addFolderButton
   navButtonColor()
   position absolute
-  right 0
+  right 10px
   width 25px
   height 25px
   padding 0
   border none
-  margin-right 5px
   border-radius 50%
   &:hover
     transition 0.2s

browser/main/SideNav/index.js

@@ -161,15 +161,26 @@ class SideNav extends React.Component {
       >
         <div styleName='top'>
           <div styleName='switch-buttons'>
-            <button styleName={isTagActive ? 'non-active-button' : 'active-button'} onClick={this.handleSwitchFoldersButtonClick.bind(this)}><i className='fa fa-bars fa-fw' style={{transform: 'rotate(90deg)'}} /></button>
+            <button styleName={isTagActive ? 'non-active-button' : 'active-button'} onClick={this.handleSwitchFoldersButtonClick.bind(this)}>
-            <button styleName={isTagActive ? 'active-button' : 'non-active-button'} onClick={this.handleSwitchTagsButtonClick.bind(this)}><i className='fa fa-tags fa-fw' /></button>
+              <img src={isTagActive
+                  ? '../resources/icon/icon-list.svg'
+                  : '../resources/icon/icon-list-active.svg'
+                }
+              />
+            </button>
+            <button styleName={isTagActive ? 'active-button' : 'non-active-button'} onClick={this.handleSwitchTagsButtonClick.bind(this)}>
+              <img src={isTagActive
+                  ? '../resources/icon/icon-tag-active.svg'
+                  : '../resources/icon/icon-tag.svg'
+                }
+              />
+            </button>
           </div>
           <div>
             <button styleName='top-menu-preference'
               onClick={(e) => this.handleMenuButtonClick(e)}
             >
-              <i className='fa fa-wrench fa-fw' />
+              <img styleName='iconTag' src='../resources/icon/icon-setting.svg'/>
-              <span styleName='top-menu-label'>Preferences</span>
             </button>
           </div>
         </div>

browser/main/StatusBar/StatusBar.styl

@@ -21,8 +21,12 @@
 
 .zoom
   navButtonColor()
-  height 24px
+  height 30px
-
+  display flex
+  align-items center
+  span
+    margin-left 5px
+  
 .update
   navButtonColor()
   height 24px

browser/main/StatusBar/index.js

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

browser/main/TopBar/TopBar.styl

@@ -36,7 +36,7 @@ $control-height = 34px
     outline none
     border none
     color $ui-text-color
-    font-size 16px
+    font-size 18px
     padding-bottom 2px
     background-color $ui-noteList-backgroundColor
 

browser/main/global.styl

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

browser/styles/index.styl

@@ -129,15 +129,11 @@ SideNavFilter()
   .menu-button-label
     color $ui-button-default-color
   &:hover
-    background-color alpha($ui-button-default--hover-backgroundColor, 50%)
+    background-color alpha($ui-button-default--hover-backgroundColor, 20%)
-    color $ui-button-default-color
-    .menu-button-label
-      color $ui-button-default-color
   &:active, &:active:hover
-    background-color alpha($ui-button-default--hover-backgroundColor, 50%)
+    background-color alpha($ui-button-default--hover-backgroundColor, 20%)
-    color $ui-button-default-color
     .menu-button-label
-      color $ui-button-default-color
+      color #1EC38B
 
 /**
 * Nav

resources/icon/icon-all-active.svg

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

resources/icon/icon-all.svg

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

resources/icon/icon-column-list.svg

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

resources/icon/icon-column.svg

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

resources/icon/icon-down.svg

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

resources/icon/icon-info-24.svg

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

resources/icon/icon-info.svg

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

resources/icon/icon-list-active.svg

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

resources/icon/icon-list.svg

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

resources/icon/icon-lock.svg

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

resources/icon/icon-newnote.svg

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

resources/icon/icon-note-code.svg

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

resources/icon/icon-note-text.svg

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

resources/icon/icon-plus.svg

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

resources/icon/icon-right.svg

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

resources/icon/icon-setting.svg

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

resources/icon/icon-sidebar-24.svg

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

resources/icon/icon-sidebar.svg

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

resources/icon/icon-star-24.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="19px" viewBox="0 0 20 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-star-24</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-1313.000000, -147.000000)">
+            <g id="icon-star-24" transform="translate(1311.000000, 145.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="24" height="24"></rect>
+                <rect id="Rectangle-2" fill="#D8D8D8" opacity="0" x="1" y="1" width="18" height="18"></rect>
+                <g id="star" transform="translate(3.000000, 3.000000)" stroke-linecap="round" stroke-width="1.8" stroke="#8A8C8D" stroke-linejoin="round">
+                    <polygon id="Shape" points="9 0 11.781 5.634 18 6.543 13.5 10.926 14.562 17.118 9 14.193 3.438 17.118 4.5 10.926 0 6.543 6.219 5.634"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icon/icon-star-active.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="17px" viewBox="0 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-star-active</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-150.000000, -290.000000)">
+            <g id="BG" transform="translate(64.000000, 132.000000)">
+                <g id="icon-star-active" transform="translate(85.000000, 157.000000)">
+                    <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                    <g id="star" transform="translate(1.000000, 1.000000)">
+                        <rect id="Rectangle-2" fill="#D8D8D8" opacity="0" x="0" y="0" width="18" height="18"></rect>
+                        <g transform="translate(1.500000, 1.500000)" stroke-linecap="round" id="Shape" stroke-width="1.5" stroke="#1EC38B" stroke-linejoin="round">
+                            <polygon points="7.5 0 9.8175 4.695 15 5.4525 11.25 9.105 12.135 14.265 7.5 11.8275 2.865 14.265 3.75 9.105 0 5.4525 5.1825 4.695"></polygon>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icon/icon-star.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="17px" viewBox="0 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-star</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-150.000000, -267.000000)">
+            <g id="BG" transform="translate(64.000000, 132.000000)">
+                <g id="icon-star" transform="translate(85.000000, 134.000000)">
+                    <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                    <g id="star" transform="translate(1.000000, 1.000000)">
+                        <rect id="Rectangle-2" fill="#D8D8D8" opacity="0" x="0" y="0" width="18" height="18"></rect>
+                        <g transform="translate(1.500000, 1.500000)" stroke-linecap="round" id="Shape" stroke-width="1.5" stroke="#8A8C8D" stroke-linejoin="round">
+                            <polygon points="7.5 0 9.8175 4.695 15 5.4525 11.25 9.105 12.135 14.265 7.5 11.8275 2.865 14.265 3.75 9.105 0 5.4525 5.1825 4.695"></polygon>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icon/icon-starred-24.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="19px" viewBox="0 0 20 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-starred-24</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-1346.000000, -147.000000)">
+            <g id="icon-starred-24" transform="translate(1344.000000, 145.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="24" height="24"></rect>
+                <rect id="Rectangle-2" fill="#D8D8D8" opacity="0" x="1" y="1" width="18" height="18"></rect>
+                <g id="star" transform="translate(3.000000, 3.000000)" stroke-linecap="round" stroke-width="1.8" stroke="#FDD835" fill="#FDD835" stroke-linejoin="round">
+                    <polygon id="Shape" points="9 0 11.781 5.634 18 6.543 13.5 10.926 14.562 17.118 9 14.193 3.438 17.118 4.5 10.926 0 6.543 6.219 5.634"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icon/icon-starred.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="19px" viewBox="0 0 20 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-starred</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-1419.000000, -184.000000)">
+            <g id="icon-starred" transform="translate(1419.000000, 184.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="star">
+                    <rect id="Rectangle-2" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                    <g transform="translate(1.666667, 1.666667)" stroke-linecap="round" id="Shape" stroke-width="1.66666667" stroke="#FDD835" fill="#FDD835" stroke-linejoin="round">
+                        <polygon points="8.33333333 0 10.9083333 5.21666667 16.6666667 6.05833333 12.5 10.1166667 13.4833333 15.85 8.33333333 13.1416667 3.18333333 15.85 4.16666667 10.1166667 0 6.05833333 5.75833333 5.21666667"></polygon>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icon/icon-tag-active.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-tag-active</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-121.000000, -174.000000)">
+            <g id="icon-tag-active" transform="translate(119.000000, 172.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="tag" transform="translate(3.000000, 3.000000)" stroke="#1EC38B" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M14.872,9.128 L9.136,14.864 C8.83589079,15.1644433 8.4286548,15.3332587 8.004,15.3332587 C7.5793452,15.3332587 7.17210921,15.1644433 6.872,14.864 L0,8 L0,0 L8,0 L14.872,6.872 C15.4923578,7.49605993 15.4923578,8.50394007 14.872,9.128 Z" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icon/icon-tag.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-tag</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-121.000000, -154.000000)">
+            <g id="icon-tag" transform="translate(119.000000, 152.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="tag" transform="translate(3.000000, 3.000000)" stroke="#8A8C8D" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M14.872,9.128 L9.136,14.864 C8.83589079,15.1644433 8.4286548,15.3332587 8.004,15.3332587 C7.5793452,15.3332587 7.17210921,15.1644433 6.872,14.864 L0,8 L0,0 L8,0 L14.872,6.872 C15.4923578,7.49605993 15.4923578,8.50394007 14.872,9.128 Z" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icon/icon-trash-24.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="20px" viewBox="0 0 18 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-trash-24</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-1404.000000, -250.000000)">
+            <g id="icon-trash-24" transform="translate(1401.000000, 248.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="24" height="24"></rect>
+                <g id="trash" transform="translate(4.000000, 3.000000)" stroke-linecap="round" stroke-width="1.77777778" stroke="#8A8C8D" stroke-linejoin="round">
+                    <polyline id="Shape" points="0 3.6 1.77777778 3.6 16 3.6"></polyline>
+                    <path d="M14.2222222,3.6 L14.2222222,16.2 C14.2222222,17.1941125 13.426284,18 12.4444444,18 L3.55555556,18 C2.573716,18 1.77777778,17.1941125 1.77777778,16.2 L1.77777778,3.6 M4.44444444,3.6 L4.44444444,1.8 C4.44444444,0.80588745 5.24038267,0 6.22222222,0 L9.77777778,0 C10.7596173,0 11.5555556,0.80588745 11.5555556,1.8 L11.5555556,3.6" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icon/icon-trash-active.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="18px" viewBox="0 0 16 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-trash-active</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-188.000000, -289.000000)">
+            <g id="icon-trash-active" transform="translate(186.000000, 288.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="trash" transform="translate(3.000000, 2.000000)" stroke-linecap="round" stroke-width="1.55555556" stroke="#1EC38B" stroke-linejoin="round">
+                    <polyline id="Shape" points="0 3.2 1.55555556 3.2 14 3.2"></polyline>
+                    <path d="M12.4444444,3.2 L12.4444444,14.4 C12.4444444,15.2836556 11.7479985,16 10.8888889,16 L3.11111111,16 C2.2520015,16 1.55555556,15.2836556 1.55555556,14.4 L1.55555556,3.2 M3.88888889,3.2 L3.88888889,1.6 C3.88888889,0.7163444 4.58533483,0 5.44444444,0 L8.55555556,0 C9.41466517,0 10.1111111,0.7163444 10.1111111,1.6 L10.1111111,3.2" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icon/icon-trash.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="18px" viewBox="0 0 16 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-trash</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-84.000000, -263.000000)">
+            <g id="icon-trash" transform="translate(82.000000, 262.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="trash" transform="translate(3.000000, 2.000000)" stroke-linecap="round" stroke-width="1.55555556" stroke="#8A8C8D" stroke-linejoin="round">
+                    <polyline id="Shape" points="0 3.2 1.55555556 3.2 14 3.2"></polyline>
+                    <path d="M12.4444444,3.2 L12.4444444,14.4 C12.4444444,15.2836556 11.7479985,16 10.8888889,16 L3.11111111,16 C2.2520015,16 1.55555556,15.2836556 1.55555556,14.4 L1.55555556,3.2 M3.88888889,3.2 L3.88888889,1.6 C3.88888889,0.7163444 4.58533483,0 5.44444444,0 L8.55555556,0 C9.41466517,0 10.1111111,0.7163444 10.1111111,1.6 L10.1111111,3.2" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icon/icon-unlock.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="17px" viewBox="0 0 16 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-unlock</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-1463.000000, -284.000000)">
+            <g id="icon-unlock" transform="translate(1461.000000, 282.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <g id="unlock" transform="translate(3.000000, 2.000000)" stroke="#8A8C8D" stroke-width="1.55555556" stroke-linecap="round" stroke-linejoin="round">
+                    <rect id="Rectangle-path" x="0" y="7.61904762" width="14" height="8.38095238" rx="1.55555556"></rect>
+                    <path d="M3.11111111,7.61904762 L3.11111111,4.57142857 C3.10910319,2.61427389 4.62135513,0.974054703 6.60916974,0.777363091 C8.59698434,0.580671479 10.4135331,1.89151027 10.8111111,3.80952381" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icon/icon-zoom.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-zoom</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-553.000000, -952.000000)">
+            <g id="icon-zoom" transform="translate(548.000000, 947.000000)">
+                <rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="24" height="24"></rect>
+                <g id="zoom-in" transform="translate(6.000000, 6.000000)" stroke="#8A8C8D" stroke-width="1.33333333" stroke-linecap="round" stroke-linejoin="round">
+                    <circle id="Oval" cx="5.33333333" cy="5.33333333" r="5.33333333"></circle>
+                    <path d="M12,12 L9.1,9.1" id="Shape"></path>
+                    <path d="M5.33333333,3.33333333 L5.33333333,7.33333333" id="Shape"></path>
+                    <path d="M3.33333333,5.33333333 L7.33333333,5.33333333" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/icon/info.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>info</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Feather" transform="translate(-1075.000000, -776.000000)" stroke="#000000">
+            <g id="Group" transform="translate(175.000000, 332.000000)">
+                <g id="info" transform="translate(901.000000, 445.000000)">
+                    <circle id="Oval" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" cx="10" cy="10" r="10"></circle>
+                    <path d="M10,14 L10,10" id="Shape" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <circle id="Oval-2" fill="#000000" cx="10" cy="7" r="1"></circle>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>