From 6feddbde6aa3b293bb18e1ecf75db7ff55bc045f Mon Sep 17 00:00:00 2001
From: Kerem Yilmaz <kerem@skyvern.com>
Date: Fri, 10 May 2024 08:35:00 -0700
Subject: [PATCH] UI improvements (#296)

---
 skyvern-frontend/src/components/ui/card.tsx        |  2 +-
 .../src/components/ui/dropdown-menu.tsx            |  2 +-
 .../src/routes/tasks/running/QueuedTasks.tsx       | 14 +++++---------
 .../src/routes/tasks/running/RunningTasks.tsx      |  2 +-
 4 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/skyvern-frontend/src/components/ui/card.tsx b/skyvern-frontend/src/components/ui/card.tsx
index 13793cd7..f2f50500 100644
--- a/skyvern-frontend/src/components/ui/card.tsx
+++ b/skyvern-frontend/src/components/ui/card.tsx
@@ -23,7 +23,7 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-4", className)}
+    className={cn("flex flex-col space-y-1.5 p-4 bg-muted/40", className)}
     {...props}
   />
 ));
diff --git a/skyvern-frontend/src/components/ui/dropdown-menu.tsx b/skyvern-frontend/src/components/ui/dropdown-menu.tsx
index 60e73e35..0759c1a3 100644
--- a/skyvern-frontend/src/components/ui/dropdown-menu.tsx
+++ b/skyvern-frontend/src/components/ui/dropdown-menu.tsx
@@ -86,7 +86,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className,
     )}
diff --git a/skyvern-frontend/src/routes/tasks/running/QueuedTasks.tsx b/skyvern-frontend/src/routes/tasks/running/QueuedTasks.tsx
index d92bb16d..ff4e0e0d 100644
--- a/skyvern-frontend/src/routes/tasks/running/QueuedTasks.tsx
+++ b/skyvern-frontend/src/routes/tasks/running/QueuedTasks.tsx
@@ -1,5 +1,5 @@
 import { getClient } from "@/api/AxiosClient";
-import { Status, TaskApiResponse } from "@/api/types";
+import { TaskApiResponse } from "@/api/types";
 import { useQuery } from "@tanstack/react-query";
 import { basicTimeFormat } from "@/util/timeFormat";
 import {
@@ -32,11 +32,7 @@ function QueuedTasks() {
     },
   });
 
-  const queuedTasks = tasks
-    ?.filter((task) => task.status === Status.Queued)
-    .slice(0, 10);
-
-  if (queuedTasks?.length === 0) {
+  if (tasks?.length === 0) {
     return <div>No queued tasks</div>;
   }
 
@@ -50,16 +46,16 @@ function QueuedTasks() {
         </TableRow>
       </TableHeader>
       <TableBody>
-        {queuedTasks?.length === 0 ? (
+        {tasks?.length === 0 ? (
           <TableRow>
             <TableCell colSpan={3}>No queued tasks</TableCell>
           </TableRow>
         ) : (
-          queuedTasks?.map((task) => {
+          tasks?.map((task) => {
             return (
               <TableRow
                 key={task.task_id}
-                className="cursor-pointer w-4"
+                className="cursor-pointer w-4 hover:bg-muted/50"
                 onClick={() => {
                   navigate(task.task_id);
                 }}
diff --git a/skyvern-frontend/src/routes/tasks/running/RunningTasks.tsx b/skyvern-frontend/src/routes/tasks/running/RunningTasks.tsx
index 1e86c6af..01b6c1af 100644
--- a/skyvern-frontend/src/routes/tasks/running/RunningTasks.tsx
+++ b/skyvern-frontend/src/routes/tasks/running/RunningTasks.tsx
@@ -40,7 +40,7 @@ function RunningTasks() {
     return (
       <Card
         key={task.task_id}
-        className="hover:bg-primary-foreground cursor-pointer"
+        className="hover:bg-muted/50 cursor-pointer"
         onClick={() => {
           navigate(`/tasks/${task.task_id}`);
         }}