Update task creation page layout (#226)

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
+      <Card>
-        key={selectedCase}
+        <CardHeader className="border-b-2">
-        initialValues={getSampleForInitialFormValues(selectedCase)}
+          <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>
   );
 }

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.";