Merge pull request #462 from BoostIO/Design-update

Design update

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
@@ -45,7 +49,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 +97,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
@@ -123,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
 
@@ -153,7 +166,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 +179,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

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' />

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