Update note design

browser/components/MarkdownPreview.js

@@ -33,6 +33,15 @@ function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber) {
   font-weight: normal;
   text-rendering: optimizeLegibility;
 }
+@font-face {
+  font-family: 'Lato';
+  src: url('${appPath}/resources/fonts/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
+       url('${appPath}/resources/fonts/Lato-Black.woff') format('woff'), /* Modern Browsers */
+       url('${appPath}/resources/fonts/Lato-Black.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 700;
+  text-rendering: optimizeLegibility;
+}
 ${markdownStyle}
 body {
   font-family: '${fontFamily.join("','")}';
@@ -83,6 +92,7 @@ h2 {
 
 body p {
   white-space: normal;
+  color: rgba(0,0,0,.84);
 }
 `
 }

browser/components/NoteItem.styl

@@ -75,7 +75,8 @@ $control-height = 30px
   color $ui-inactive-text-color
 
 .item-title
-  font-size 14px
+  font-size 15px
+  font-weight 700
   position relative
   top -12px
   left 20px
@@ -91,7 +92,7 @@ $control-height = 30px
 .item-bottom
   position relative
   bottom 0px
-  margin-top 2px
+  margin-top 10px
   font-size 12px
   line-height 20px
   overflow ellipsis
@@ -108,10 +109,9 @@ $control-height = 30px
   font-size 11px
   margin-right 8px
   padding 0
-  height 20px
   box-sizing border-box
   border-radius 2px
-  padding 1px 2px
+  padding 4px
   vertical-align middle
   background-color white
   color $ui-inactive-text-color

browser/components/TodoListPercentage.styl

@@ -1,24 +1,25 @@
 .percentageBar
   position absolute
-  top 40px
+  top 50px
   right 0px
   left 0px
   background-color #DADFE1
   width 100%
-  height: 15px
+  height: 17px
   font-size: 12px
   z-index 100
   border-radius 2px
 
 .progressBar
-  background-color: #6C7A89
-  height 15px
+  background-color: #1EC38B
+  height 17px
   border-radius 2px
-  transition 0.3s
+  transition 0.4s cubic-bezier(0.4, 0.4, 0, 1)
 
 .percentageText
   color #f4f4f4
   padding: 2px 43%
+  font-weight 600
 
 body[data-theme="dark"]
   .percentageBar

browser/components/markdown.styl

@@ -118,7 +118,7 @@ hr
 h1, h2, h3, h4, h5, h6
   font-weight bold
 h1
-  font-size 2.25em
+  font-size 2.55em
   padding-bottom 0.3em
   line-height 1.2em
   border-bottom solid 1px borderColor

browser/main/Detail/Detail.styl

@@ -1,5 +1,8 @@
 .root
   absolute top bottom right
+  display flex
+  align-items center
+  justify-content center
 
 .empty
   height 320px
@@ -8,8 +11,9 @@
 
 .empty-message
   width 100%
-  font-size 42px
-  line-height 72px
+  font-size 36px
+  font-weight 600
+  line-height 56px
   text-align center
   color $ui-inactive-text-color
 

browser/main/Detail/DetailVars.styl

@@ -3,7 +3,9 @@
  */
 
 // Margin on the left side and the right side for NoteDetail component.
-$note-detail-left-margin = 50px
-$note-detail-right-margin = 70px
+$note-detail-left-margin = 100px
+$note-detail-right-margin = 120px
+$snippet-note-detail-left-margin = 60px
+$snippet-note-detail-right-margin = 80px
 
 $note-detail-box-shadow = 2px 0 15px -8px #b1b1b1 inset

browser/main/Detail/FolderSelect.js

@@ -259,12 +259,11 @@ class FolderSelect extends React.Component {
               {optionList}
             </div>
           </div>
-          : <div styleName='idle'>
+          : <div styleName='idle' style={{color: currentOption.folder.color}}>
             <div styleName='idle-label'>
-              <span styleName='idle-label-name'
-                style={{color: currentOption.folder.color}}
-              >
-                {currentOption.folder.name} /
+              <i className='fa fa-folder'></i>
+              <span styleName='idle-label-name'>
+                {currentOption.folder.name} 
               </span>
             </div>
           </div>

browser/main/Detail/FolderSelect.styl

@@ -1,21 +1,22 @@
 .root
   position relative
   border solid 1px transparent
-  line-height 26px
   vertical-align middle
   border-radius 2px
   transition 0.15s
   user-select none
+  margin-right 10px
   &:hover
     background-color $ui-button--hover-backgroundColor
 
 .root--search, .root--focus
   @extend .root
-  background-color $ui-noteDetail-backgroundColor = #F4F4F4
+  background-color $ui-noteDetail-backgroundColor = #fff
   border-color $ui-input--focus-borderColor
-  width 100px
+  width 154px
+  height 30px
   &:hover
-    border-color $ui-input--focus-borderColor
+    border-color $ui-input--focus-borderColor = #fff
 
 .idle
   position relative
@@ -24,54 +25,59 @@
 .idle-label
   right 20px
   overflow ellipsis
+  display flex
+  align-items center
 
 .idle-label-name
-  font-size 14px
-  padding 2px
+  font-size 13px
+  font-weight 600
+  margin-left 4px
 
 .idle-label-name-surfix
-  font-size 10px
+  font-size 15px
   color $ui-inactive-text-color
   margin-left 5px
 .idle-caret
   absolute right top
   height 34px
   width 20px
   line-height 34px
-
-.search
-  absolute top left right bottom
-  line-height 34px
-
+
 .search-input
   vertical-align middle
   position relative
-  top -2px
+  top 0
+  font-size 14px
   outline none
   border none
-  height 20px
-  line-height 20px
+  width 100%
   background-color transparent
   padding 0 10px
 
 .search-optionList
-  position fixed
+  position absolute
+  top 30px
   max-height 450px
+  min-width 150px
   overflow auto
   z-index 200
   border $ui-border
   background-color white
   border-radius 2px
+  padding 10px 6px
 
 .search-optionList-item
+  width 140px
   height 34px
-  width 250px
+  display flex
+  align-items center
   box-sizing border-box
-  padding 0 5px
+  padding 0
+  margin-bottom 10px
   overflow ellipsis
   cursor pointer
   &:hover
-    background-color $ui-button--hover-backgroundColor
+    background-color $ui-button--hover-backgroundColor 
 
 .search-optionList-item--active
   @extend .search-optionList-item
@@ -81,13 +87,17 @@
     background-color $ui-button--active-backgroundColor
     color $ui-button--active-color
 .search-optionList-item-name
-  border-left solid 2px transparent
-  padding 2px 5px
+  border-left solid 3px transparent
+  padding 6px
 .search-optionList-item-name-surfix
   font-size 10px
   color $ui-inactive-text-color
   margin-left 5px
 
+
+
+
+
 body[data-theme="dark"]
   .root
     color $ui-dark-text-color

browser/main/Detail/MarkdownNoteDetail.styl

@@ -6,6 +6,7 @@
   border-left 1px solid alpha(#DEDEDE, 60%)
   background-color $ui-noteDetail-backgroundColor
   box-shadow none
+  padding 20px 40px
 
 .lock-button
   padding-bottom 3px
@@ -25,10 +26,12 @@
 
 .body
   absolute left right
-  left $note-detail-left-margin
-  right $note-detail-right-margin
+  left 0
+  right 0
   top $info-height + $info-margin-under-border
   bottom $statusBar-height
+  max-width 600px
+  margin 0 auto
 .body-noteEditor
   absolute top bottom left right
 

browser/main/Detail/NoteDetailInfo.styl

@@ -1,35 +1,30 @@
 @import('DetailVars')
 
-$info-height = 40px
-$info-margin-under-border = 15px
+$info-height = 50px
+$info-margin-under-border = 30px
 
 .info
   absolute top left right
-  left $note-detail-left-margin
-  right $note-detail-right-margin
+  left 0
+  right 0
   height $info-height
-  border-bottom $ui-border
+  border-bottom 1px solid #eee
   background-color $ui-noteDetail-backgroundColor
+  width 100%
+  display flex
+  align-items center
 
 .info-left
-  float left
-  padding 0 7px
+  padding 0 10px
   width 100%
   display flex
+  align-items center
 
-.info-left-top
-  display inline-block
-  height $info-height
-  line-height $info-height
 
 .info-left-top-folderSelect
-  padding 0 3px
-  height 40px
-  line-height 40px
   display flex
   align-items center
   justify-content center
-  border-radius 3px
 
 .info-left-button
   width 34px
@@ -51,11 +46,11 @@ $info-margin-under-border = 15px
 
 .info-right
   position absolute
-  right -20px
-  top 10px
-  background $ui-noteDetail-backgroundColor
+  right 40px
+  top 60px
   bottom 1px
   padding-left 30px
+  z-index 101
 
 .undo-button
   width 34px

browser/main/Detail/SnippetNoteDetail.styl

@@ -9,8 +9,8 @@
 
 .body
   absolute left right
-  left $note-detail-left-margin
-  right $note-detail-right-margin
+  left $snippet-note-detail-left-margin
+  right $snippet-note-detail-right-margin
   top $info-height + $info-margin-under-border
   bottom $statusBar-height
   background-color $ui-noteDetail-backgroundColor
@@ -55,7 +55,7 @@
 
 .override
   absolute bottom left
-  bottom 2px
+  bottom 5px
   height 18px
   left 60px
   z-index 101

browser/main/Detail/TagSelect.js

@@ -113,7 +113,7 @@ class TagSelect extends React.Component {
             <button styleName='tag-removeButton'
               onClick={(e) => this.handleTagRemoveButtonClick(tag)(e)}
             >
-              <i className='fa fa-times fa-fw tag-removeButton-icon' />
+            <img className='tag-removeButton-icon' src='../resources/icon/icon-x.svg' width='8px'/>
             </button>
           </span>
         )