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

browser/main/Detail/Detail.styl

@@ -1,8 +1,5 @@
 .root
   absolute top bottom right
-  border-width 1px 0
-  border-style solid
-  border-color $ui-borderColor
 
 .empty
   height 320px
@@ -18,7 +15,6 @@
 
 body[data-theme="dark"]
   .root
-    border-color $ui-dark-borderColor
     background-color $ui-dark-backgroundColor
   .empty-message
     color $ui-dark-inactive-text-color

browser/main/Detail/StarButton.styl

@@ -2,20 +2,27 @@
   left 7px
   top 0
   padding 0
+  color alpha($ui-favorite-star-button-color, 60%)
   &:hover
-    background-color #DCDCDC
-    .icon
-      transform rotate(-72deg)
-    .tooltip
-      opacity 1
+    transition 0.15s
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color $ui-favorite-star-button-color
+  &:active
+    transition 0.15s
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color $ui-favorite-star-button-color
 
 .root--active
   @extend .root
   color $ui-favorite-star-button-color
   &:hover
+    transition 0.15s
     color $ui-favorite-star-button-color
-  .icon
-    transform rotate(-72deg)
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+  &:active
+    transition 0.15s
+    color $ui-favorite-star-button-color
+    background-color alpha($ui-button--active-backgroundColor, 40%)
 
 .icon
   transition transform 0.15s
@@ -23,4 +30,18 @@
 body[data-theme="dark"]
   .root
     &:hover
-      background-color #272B32
+      transition 0.15s
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-favorite-star-button-color
+    &:active
+      transition 0.15s
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-favorite-star-button-color
+
+  .root--active
+    @extend .root
+    color $ui-favorite-star-button-color
+    &:hover
+      transition 0.15s
+      color $ui-favorite-star-button-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)

browser/main/Detail/TagSelect.styl

@@ -12,12 +12,12 @@
 
 .tag
   display inline-block
-  margin 0 2px
-  padding-left 10px
+  margin 1px 3px
+  padding 0
   vertical-align middle
   height 20px
   background-color alpha($ui-tag-backgroundColor, 10%)
-  border-radius 20px
+  border-radius 3px
   overflow hidden
   clearfix()
 
@@ -54,34 +54,11 @@
   height 24px
   box-sizing borde-box
   border none
-  border-bottom $ui-border
   background-color transparent
   outline none
   padding 0 4px
-  &:focus
-    border-color $ui-input--focus-borderColor = #369DCD
-  &:disabled
-    background-color $ui-input--disabled-backgroundColor = #DDD
-
-.add-tag-button
-  display inline
-  margin-left 5px
-  width 20px
-  height 20px
-  border none
-  border-radius 20px
-  padding 0
-  color #FFFFFF
-  &:hover
-    background-color rgba(0, 0, 0, 0.3)
-  &:active, &:active:hover
-    background-color rgba(0, 0, 0, 0.5)
-    color $ui-button--active-color
 
 body[data-theme="dark"]
-  .icon
-    color $ui-dark-button-color
-
   .tag
     background-color alpha($ui-dark-tag-backgroundColor, 60%)
 
@@ -94,17 +71,6 @@ body[data-theme="dark"]
     color $ui-dark-text-color
 
   .newTag
-    border-color $ui-dark-borderColor
+    border-color none
     background-color transparent
-    color $ui-dark-text-color
-    &:focus
-      border-color $ui-input--focus-borderColor = #369DCD
-    &:disabled
-      background-color $ui-input--disabled-backgroundColor = #DDD
-
-  .add-tag-button
-    &:hover
-      background-color rgba(255, 255, 255, 0.3)
-    &:active, &:active:hover
-      background-color rgba(255, 255, 255, 0.5)
-      color $ui-button--active-color
+    color $ui-dark-text-color

browser/main/NoteList/NoteList.styl

@@ -20,8 +20,8 @@ $control-height = 30px
   padding-left 25px
 
 .control-sortBy-select
-  margin-left 0
-  font-size 12px
+  appearance: none;
+  margin-left 3px
   color $ui-inactive-text-color
   padding 0
   border none
@@ -29,6 +29,9 @@ $control-height = 30px
   outline none
   cursor pointer
   font-size 10px
+  &:hover
+    transition 0.2s
+    color $ui-text-color
 
 .control-button
   width 25px
@@ -58,13 +61,15 @@ body[data-theme="dark"]
     border-color $ui-dark-borderColor
     background-color $ui-dark-noteList-backgroundColor
 
-  .control
-    background-color $ui-dark-noteList-backgroundColor
-
   .control
     background-color $ui-dark-noteList-backgroundColor
     border-color $ui-dark-borderColor
 
+  .control-sortBy-select
+    &:hover
+      transition 0.2s
+      color $ui-dark-text-color
+
   .control-button
     color $ui-dark-inactive-text-color
     &:hover

browser/main/NoteList/index.js

@@ -404,7 +404,7 @@ class NoteList extends React.Component {
       >
         <div styleName='control'>
           <div styleName='control-sortBy'>
-            Sort by
+            <i className='fa fa-bolt' />
             <select styleName='control-sortBy-select'
               value={config.sortBy}
               onChange={(e) => this.handleSortByChange(e)}

browser/main/SideNav/SideNav.styl

@@ -122,3 +122,9 @@ body[data-theme="dark"]
 
   .storageList-empty
     color $ui-dark-inactive-text-color
+
+  .navToggle
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      transition 0.15s
+      color $ui-dark-text-color

browser/main/StatusBar/StatusBar.styl

@@ -5,7 +5,6 @@
   height $statusBar-height
   background-color $ui-noteDetail-backgroundColor
   display flex
-  box-shadow $note-detail-box-shadow
 
 .blank
   flex 1
@@ -44,6 +43,10 @@ body[data-theme="dark"]
 
   .zoom
     border-color $ui-dark-borderColor
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      transition 0.15s
+      color $ui-dark-text-color
 
   .help
     navButtonColor()

browser/main/TopBar/TopBar.styl

@@ -145,7 +145,7 @@ body[data-theme="dark"]
   .control-search-optionList-item
     border-color $ui-dark-borderColor
     &:hover
-      background-color lighten($ui-dark-button--hover-backgroundColor, 15%)
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
   .control-search-optionList-item-folder
     color $ui-dark-text-color
   .control-search-optionList-item-folder-surfix
@@ -160,10 +160,14 @@ body[data-theme="dark"]
     color $ui-inactive-text-color
 
   .control-newPostButton
-    colorDarkDefaultButton()
+    color $ui-inactive-text-color
     border-color $ui-dark-borderColor
     background-color $ui-dark-noteList-backgroundColor
+    &:hover
+      transition 0.15s
+      color $ui-dark-text-color
     &:active
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
       border-color $ui-dark-button--active-backgroundColor
 
   .control-newPostButton-tooltip

browser/styles/index.styl

@@ -127,15 +127,15 @@ navButtonColor()
   border none
   color $ui-button-color
   background-color transparent
-  transition color background-color  0.15s
+  transition 0.15s
   &:hover
     background-color alpha($ui-button--active-backgroundColor, 20%)
-    transition color background-color  0.15s
+    transition  0.15s
     color $ui-text-color
   &:active, &:active:hover
     background-color $ui-button--active-backgroundColor
     color $ui-text-color
-    transition color background-color  0.15s
+    transition 0.15s
 /**
 * # Modal Stuff
 * These will be moved lib/modal
@@ -217,12 +217,14 @@ navDarkButtonColor()
   border none
   color $ui-dark-button-color
   background-color transparent
-  transition color background-color 0.15s
+  transition 0.15s
   &:hover
     color $ui-dark-text-color
     background-color $ui-dark-button--hover-backgroundColor
+    transition 0.15s
   &:active
   &:active:hover
+    transition 0.15s
     color $ui-dark-text-color
 
 topBarButtonDark()