From 87eb26d50edb960f791a2f78c9273f235ea55591 Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <shu@skyvern.com>
Date: Mon, 14 Oct 2024 16:21:52 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=84=20synced=20local=20'skyvern-fronte?=
 =?UTF-8?q?nd/src/'=20with=20remote=20'skyvern-frontend/src/'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- ELLIPSIS_HIDDEN -->

> [!IMPORTANT]
> `StatusBadge` component now uses `cn` utility for badge color classes based on status, removing `variant` logic.
>
>   - **Behavior**:
>     - `StatusBadge` component in `StatusBadge.tsx` now uses `cn` utility to apply class names for badge colors based on `status`.
>     - Removes `variant` logic and directly maps `status` to specific color classes.
>     - Handles `Status.Completed`, `Status.Terminated`, `Status.Created`, `Status.Failed`, `Status.Canceled`, `Status.TimedOut`, `Status.Running`, and `Status.Queued`.
>
> <sup>This description was created by </sup>[<img alt="Ellipsis" src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=Skyvern-AI%2Fskyvern-cloud&utm_source=github&utm_medium=referral)<sup> for a6476e679ad0d9e50d7ef188f94d2b49a4238bdb. It will automatically update as commits are pushed.</sup>

<!-- ELLIPSIS_HIDDEN -->
---
 .../src/components/StatusBadge.tsx            | 32 ++++++++++---------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/skyvern-frontend/src/components/StatusBadge.tsx b/skyvern-frontend/src/components/StatusBadge.tsx
index 6428fcde0d..59ad1982b1 100644
--- a/skyvern-frontend/src/components/StatusBadge.tsx
+++ b/skyvern-frontend/src/components/StatusBadge.tsx
@@ -1,29 +1,31 @@
 import { Status } from "@/api/types";
 import { Badge } from "./ui/badge";
+import { cn } from "@/util/utils";
 
 type Props = {
   status: Status;
 };
 
 function StatusBadge({ status }: Props) {
-  let variant: "default" | "success" | "destructive" | "warning" = "default";
-  if (status === "completed") {
-    variant = "success";
-  } else if (
-    status === "failed" ||
-    status === "terminated" ||
-    status === "timed_out" ||
-    status === "canceled"
-  ) {
-    variant = "destructive";
-  } else if (status === "running") {
-    variant = "warning";
-  }
-
   const statusText = status === "timed_out" ? "timed out" : status;
 
   return (
-    <Badge className="flex h-7 w-24 justify-center" variant={variant}>
+    <Badge
+      className={cn("flex h-7 w-24 justify-center", {
+        "bg-green-900 text-green-50 hover:bg-green-900/80":
+          status === Status.Completed,
+        "bg-orange-900 text-orange-50 hover:bg-orange-900/80":
+          status === Status.Terminated,
+        "bg-gray-900 text-gray-50 hover:bg-gray-900/80":
+          status === Status.Created,
+        "bg-red-900 text-red-50 hover:bg-red-900/80":
+          status === Status.Failed ||
+          status === Status.Canceled ||
+          status === Status.TimedOut,
+        "bg-yellow-900 text-yellow-50 hover:bg-yellow-900/80":
+          status === Status.Running || status === Status.Queued,
+      })}
+    >
       {statusText}
     </Badge>
   );