Fix layout at note list

browser/components/NoteItem.styl

@@ -11,9 +11,9 @@ $control-height = 30px
   user-select none
   cursor pointer
   background-color $ui-noteList-backgroundColor
-  transition background-color 0.2s
+  transition 0.2s
   &:hover
-    background-color alpha($ui-button--active-backgroundColor, 40%)
+    background-color alpha($ui-button--active-backgroundColor, 20%)
     .item-title
     .item-title-icon
     .item-bottom-time
@@ -25,7 +25,7 @@ $control-height = 30px
     .item-star
       color $ui-favorite-star-button-color
   &:active
-    background-color $ui-button--active-backgroundColor
+    background-color alpha($ui-button--active-backgroundColor, 40%)
     color $ui-text-color
     .item-title
     .item-title-icon
@@ -43,7 +43,7 @@ $control-height = 30px
 
 .item--active
   @extend .item
-  background-color $ui-button--active-backgroundColor
+  background-color alpha($ui-button--active-backgroundColor, 60%)
   color $ui-text-color
   .item-title
   .item-title-empty
@@ -59,12 +59,12 @@ $control-height = 30px
   .item-star
     color $ui-favorite-star-button-color
   &:hover
-    background-color alpha($ui-button--active-backgroundColor, 50%)
+    background-color alpha($ui-button--active-backgroundColor, 40%)
     color #e74c3c
     .menu-button-label
       color $ui-text-color
   &:active, &:active:hover
-    background-color alpha($ui-button--active-backgroundColor, 50%)
+    background-color alpha($ui-button--active-backgroundColor, 40%)
     color #e74c3c
     .menu-button-label
       color $ui-text-color
@@ -145,6 +145,18 @@ $control-height = 30px
   padding 0
   border-radius 17px
 
+body[data-theme="white"]
+  .item
+    background-color $ui-white-noteList-backgroundColor
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 40%)
+    &:active
+      background-color $ui-button--active-backgroundColor
+
+  .item--active
+    @extend .item
+    background-color $ui-button--active-backgroundColor
+
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor

browser/components/NoteItemSimple.styl

@@ -11,15 +11,15 @@ $control-height = 30px
   user-select none
   cursor pointer
   background-color $ui-noteList-backgroundColor
-  transition background-color 0.15s
+  transition 0.2s
   &:hover
-    background-color alpha($ui-button--active-backgroundColor, 40%)
+    background-color alpha($ui-button--active-backgroundColor, 20%)
     .item-simple-title
     .item-simple-title-empty
     .item-simple-title-icon
       color $ui-text-color
   &:active
-    background-color $ui-button--active-backgroundColor
+    background-color alpha($ui-button--active-backgroundColor, 40%)
     color $ui-text-color
     .item-simple-title
     .item-simple-title-empty
@@ -28,7 +28,7 @@ $control-height = 30px
 
 .item-simple--active
   @extend .item-simple
-  background-color $ui-button--active-backgroundColor
+  background-color alpha($ui-button--active-backgroundColor, 60%)
   color $ui-text-color
   .item-simple-title
   .item-simple-title-empty
@@ -37,12 +37,12 @@ $control-height = 30px
   .item-simple-title-icon
     color $ui-text-color
   &:hover
-    background-color alpha($ui-button--active-backgroundColor, 50%)
+    background-color alpha($ui-button--active-backgroundColor, 40%)
     color #e74c3c
     .menu-button-label
       color $ui-text-color
   &:active, &:active:hover
-    background-color alpha($ui-button--active-backgroundColor, 50%)
+    background-color alpha($ui-button--active-backgroundColor, 40%)
     color #e74c3c
     .menu-button-label
       color $ui-text-color
@@ -67,6 +67,18 @@ $control-height = 30px
   font-weight normal
   color $ui-inactive-text-color
 
+body[data-theme="white"]
+  .item-simple
+    background-color $ui-white-noteList-backgroundColor
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 40%)
+    &:active
+      background-color $ui-button--active-backgroundColor
+
+  .item-simple--active
+    @extend .item-simple
+    background-color $ui-button--active-backgroundColor
+
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor

browser/main/NewNoteButton/NewNoteButton.styl

@@ -44,6 +44,13 @@ $control-height = 34px
   opacity 0
   transition 0.1s
 
+body[data-theme="white"]
+  .root, .root--expanded
+    background-color $ui-white-noteList-backgroundColor
+
+  .control-newNoteButton
+    background-color $ui-white-noteList-backgroundColor
+
 body[data-theme="dark"]
   .root, .root--expanded
     background-color $ui-dark-noteList-backgroundColor

browser/main/NoteList/NoteList.styl

@@ -59,6 +59,13 @@ $control-height = 30px
   top $control-height
   overflow auto
 
+body[data-theme="white"]
+  .root
+    background-color $ui-white-noteList-backgroundColor
+
+  .control
+    background-color $ui-white-noteList-backgroundColor
+
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor

browser/main/TopBar/TopBar.styl

@@ -112,6 +112,21 @@ $control-height = 34px
   opacity 0
   transition 0.1s
 
+body[data-theme="white"]
+  .root, .root--expanded
+    background-color $ui-white-noteList-backgroundColor
+
+  .control
+    border-color $ui-dark-borderColor
+
+  .control-search
+    background-color $ui-white-noteList-backgroundColor
+
+  .control-search-input
+    background-color $ui-white-noteList-backgroundColor
+    input
+      background-color $ui-white-noteList-backgroundColor
+
 body[data-theme="dark"]
   .root, .root--expanded
     background-color $ui-dark-noteList-backgroundColor

browser/styles/index.styl

@@ -15,7 +15,7 @@ $ui-text-color = #333333
 $ui-inactive-text-color = #939395
 $ui-borderColor = #D1D1D1
 $ui-backgroundColor = #FFFFFF
-$ui-noteList-backgroundColor = #F3F3F3
+$ui-noteList-backgroundColor = #FBFBFB
 $ui-noteDetail-backgroundColor = #F4F4F4
 $ui-border = solid 1px $ui-borderColor
 $ui-active-color = #6AA5E9
@@ -197,6 +197,8 @@ topBarButtonLight()
       opacity 1
 
 // White theme
+$ui-white-noteList-backgroundColor = #F3F3F3
+
 /**
 * Nav
 */