modify: add shadow on notelist and topbar component(light theme)

browser/main/Main.js

@@ -194,8 +194,8 @@ class Main extends React.Component {
               'location'
             ])}
           />
-          <div styleName={this.state.isRightSliderFocused ? 'slider--active' : 'slider'}
+          <div styleName={this.state.isRightSliderFocused ? 'slider-right--active' : 'slider-right'}
-            style={{left: this.state.listWidth}}
+            style={{left: this.state.listWidth - 1}}
             onMouseDown={(e) => this.handleRightSlideMouseDown(e)}
             draggable='false'
           >

browser/main/Main.styl

@@ -11,11 +11,21 @@
 
 .slider
   absolute top bottom
+  top -2px
   width 0
 
+.slider-right
+  @extend .slider
+  z-index $right-slider-z-index
+  width 1px
+  box-shadow 0 2px 10px 0px #b1b1b1
+
 .slider--active
   @extend .slider
 
+.slider-right--active
+  @extend .slider-right
+
 .slider-hitbox
   absolute top bottom left right
   width 7px
@@ -27,3 +37,7 @@
 body[data-theme="dark"]
   .root
     absolute top left bottom right
+
+  .slider-right
+  .slider-right--active
+    box-shadow none

browser/main/NoteList/NoteList.styl

@@ -4,6 +4,7 @@ $control-height = 30px
   absolute left bottom
   top $topBar-height - 1
   background-color $ui-noteList-backgroundColor
+  z-index $notelist-z-index
 
 .control
   absolute top left right

browser/main/TopBar/TopBar.styl

@@ -2,6 +2,7 @@
   position relative
   background-color $ui-noteList-backgroundColor
   height $topBar-height - 1
+  z-index $topbar-z-index
 
 .root--expanded
   @extend .root

browser/styles/index.styl

@@ -10,6 +10,11 @@ $sideNav-width = 200px
 $sideNav--folded-width = 44px
 $topBar-height = 60px
 
+// z-index
+$topbar-z-index = 20
+$notelist-z-index = 20
+$right-slider-z-index = 10
+
 // UI default
 $ui-text-color = #515151
 $ui-inactive-text-color = #939395