Merge pull request #794 from BoostIO/fix-progress-bar-ui

Fix progress bar ui at Noteitem

Author: kazup01

browser/components/NoteItem.js

@@ -70,6 +70,10 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleDragStar
       {note.isStarred
         ? <i styleName='item-star' className='fa fa-star' /> : ''
       }
+      {note.type === 'MARKDOWN_NOTE'
+        ? <TodoProcess todoStatus={getTodoStatus(note.content)} />
+        : ''
+      }
       <div styleName='item-bottom'>
         <div styleName='item-bottom-tagList'>
           {note.tags.length > 0
@@ -78,10 +82,6 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleDragStar
           }
         </div>
       </div>
-      {note.type === 'MARKDOWN_NOTE'
-        ? <TodoProcess todoStatus={getTodoStatus(note.content)} />
-        : ''
-      }
     </div>
   </div>
 )

browser/components/NoteItem.styl

@@ -117,8 +117,8 @@ $control-height = 30px
 
 .item-star
   position absolute
-  right 5px
-  bottom 0px
+  right -20px
+  bottom 2px
   width 34px
   height 34px
   color alpha($ui-favorite-star-button-color, 60%)

browser/components/TodoProcess.js

@@ -14,7 +14,7 @@ const TodoProcess = ({
 }) => (
   <div styleName='todo-process' style={{display: totalTodo > 0 ? '' : 'none'}}>
     <div styleName='todo-process-text'>
-      <i className='fa fa-fw fa-tasks' />
+      <i className='fa fa-fw fa-check-square-o' />
       {completedTodo} of {totalTodo}
     </div>
     <div styleName='todo-process-bar'>

browser/components/TodoProcess.styl

@@ -1,36 +1,45 @@
 .todo-process
   font-size 12px
   display flex
+  padding-top 15px
+  width 85%
 
 .todo-process-text
   display inline-block
   padding-right 10px
   white-space nowrap
   text-overflow ellipsis
+  color $ui-inactive-text-color
   i
-    color grey
+    color $ui-inactive-text-color
     padding-right 5px
 
 .todo-process-bar
   display inline-block
   margin auto
-  width 150px
-  height 5px
+  height 4px
+  border-radius 10px
   background-color #DADFE1
   border-radius 2px
   flex-grow 1
+  border 1px solid alpha(#6C7A89, 10%)
 
 .todo-process-bar--inner
   height 100%
+  border-radius 5px
   background-color #6C7A89
   transition 0.3s
 
 
 body[data-theme="dark"]
   .todo-process
     color $ui-dark-text-color
+
   .todo-process-bar
     background-color #363A3D
 
+  .todo-process-text
+    color $ui-inactive-text-color
+
   .todo-process-bar--inner
     background-color: alpha(#939395, 50%)