Adjust Appearance

frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx

@@ -196,7 +196,7 @@ export default function CaseEditor({
       </div>
 
       <div className="p-5">
-        <h6>Basic</h6>
+        <h6 className="font-bold">Basic</h6>
         <Input
           size="sm"
           type="text"
@@ -302,7 +302,7 @@ export default function CaseEditor({
         <Divider className="my-6" />
         {templates[testCase.template].name === "Text" ? (
           <div>
-            <h6>Test Detail</h6>
+            <h6 className="font-bold">Test Detail</h6>
             <div className="flex">
               <Textarea
                 size="sm"
@@ -332,7 +332,7 @@ export default function CaseEditor({
         ) : (
           <div>
             <div className="flex items-center">
-              <h6>Steps</h6>
+              <h6 className="font-bold">Steps</h6>
               <Button
                 startContent={<Plus size={16} />}
                 size="sm"
@@ -364,7 +364,7 @@ export default function CaseEditor({
         )}
 
         <Divider className="my-6" />
-        <h6>Attachments</h6>
+        <h6 className="font-bold">Attachments</h6>
         <CaseAttachmentsEditor
           attachments={testCase.Attachments}
           onAttachmentDownload={(

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

@@ -202,7 +202,7 @@ export default function RunEditor({ projectId, runId }: Props) {
     <>
       <div className="border-b-1 dark:border-neutral-700 w-full p-3 flex items-center justify-between">
         <div className="flex items-center">
-          <Tooltip content="Back to runs" placement="left">
+          <Tooltip content="Back to runs">
             <Button
               isIconOnly
               size="sm"
@@ -288,7 +288,7 @@ export default function RunEditor({ projectId, runId }: Props) {
 
         <Divider className="my-6" />
         <div className="flex items-center justify-between">
-          <h6 className="h-8">Select test cases</h6>
+          <h6 className="h-8 font-bold">Select test cases</h6>
           <div>
             {selectedKeys.size > 0 || selectedKeys === "all" ? (
               <Dropdown>

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>
   );

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

@@ -21,6 +21,7 @@ import {
   CopyMinus,
   Circle,
   CircleCheck,
+  CircleDashed,
   CircleX,
   CircleSlash2,
 } from "lucide-react";
@@ -75,6 +76,8 @@ export default function TestCaseSelector({
       return <Circle size={16} color="#d4d4d8" />;
     } else if (uid === "passed") {
       return <CircleCheck size={16} color="#17c964" />;
+    } else if (uid === "retest") {
+      return <CircleDashed size={16} color="#f5a524" />;
     } else if (uid === "failed") {
       return <CircleX size={16} color="#f31260" />;
     } else if (uid === "skipped") {

frontend/config/selection.ts

@@ -45,6 +45,7 @@ const testRunStatus = [
 const testRunCaseStatus = [
   { name: "Untested", uid: "untested", color: "primary" },
   { name: "Passed", uid: "passed", color: "success" },
+  { name: "Retest", uid: "retest", color: "warning" },
   { name: "Failed", uid: "failed", color: "danger" },
   { name: "Skipped", uid: "skipped", color: "primary" },
 ];