fix task background color

Author: ShMcK

lib/components/page/task.js

@@ -34,14 +34,8 @@ var TaskContent = function (_a) {
 };
 exports.Task = function (_a) {
     var task = _a.task, taskPosition = _a.taskPosition, index = _a.index, runTests = _a.runTests;
-    var taskClass = 'cr-task';
-    if (index < taskPosition) {
-        taskClass += ' isCompletedTask';
-    }
-    else if (index === taskPosition) {
-        taskClass += 'isCurrentTask';
-    }
-    return (React.createElement(material_ui_1.ListItem, {key: index, className: taskClass}, React.createElement(TaskCheckbox, {index: index, taskPosition: taskPosition, runTests: runTests}), React.createElement(TaskIndex, {index: index}), React.createElement(TaskContent, {task: task})));
+    var isCompleted = index < taskPosition;
+    return (React.createElement(material_ui_1.ListItem, {key: index, className: 'cr-task', style: { backgroundColor: isCompleted ? '#c8e6c9' : 'inherit' }}, React.createElement(TaskCheckbox, {index: index, taskPosition: taskPosition, runTests: runTests}), React.createElement(TaskIndex, {index: index}), React.createElement(TaskContent, {task: task})));
 };
 exports.Tasks = function (_a) {
     var tasks = _a.tasks, taskPosition = _a.taskPosition, runTests = _a.runTests;

src/components/page/_page.less

@@ -1,16 +1,6 @@
 .cr-page {
   position: relative;
   width: 400px;
-  .isCompletedTask {
-    background-color: #c8e6c9;
-  }
-  .isCompleteTask:hover {
-    background-color: #c8e6c9;
-  }
-  .isCurrentTask {}
-  .isDisabledTask {
-    color: grey;
-  }
   &-toolbar {
     position: fixed;
     bottom: 0;

src/components/page/task.tsx

@@ -35,14 +35,9 @@ const TaskContent = ({task}) => (
 );
 
 export const Task = ({task, taskPosition, index, runTests}) => {
-  let taskClass = 'cr-task';
-  if (index < taskPosition) {
-    taskClass += ' isCompletedTask';
-  } else if (index === taskPosition) {
-    taskClass += 'isCurrentTask';
-  }
+  const isCompleted = index < taskPosition;
   return (
-    <ListItem key={index} className={taskClass} >
+    <ListItem key={index} className='cr-task' style={{backgroundColor: isCompleted ? '#c8e6c9' : 'inherit'}}>
         <TaskCheckbox index={index} taskPosition={taskPosition} runTests={runTests}/>
         <TaskIndex index={index} />
         <TaskContent task={task} />

styles/styles.css

@@ -47,15 +47,6 @@ atom-panel-container > atom-panel > #crv {
   position: relative;
   width: 400px;
 }
-.cr-page .isCompletedTask {
-  background-color: #c8e6c9;
-}
-.cr-page .isCompleteTask:hover {
-  background-color: #c8e6c9;
-}
-.cr-page .isDisabledTask {
-  color: grey;
-}
 .cr-page-toolbar {
   position: fixed;
   bottom: 0;