devonfw-forge#41: Implemented checkmark for closed/finished tasks

client/app/Components/Features/Session/Tasks/Components/Checkmark.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { FunctionComponent } from "react";
+interface CheckboxPoperties {
+  size: string;
+  backgroundColor: string;
+  accentColor: string;
+}
+export const Checkbox: FunctionComponent<CheckboxPoperties> = ({
+  size,
+  backgroundColor,
+  accentColor,
+}) => {
+  const style = { width: size, height: size };
+  return (
+    <svg
+      className="checkmark"
+      xmlns="http://www.w3.org/2000/svg"
+      style={style}
+      viewBox="0 0 52 52"
+    >
+      <circle
+        className="checkmark__circle"
+        cx="26"
+        cy="26"
+        r="25"
+        fill={backgroundColor}
+      />
+      <path
+        className="checkmark__check"
+        d="M14.1 27.2l7.1 7.2 16.7-16.8"
+        stroke={accentColor}
+        fill="none"
+        strokeWidth="6"
+      />
+    </svg>
+  );
+};

client/app/Components/Features/Session/Tasks/Components/TaskCard.tsx

@@ -9,6 +9,7 @@ import {
 } from "../../../../../Types/Status";
 import { useTaskStore } from "../Stores/TaskStore";
 import { baseUrl, serviceUrl } from "../../../../../Constants/url";
+import { Checkbox } from "./Checkmark";
 
 
 export const TaskCard: FunctionComponent<{
@@ -45,6 +46,19 @@ export const TaskCard: FunctionComponent<{
     }
   }
 
+  const renderCheckmark = () => {
+
+      return (  
+      <Checkbox
+      key = {"checkbox"}  
+      size = {"25px"}
+      backgroundColor = {"#0DA65A"}
+      accentColor = {" #FFFFFF"}
+     />
+      )
+
+  }
+
   const renderAdministrativeView = () => {
     return (
       <>
@@ -102,7 +116,7 @@ export const TaskCard: FunctionComponent<{
   };
 
   const colorStyle = {
-    color: '#2ADF6C',
+    color: '#253EEA',
     fontWeight: 'bold',
   };
 
@@ -117,9 +131,13 @@ export const TaskCard: FunctionComponent<{
 
   const renderFinalValueOnClosedTasks = () => (
     <>
-      <div style={colorStyle}>
-        Rated:  {finalValue}
-      </div>
+      <>
+        {renderCheckmark()}
+      </>
+        <div style={colorStyle}>
+          Rated:  {finalValue}
+        </div>
+
     </>
   );