Fix info right buttons layout

browser/main/Detail/MarkdownNoteDetail.styl

@@ -12,11 +12,9 @@
   padding-bottom 3px
 
 .control-lockButton
-  top 150px
   topBarButtonRight()
 
 .trashed-infopanel
-  top 40px
   position relative
 
 .body

browser/main/Detail/NoteDetailInfo.styl

@@ -1,6 +1,6 @@
 @import('DetailVars')
 
-$info-height = 50px
+$info-height = 80px
 $info-margin-under-border = 30px
 
 .info
@@ -8,11 +8,11 @@ $info-margin-under-border = 30px
   left 0
   right 0
   height $info-height
-  border-bottom 1px solid #eee
   background-color $ui-noteDetail-backgroundColor
   width 100%
   display flex
   align-items center
+  padding 0 20px
 
 .info-left
   padding 0 10px
@@ -20,7 +20,6 @@ $info-margin-under-border = 30px
   display flex
   align-items center
 
-
 .info-left-top-folderSelect
   display flex
   align-items center
@@ -45,12 +44,9 @@ $info-margin-under-border = 30px
     color $ui-button--color
 
 .info-right
-  position absolute
-  right 40px
-  top 60px
-  bottom 1px
-  padding-left 30px
   z-index 101
+  display inline-flex
+  margin-top 5px
 
 .undo-button
   width 34px

browser/main/Detail/TagSelect.styl

@@ -6,7 +6,8 @@
   width 100%
   overflow-x scroll
   white-space nowrap
-  margin-right 10px
+  padding-top 80px
+  position absolute
 
 .root::-webkit-scrollbar
   display none

browser/main/Detail/ToggleModeButton.js

@@ -8,10 +8,10 @@ const ToggleModeButton = ({
 }) => (
   <div styleName='control-toggleModeButton'>
     <div styleName={editorType === 'SPLIT' ? 'active' : 'non-active'} onClick={() => onClick('SPLIT')}>
-      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-split-on.svg' : '../resources/icon/icon-mode-split-on-active.svg'} />
+      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-markdown-off-active.svg' : ''} />
     </div>
     <div styleName={editorType === 'EDITOR_PREVIEW' ? 'active' : 'non-active'} onClick={() => onClick('EDITOR_PREVIEW')}>
-      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-markdown-off-active.svg' : '../resources/icon/icon-mode-markdown-off.svg'} />
+      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '' : '../resources/icon/icon-mode-split-on-active.svg'} />
     </div>
     <span styleName='tooltip'>Toggle Mode</span>
   </div>

browser/main/Detail/ToggleModeButton.styl

@@ -1,24 +1,28 @@
 .control-toggleModeButton
-  border 1px solid #eee
+  height 29px
-  height 34px
+  border-radius 50px
+  background-color #F4F4F4
+  width 67px
   display flex
   align-items center
+  position absolute
+  right 165px
+  .active
+    background-color #1EC38B
+    width 33px
+    height 30px
+    box-shadow 2px 0px 7px #eee
+    z-index 1
 
   div
     width 40px
     height 100%
-    background-color #f9f9f9
+    border-radius 50%
     display flex
     align-items center
     justify-content center
     cursor pointer
 
-    &:first-child
-      border-right 1px solid #eee
-    .active
-      background-color #fff
-      box-shadow 2px 0px 7px #eee
-      z-index 1
   &:hover .tooltip
     opacity 1
 
@@ -40,22 +44,16 @@ body[data-theme="dark"]
     topBarButtonDark()
 
   .control-toggleModeButton
-    border 1px solid #444444
     div
       background-color $ui-dark-noteDetail-backgroundColor
-      &:first-child
-        border-right 1px solid #444444
     .active
       background-color #3A404C
       box-shadow 2px 0px 7px #444444
 
 body[data-theme="solarized-dark"]
   .control-toggleModeButton
-    border 1px solid #586E75
     div
       background-color $ui-solarized-dark-noteDetail-backgroundColor
-      &:first-child
-        border-right 1px solid #586E75
     .active
       background-color #002B36
       box-shadow 2px 0px 7px #222222

browser/styles/index.styl

@@ -188,7 +188,6 @@ modal()
   border-radius $modal-border-radius
 
 topBarButtonRight()
-  position absolute
   width 34px
   height 34px
   border-radius 17px