From 382505ee75e83b2af1db70b288e86897656d6676 Mon Sep 17 00:00:00 2001
From: Salih Altun <salih@skyvern.com>
Date: Wed, 24 Apr 2024 17:45:39 +0300
Subject: [PATCH] Update task creation page layout (#226)

---
 .../src/routes/tasks/create/CreateNewTask.tsx | 28 +++++++++++++++----
 .../tasks/data/descriptionHelperContent.ts    |  3 +-
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/skyvern-frontend/src/routes/tasks/create/CreateNewTask.tsx b/skyvern-frontend/src/routes/tasks/create/CreateNewTask.tsx
index 5651c7be..47cb9839 100644
--- a/skyvern-frontend/src/routes/tasks/create/CreateNewTask.tsx
+++ b/skyvern-frontend/src/routes/tasks/create/CreateNewTask.tsx
@@ -10,13 +10,20 @@ import {
 import { SampleCase } from "../types";
 import { getSampleForInitialFormValues } from "../data/sampleTaskData";
 import { Label } from "@/components/ui/label";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 
 function CreateNewTask() {
   const [selectedCase, setSelectedCase] = useState<SampleCase>("geico");
   const caseInputId = useId();
 
   return (
-    <div className="flex flex-col gap-6 px-6">
+    <div className="flex flex-col gap-8 max-w-5xl mx-auto">
       <div className="flex gap-4 items-center">
         <Label htmlFor={caseInputId} className="whitespace-nowrap">
           Select a sample:
@@ -38,10 +45,21 @@ function CreateNewTask() {
           </SelectContent>
         </Select>
       </div>
-      <CreateNewTaskForm
-        key={selectedCase}
-        initialValues={getSampleForInitialFormValues(selectedCase)}
-      />
+      <Card>
+        <CardHeader className="border-b-2">
+          <CardTitle className="text-lg">Create a new task</CardTitle>
+          <CardDescription>
+            Fill out the form below to create a new task. You can select a
+            sample from above to prefill the form with sample data.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <CreateNewTaskForm
+            key={selectedCase}
+            initialValues={getSampleForInitialFormValues(selectedCase)}
+          />
+        </CardContent>
+      </Card>
     </div>
   );
 }
diff --git a/skyvern-frontend/src/routes/tasks/data/descriptionHelperContent.ts b/skyvern-frontend/src/routes/tasks/data/descriptionHelperContent.ts
index b6e0b72c..b730fb7d 100644
--- a/skyvern-frontend/src/routes/tasks/data/descriptionHelperContent.ts
+++ b/skyvern-frontend/src/routes/tasks/data/descriptionHelperContent.ts
@@ -1,4 +1,5 @@
-export const urlDescription = "The starting URL for the task.";
+export const urlDescription =
+  "The starting URL for the task. This field is required.";
 
 export const webhookCallbackUrlDescription =
   "The URL to call with the results when the task is completed.";