From 4a6c16df8da3904cc529b3675b526b574d5c06cc Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Sat, 11 Nov 2017 19:05:08 +0900
Subject: [PATCH 1/8] Add base of white theme

---
 browser/finder/ipcClient.js                   | 2 ++
 browser/main/Main.js                          | 2 ++
 browser/main/lib/ConfigManager.js             | 2 ++
 browser/main/modals/PreferencesModal/UiTab.js | 3 ++-
 4 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/browser/finder/ipcClient.js b/browser/finder/ipcClient.js
index 6a5fb929..c3d5ab6f 100644
--- a/browser/finder/ipcClient.js
+++ b/browser/finder/ipcClient.js
@@ -84,6 +84,8 @@ nodeIpc.connectTo(
       const { config } = payload
       if (config.ui.theme === 'dark') {
         document.body.setAttribute('data-theme', 'dark')
+      } else if (config.ui.theme === 'white')  {
+        document.body.setAttribute('data-theme', 'white')
       } else {
         document.body.setAttribute('data-theme', 'default')
       }
diff --git a/browser/main/Main.js b/browser/main/Main.js
index bfd1bd5f..c8795a7d 100644
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -57,6 +57,8 @@ class Main extends React.Component {
 
     if (config.ui.theme === 'dark') {
       document.body.setAttribute('data-theme', 'dark')
+    } else if (config.ui.theme === 'white')  {
+      document.body.setAttribute('data-theme', 'white')
     } else {
       document.body.setAttribute('data-theme', 'default')
     }
diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js
index fd374cf1..48cdd64f 100644
--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -106,6 +106,8 @@ function set (updates) {
 
   if (newConfig.ui.theme === 'dark') {
     document.body.setAttribute('data-theme', 'dark')
+  } else if (newConfig.ui.theme === 'white')  {
+    document.body.setAttribute('data-theme', 'white')
   } else {
     document.body.setAttribute('data-theme', 'default')
   }
diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js
index af120b94..8c1e8a4c 100644
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -141,7 +141,8 @@ class UiTab extends React.Component {
                 onChange={(e) => this.handleUIChange(e)}
                 ref='uiTheme'
               >
-                <option value='default'>Light</option>
+                <option value='default'>Default</option>
+                <option value='white'>White</option>
                 <option value='dark'>Dark</option>
               </select>
             </div>

From bb46a9ba4c9c522e1e2d2beee50a8fdeac143fe8 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Sat, 11 Nov 2017 19:06:27 +0900
Subject: [PATCH 2/8] Change default color and add white theme

---
 browser/components/NavToggleButton.styl |   3 +
 browser/components/SideNavFilter.styl   | 107 +++++++++++++++---------
 browser/components/StorageItem.styl     |  34 ++++++--
 browser/main/SideNav/SideNav.styl       |  51 ++++++++---
 browser/main/SideNav/StorageItem.styl   |  52 +++++++++---
 browser/main/SideNav/index.js           |   2 +-
 browser/styles/index.styl               |  68 ++++++++++++---
 7 files changed, 234 insertions(+), 83 deletions(-)

diff --git a/browser/components/NavToggleButton.styl b/browser/components/NavToggleButton.styl
index dba4f66f..83a9853d 100644
--- a/browser/components/NavToggleButton.styl
+++ b/browser/components/NavToggleButton.styl
@@ -10,6 +10,9 @@
   line-height 32px
   padding 0
 
+body[data-theme="white"]
+  navWhiteButtonColor()
+
 body[data-theme="dark"]
   .navToggle
     &:hover
diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl
index 388801dd..b35df903 100644
--- a/browser/components/SideNavFilter.styl
+++ b/browser/components/SideNavFilter.styl
@@ -9,6 +9,13 @@
   width 100%
   text-align left
   overflow ellipsis
+  &:hover
+    color $ui-button-default-color
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
+    transition background-color 0.15s
+  &:active, &:active:hover
+    color $ui-button-default-color
+    background-color $ui-button-default--active-backgroundColor
 
 .counters
   float right
@@ -17,53 +24,17 @@
 .menu-button--active
   @extend .menu-button
   color #e74c3c
-  background-color $ui-button--active-backgroundColor
-  .menu-button-label
-    color $ui-text-color
-  &:hover
-    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
+  SideNavFilter()
 
 .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 alpha($ui-button--active-backgroundColor, 50%)
-    color #F9BF3B
-    .menu-button-label
-      color $ui-text-color
-  &:active, &:active:hover
-    background-color alpha($ui-button--active-backgroundColor, 50%)
-    color #F9BF3B
-    .menu-button-label
-      color $ui-text-color
+  SideNavFilter()
 
 .menu-button-trash--active
   @extend .menu-button
   color #5D9E36
-  background-color $ui-button--active-backgroundColor
-  .menu-button-label
-    color $ui-text-color
-  &:hover
-    background-color alpha($ui-button--active-backgroundColor, 50%)
-    color #5D9E36
-    .menu-button-label
-      color $ui-text-color
-  &:active, &:active:hover
-    background-color alpha($ui-button--active-backgroundColor, 50%)
-    color #5D9E36
-    .menu-button-label
-      color $ui-text-color
+  SideNavFilter()
 
 .menu-button-label
   margin-left 5px
@@ -94,6 +65,64 @@
     opacity 0
     font-size 13px
 
+body[data-theme="white"]
+  .menu-button
+    navWhiteButtonColor()
+
+  .counters
+    color $ui-inactive-text-color
+
+  .menu-button--active
+    @extend .menu-button
+    color #e74c3c
+    background-color $ui-button--active-backgroundColor
+    .menu-button-label
+      color $ui-text-color
+    &:hover
+      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
+
+  .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 alpha($ui-button--active-backgroundColor, 50%)
+      color #F9BF3B
+      .menu-button-label
+        color $ui-text-color
+    &:active, &:active:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #F9BF3B
+      .menu-button-label
+        color $ui-text-color
+
+  .menu-button-trash--active
+    @extend .menu-button
+    color #5D9E36
+    background-color $ui-button--active-backgroundColor
+    .menu-button-label
+      color $ui-text-color
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #5D9E36
+      .menu-button-label
+        color $ui-text-color
+    &:active, &:active:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #5D9E36
+      .menu-button-label
+        color $ui-text-color
+
 body[data-theme="dark"]
   .menu-button
     &:active
diff --git a/browser/components/StorageItem.styl b/browser/components/StorageItem.styl
index e5eb1e1f..030a3b06 100644
--- a/browser/components/StorageItem.styl
+++ b/browser/components/StorageItem.styl
@@ -17,20 +17,20 @@
   &:first-child
     margin-top 0
   &:hover
-    color $ui-text-color
-    background-color alpha($ui-button--active-backgroundColor, 20%)
+    color $ui-button-default-color
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
     transition background-color 0.15s
   &:active
-    color $ui-text-color
-    background-color $ui-button--active-backgroundColor
+    color $$ui-button-default-color
+    background-color $ui-button-default--active-backgroundColor
 
 .folderList-item--active
   @extend .folderList-item
-  color $ui-text-color
-  background-color $ui-button--active-backgroundColor
+  color $ui-button-default-color
+  background-color $ui-button-default--active-backgroundColor
   &:hover
-    color $ui-text-color
-    background-color alpha($ui-button--active-backgroundColor, 50%)
+    color $ui-button-default-color
+    background-color alpha($ui-button-default--active-backgroundColor, 50%)
 
 .folderList-item-name
   display block
@@ -71,6 +71,24 @@
   @extend .folderList-item-name
   padding-left 12px
 
+body[data-theme="white"]
+  .folderList-item
+    color $ui-inactive-text-color
+    &:hover
+      color $ui-text-color
+      background-color alpha($ui-button--active-backgroundColor, 20%)
+      transition background-color 0.15s
+    &:active
+      color $ui-text-color
+      background-color $ui-button--active-backgroundColor
+
+  .folderList-item--active
+    @extend .folderList-item
+    color $ui-text-color
+    background-color $ui-button--active-backgroundColor
+    &:hover
+      color $ui-text-color
+      background-color alpha($ui-button--active-backgroundColor, 50%)
 
 body[data-theme="dark"]
   .folderList-item
diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index a3f0ffae..fa6f1b91 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -1,7 +1,7 @@
 .root
   absolute top left bottom
   width $sideNav-width
-  background-color #f9f9f9
+  background-color #2E3235
   user-select none
   color $ui-text-color
   height: 100vh
@@ -11,18 +11,19 @@
 .top
   padding-bottom 15px
 
-.top-menu
+.top-menu-preference
   navButtonColor()
   position absolute
   top 22px
-  right 5px
-  height 23px
+  right 10px
   width 2em
+  background-color transparent
   &:hover
-    color $ui-text-color
+    color $ui-button-default--active-backgroundColor
+    background-color transparent
   &:active, &:active:hover
-    color $ui-text-color
-    background-color alpha($ui-button--active-backgroundColor, 20%)
+    color $ui-button-default--active-backgroundColor
+    background-color transparent
 
 .switch-buttons
   background-color transparent
@@ -37,11 +38,11 @@
   background-color transparent
   transition 0.2s
   &:hover
-    color alpha(#0B99F1, 60%)
+    color alpha(#239F86, 60%)
 
 .active-button
   @extend .non-active-button
-  color #0B99F1
+  color $ui-button-default--active-backgroundColor
 
 .top-menu-label
   margin-left 5px
@@ -88,7 +89,6 @@
     opacity 0
     margin-left 0
     overflow hidden
-    background-color $ui-tooltip-backgroundColor
     z-index 10
     color white
     line-height 30px
@@ -97,6 +97,35 @@
     pointer-events none
     font-size 13px
 
+body[data-theme="white"]
+  .root, .root--folded
+    background-color #f9f9f9
+    color $ui-text-color
+
+  .top-menu-preference
+    navWhiteButtonColor()
+    &:hover
+      color #0B99F1
+    &:active, &:active:hover
+      color #0B99F1
+
+  .non-active-button
+    color $ui-inactive-text-color
+    &:hover
+      color alpha(#0B99F1, 60%)
+
+  .tag-title
+    p
+      color $ui-text-color
+
+  .non-active-button
+    &:hover
+      color alpha(#0B99F1, 60%)
+
+  .active-button
+    @extend .non-active-button
+    color #0B99F1
+
 body[data-theme="dark"]
   .root, .root--folded
     border-color $ui-dark-borderColor
@@ -106,7 +135,7 @@ body[data-theme="dark"]
   .top
     border-color $ui-dark-borderColor
 
-  .top-menu
+  .top-menu-preference
     navDarkButtonColor()
     &:active
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
diff --git a/browser/main/SideNav/StorageItem.styl b/browser/main/SideNav/StorageItem.styl
index af3ff0ef..a0690120 100644
--- a/browser/main/SideNav/StorageItem.styl
+++ b/browser/main/SideNav/StorageItem.styl
@@ -12,20 +12,12 @@
 
 .header--active
   margin-bottom 5px
-  background-color $ui-button--active-backgroundColor
+  background-color $ui-button-default--active-backgroundColor
   transition color background-color  0.15s
-
-.header--active
   .header-toggleButton
-    color $ui-text-color
-
-.header--active
   .header-info
-    color $ui-text-color
-
-.header--active
   .header-addFolderButton
-    color $ui-text-color
+    color $ui-button-default-color
 
 .header-toggleButton
   navButtonColor()
@@ -38,7 +30,7 @@
   border-radius 50%
   &:hover
     transition 0.2s
-    background-color alpha($ui-button--active-backgroundColor, 40%)
+    background-color alpha($ui-button-default--hover-backgroundColor, 40%)
     color $ui-text-color
 
 .header-info
@@ -54,7 +46,14 @@
   border none
   overflow ellipsis
   text-align left
-  background-color alpha($ui-button--active-backgroundColor, 20%)
+  background-color transparent
+  &:hover
+    color $ui-button-default-color
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
+    transition background-color 0.15s
+  &:active, &:active:hover
+    color $ui-button-default-color
+    background-color $ui-button-default--active-backgroundColor
 
 .header-info-path
   font-size 10px
@@ -72,7 +71,7 @@
   border-radius 50%
   &:hover
     transition 0.2s
-    background-color alpha($ui-button--active-backgroundColor, 40%)
+    background-color alpha($ui-button-default--hover-backgroundColor, 40%)
     color $ui-text-color
 
 .root--folded
@@ -102,6 +101,33 @@
     font-size 10px
     margin 0 5px
 
+body[data-theme="white"]
+  .header--active
+    background-color $ui-button--active-backgroundColor
+    transition color background-color  0.15s
+    .header-toggleButton
+      color $ui-text-color
+    .header-info
+      color $ui-text-color
+    .header-addFolderButton
+      color $ui-text-color
+
+  .header-toggleButton
+    navWhiteButtonColor()
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 40%)
+      color $ui-text-color
+
+  .header-info
+    navWhiteButtonColor()
+    background-color alpha($ui-button--active-backgroundColor, 20%)
+
+  .header-addFolderButton
+    navWhiteButtonColor()
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 40%)
+      color $ui-text-color
+
 body[data-theme="dark"]
   .header--active
     background-color $ui-dark-button--active-backgroundColor
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 336492d4..b1dad96c 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -165,7 +165,7 @@ class SideNav extends React.Component {
             <button styleName={isTagActive ? 'active-button' : 'non-active-button'} onClick={this.handleSwitchTagsButtonClick.bind(this)}><i className='fa fa-tags fa-fw' /></button>
           </div>
           <div>
-            <button styleName='top-menu'
+            <button styleName='top-menu-preference'
               onClick={(e) => this.handleMenuButtonClick(e)}
             >
               <i className='fa fa-wrench fa-fw' />
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index e2b4ff3d..be9260b8 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -21,12 +21,12 @@ $ui-border = solid 1px $ui-borderColor
 $ui-active-color = #6AA5E9
 $ui-tag-backgroundColor = rgba(0, 0, 0, 0.3)
 
-// UI Button
-$ui-button-color = #939395
-$ui-button--hover-backgroundColor = #D9D9D9
-$ui-button--active-color = white
-$ui-button--active-backgroundColor = #D9D9D9
-$ui-button--focus-borderColor = lighten(#369DCD, 25%)
+// UI Default Button
+$ui-button-default-color = #FBFBFB
+$ui-button-default--hover-backgroundColor = #2B8976
+$ui-button-default--active-color = white
+$ui-button-default--active-backgroundColor = #2B8976
+$ui-button-default--focus-borderColor = lighten(#369DCD, 25%)
 
 // UI Tooltip
 $ui-tooltip-text-color = white
@@ -119,6 +119,26 @@ colorDangerButton()
   &:active:hover
     background-color $danger-button-background--active
 
+/**
+* SideNav
+*/
+SideNavFilter()
+  background-color $ui-button-default--active-backgroundColor
+  .counters
+    color $ui-button-default-color
+  .menu-button-label
+    color $ui-button-default-color
+  &:hover
+    background-color alpha($ui-button-default--hover-backgroundColor, 50%)
+    color $ui-button-default-color
+    .menu-button-label
+      color $ui-button-default-color
+  &:active, &:active:hover
+    background-color alpha($ui-button-default--hover-backgroundColor, 50%)
+    color $ui-button-default-color
+    .menu-button-label
+      color $ui-button-default-color
+
 /**
 * Nav
 */
@@ -129,13 +149,14 @@ navButtonColor()
   background-color transparent
   transition 0.15s
   &:hover
-    background-color alpha($ui-button--active-backgroundColor, 20%)
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
     transition  0.15s
-    color $ui-text-color
+    color $ui-button-default-color
   &:active, &:active:hover
-    background-color $ui-button--active-backgroundColor
-    color $ui-text-color
+    background-color #1EC38B
+    color $ui-button-default-color
     transition 0.15s
+
 /**
 * # Modal Stuff
 * These will be moved lib/modal
@@ -175,7 +196,32 @@ topBarButtonLight()
     .control-lockButton-tooltip
       opacity 1
 
-// Dark theme
+// White theme
+/**
+* Nav
+*/
+navWhiteButtonColor()
+  border none
+  color $ui-button-color
+  background-color transparent
+  transition 0.15s
+  &:hover
+    background-color alpha($ui-button--active-backgroundColor, 20%)
+    transition  0.15s
+    color $ui-text-color
+  &:active, &:active:hover
+    background-color $ui-button--active-backgroundColor
+    color $ui-text-color
+    transition 0.15s
+
+// UI Button
+$ui-button-color = #939395
+$ui-button--hover-backgroundColor = #D9D9D9
+$ui-button--active-color = white
+$ui-button--active-backgroundColor = #D9D9D9
+$ui-button--focus-borderColor = lighten(#369DCD, 25%)
+
+/******* Dark theme ********/
 $ui-dark-active-color = #3A404C
 $ui-dark-borderColor = lighten(#21252B, 20%)
 $ui-dark-backgroundColor = #1E2124

From 17aa9ae85fd94d431bd88d8202106ff4160d6ca6 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Sat, 11 Nov 2017 19:10:00 +0900
Subject: [PATCH 3/8] Fix small layout bug

---
 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 fa6f1b91..7c465edf 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -104,10 +104,13 @@ body[data-theme="white"]
 
   .top-menu-preference
     navWhiteButtonColor()
+    background-color transparent
     &:hover
       color #0B99F1
+      background-color transparent
     &:active, &:active:hover
       color #0B99F1
+      background-color transparent
 
   .non-active-button
     color $ui-inactive-text-color
@@ -137,10 +140,13 @@ body[data-theme="dark"]
 
   .top-menu-preference
     navDarkButtonColor()
+    background-color transparent
     &:active
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      background-color transparent
     &:hover
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      background-color transparent
 
   .non-active-button
     color alpha($ui-dark-text-color, 60%)

From f88ac891ff190e2117b0db7c93ee70ea5c7f7309 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Sat, 11 Nov 2017 20:10:16 +0900
Subject: [PATCH 4/8] Fix layout at note list

---
 browser/components/NoteItem.styl              | 24 ++++++++++++++-----
 browser/components/NoteItemSimple.styl        | 24 ++++++++++++++-----
 browser/main/NewNoteButton/NewNoteButton.styl |  7 ++++++
 browser/main/NoteList/NoteList.styl           |  7 ++++++
 browser/main/TopBar/TopBar.styl               | 15 ++++++++++++
 browser/styles/index.styl                     |  4 +++-
 6 files changed, 68 insertions(+), 13 deletions(-)

diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl
index 542eb6e1..212fedec 100644
--- a/browser/components/NoteItem.styl
+++ b/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
diff --git a/browser/components/NoteItemSimple.styl b/browser/components/NoteItemSimple.styl
index aa01d4ab..1a84f26c 100644
--- a/browser/components/NoteItemSimple.styl
+++ b/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
diff --git a/browser/main/NewNoteButton/NewNoteButton.styl b/browser/main/NewNoteButton/NewNoteButton.styl
index 44273319..cb49501c 100644
--- a/browser/main/NewNoteButton/NewNoteButton.styl
+++ b/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
diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl
index 892ad3d8..2a8d4543 100644
--- a/browser/main/NoteList/NoteList.styl
+++ b/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
diff --git a/browser/main/TopBar/TopBar.styl b/browser/main/TopBar/TopBar.styl
index 0a88d32e..5ef7e363 100644
--- a/browser/main/TopBar/TopBar.styl
+++ b/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
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index be9260b8..55474a0e 100644
--- a/browser/styles/index.styl
+++ b/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
 */

From 1cd26d2e71b37bc6e92c5d27108625e6110ab031 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Sat, 11 Nov 2017 20:25:34 +0900
Subject: [PATCH 5/8] Fix layout at note detail

---
 browser/main/Detail/MarkdownNoteDetail.styl | 10 ++++++++--
 browser/main/Detail/SnippetNoteDetail.styl  | 11 ++++++++---
 browser/styles/index.styl                   |  3 ++-
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl
index 5ed487d8..d9de1467 100644
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -3,9 +3,9 @@
 
 .root
   absolute top right bottom
-  border-width 0
+  border-left 1px solid alpha(#DEDEDE, 60%)
   background-color $ui-noteDetail-backgroundColor
-  box-shadow $note-detail-box-shadow
+  box-shadow none
 
 .lock-button
   padding-bottom 3px
@@ -40,10 +40,16 @@
 .body-noteEditor
   absolute top bottom left right
 
+body[data-theme="white"]
+  .root
+    box-shadow $note-detail-box-shadow
+    border none
+
 body[data-theme="dark"]
   .root
     background-color $ui-dark-noteDetail-backgroundColor
     box-shadow none
+    border none
 
   .control-lockButton
     topBarButtonDark()
diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl
index e4a8f97d..a270e56c 100644
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -3,9 +3,9 @@
 
 .root
   absolute top bottom right
-  border-width 0
+  border-left 1px solid alpha(#DEDEDE, 60%)
   background-color $ui-noteDetail-backgroundColor
-  box-shadow $note-detail-box-shadow
+  box-shadow none
 
 .body
   absolute left right
@@ -70,9 +70,14 @@
   padding 0 0 2px 0
   topBarButtonLight()
 
+body[data-theme="white"]
+  .root
+    box-shadow $note-detail-box-shadow
+    border none
+
 body[data-theme="dark"]
   .root
-    border-color $ui-dark-borderColor
+    border none
     background-color $ui-dark-noteDetail-backgroundColor
     box-shadow none
 
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index 55474a0e..e37be39f 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -16,7 +16,7 @@ $ui-inactive-text-color = #939395
 $ui-borderColor = #D1D1D1
 $ui-backgroundColor = #FFFFFF
 $ui-noteList-backgroundColor = #FBFBFB
-$ui-noteDetail-backgroundColor = #F4F4F4
+$ui-noteDetail-backgroundColor = #F8F8F8
 $ui-border = solid 1px $ui-borderColor
 $ui-active-color = #6AA5E9
 $ui-tag-backgroundColor = rgba(0, 0, 0, 0.3)
@@ -198,6 +198,7 @@ topBarButtonLight()
 
 // White theme
 $ui-white-noteList-backgroundColor = #F3F3F3
+$ui-white-noteDetail-backgroundColor = #F4F4F4
 
 /**
 * Nav

From a84fddd5fa0ad9a9a3dce43c1e811a9e40a59e60 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Sat, 11 Nov 2017 20:34:31 +0900
Subject: [PATCH 6/8] Fix CI error

---
 browser/finder/ipcClient.js       | 2 +-
 browser/main/Main.js              | 2 +-
 browser/main/lib/ConfigManager.js | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/browser/finder/ipcClient.js b/browser/finder/ipcClient.js
index c3d5ab6f..d35b21f2 100644
--- a/browser/finder/ipcClient.js
+++ b/browser/finder/ipcClient.js
@@ -84,7 +84,7 @@ nodeIpc.connectTo(
       const { config } = payload
       if (config.ui.theme === 'dark') {
         document.body.setAttribute('data-theme', 'dark')
-      } else if (config.ui.theme === 'white')  {
+      } else if (config.ui.theme === 'white') {
         document.body.setAttribute('data-theme', 'white')
       } else {
         document.body.setAttribute('data-theme', 'default')
diff --git a/browser/main/Main.js b/browser/main/Main.js
index c8795a7d..14e2b2aa 100644
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -57,7 +57,7 @@ class Main extends React.Component {
 
     if (config.ui.theme === 'dark') {
       document.body.setAttribute('data-theme', 'dark')
-    } else if (config.ui.theme === 'white')  {
+    } else if (config.ui.theme === 'white') {
       document.body.setAttribute('data-theme', 'white')
     } else {
       document.body.setAttribute('data-theme', 'default')
diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js
index 48cdd64f..5ca0c3c1 100644
--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -106,7 +106,7 @@ function set (updates) {
 
   if (newConfig.ui.theme === 'dark') {
     document.body.setAttribute('data-theme', 'dark')
-  } else if (newConfig.ui.theme === 'white')  {
+  } else if (newConfig.ui.theme === 'white') {
     document.body.setAttribute('data-theme', 'white')
   } else {
     document.body.setAttribute('data-theme', 'default')

From 0a973c4db3afa82731877968b23b36df63044f22 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Sun, 12 Nov 2017 02:11:26 +0900
Subject: [PATCH 7/8] Fix at folded UI

---
 browser/components/SideNavFilter.styl | 2 ++
 browser/components/StorageItem.styl   | 4 +++-
 browser/main/SideNav/SideNav.styl     | 4 ++++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl
index b35df903..332f3a38 100644
--- a/browser/components/SideNavFilter.styl
+++ b/browser/components/SideNavFilter.styl
@@ -64,6 +64,8 @@
     pointer-events none
     opacity 0
     font-size 13px
+  .counters
+    display none
 
 body[data-theme="white"]
   .menu-button
diff --git a/browser/components/StorageItem.styl b/browser/components/StorageItem.styl
index 030a3b06..373e94aa 100644
--- a/browser/components/StorageItem.styl
+++ b/browser/components/StorageItem.styl
@@ -69,7 +69,9 @@
 
 .folderList-item-name--folded
   @extend .folderList-item-name
-  padding-left 12px
+  padding-left 17px
+  text
+    display none
 
 body[data-theme="white"]
   .folderList-item
diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index 7c465edf..2945993c 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -67,6 +67,7 @@
 .root--folded
   height 100vh
   width $sideNav--folded-width
+  background-color #2E3235
   .switch-buttons
     display none
   .top
@@ -96,6 +97,9 @@
     border-bottom-right-radius 2px
     pointer-events none
     font-size 13px
+  .top-menu-preference
+    position absolute
+    left 11px
 
 body[data-theme="white"]
   .root, .root--folded

From 792e41f161a13c3a4a1a3b5e88eaa71b1fd5b437 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Sun, 12 Nov 2017 12:11:47 +0900
Subject: [PATCH 8/8] Fix tag list on note list

---
 browser/components/StorageList.js             |  2 +-
 .../{StorgaeList.styl => StorageList.styl}    |  0
 browser/components/TagListItem.styl           | 31 ++++++++++++++-----
 browser/main/SideNav/SideNav.styl             |  2 +-
 4 files changed, 26 insertions(+), 9 deletions(-)
 rename browser/components/{StorgaeList.styl => StorageList.styl} (100%)

diff --git a/browser/components/StorageList.js b/browser/components/StorageList.js
index f3620b49..3e28e18b 100644
--- a/browser/components/StorageList.js
+++ b/browser/components/StorageList.js
@@ -2,7 +2,7 @@
 * @fileoverview Micro component for showing StorageList
 */
 import React, { PropTypes } from 'react'
-import styles from './StorgaeList.styl'
+import styles from './StorageList.styl'
 import CSSModules from 'browser/lib/CSSModules'
 
 /**
diff --git a/browser/components/StorgaeList.styl b/browser/components/StorageList.styl
similarity index 100%
rename from browser/components/StorgaeList.styl
rename to browser/components/StorageList.styl
diff --git a/browser/components/TagListItem.styl b/browser/components/TagListItem.styl
index 006b879b..cd3a5387 100644
--- a/browser/components/TagListItem.styl
+++ b/browser/components/TagListItem.styl
@@ -13,15 +13,15 @@
   &:first-child
     margin-top 0
   &:hover
-    color $ui-text-color
-    background-color alpha($ui-button--active-backgroundColor, 20%)
+    color $ui-button-default-color
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
     transition background-color 0.15s
-  &:active
-    color $ui-text-color
-    background-color $ui-button--active-backgroundColor
+  &:active, &:active:hover
+    color $ui-button-default-color
+    background-color $ui-button-default--active-backgroundColor
 
 .tagList-item-active
-  background-color $ui-button--active-backgroundColor
+  background-color $ui-button-default--active-backgroundColor
   display flex
   width 100%
   height 26px
@@ -31,8 +31,9 @@
   border none
   overflow ellipsis
   font-size 13px
+  color $ui-button-default-color
   &:hover
-    background-color alpha($ui-button--active-backgroundColor, 60%)
+    background-color alpha($ui-button-default--active-backgroundColor, 60%)
     transition 0.2s
 
 .tagList-item-name
@@ -47,6 +48,22 @@
   overflow hidden
   text-overflow ellipsis
 
+body[data-theme="white"]
+  .tagList-item
+    color $ui-inactive-text-color
+    &:hover
+      color $ui-text-color
+      background-color alpha($ui-button--active-backgroundColor, 20%)
+    &:active
+      color $ui-text-color
+      background-color $ui-button--active-backgroundColor
+
+  .tagList-item-active
+    background-color $ui-button--active-backgroundColor
+    color $ui-text-color
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 60%)
+
 body[data-theme="dark"]
   .tagList-item
     color $ui-dark-inactive-text-color
diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index 2945993c..c7b4ae40 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -58,7 +58,7 @@
   padding-left 15px
   padding-bottom 13px
   p
-    color $ui-text-color
+    color $ui-button-default-color
 
 .tagList
   overflow-y auto