Client Tasks (#8894)

* fix filter button style

* display completed todos

* fix reward control position

* begin to add edit modal

* start adding settings to edit modal

* add task saving, creating and deleting

* fixes

* add tags and repeat frequency for habits

* clicking on links should not open the edit modal

* checklist editing

* repeatables and checklists

* delete checklist items

* add rewards price

* update shrinkwrap

* pin cwait

website/client/assets/scss/task.scss

@@ -2,6 +2,14 @@
   // for editing rewards or when a task is created
   &-purple {
     background: $purple-300;
+
+    &-control-habit {
+      background: $purple-300;
+    }
+
+    &-modal-input {
+      color: $header-color !important;
+    }
   }
 
   &-worst {
@@ -13,6 +21,10 @@
     &-control-daily-todo {
       background: $maroon-500;
     }
+
+    &-modal-input {
+      color: $maroon-500 !important;
+    }
   }
 
   &-worse {
@@ -24,6 +36,10 @@
     &-control-daily-todo {
       background: $red-500;
     }
+
+    &-modal-input {
+      color: $red-500 !important;
+    }
   }
 
   &-bad {
@@ -35,6 +51,10 @@
     &-control-daily-todo {
       background: $orange-500;
     }
+
+    &-modal-input {
+      color: $orange-500 !important;
+    }
   }
 
   &-neutral {
@@ -46,6 +66,10 @@
     &-control-daily-todo {
       background: $yellow-500;
     }
+
+    &-modal-input {
+      color: $yellow-500 !important;
+    }
   }
 
   &-good {
@@ -57,6 +81,10 @@
     &-control-daily-todo {
       background: $green-500;
     }
+
+    &-modal-input {
+      color: $green-500 !important;
+    }
   }
 
   &-better {
@@ -68,6 +96,10 @@
     &-control-daily-todo {
       background: $blue-500;
     }
+
+    &-modal-input {
+      color: $blue-500 !important;
+    }
   }
 
   &-best {
@@ -79,6 +111,10 @@
     &-control-daily-todo {
       background: $teal-500;
     }
+
+    &-modal-input {
+      color: $teal-500 !important;
+    }
   }
 
   &-reward {
@@ -111,4 +147,27 @@
       border: 1px solid rgba(0, 0, 0, 0.12);
     }
   }
+}
+
+.task-control {
+  width: 28px;
+  height: 28px;
+}
+
+.habit-control {
+  border-radius: 100px;
+  color: $white;
+
+  .svg-icon {
+    width: 10px;
+    margin: 0 auto;
+  }
+
+  .positive {
+    margin-top: 9px;
+  }
+
+  .negative {
+    margin-top: 13px;
+  }
 }