Merge pull request #1312 from BoostIO/fix-layout

Fix switch button layout

browser/main/Detail/MarkdownNoteDetail.js

@@ -357,10 +357,10 @@ class MarkdownNoteDetail extends React.Component {
 
         <div styleName='mode-tab'>
           <div styleName={editorType === 'SPLIT' ? 'active' : 'non-active'} onClick={() => this.handleSwitchMode('SPLIT')}>
-            <img styleName='item-star' src='../resources/icon/icon-mode-split-on.svg' />
+            <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-split-on.svg' : '../resources/icon/icon-mode-split-on-active.svg'} />
           </div>
           <div styleName={editorType === 'EDITOR_PREVIEW' ? 'active' : 'non-active'} onClick={() => this.handleSwitchMode('EDITOR_PREVIEW')}>
-            <img styleName='item-star' src='../resources/icon/icon-mode-markdown-off.svg' />
+            <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-markdown-off-active.svg' : '../resources/icon/icon-mode-markdown-off.svg'} />
           </div>
         </div>
 

browser/main/Detail/MarkdownNoteDetail.styl

@@ -39,7 +39,7 @@
   display flex
   align-items center
   div
-    width 100px
+    width 40px
     height 100%
     background-color #f9f9f9
     display flex
@@ -73,7 +73,27 @@ body[data-theme="dark"]
   .control-fullScreenButton
     topBarButtonDark()
 
+  .mode-tab
+    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"]
   .root
     border-left 1px solid $ui-solarized-dark-borderColor
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
+    background-color $ui-solarized-dark-noteDetail-backgroundColor
+
+  .mode-tab
+    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