From 4767f15e9b7f81fa5bda0439f748bcdaf8a628e5 Mon Sep 17 00:00:00 2001
From: asmsuechan <suenagaryoutaabc@gmail.com>
Date: Fri, 17 Mar 2017 23:16:53 -0700
Subject: [PATCH 01/14] Fix the behavior of a feature what locks the editor

---
 browser/main/Detail/MarkdownNoteDetail.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index 90f26286..4a2be4d0 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -219,6 +219,7 @@ class MarkdownNoteDetail extends React.Component {
     e.preventDefault()
     ee.emit('editor:lock')
     this.setState({ isLocked: !this.state.isLocked })
+    if (this.state.isLocked) this.focus()
   }
 
   getToggleLockButton () {

From 8a5558db550cdadc6b7c78109c674963ab038fb6 Mon Sep 17 00:00:00 2001
From: asmsuechan <suenagaryoutaabc@gmail.com>
Date: Fri, 17 Mar 2017 23:32:44 -0700
Subject: [PATCH 02/14] Change a name showlockbutton to togglelockbutton

---
 browser/components/MarkdownEditor.js      | 8 ++++----
 browser/main/Detail/MarkdownNoteDetail.js | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js
index b8e44939..3dd6d15c 100644
--- a/browser/components/MarkdownEditor.js
+++ b/browser/components/MarkdownEditor.js
@@ -82,7 +82,7 @@ class MarkdownEditor extends React.Component {
           this.refs.code.blur()
           this.refs.preview.focus()
         }
-        eventEmitter.emit('topbar:showlockbutton')
+        eventEmitter.emit('topbar:togglelockbutton')
       })
     }
   }
@@ -99,7 +99,7 @@ class MarkdownEditor extends React.Component {
         this.refs.preview.focus()
         this.refs.preview.scrollTo(cursorPosition.line)
       })
-      eventEmitter.emit('topbar:showlockbutton')
+      eventEmitter.emit('topbar:togglelockbutton')
     }
   }
 
@@ -115,7 +115,7 @@ class MarkdownEditor extends React.Component {
       }, () => {
         this.refs.code.focus()
       })
-      eventEmitter.emit('topbar:showlockbutton')
+      eventEmitter.emit('topbar:togglelockbutton')
     }
   }
 
@@ -152,7 +152,7 @@ class MarkdownEditor extends React.Component {
     } else {
       this.refs.code.focus()
     }
-    eventEmitter.emit('topbar:showlockbutton')
+    eventEmitter.emit('topbar:togglelockbutton')
   }
 
   reload () {
diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index 4a2be4d0..5513953c 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -31,7 +31,7 @@ class MarkdownNoteDetail extends React.Component {
     }
     this.dispatchTimer = null
 
-    this.showLockButton = this.handleShowLockButton.bind(this)
+    this.toggleLockButton = this.handleToggleLockButton.bind(this)
   }
 
   focus () {
@@ -39,7 +39,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   componentDidMount () {
-    ee.on('topbar:showlockbutton', this.showLockButton)
+    ee.on('topbar:togglelockbutton', this.toggleLockButton)
   }
 
   componentWillReceiveProps (nextProps) {
@@ -59,7 +59,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   componentDidUnmount () {
-    ee.off('topbar:lock', this.showLockButton)
+    ee.off('topbar:togglelockbutton', this.toggleLockButton)
   }
 
   findTitle (value) {
@@ -230,7 +230,7 @@ class MarkdownNoteDetail extends React.Component {
     if (e.keyCode === 27) this.handleDeleteCancelButtonClick(e)
   }
 
-  handleShowLockButton () {
+  handleToggleLockButton () {
     this.setState({editorStatus: this.refs.content.state.status})
   }
 

From e7fd18967b9b4df9077ceee5fa3e8eee5feaf3ba Mon Sep 17 00:00:00 2001
From: asmsuechan <suenagaryoutaabc@gmail.com>
Date: Fri, 17 Mar 2017 23:37:22 -0700
Subject: [PATCH 03/14] Change a state name editorStatus to isLockButtonShown

---
 browser/main/Detail/MarkdownNoteDetail.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index 5513953c..d800be71 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -26,7 +26,7 @@ class MarkdownNoteDetail extends React.Component {
         title: '',
         content: ''
       }, props.note),
-      editorStatus: false,
+      isLockButtonShown: false,
       isLocked: false
     }
     this.dispatchTimer = null
@@ -231,7 +231,11 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   handleToggleLockButton () {
-    this.setState({editorStatus: this.refs.content.state.status})
+    if (this.refs.content.state.status === 'CODE') {
+      this.setState({isLockButtonShown: true})
+    } else {
+      this.setState({isLockButtonShown: false})
+    }
   }
 
   handleFocus (e) {
@@ -279,7 +283,7 @@ class MarkdownNoteDetail extends React.Component {
                   <i className={faClassName}/>
                 </button>
               return (
-                this.state.editorStatus === 'CODE' ? lockButtonComponent : ''
+                this.state.isLockButtonShown ? lockButtonComponent : ''
               )
             })()}
             <button styleName='info-right-button'

From 6aa9104076de671b81405456e6d17f65c8632dbb Mon Sep 17 00:00:00 2001
From: asmsuechan <suenagaryoutaabc@gmail.com>
Date: Fri, 17 Mar 2017 23:41:32 -0700
Subject: [PATCH 04/14] Fix not to be shown the lock button if
 config.editor.switchPreview is RIGHTCLICK

---
 browser/main/Detail/MarkdownNoteDetail.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index d800be71..26ac1bf8 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -231,7 +231,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   handleToggleLockButton () {
-    if (this.refs.content.state.status === 'CODE') {
+    if (this.props.config.editor.switchPreview === 'BLUR' && this.refs.content.state.status === 'CODE') {
       this.setState({isLockButtonShown: true})
     } else {
       this.setState({isLockButtonShown: false})

From f3ed22dd516e02dabaa1382954b4d025c8564881 Mon Sep 17 00:00:00 2001
From: asmsuechan <suenagaryoutaabc@gmail.com>
Date: Sat, 18 Mar 2017 00:54:46 -0700
Subject: [PATCH 05/14] Enable to appear a tooltip for the LockButton

---
 browser/main/Detail/MarkdownNoteDetail.js   |  5 ++-
 browser/main/Detail/MarkdownNoteDetail.styl | 38 +++++++++++++++++++++
 browser/main/Detail/NoteDetailInfo.styl     |  2 +-
 3 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index 26ac1bf8..520c0b90 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -276,11 +276,14 @@ class MarkdownNoteDetail extends React.Component {
             {(() => {
               const faClassName=`fa ${this.getToggleLockButton()}`
               const lockButtonComponent =
-                <button styleName='info-right-button'
+                <button styleName='control-lockButton'
                   onFocus={(e) => this.handleFocus(e)}
                   onMouseDown={(e) => this.handleLockButtonMouseDown(e)}
                 >
                   <i className={faClassName}/>
+                  <span styleName='control-lockButton-tooltip'>
+                  {this.state.isLocked ? 'Unlock' : 'Lock'}
+                  </span>
                 </button>
               return (
                 this.state.isLockButtonShown ? lockButtonComponent : ''
diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl
index e23296a4..b5ebc26a 100644
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -9,6 +9,34 @@
   background-color $ui-noteDetail-backgroundColor
   box-shadow $note-detail-box-shadow
 
+.control-lockButton
+  width 34px
+  height 34px
+  border-radius 17px
+  font-size 14px
+  margin 13px 7px
+  padding-top 7px
+  border none
+  color $ui-button-color
+  fill $ui-button-color
+  background-color transparent
+  &:active
+    border-color $ui-button--active-backgroundColor
+  &:hover .control-lockButton-tooltip
+    opacity 1
+
+.control-lockButton-tooltip
+  tooltip()
+  position fixed
+  pointer-events none
+  top 50px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
 .body
   absolute left right
   left $note-detail-left-margin
@@ -24,3 +52,13 @@ body[data-theme="dark"]
     border-color $ui-dark-borderColor
     background-color $ui-dark-noteDetail-backgroundColor
     box-shadow none
+
+  .control-lockButton
+    colorDarkDefaultButton()
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-noteList-backgroundColor
+    &:active
+      border-color $ui-dark-button--active-backgroundColor
+
+  .control-lockButton-tooltip
+    darkTooltip()
diff --git a/browser/main/Detail/NoteDetailInfo.styl b/browser/main/Detail/NoteDetailInfo.styl
index eeffd78a..a579d148 100644
--- a/browser/main/Detail/NoteDetailInfo.styl
+++ b/browser/main/Detail/NoteDetailInfo.styl
@@ -38,7 +38,7 @@ $info-margin-under-border = 27px
   margin 13px 2px
   padding 0
   border-radius 17px
-  &:hover .info-right-button-tooltip
+  &:hover .info-left-button-tooltip
     opacity 1
   &:focus
     border-color $ui-favorite-star-button-color

From 91f24d96b98752e541a458efb0c34e4a0c51a746 Mon Sep 17 00:00:00 2001
From: asmsuechan <suenagaryoutaabc@gmail.com>
Date: Sun, 19 Mar 2017 00:41:55 -0700
Subject: [PATCH 06/14] Fix a bug which cannot read a property when moves to
 other folder on locking

---
 browser/components/MarkdownEditor.js      | 8 ++++----
 browser/main/Detail/MarkdownNoteDetail.js | 5 +++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js
index 3dd6d15c..9bb50a87 100644
--- a/browser/components/MarkdownEditor.js
+++ b/browser/components/MarkdownEditor.js
@@ -82,7 +82,7 @@ class MarkdownEditor extends React.Component {
           this.refs.code.blur()
           this.refs.preview.focus()
         }
-        eventEmitter.emit('topbar:togglelockbutton')
+        eventEmitter.emit('topbar:togglelockbutton', this.state.status)
       })
     }
   }
@@ -99,7 +99,7 @@ class MarkdownEditor extends React.Component {
         this.refs.preview.focus()
         this.refs.preview.scrollTo(cursorPosition.line)
       })
-      eventEmitter.emit('topbar:togglelockbutton')
+      eventEmitter.emit('topbar:togglelockbutton', this.state.status)
     }
   }
 
@@ -115,7 +115,7 @@ class MarkdownEditor extends React.Component {
       }, () => {
         this.refs.code.focus()
       })
-      eventEmitter.emit('topbar:togglelockbutton')
+      eventEmitter.emit('topbar:togglelockbutton', this.state.status)
     }
   }
 
@@ -152,7 +152,7 @@ class MarkdownEditor extends React.Component {
     } else {
       this.refs.code.focus()
     }
-    eventEmitter.emit('topbar:togglelockbutton')
+    eventEmitter.emit('topbar:togglelockbutton', this.state.status)
   }
 
   reload () {
diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index 520c0b90..b475d71e 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -230,8 +230,9 @@ class MarkdownNoteDetail extends React.Component {
     if (e.keyCode === 27) this.handleDeleteCancelButtonClick(e)
   }
 
-  handleToggleLockButton () {
-    if (this.props.config.editor.switchPreview === 'BLUR' && this.refs.content.state.status === 'CODE') {
+  handleToggleLockButton (event, noteStatus) {
+    // first argument event is not used
+    if (this.props.config.editor.switchPreview === 'BLUR' && noteStatus === 'CODE') {
       this.setState({isLockButtonShown: true})
     } else {
       this.setState({isLockButtonShown: false})

From 2af86dfa3ea7ddec4cb908bd52525b68a35b8992 Mon Sep 17 00:00:00 2001
From: asmsuechan <suenagaryoutaabc@gmail.com>
Date: Sun, 19 Mar 2017 01:02:47 -0700
Subject: [PATCH 07/14] Fix the action of hover

---
 browser/main/Detail/MarkdownNoteDetail.styl | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl
index b5ebc26a..dc320c9b 100644
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -22,8 +22,10 @@
   background-color transparent
   &:active
     border-color $ui-button--active-backgroundColor
-  &:hover .control-lockButton-tooltip
-    opacity 1
+  &:hover
+    background-color $ui-button--hover-backgroundColor
+    .control-lockButton-tooltip
+      opacity 1
 
 .control-lockButton-tooltip
   tooltip()

From 45111e161064e493536b22d788fbd2f2f2196be9 Mon Sep 17 00:00:00 2001
From: asmsuechan <suenagaryoutaabc@gmail.com>
Date: Sun, 19 Mar 2017 01:20:04 -0700
Subject: [PATCH 08/14] Change the styleName info-right-button to
 control-trashButton because it's not good name

* fix the position of lock button
---
 browser/main/Detail/MarkdownNoteDetail.js   |  2 +-
 browser/main/Detail/MarkdownNoteDetail.styl | 24 +++++++++++++++++++++
 browser/main/Detail/NoteDetailInfo.styl     | 24 ---------------------
 3 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index b475d71e..d4aa6242 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -290,7 +290,7 @@ class MarkdownNoteDetail extends React.Component {
                 this.state.isLockButtonShown ? lockButtonComponent : ''
               )
             })()}
-            <button styleName='info-right-button'
+            <button styleName='control-trashButton'
               onClick={(e) => this.handleContextButtonClick(e)}
             >
               <svg height="17px" id="Capa_1" style={{"enableBackground":"new 0 0 753.23 753.23"}} width="17px" version="1.1" viewBox="0 0 753.23 753.23" x="0px" y="0px" xmlSpace="preserve">
diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl
index dc320c9b..50696131 100644
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -39,6 +39,22 @@
   opacity 0
   transition 0.1s
 
+.control-trashButton
+  float right
+  width 34px
+  height 34px
+  border-radius 17px
+  font-size 14px
+  margin 13px 7px
+  padding-top 7px 
+  border none
+  color $ui-button-color
+  fill $ui-button-color
+  background-color transparent
+  &:hover
+    opacity 1
+    background-color $ui-button--hover-backgroundColor
+
 .body
   absolute left right
   left $note-detail-left-margin
@@ -64,3 +80,11 @@ body[data-theme="dark"]
 
   .control-lockButton-tooltip
     darkTooltip()
+
+  .control-trashButton
+    navDarkButtonColor()
+    border-color $ui-dark-borderColor
+    &:active
+      border-color $ui-dark-button--focus-borderColor
+    &:focus
+      border-color $ui-button--focus-borderColor
diff --git a/browser/main/Detail/NoteDetailInfo.styl b/browser/main/Detail/NoteDetailInfo.styl
index a579d148..97adfe5c 100644
--- a/browser/main/Detail/NoteDetailInfo.styl
+++ b/browser/main/Detail/NoteDetailInfo.styl
@@ -54,22 +54,6 @@ $info-margin-under-border = 27px
   bottom 1px
   padding-left 30px
 
-.info-right-button
-  width 34px
-  height 34px
-  border-radius 17px
-  font-size 14px
-  margin 13px 7px
-  padding-top 7px 
-  border none
-  color $ui-button-color
-  fill $ui-button-color
-  background-color transparent
-  &:hover
-    opacity 1
-    background-color $ui-button--hover-backgroundColor
-
-
 body[data-theme="dark"]
   .info
     border-color $ui-dark-borderColor
@@ -89,11 +73,3 @@ body[data-theme="dark"]
 
   .info-right
     background-color $ui-dark-noteDetail-backgroundColor
-
-  .info-right-button
-    navDarkButtonColor()
-    border-color $ui-dark-borderColor
-    &:active
-      border-color $ui-dark-button--focus-borderColor
-    &:focus
-      border-color $ui-button--focus-borderColor

From bcf27233bc36f1a2d8f12a1247101f321088ebc8 Mon Sep 17 00:00:00 2001
From: asmsuechan <suenagaryoutaabc@gmail.com>
Date: Sun, 19 Mar 2017 01:31:28 -0700
Subject: [PATCH 09/14] Fix a style of the lock button

---
 browser/main/Detail/MarkdownNoteDetail.js   | 2 +-
 browser/main/Detail/MarkdownNoteDetail.styl | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index d4aa6242..3f4a7a4d 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -281,7 +281,7 @@ class MarkdownNoteDetail extends React.Component {
                   onFocus={(e) => this.handleFocus(e)}
                   onMouseDown={(e) => this.handleLockButtonMouseDown(e)}
                 >
-                  <i className={faClassName}/>
+                  <i className={faClassName} styleName='lock-button'/>
                   <span styleName='control-lockButton-tooltip'>
                   {this.state.isLocked ? 'Unlock' : 'Lock'}
                   </span>
diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl
index 50696131..a521fa05 100644
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -9,6 +9,9 @@
   background-color $ui-noteDetail-backgroundColor
   box-shadow $note-detail-box-shadow
 
+.lock-button
+  padding-bottom 3px
+
 .control-lockButton
   width 34px
   height 34px

From 4055ce19cd754d50ac0ffdc74f58e067d8dfb3e4 Mon Sep 17 00:00:00 2001
From: asmsuechan <suenagaryoutaabc@gmail.com>
Date: Sun, 19 Mar 2017 11:18:17 -0700
Subject: [PATCH 10/14] Fix the design of buttons of TopBar on dark theme

---
 browser/main/Detail/MarkdownNoteDetail.styl |  5 +++--
 browser/styles/index.styl                   | 11 +++++++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl
index a521fa05..b35dc6be 100644
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -75,7 +75,7 @@ body[data-theme="dark"]
     box-shadow none
 
   .control-lockButton
-    colorDarkDefaultButton()
+    colorDarkTopBarButton()
     border-color $ui-dark-borderColor
     background-color $ui-dark-noteList-backgroundColor
     &:active
@@ -85,8 +85,9 @@ body[data-theme="dark"]
     darkTooltip()
 
   .control-trashButton
-    navDarkButtonColor()
+    colorDarkTopBarButton()
     border-color $ui-dark-borderColor
+    background-color $ui-dark-noteList-backgroundColor
     &:active
       border-color $ui-dark-button--focus-borderColor
     &:focus
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index bfd6e865..a1a12d96 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -151,6 +151,7 @@ $ui-dark-button--active-color = white
 $ui-dark-button--active-backgroundColor = #6AA5E9
 $ui-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%)
 $ui-dark-button--focus-borderColor = lighten(#369DCD, 25%)
+$ui-dark-topbar-button-color = #939395
 
 $dark-default-button-background = $ui-dark-backgroundColor
 $dark-default-button-background--hover = $ui-dark-button--hover-backgroundColor
@@ -190,6 +191,16 @@ navDarkButtonColor()
     background-color $ui-dark-button--active-backgroundColor
     color $ui-dark-button--active-color
 
+colorDarkTopBarButton()
+  border-color $ui-dark-borderColor
+  color $ui-dark-topbar-button-color
+  background-color $dark-default-button-background
+  &:hover
+    background-color $dark-default-button-background--hover
+  &:active
+  &:active:hover
+    background-color $ui-dark-button--active-backgroundColor
+
 $ui-dark-tooltip-text-color = white
 $ui-dark-tooltip-backgroundColor = alpha(#444, 70%)
 $ui-dark-tooltip-button-backgroundColor = #D1D1D1

From bbced7be25c4983f24fc4e56baf365c0a3e101cc Mon Sep 17 00:00:00 2001
From: asmsuechan <suenagaryoutaabc@gmail.com>
Date: Sun, 19 Mar 2017 21:56:41 -0700
Subject: [PATCH 11/14] Fix the background-color of button

---
 browser/main/Detail/MarkdownNoteDetail.styl | 2 --
 browser/styles/index.styl                   | 1 -
 2 files changed, 3 deletions(-)

diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl
index b35dc6be..e1d900be 100644
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -77,7 +77,6 @@ body[data-theme="dark"]
   .control-lockButton
     colorDarkTopBarButton()
     border-color $ui-dark-borderColor
-    background-color $ui-dark-noteList-backgroundColor
     &:active
       border-color $ui-dark-button--active-backgroundColor
 
@@ -87,7 +86,6 @@ body[data-theme="dark"]
   .control-trashButton
     colorDarkTopBarButton()
     border-color $ui-dark-borderColor
-    background-color $ui-dark-noteList-backgroundColor
     &:active
       border-color $ui-dark-button--focus-borderColor
     &:focus
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index a1a12d96..364a1f27 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -194,7 +194,6 @@ navDarkButtonColor()
 colorDarkTopBarButton()
   border-color $ui-dark-borderColor
   color $ui-dark-topbar-button-color
-  background-color $dark-default-button-background
   &:hover
     background-color $dark-default-button-background--hover
   &:active

From 4a8054faed58cbcf8a2820d5e7bac8554775ffdd Mon Sep 17 00:00:00 2001
From: asmsuechan <suenagaryoutaabc@gmail.com>
Date: Sun, 19 Mar 2017 22:04:19 -0700
Subject: [PATCH 12/14] Fix the design of the trash button on snippet note

---
 browser/main/Detail/SnippetNoteDetail.js   |  2 +-
 browser/main/Detail/SnippetNoteDetail.styl | 24 ++++++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js
index 2a38387a..953c2e11 100644
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -547,7 +547,7 @@ class SnippetNoteDetail extends React.Component {
             />
           </div>
           <div styleName='info-right'>
-            <button styleName='info-right-button'
+            <button styleName='control-trashButton'
               onClick={(e) => this.handleContextButtonClick(e)}
             >
               <svg height="17px" id="Capa_1" style={{"enableBackground":"new 0 0 753.23 753.23"}} width="17px" version="1.1" viewBox="0 0 753.23 753.23" x="0px" y="0px" xmlSpace="preserve">
diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl
index ab86130b..f558580b 100644
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -68,6 +68,22 @@
     &:active .update-icon
       color white
 
+.control-trashButton
+  float right
+  width 34px
+  height 34px
+  border-radius 17px
+  font-size 14px
+  margin 13px 7px
+  padding-top 7px 
+  border none
+  color $ui-button-color
+  fill $ui-button-color
+  background-color transparent
+  &:hover
+    opacity 1
+    background-color $ui-button--hover-backgroundColor
+
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor
@@ -93,3 +109,11 @@ body[data-theme="dark"]
   .override
     button
       border-color $ui-dark-borderColor
+
+  .control-trashButton
+    colorDarkTopBarButton()
+    border-color $ui-dark-borderColor
+    &:active
+      border-color $ui-dark-button--focus-borderColor
+    &:focus
+      border-color $ui-button--focus-borderColor

From 5541c0dc3802eb4dbf395e9ea6e31e2085d40100 Mon Sep 17 00:00:00 2001
From: asmsuechan <suenagaryoutaabc@gmail.com>
Date: Sun, 19 Mar 2017 22:11:02 -0700
Subject: [PATCH 13/14] Refactor styles of the buttons

---
 browser/main/Detail/MarkdownNoteDetail.styl | 8 --------
 browser/main/Detail/SnippetNoteDetail.styl  | 5 -----
 browser/styles/index.styl                   | 3 +++
 3 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl
index e1d900be..9158f6bf 100644
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -76,17 +76,9 @@ body[data-theme="dark"]
 
   .control-lockButton
     colorDarkTopBarButton()
-    border-color $ui-dark-borderColor
-    &:active
-      border-color $ui-dark-button--active-backgroundColor
 
   .control-lockButton-tooltip
     darkTooltip()
 
   .control-trashButton
     colorDarkTopBarButton()
-    border-color $ui-dark-borderColor
-    &:active
-      border-color $ui-dark-button--focus-borderColor
-    &:focus
-      border-color $ui-button--focus-borderColor
diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl
index f558580b..986def9c 100644
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -112,8 +112,3 @@ body[data-theme="dark"]
 
   .control-trashButton
     colorDarkTopBarButton()
-    border-color $ui-dark-borderColor
-    &:active
-      border-color $ui-dark-button--focus-borderColor
-    &:focus
-      border-color $ui-button--focus-borderColor
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index 364a1f27..65b4e000 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -197,8 +197,11 @@ colorDarkTopBarButton()
   &:hover
     background-color $dark-default-button-background--hover
   &:active
+    border-color $ui-dark-button--focus-borderColor
   &:active:hover
     background-color $ui-dark-button--active-backgroundColor
+  &:focus
+    border-color $ui-button--focus-borderColor
 
 $ui-dark-tooltip-text-color = white
 $ui-dark-tooltip-backgroundColor = alpha(#444, 70%)

From 6feeee893369b1725f85f761b3fa24fc27581294 Mon Sep 17 00:00:00 2001
From: asmsuechan <suenagaryoutaabc@gmail.com>
Date: Sun, 19 Mar 2017 22:17:01 -0700
Subject: [PATCH 14/14] Refactor the styles of the buttons

---
 browser/main/Detail/MarkdownNoteDetail.styl | 35 +++------------------
 browser/main/Detail/SnippetNoteDetail.styl  | 16 ++--------
 browser/styles/index.styl                   | 20 +++++++++++-
 3 files changed, 25 insertions(+), 46 deletions(-)

diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl
index 9158f6bf..53a6a4e9 100644
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -13,22 +13,7 @@
   padding-bottom 3px
 
 .control-lockButton
-  width 34px
-  height 34px
-  border-radius 17px
-  font-size 14px
-  margin 13px 7px
-  padding-top 7px
-  border none
-  color $ui-button-color
-  fill $ui-button-color
-  background-color transparent
-  &:active
-    border-color $ui-button--active-backgroundColor
-  &:hover
-    background-color $ui-button--hover-backgroundColor
-    .control-lockButton-tooltip
-      opacity 1
+  topBarButtonLight()
 
 .control-lockButton-tooltip
   tooltip()
@@ -44,19 +29,7 @@
 
 .control-trashButton
   float right
-  width 34px
-  height 34px
-  border-radius 17px
-  font-size 14px
-  margin 13px 7px
-  padding-top 7px 
-  border none
-  color $ui-button-color
-  fill $ui-button-color
-  background-color transparent
-  &:hover
-    opacity 1
-    background-color $ui-button--hover-backgroundColor
+  topBarButtonLight()
 
 .body
   absolute left right
@@ -75,10 +48,10 @@ body[data-theme="dark"]
     box-shadow none
 
   .control-lockButton
-    colorDarkTopBarButton()
+    topBarButtonDark()
 
   .control-lockButton-tooltip
     darkTooltip()
 
   .control-trashButton
-    colorDarkTopBarButton()
+    topBarButtonDark()
diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl
index 986def9c..f9e7ef7a 100644
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -70,19 +70,7 @@
 
 .control-trashButton
   float right
-  width 34px
-  height 34px
-  border-radius 17px
-  font-size 14px
-  margin 13px 7px
-  padding-top 7px 
-  border none
-  color $ui-button-color
-  fill $ui-button-color
-  background-color transparent
-  &:hover
-    opacity 1
-    background-color $ui-button--hover-backgroundColor
+  topBarButtonLight()
 
 body[data-theme="dark"]
   .root
@@ -111,4 +99,4 @@ body[data-theme="dark"]
       border-color $ui-dark-borderColor
 
   .control-trashButton
-    colorDarkTopBarButton()
+    topBarButtonDark()
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index 65b4e000..26a00f1b 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -139,6 +139,24 @@ modal()
   border-radius $modal-border-radius
   box-shadow 2px 2px 10px gray
 
+topBarButtonLight()
+  width 34px
+  height 34px
+  border-radius 17px
+  font-size 14px
+  margin 13px 7px
+  padding-top 7px
+  border none
+  color $ui-button-color
+  fill $ui-button-color
+  background-color transparent
+  &:active
+    border-color $ui-button--active-backgroundColor
+  &:hover
+    background-color $ui-button--hover-backgroundColor
+    .control-lockButton-tooltip
+      opacity 1
+
 // Dark theme
 $ui-dark-borderColor = lighten(#21252B, 20%)
 $ui-dark-backgroundColor = #1D1D1D
@@ -191,7 +209,7 @@ navDarkButtonColor()
     background-color $ui-dark-button--active-backgroundColor
     color $ui-dark-button--active-color
 
-colorDarkTopBarButton()
+topBarButtonDark()
   border-color $ui-dark-borderColor
   color $ui-dark-topbar-button-color
   &:hover