Refactor the styles of the buttons

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()

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()

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