[ITG-106] Added visiualization of indirectly done status. Changed checkbox icons

cabra/package.json

@@ -33,6 +33,7 @@
     "react-router-dom": "^6.3.0",
     "react-select": "^5.2.2",
     "react-tooltip": "^4.2.21",
+    "remixicon-react": "^1.0.0",
     "vite": "^2.6.14",
     "yup": "^0.32.11"
   },

cabra/src/pages/components/CheckBox.tsx

@@ -1,15 +1,19 @@
 import tw, { TwStyle, styled } from "twin.macro";
 
-import { CheckCircleIcon } from "@heroicons/react/outline";
+import CheckboxBlankIcon from "remixicon-react/CheckboxBlankCircleLineIcon";
+import CheckboxCheckedIcon from "remixicon-react/CheckboxCircleLineIcon";
+import CheckboxMultiIcon from "remixicon-react/CheckboxMultipleLineIcon";
+import DisabledIcon from "remixicon-react/IndeterminateCircleLineIcon";
 import { InputHTMLAttributes } from "react";
 import ReactTooltip from "react-tooltip";
+import { TaskStatus } from "../../types/task";
 
 type Props = Omit<
   InputHTMLAttributes<HTMLInputElement>,
   "type" | "id" | "size"
 > & {
-  className?: string;
   id: string;
+  status: TaskStatus;
   size?: Size;
 };
 type Size = "sm" | "base" | "lg";
@@ -22,42 +26,51 @@ const labelSizes: Record<Size, TwStyle> = {
   lg: tw`w-11 h-11`,
 };
 
-const iconSizes: Record<Size, { height: number; width: number }> = {
-  sm: { height: 20, width: 20 },
-  base: { height: 24, width: 24 },
-  lg: { height: 28, width: 28 },
+const iconSizes: Record<Size, { size: number }> = {
+  sm: { size: 20 },
+  base: { size: 24 },
+  lg: { size: 28 },
 };
-
 const Label = styled.label<{ size: Size }>`
   ${tw`select-none`}
 
-  .checkmark {
+  span {
     ${tw`place-items-center rounded grid cursor-pointer`}
-    ${tw`bg-slate-300 text-slate-400 transition-all shadow-xl`}
+    ${tw`transition-all shadow-xl text-secondary bg-tertiary`}
     ${({ size }) => labelSizes[size]}
   }
 
-  input:checked ~ .checkmark {
-    ${tw`bg-success text-green-900`}
+  input:disabled ~ span {
+    ${tw`bg-slate-500 cursor-auto`}
   }
-
-  input:focus ~ .checkmark {
-    ${tw`ring-2`}
+  input:enabled ~ span {
+    ${tw`hover:opacity-60`}
   }
+`;
 
-  input:disabled ~ .checkmark {
-    ${tw`bg-red-700`}
+const resolveIcon = (
+  status: TaskStatus,
+  size: Size,
+  disabled: boolean | undefined
+) => {
+  if (disabled) {
+    return <DisabledIcon {...iconSizes[size]} />;
   }
-
-  input:enabled ~ .checkmark {
-    ${tw`hover:opacity-60`}
+  switch (status) {
+    case TaskStatus.DONE:
+      return <CheckboxCheckedIcon {...iconSizes[size]} />;
+    case TaskStatus.TODO:
+      return <CheckboxBlankIcon {...iconSizes[size]} />;
+    case TaskStatus.INDIRECTLY_DONE:
+      return <CheckboxMultiIcon {...iconSizes[size]} />;
   }
-`;
+};
 
 export default function Checkbox({
   id,
   size = "base",
   disabled,
+  status,
   ...props
 }: Props) {
   return (
@@ -70,9 +83,7 @@ export default function Checkbox({
         data-for={id}
       >
         <StyledInput {...props} disabled={disabled} id={id} type="checkbox" />
-        <span className="checkmark">
-          <CheckCircleIcon {...iconSizes[size]} />
-        </span>
+        <span>{resolveIcon(status, size, disabled)}</span>
       </Label>
       {disabled && (
         <ReactTooltip id={id} place="bottom" effect="solid">

cabra/src/pages/components/RelatedTask.tsx

@@ -60,6 +60,7 @@ export default function RelatedTask({
           checked={task.status !== TaskStatus.TODO}
           onChange={handleIsDoneChange}
           disabled={task.isBlocked}
+          status={task.status}
         />
       </p>
       {errorMessage && (

cabra/src/pages/components/TaskDetailsCard.tsx

@@ -53,6 +53,7 @@ export default function TaskDetails({ id }: Props) {
               id={`task-${task.id}`}
               onChange={handleStatusChange}
               disabled={task.isBlocked}
+              status={task.status}
             />
             <Link to={routeHelpers.task.edit(task.id)}>
               <NavigationButton tw="text-amber-600 bg-amber-100">

cabra/src/pages/components/TaskListItem.tsx

@@ -71,6 +71,7 @@ export default function TaskListItem({ task }: Props) {
               onChange={handleIsDoneChange}
               disabled={task.isBlocked}
               size="sm"
+              status={task.status}
             />
             <Link to={routeHelpers.task.details(task.id)} state={{ task }}>
               <NavigationButton tw="text-primary bg-tertiary rounded p-1 text-sm">