Merge pull request #1108 from BoostIO/change-default-color-and-add-white-theme

Change default theme and add white

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()

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
 

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')
     }

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/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
@@ -57,7 +58,7 @@
   padding-left 15px
   padding-bottom 13px
   p
-    color $ui-text-color
+    color $ui-button-default-color
 
 .tagList
   overflow-y auto
@@ -66,6 +67,7 @@
 .root--folded
   height 100vh
   width $sideNav--folded-width
+  background-color #2E3235
   .switch-buttons
     display none
   .top
@@ -88,7 +90,6 @@
     opacity 0
     margin-left 0
     overflow hidden
-    background-color $ui-tooltip-backgroundColor
     z-index 10
     color white
     line-height 30px
@@ -96,6 +97,41 @@
     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
+    background-color #f9f9f9
+    color $ui-text-color
+
+  .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
+    &: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
@@ -106,12 +142,15 @@ body[data-theme="dark"]
   .top
     border-color $ui-dark-borderColor
 
-  .top-menu
+  .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%)

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

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

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/main/lib/ConfigManager.js

@@ -110,6 +110,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')
   }

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>