From bf02f9b2566bb9aa0db5ded433104e188dadc1cc Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Fri, 21 Apr 2017 13:45:04 +0900
Subject: [PATCH 01/10] modify: Fix the layout of new-post-btn and status-bar

---
 browser/main/Detail/Detail.styl       | 4 ----
 browser/main/StatusBar/StatusBar.styl | 4 ++++
 browser/main/TopBar/TopBar.styl       | 8 ++++++--
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/browser/main/Detail/Detail.styl b/browser/main/Detail/Detail.styl
index 11f1edcc..81b3e08c 100644
--- a/browser/main/Detail/Detail.styl
+++ b/browser/main/Detail/Detail.styl
@@ -1,8 +1,5 @@
 .root
   absolute top bottom right
-  border-width 1px 0
-  border-style solid
-  border-color $ui-borderColor
 
 .empty
   height 320px
@@ -18,7 +15,6 @@
 
 body[data-theme="dark"]
   .root
-    border-color $ui-dark-borderColor
     background-color $ui-dark-backgroundColor
   .empty-message
     color $ui-dark-inactive-text-color
diff --git a/browser/main/StatusBar/StatusBar.styl b/browser/main/StatusBar/StatusBar.styl
index 027f6d1d..fdbc235c 100644
--- a/browser/main/StatusBar/StatusBar.styl
+++ b/browser/main/StatusBar/StatusBar.styl
@@ -44,6 +44,10 @@ body[data-theme="dark"]
 
   .zoom
     border-color $ui-dark-borderColor
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      transition 0.15s
+      color $ui-dark-text-color
 
   .help
     navButtonColor()
diff --git a/browser/main/TopBar/TopBar.styl b/browser/main/TopBar/TopBar.styl
index cb1aae31..9ccdf936 100644
--- a/browser/main/TopBar/TopBar.styl
+++ b/browser/main/TopBar/TopBar.styl
@@ -145,7 +145,7 @@ body[data-theme="dark"]
   .control-search-optionList-item
     border-color $ui-dark-borderColor
     &:hover
-      background-color lighten($ui-dark-button--hover-backgroundColor, 15%)
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
   .control-search-optionList-item-folder
     color $ui-dark-text-color
   .control-search-optionList-item-folder-surfix
@@ -160,10 +160,14 @@ body[data-theme="dark"]
     color $ui-inactive-text-color
 
   .control-newPostButton
-    colorDarkDefaultButton()
+    color $ui-inactive-text-color
     border-color $ui-dark-borderColor
     background-color $ui-dark-noteList-backgroundColor
+    &:hover
+      transition 0.15s
+      color $ui-dark-text-color
     &:active
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
       border-color $ui-dark-button--active-backgroundColor
 
   .control-newPostButton-tooltip

From b22aad06787570aab6e8d20df044cffb71140ddd Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Fri, 21 Apr 2017 14:02:48 +0900
Subject: [PATCH 02/10] modify: Fix the navtoggle-btn layout

---
 browser/main/SideNav/SideNav.styl | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index 353e5d70..349079e6 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -122,3 +122,9 @@ body[data-theme="dark"]
 
   .storageList-empty
     color $ui-dark-inactive-text-color
+
+  .navToggle
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      transition 0.15s
+      color $ui-dark-text-color
\ No newline at end of file

From de303cf072e7fc68291eecd863956f94c872cfe7 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Fri, 21 Apr 2017 14:20:21 +0900
Subject: [PATCH 03/10] modify: Fix the sort-by-btn layout

---
 browser/main/NoteList/NoteList.styl | 11 ++++++-----
 browser/main/NoteList/index.js      |  2 +-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl
index d4e68574..572a66c3 100644
--- a/browser/main/NoteList/NoteList.styl
+++ b/browser/main/NoteList/NoteList.styl
@@ -20,8 +20,8 @@ $control-height = 30px
   padding-left 25px
 
 .control-sortBy-select
-  margin-left 0
-  font-size 12px
+  appearance: none;
+  margin-left 3px
   color $ui-inactive-text-color
   padding 0
   border none
@@ -58,13 +58,14 @@ body[data-theme="dark"]
     border-color $ui-dark-borderColor
     background-color $ui-dark-noteList-backgroundColor
 
-  .control
-    background-color $ui-dark-noteList-backgroundColor
-
   .control
     background-color $ui-dark-noteList-backgroundColor
     border-color $ui-dark-borderColor
 
+  .control-sortBy-select
+    &:hover
+      background-color white
+
   .control-button
     color $ui-dark-inactive-text-color
     &:hover
diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index c6d3464c..b296bc5a 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -404,7 +404,7 @@ class NoteList extends React.Component {
       >
         <div styleName='control'>
           <div styleName='control-sortBy'>
-            Sort by
+            <i className='fa fa-bolt' />
             <select styleName='control-sortBy-select'
               value={config.sortBy}
               onChange={(e) => this.handleSortByChange(e)}

From 22bd92916bd942bd8e4dd4f40006ff7bcd358bec Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Fri, 21 Apr 2017 14:24:22 +0900
Subject: [PATCH 04/10] modify: Fix the navtoggle-btn layout

---
 browser/main/NoteList/NoteList.styl | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl
index 572a66c3..cc2be3d3 100644
--- a/browser/main/NoteList/NoteList.styl
+++ b/browser/main/NoteList/NoteList.styl
@@ -29,6 +29,9 @@ $control-height = 30px
   outline none
   cursor pointer
   font-size 10px
+  &:hover
+    transition 0.2s
+    color $ui-text-color
 
 .control-button
   width 25px
@@ -64,7 +67,8 @@ body[data-theme="dark"]
 
   .control-sortBy-select
     &:hover
-      background-color white
+      transition 0.2s
+      color $ui-dark-text-color
 
   .control-button
     color $ui-dark-inactive-text-color

From 3d37db6e541a40c254ab37051027843a4660d55c Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Fri, 21 Apr 2017 14:33:16 +0900
Subject: [PATCH 05/10] modify: Fix the hover layout at SideNav

---
 browser/styles/index.styl | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index 84deb0be..49371436 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -127,15 +127,15 @@ navButtonColor()
   border none
   color $ui-button-color
   background-color transparent
-  transition color background-color  0.15s
+  transition 0.15s
   &:hover
     background-color alpha($ui-button--active-backgroundColor, 20%)
-    transition color background-color  0.15s
+    transition  0.15s
     color $ui-text-color
   &:active, &:active:hover
     background-color $ui-button--active-backgroundColor
     color $ui-text-color
-    transition color background-color  0.15s
+    transition 0.15s
 /**
 * # Modal Stuff
 * These will be moved lib/modal
@@ -217,12 +217,14 @@ navDarkButtonColor()
   border none
   color $ui-dark-button-color
   background-color transparent
-  transition color background-color 0.15s
+  transition 0.15s
   &:hover
     color $ui-dark-text-color
     background-color $ui-dark-button--hover-backgroundColor
+    transition 0.15s
   &:active
   &:active:hover
+    transition 0.15s
     color $ui-dark-text-color
 
 topBarButtonDark()

From d22c40f0a5a34354615c129d7bceca8c59f7b0bb Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Fri, 21 Apr 2017 14:53:25 +0900
Subject: [PATCH 06/10] modify: Fix the tag layout at note list

---
 browser/components/NoteItem.styl | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl
index 36245606..db189e28 100644
--- a/browser/components/NoteItem.styl
+++ b/browser/components/NoteItem.styl
@@ -45,7 +45,7 @@ $control-height = 30px
   .item-title-icon
     color $ui-text-color
   .item-bottom-tagList-item
-    background-color transparent
+    background-color alpha(white, 0.6)
     color $ui-text-color
   .item-wrapper
     border-color transparent
@@ -93,9 +93,10 @@ $control-height = 30px
   padding 0
   height 20px
   box-sizing border-box
-  border-radius 20px
+  border-radius 2px
+  padding 1px 2px
   vertical-align middle
-  background-color transparent
+  background-color white
   color $ui-inactive-text-color
 
 .item-bottom-time
@@ -153,7 +154,7 @@ body[data-theme="dark"]
     .item-bottom-time
       color $ui-dark-text-color
     .item-bottom-tagList-item
-      background-color transparent
+      background-color alpha(white, 10%)
       color $ui-dark-text-color
 
   .item-title
@@ -166,7 +167,7 @@ body[data-theme="dark"]
     color $ui-inactive-text-color
 
   .item-bottom-tagList-item
-    background-color transparent
+    background-color alpha($ui-dark-button--active-backgroundColor, 40%)
     color $ui-inactive-text-color
 
   .item-bottom-tagList-empty

From 1ccfd8e3923be0d77e66df2679293ba2e4080479 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Fri, 21 Apr 2017 15:00:09 +0900
Subject: [PATCH 07/10] modify: Fix the tag-list layout at NoteItem

---
 browser/components/NoteItem.styl | 36 +++++++++++++++++++++-----------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl
index db189e28..b50b8470 100644
--- a/browser/components/NoteItem.styl
+++ b/browser/components/NoteItem.styl
@@ -17,18 +17,22 @@ $control-height = 30px
     .item-title
     .item-title-icon
     .item-bottom-time
-    .item-bottom-tagList-item
       transition 0.15s
       color $ui-text-color
+    .item-bottom-tagList-item
+      background-color alpha(white, 0.6)
+      color $ui-text-color
   &:active
     background-color $ui-button--active-backgroundColor
     color $ui-text-color
     .item-title
     .item-title-icon
     .item-bottom-time
-    .item-bottom-tagList-item
       transition 0.15s
       color $ui-text-color
+    .item-bottom-tagList-item
+      background-color alpha(white, 0.6)
+      color $ui-text-color
 
 .item-wrapper
   padding 15px 0
@@ -124,23 +128,31 @@ body[data-theme="dark"]
   .item
     border-color $ui-dark-borderColor
     background-color $ui-dark-noteList-backgroundColor
-    &:active
-      background-color $ui-dark-button--active-backgroundColor
-      .item-title
-      .item-title-icon
-      .item-bottom-time
-      .item-bottom-tagList-item
-        transition 0.15s
-        color $ui-dark-text-color
     &:hover
+      transition 0.15s
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
       .item-title
       .item-title-icon
       .item-bottom-time
-      .item-bottom-tagList-item
         transition 0.15s
         color $ui-dark-text-color
-  
+      .item-bottom-tagList-item
+        transition 0.15s
+        background-color alpha($ui-dark-button--active-backgroundColor, 40%)
+        color $ui-dark-text-color
+    &:active
+      transition 0.15s
+      background-color $ui-dark-button--active-backgroundColor
+      .item-title
+      .item-title-icon
+      .item-bottom-time
+        transition 0.15s
+        color $ui-dark-text-color
+      .item-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(white, 10%)
+        color $ui-dark-text-color  
+
   .item-wrapper
     border-color $ui-dark-borderColor
 

From c07e334f035dcd4b7c43f8b795ae0bce8a0100d3 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Fri, 21 Apr 2017 15:32:23 +0900
Subject: [PATCH 08/10] modify: Fix the tag style at NoteDetail

---
 browser/main/Detail/TagSelect.styl    | 44 +++------------------------
 browser/main/StatusBar/StatusBar.styl |  1 -
 2 files changed, 5 insertions(+), 40 deletions(-)

diff --git a/browser/main/Detail/TagSelect.styl b/browser/main/Detail/TagSelect.styl
index 9802f20d..beb80019 100644
--- a/browser/main/Detail/TagSelect.styl
+++ b/browser/main/Detail/TagSelect.styl
@@ -12,12 +12,12 @@
 
 .tag
   display inline-block
-  margin 0 2px
-  padding-left 10px
+  margin 1px 3px
+  padding 0
   vertical-align middle
   height 20px
   background-color alpha($ui-tag-backgroundColor, 10%)
-  border-radius 20px
+  border-radius 3px
   overflow hidden
   clearfix()
 
@@ -54,34 +54,11 @@
   height 24px
   box-sizing borde-box
   border none
-  border-bottom $ui-border
   background-color transparent
   outline none
   padding 0 4px
-  &:focus
-    border-color $ui-input--focus-borderColor = #369DCD
-  &:disabled
-    background-color $ui-input--disabled-backgroundColor = #DDD
-
-.add-tag-button
-  display inline
-  margin-left 5px
-  width 20px
-  height 20px
-  border none
-  border-radius 20px
-  padding 0
-  color #FFFFFF
-  &:hover
-    background-color rgba(0, 0, 0, 0.3)
-  &:active, &:active:hover
-    background-color rgba(0, 0, 0, 0.5)
-    color $ui-button--active-color
 
 body[data-theme="dark"]
-  .icon
-    color $ui-dark-button-color
-
   .tag
     background-color alpha($ui-dark-tag-backgroundColor, 60%)
 
@@ -94,17 +71,6 @@ body[data-theme="dark"]
     color $ui-dark-text-color
 
   .newTag
-    border-color $ui-dark-borderColor
+    border-color none
     background-color transparent
-    color $ui-dark-text-color
-    &:focus
-      border-color $ui-input--focus-borderColor = #369DCD
-    &:disabled
-      background-color $ui-input--disabled-backgroundColor = #DDD
-
-  .add-tag-button
-    &:hover
-      background-color rgba(255, 255, 255, 0.3)
-    &:active, &:active:hover
-      background-color rgba(255, 255, 255, 0.5)
-      color $ui-button--active-color
+    color $ui-dark-text-color
\ No newline at end of file
diff --git a/browser/main/StatusBar/StatusBar.styl b/browser/main/StatusBar/StatusBar.styl
index fdbc235c..8dd8dc99 100644
--- a/browser/main/StatusBar/StatusBar.styl
+++ b/browser/main/StatusBar/StatusBar.styl
@@ -5,7 +5,6 @@
   height $statusBar-height
   background-color $ui-noteDetail-backgroundColor
   display flex
-  box-shadow $note-detail-box-shadow
 
 .blank
   flex 1

From e350dca72c43a5170a69d2bd3552dbb0cf621b36 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Fri, 21 Apr 2017 15:48:57 +0900
Subject: [PATCH 09/10] modify: Fix the star-btn layout at NoteDetail

---
 browser/main/Detail/StarButton.styl | 37 ++++++++++++++++++++++-------
 1 file changed, 29 insertions(+), 8 deletions(-)

diff --git a/browser/main/Detail/StarButton.styl b/browser/main/Detail/StarButton.styl
index f8236ccb..57627982 100644
--- a/browser/main/Detail/StarButton.styl
+++ b/browser/main/Detail/StarButton.styl
@@ -2,20 +2,27 @@
   left 7px
   top 0
   padding 0
+  color alpha($ui-favorite-star-button-color, 60%)
   &:hover
-    background-color #DCDCDC
-    .icon
-      transform rotate(-72deg)
-    .tooltip
-      opacity 1
+    transition 0.15s
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color $ui-favorite-star-button-color
+  &:active
+    transition 0.15s
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color $ui-favorite-star-button-color
 
 .root--active
   @extend .root
   color $ui-favorite-star-button-color
   &:hover
+    transition 0.15s
     color $ui-favorite-star-button-color
-  .icon
-    transform rotate(-72deg)
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+  &:active
+    transition 0.15s
+    color $ui-favorite-star-button-color
+    background-color alpha($ui-button--active-backgroundColor, 40%)
 
 .icon
   transition transform 0.15s
@@ -23,4 +30,18 @@
 body[data-theme="dark"]
   .root
     &:hover
-      background-color #272B32
\ No newline at end of file
+      transition 0.15s
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-favorite-star-button-color
+    &:active
+      transition 0.15s
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-favorite-star-button-color
+
+  .root--active
+    @extend .root
+    color $ui-favorite-star-button-color
+    &:hover
+      transition 0.15s
+      color $ui-favorite-star-button-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
\ No newline at end of file

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