Merge pull request #1268 from ytk141/color-update

Color update

browser/components/SideNavFilter.js

@@ -41,7 +41,7 @@ const SideNavFilter = ({
       <div styleName='iconWrap'>
         <img src={isStarredActive
             ? '../resources/icon/icon-star-active.svg'
-            : '../resources/icon/icon-star.svg'
+            : '../resources/icon/icon-star-sidenav.svg'
           }
         />
       </div>
@@ -55,7 +55,7 @@ const SideNavFilter = ({
       <div styleName='iconWrap'>
         <img src={isTrashedActive
             ? '../resources/icon/icon-trash-active.svg'
-            : '../resources/icon/icon-trash.svg'
+            : '../resources/icon/icon-trash-sidenav.svg'
           }
         />
       </div>

browser/components/TodoListPercentage.js

@@ -16,7 +16,9 @@ const TodoListPercentage = ({
 }) => (
   <div styleName='percentageBar' style={{display: isNaN(percentageOfTodo) ? 'none' : ''}}>
     <div styleName='progressBar' style={{width: `${percentageOfTodo}%`}}>
-      <p styleName='percentageText'>{percentageOfTodo}%</p>
+      <div styleName='progressBarInner'>
+      	<p styleName='percentageText'>{percentageOfTodo}%</p>
+      </div>
     </div>
   </div>
 )

browser/components/TodoListPercentage.styl

@@ -16,17 +16,26 @@
   border-radius 2px
   transition 0.4s cubic-bezier(0.4, 0.4, 0, 1)
 
+.progressBarInner
+  padding 0 10px
+  min-width 1px
+  height 100%
+  display -webkit-box
+  display box
+  justify-content center
+  align-items center
+
+
 .percentageText
   color #f4f4f4
-  padding: 2px 43%
   font-weight 600
 
 body[data-theme="dark"]
   .percentageBar
-    background-color #363A3D
+    background-color #444444
 
   .progressBar
-    background-color: alpha(#939395, 50%)
+    background-color: #1EC38B
 
   .percentageText
     color $ui-dark-text-color