Adjust Appearance

frontend/app/projects/[projectId]/runs/[runId]/RunPregressDonutChart.tsx

@@ -1,13 +1,16 @@
 import React from "react";
 import { useState } from "react";
 import dynamic from "next/dynamic";
+import { Button, Tooltip } from "@nextui-org/react";
+import { RotateCw } from "lucide-react";
 const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const testCases = [
-  { name: "Passed", value: 12, color: "#17c964" },
-  { name: "Failed", value: 3, color: "#f31260" },
-  { name: "Skipped", value: 14, color: "#71717a" },
-  { name: "Untested", value: 32, color: "#d4d4d8" },
+  { name: "Passed", value: 12, color: "#059669" },
+  { name: "Failed", value: 3, color: "#f87171" },
+  { name: "Retest", value: 4, color: "#fbbf24" },
+  { name: "Skipped", value: 14, color: "#4b5563" },
+  { name: "Untested", value: 32, color: "#e5e7eb" },
 ];
 
 export default function RunProgressDounut() {
@@ -25,14 +28,27 @@ export default function RunProgressDounut() {
     },
   });
   return (
-    <div>
-      <h1>Progress</h1>
+    <div className="w-96 h-72">
+      <div className="flex items-center">
+        <h4 className="font-bold">Progress</h4>
+        <Tooltip content="Refresh">
+          <Button
+            isIconOnly
+            size="sm"
+            className="rounded-full bg-transparent ms-1"
+            onPress={() => console.log("refresh")}
+          >
+            <RotateCw size={16} />
+          </Button>
+        </Tooltip>
+      </div>
+
       <Chart
         options={chartData.options}
         series={chartData.series}
         type="donut"
-        width={400}
-        height={400}
+        width={"100%"}
+        height={"100%"}
       />
     </div>
   );