From d039b17715e6cddb7ec323ddefd1c4e2addd8f5c Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Fri, 21 Apr 2017 16:13:45 +0900
Subject: [PATCH] modify: Fix the SideNavFilter layout

---
 browser/components/SideNavFilter.js   |  2 +-
 browser/components/SideNavFilter.styl | 40 ++++++++++++++++++++++++---
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/browser/components/SideNavFilter.js b/browser/components/SideNavFilter.js
index 01af53e2..84cc9729 100644
--- a/browser/components/SideNavFilter.js
+++ b/browser/components/SideNavFilter.js
@@ -24,7 +24,7 @@ const SideNavFilter = ({
       <i className='fa fa-archive fa-fw' />
       <span styleName='menu-button-label'>All Notes</span>
     </button>
-    <button styleName={isStarredActive ? 'menu-button--active' : 'menu-button'}
+    <button styleName={isStarredActive ? 'menu-button-star--active' : 'menu-button'}
       onClick={handleStarredButtonClick}
     >
       <i className='fa fa-star fa-fw' />
diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl
index b857308f..1aab9ef8 100644
--- a/browser/components/SideNavFilter.styl
+++ b/browser/components/SideNavFilter.styl
@@ -12,11 +12,27 @@
 
 .menu-button--active
   @extend .menu-button
-  color $ui-text-color
+  color #e74c3c
   background-color $ui-button--active-backgroundColor
+  .menu-button-label
+    color $ui-text-color
   &:hover
     background-color $ui-button--active-backgroundColor
+    color #e74c3c
+    .menu-button-label
+      color $ui-text-color
+
+.menu-button-star--active
+  @extend .menu-button
+  color #F9BF3B
+  background-color $ui-button--active-backgroundColor
+  .menu-button-label
     color $ui-text-color
+  &:hover
+    background-color $ui-button--active-backgroundColor
+    color #F9BF3B
+    .menu-button-label
+      color $ui-text-color
 
 .menu-button-label
   margin-left 5px
@@ -55,9 +71,25 @@ body[data-theme="dark"]
     &:hover
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
       color $ui-dark-text-color
+
   .menu-button--active
-    color $ui-dark-text-color
+    color #c0392b
     background-color $ui-dark-button--active-backgroundColor
-    &:active
+    .menu-button-label
+      color $ui-dark-text-color
+    &:hover
       background-color $ui-dark-button--active-backgroundColor
-      color $ui-dark-text-color
\ No newline at end of file
+      color #c0392b
+      .menu-button-label
+        color $ui-dark-text-color
+
+  .menu-button-star--active
+    color $ui-favorite-star-button-color
+    background-color $ui-dark-button--active-backgroundColor
+    .menu-button-label
+      color $ui-dark-text-color
+    &:hover
+      background-color $ui-dark-button--active-backgroundColor
+      color $ui-favorite-star-button-color
+      .menu-button-label
+        color $ui-dark-text-color
\ No newline at end of file