Merge pull request #29 from eight-labs/feat/add-labels-to-form-creati…

…on-modal Feat/add-labels-to-form-creation-modal
eight-labs · Feb 23, 2024 · 8e6104b · 8e6104b
2 parents 26e5734 + d842075
commit 8e6104b
Showing 1 changed file with 30 additions and 5 deletions.
diff --git a/src/app/(main)/dashboard/_components/new-form-dialog.tsx b/src/app/(main)/dashboard/_components/new-form-dialog.tsx
@@ -92,15 +92,25 @@ export function CreateFormDialog() {
           </DialogTrigger>
           <DialogContent className="sm:max-w-[425px]">
             <DialogHeader>
-              <DialogTitle>Create Form</DialogTitle>
+              <DialogTitle>
+                Create Form
+                <p className="text-sm text-muted-foreground">
+                  Start receiving submissions
+                </p>
+              </DialogTitle>
             </DialogHeader>
 
             <FormField
               control={form.control}
               name="name"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Name</FormLabel>
+                  <FormLabel>
+                    Name
+                    <p className="text-sm text-muted-foreground">
+                      How you want to call your form
+                    </p>
+                  </FormLabel>
                   <FormControl>
                     <Input {...field} />
                   </FormControl>
@@ -114,7 +124,12 @@ export function CreateFormDialog() {
               name="description"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Description</FormLabel>
+                  <FormLabel>
+                    Description
+                    <p className="text-sm text-muted-foreground">
+                      Describe your form
+                    </p>
+                  </FormLabel>
                   <FormControl>
                     <Input {...field} />
                   </FormControl>
@@ -128,7 +143,12 @@ export function CreateFormDialog() {
               name="returnUrl"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Return URL</FormLabel>
+                  <FormLabel>
+                    Return URL
+                    <p className="text-sm text-muted-foreground">
+                      Where to redirect after submission
+                    </p>
+                  </FormLabel>
                   <FormControl>
                     <Input placeholder="http://..." {...field} />
                   </FormControl>
@@ -138,7 +158,12 @@ export function CreateFormDialog() {
             />
 
             <DialogFooter>
-              <Button onClick={form.handleSubmit(onSubmit)}>Create Form</Button>
+              <Button
+                onClick={form.handleSubmit(onSubmit)}
+                className="mt-2 w-full"
+              >
+                Create Form
+              </Button>
             </DialogFooter>
           </DialogContent>
         </Dialog>