From 2f52233bd098ba14067aef886115e16498933e96 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Sun, 5 Nov 2017 19:21:28 +0900
Subject: [PATCH] Fix UX when press a note in note list

---
 browser/components/NoteItem.styl       | 19 +++++++++--
 browser/components/NoteItemSimple.styl | 47 ++++++++++++++++++++------
 2 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl
index bda90407..b156f5ae 100644
--- a/browser/components/NoteItem.styl
+++ b/browser/components/NoteItem.styl
@@ -59,7 +59,15 @@ $control-height = 30px
   .item-star
     color $ui-favorite-star-button-color
   &:hover
-    background-color $ui-button--active-backgroundColor
+    background-color alpha($ui-button--active-backgroundColor, 50%)
+    color #e74c3c
+    .menu-button-label
+      color $ui-text-color
+  &:active, &:active:hover
+    background-color alpha($ui-button--active-backgroundColor, 50%)
+    color #e74c3c
+    .menu-button-label
+      color $ui-text-color
 
 .item-title-icon
   position relative
@@ -148,6 +156,7 @@ body[data-theme="dark"]
     &:hover
       transition 0.15s
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-dark-text-color
       .item-title
       .item-title-icon
       .item-bottom-time
@@ -155,11 +164,12 @@ body[data-theme="dark"]
         color $ui-dark-text-color
       .item-bottom-tagList-item
         transition 0.15s
-        background-color alpha($ui-dark-button--active-backgroundColor, 40%)
+        background-color alpha(#fff, 20%)
         color $ui-dark-text-color
     &:active
       transition 0.15s
       background-color $ui-dark-button--active-backgroundColor
+      color $ui-dark-text-color
       .item-title
       .item-title-icon
       .item-bottom-time
@@ -185,6 +195,11 @@ body[data-theme="dark"]
     .item-bottom-tagList-item
       background-color alpha(white, 10%)
       color $ui-dark-text-color
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+      color #c0392b
+      .item-bottom-tagList-item
+        background-color alpha(#fff, 20%)
 
   .item-title
     color $ui-inactive-text-color
diff --git a/browser/components/NoteItemSimple.styl b/browser/components/NoteItemSimple.styl
index 2333353e..aa01d4ab 100644
--- a/browser/components/NoteItemSimple.styl
+++ b/browser/components/NoteItemSimple.styl
@@ -37,7 +37,15 @@ $control-height = 30px
   .item-simple-title-icon
     color $ui-text-color
   &:hover
-    background-color $ui-button--active-backgroundColor
+    background-color alpha($ui-button--active-backgroundColor, 50%)
+    color #e74c3c
+    .menu-button-label
+      color $ui-text-color
+  &:active, &:active:hover
+    background-color alpha($ui-button--active-backgroundColor, 50%)
+    color #e74c3c
+    .menu-button-label
+      color $ui-text-color
 
 .item-simple-title
   font-size 13px
@@ -67,33 +75,50 @@ body[data-theme="dark"]
   .item-simple
     border-color $ui-dark-borderColor
     background-color $ui-dark-noteList-backgroundColor
-    &:active
-      background-color $ui-dark-button--active-backgroundColor
-      .item-simple-title
-      .item-simple-title-icon
-      .item-simple-bottom-time
-      .item-simple-bottom-tagList-item
-        transition 0.15s
-        color $ui-dark-text-color
     &:hover
+      transition 0.15s
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-dark-text-color
       .item-simple-title
       .item-simple-title-icon
       .item-simple-bottom-time
-      .item-simple-bottom-tagList-item
         transition 0.15s
         color $ui-dark-text-color
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(#fff, 20%)
+        color $ui-dark-text-color
+    &:active
+      transition 0.15s
+      background-color $ui-dark-button--active-backgroundColor
+      color $ui-dark-text-color
+      .item-simple-title
+      .item-simple-title-icon
+      .item-simple-bottom-time
+        transition 0.15s
+        color $ui-dark-text-color
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(white, 10%)
+        color $ui-dark-text-color  
 
   .item-simple--active
     border-color $ui-dark-borderColor
     background-color $ui-dark-button--active-backgroundColor
+    .item-simple-wrapper
+      border-color transparent
     .item-simple-title
     .item-simple-title-icon
     .item-simple-bottom-time
       color $ui-dark-text-color
     .item-simple-bottom-tagList-item
-      background-color transparent
+      background-color alpha(white, 10%)
       color $ui-dark-text-color
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+      color #c0392b
+      .item-simple-bottom-tagList-item
+        background-color alpha(#fff, 20%)
 
   .item-simple-title
     color $ui-inactive-text-color