Color update

browser/components/SideNavFilter.js

@@ -41,7 +41,7 @@ const SideNavFilter = ({
       <div styleName='iconWrap'>
         <img src={isStarredActive
             ? '../resources/icon/icon-star-active.svg'
-            : '../resources/icon/icon-star.svg'
+            : '../resources/icon/icon-star-sidenav.svg'
           }
         />
       </div>
@@ -55,7 +55,7 @@ const SideNavFilter = ({
       <div styleName='iconWrap'>
         <img src={isTrashedActive
             ? '../resources/icon/icon-trash-active.svg'
-            : '../resources/icon/icon-trash.svg'
+            : '../resources/icon/icon-trash-sidenav.svg'
           }
         />
       </div>

browser/components/TodoListPercentage.js

@@ -16,7 +16,9 @@ const TodoListPercentage = ({
 }) => (
   <div styleName='percentageBar' style={{display: isNaN(percentageOfTodo) ? 'none' : ''}}>
     <div styleName='progressBar' style={{width: `${percentageOfTodo}%`}}>
-      <p styleName='percentageText'>{percentageOfTodo}%</p>
+      <div styleName='progressBarInner'>
+      	<p styleName='percentageText'>{percentageOfTodo}%</p>
+      </div>
     </div>
   </div>
 )

browser/components/TodoListPercentage.styl

@@ -16,17 +16,26 @@
   border-radius 2px
   transition 0.4s cubic-bezier(0.4, 0.4, 0, 1)
 
+.progressBarInner
+  padding 0 10px
+  min-width 1px
+  height 100%
+  display -webkit-box
+  display box
+  justify-content center
+  align-items center
+
+
 .percentageText
   color #f4f4f4
-  padding: 2px 43%
   font-weight 600
 
 body[data-theme="dark"]
   .percentageBar
-    background-color #363A3D
+    background-color #444444
 
   .progressBar
-    background-color: alpha(#939395, 50%)
+    background-color: #1EC38B
 
   .percentageText
     color $ui-dark-text-color

browser/main/Detail/InfoButton.styl

@@ -1,7 +1,6 @@
 .control-infoButton
   top 10px
-  margin-bottom 10px
-  topBarButtonLight()
+  topBarButtonRight()
 
 .infoButton
   padding 0px

browser/main/Detail/MarkdownNoteDetail.js

@@ -233,7 +233,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   getToggleLockButton () {
-    return this.state.isLocked ? '../resources/icon/icon-lock.svg' : '../resources/icon/icon-unlock.svg'
+    return this.state.isLocked ? '../resources/icon/icon-edit-lock.svg' : '../resources/icon/icon-edit.svg'
   }
 
   handleDeleteKeyDown (e) {
@@ -392,8 +392,8 @@ class MarkdownNoteDetail extends React.Component {
         </div>
 
         <StatusBar
-          {..._.pick(this.props, ['config', 'location', 'dispatch'])}
-          date={note.updatedAt}
+            {..._.pick(this.props, ['config', 'location', 'dispatch'])}
+            date={note.updatedAt}
         />
       </div>
     )

browser/main/Detail/MarkdownNoteDetail.styl

@@ -12,17 +12,16 @@
   padding-bottom 3px
 
 .control-lockButton
-  top 160px
-  margin-bottom 10px
-  topBarButtonLight()
+  top 150px
+  topBarButtonRight()
 
 .trashed-infopanel
   top 40px
   position relative
 
 .control-fullScreenButton
   top 80px
-  topBarButtonLight()
+  topBarButtonRight()
 
 .body
   absolute left right
@@ -43,7 +42,7 @@ body[data-theme="dark"]
   .root
     background-color $ui-dark-noteDetail-backgroundColor
     box-shadow none
-    border none
+    border-left 1px solid $ui-dark-borderColor
 
   .control-lockButton
     topBarButtonDark()

browser/main/Detail/SnippetNoteDetail.styl

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

browser/main/Detail/StarButton.styl

@@ -1,6 +1,6 @@
 .root
   top 45px
-  topBarButtonLight()
+  topBarButtonRight()
   &:hover
     transition 0.2s
     color alpha($ui-favorite-star-button-color, 0.6)

browser/main/Detail/TrashButton.styl

@@ -1,11 +1,10 @@
 .control-trashButton
-  top 120px
-  margin-bottom 10px
-  topBarButtonLight()
+  top 115px
+  topBarButtonRight()
 
 .control-trashButton--in-trash
   top 60px
-  topBarButtonLight()
+  topBarButtonRight()
 
 .trashButton
   padding 0px

browser/main/SideNav/SideNav.styl

@@ -138,7 +138,7 @@ body[data-theme="white"]
 
 body[data-theme="dark"]
   .root, .root--folded
-    border-color $ui-dark-borderColor
+    border-right 1px solid $ui-dark-borderColor
     background-color $ui-dark-backgroundColor
     color $ui-dark-text-color
 

browser/styles/index.styl

@@ -174,20 +174,20 @@ modal()
   overflow hidden
   border-radius $modal-border-radius
 
-topBarButtonLight()
+topBarButtonRight()
   position absolute
   width 34px
   height 34px
   border-radius 17px
   font-size 14px
   border none
-  color alpha($ui-button-color, 0.4)
+  color alpha($ui-button-color, 0.2)
   fill $ui-button-color
   background-color transparent
   &:active
     border-color $ui-button--active-backgroundColor
   &:hover
-    transform scale(1.1)
+    // transform scale(1.1)
     transition 0.4s
     color $ui-button-color
     .control-lockButton-tooltip
@@ -223,10 +223,12 @@ $ui-button--focus-borderColor = lighten(#369DCD, 25%)
 
 /******* Dark theme ********/
 $ui-dark-active-color = #3A404C
-$ui-dark-borderColor = lighten(#21252B, 20%)
-$ui-dark-backgroundColor = #1E2124
-$ui-dark-noteList-backgroundColor = #282C30
-$ui-dark-noteDetail-backgroundColor = #2D3033
+
+$ui-dark-borderColor = #444444
+$ui-dark-backgroundColor = #2C3033
+$ui-dark-noteList-backgroundColor = #2C3033
+$ui-dark-noteDetail-backgroundColor = #2C3033
+
 $ui-dark-tag-backgroundColor = #3A404C
 $dark-background-color = lighten($ui-dark-backgroundColor, 10%)
 $ui-dark-text-color = #DDDDDD