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] 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