From 076edd375fe8446677b2368a090d4f0d04dda843 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Sat, 12 Aug 2017 12:13:07 +0900
Subject: [PATCH] Fix progress bar UI at NoteItem

---
 browser/components/NoteItem.js      |  8 ++++----
 browser/components/NoteItem.styl    |  4 ++--
 browser/components/TodoProcess.js   |  2 +-
 browser/components/TodoProcess.styl | 15 ++++++++++++---
 4 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/browser/components/NoteItem.js b/browser/components/NoteItem.js
index 79eed23a6..1652b02bc 100644
--- a/browser/components/NoteItem.js
+++ b/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>
 )
diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl
index ea84f7f40..d4b15dfde 100644
--- a/browser/components/NoteItem.styl
+++ b/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%)
diff --git a/browser/components/TodoProcess.js b/browser/components/TodoProcess.js
index 91c8a9436..64553fb60 100644
--- a/browser/components/TodoProcess.js
+++ b/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'>
diff --git a/browser/components/TodoProcess.styl b/browser/components/TodoProcess.styl
index db0a0831c..91aedaf87 100644
--- a/browser/components/TodoProcess.styl
+++ b/browser/components/TodoProcess.styl
@@ -1,27 +1,32 @@
 .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
 
@@ -29,8 +34,12 @@
 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%)