Left align navigation pills in task details (Skyvern-AI#1070)

tyzam · Oct 28, 2024 · 3fbd183 · 3fbd183
1 parent 9d93280
commit 3fbd183
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 62 deletions.
diff --git a/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx b/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx
@@ -274,61 +274,59 @@ function TaskDetails() {
           {failureReason}
         </>
       )}
-      <div className="flex items-center justify-center">
-        <div className="inline-flex rounded border bg-muted p-1">
-          <NavLink
-            to="actions"
-            className={({ isActive }) => {
-              return cn(
-                "cursor-pointer rounded-md px-2 py-1 text-muted-foreground",
-                {
-                  "bg-primary-foreground text-foreground": isActive,
-                },
-              );
-            }}
-          >
-            Actions
-          </NavLink>
-          <NavLink
-            to="recording"
-            className={({ isActive }) => {
-              return cn(
-                "cursor-pointer rounded-md px-2 py-1 text-muted-foreground",
-                {
-                  "bg-primary-foreground text-foreground": isActive,
-                },
-              );
-            }}
-          >
-            Recording
-          </NavLink>
-          <NavLink
-            to="parameters"
-            className={({ isActive }) => {
-              return cn(
-                "cursor-pointer rounded-md px-2 py-1 text-muted-foreground",
-                {
-                  "bg-primary-foreground text-foreground": isActive,
-                },
-              );
-            }}
-          >
-            Parameters
-          </NavLink>
-          <NavLink
-            to="diagnostics"
-            className={({ isActive }) => {
-              return cn(
-                "cursor-pointer rounded-md px-2 py-1 text-muted-foreground",
-                {
-                  "bg-primary-foreground text-foreground": isActive,
-                },
-              );
-            }}
-          >
-            Diagnostics
-          </NavLink>
-        </div>
+      <div className="flex w-fit gap-2 rounded-sm border border-slate-700 p-2">
+        <NavLink
+          to="actions"
+          className={({ isActive }) => {
+            return cn(
+              "cursor-pointer rounded-sm px-3 py-2 hover:bg-slate-700",
+              {
+                "bg-slate-700": isActive,
+              },
+            );
+          }}
+        >
+          Actions
+        </NavLink>
+        <NavLink
+          to="recording"
+          className={({ isActive }) => {
+            return cn(
+              "cursor-pointer rounded-sm px-3 py-2 hover:bg-slate-700",
+              {
+                "bg-slate-700": isActive,
+              },
+            );
+          }}
+        >
+          Recording
+        </NavLink>
+        <NavLink
+          to="parameters"
+          className={({ isActive }) => {
+            return cn(
+              "cursor-pointer rounded-sm px-3 py-2 hover:bg-slate-700",
+              {
+                "bg-slate-700": isActive,
+              },
+            );
+          }}
+        >
+          Parameters
+        </NavLink>
+        <NavLink
+          to="diagnostics"
+          className={({ isActive }) => {
+            return cn(
+              "cursor-pointer rounded-sm px-3 py-2 hover:bg-slate-700",
+              {
+                "bg-slate-700": isActive,
+              },
+            );
+          }}
+        >
+          Diagnostics
+        </NavLink>
       </div>
       <Outlet />
     </div>

diff --git a/skyvern-frontend/src/routes/tasks/detail/TaskRecording.tsx b/skyvern-frontend/src/routes/tasks/detail/TaskRecording.tsx
@@ -28,10 +28,8 @@ function TaskRecording() {
 
   if (taskIsLoading) {
     return (
-      <div className="mx-auto flex">
-        <div className="h-[450px] w-[800px]">
-          <Skeleton className="h-full" />
-        </div>
+      <div className="h-[450px] w-[800px]">
+        <Skeleton className="h-full" />
       </div>
     );
   }
@@ -41,9 +39,7 @@ function TaskRecording() {
   }
 
   return recordingURL ? (
-    <div className="mx-auto flex">
-      <video width={800} height={450} src={recordingURL} controls />
-    </div>
+    <video width={800} height={450} src={recordingURL} controls />
   ) : (
     <div>No recording available for this task</div>
   );