BoostIO · kazup01 · Nov 18, 2017 · Nov 18, 2017 · Nov 18, 2017
diff --git a/browser/components/NoteItem.js b/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' /> : ''

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

diff --git a/browser/components/SideNavFilter.js b/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>
 )
 

diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl
@@ -3,41 +3,55 @@
 
 .menu-button
   navButtonColor()
-  height 32px
-  padding 0 15px
-  font-size 13px
+  height 36px
+  padding 0 15px 0 20px
+  font-size 14px
   width 100%
   text-align left
   overflow ellipsis
-  &:hover
-    color $ui-button-default-color
+  display flex
+  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()

diff --git a/browser/components/StorageItem.styl b/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
-  background-color $ui-button-default--active-backgroundColor
+  color #1EC38B
+  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

diff --git a/browser/components/StorageList.styl b/browser/components/StorageList.styl
@@ -1,7 +1,7 @@
 .storageList
   absolute left right
   bottom 37px
-  top 160px
+  top 180px
   overflow-y auto
 
 .storageList-empty

diff --git a/browser/main/Detail/InfoButton.js b/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>
 )
 

diff --git a/browser/main/Detail/InfoButton.styl b/browser/main/Detail/InfoButton.styl
@@ -14,7 +14,7 @@
 
 .infoButton
   padding 0px
-  margin 15px 0
+  margin 45px 0
 
 body[data-theme="dark"]
   .control-infoButton

diff --git a/browser/main/Detail/InfoPanel.styl b/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

diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/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)} />

diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/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
 

diff --git a/browser/main/Detail/NoteDetailInfo.styl b/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

diff --git a/browser/main/Detail/SnippetNoteDetail.js b/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)} />

diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl
@@ -67,6 +67,7 @@
 
 .control-fullScreenButton
   top 80px
+  margin-bottom 10px
   topBarButtonLight()
 
 body[data-theme="white"]

diff --git a/browser/main/Detail/StarButton.js b/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'
-          className={this.state.isActive || this.props.isActive
-            ? 'fa fa-star'
-            : 'fa fa-star-o'
+        <img styleName='icon'
+          src={this.state.isActive || this.props.isActive
+            ? '../resources/icon/icon-starred.svg'
+            : '../resources/icon/icon-star.svg'
           }
         />
       </button>

diff --git a/browser/main/Detail/TrashButton.js b/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>
 )
 

diff --git a/browser/main/Detail/TrashButton.styl b/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

diff --git a/browser/main/NewNoteButton/index.js b/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>

diff --git a/browser/main/NoteList/NoteList.styl b/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