From 8111d8665d62ae61df999e9f13288e154ecdbc25 Mon Sep 17 00:00:00 2001
From: Vignesh <vighneshgupta32@gmail.com>
Date: Wed, 4 Dec 2024 19:50:40 +0530
Subject: [PATCH] refactor: replace Dialog components with ResponsiveModel for
 improved UI consistency

---
 .../dashboard/_component/invite-button.tsx    |  17 +-
 .../sidebar/orgs-sidebar/new-org-button.tsx   |   8 +-
 .../(main)/projects/[id]/changelogs/page.tsx  |  10 +-
 apps/web/components/empty-states/no-org.tsx   |  19 +-
 apps/web/components/md/link-modal.tsx         |  54 ++---
 .../web/components/modals/changelog-modal.tsx | 182 ++++++++--------
 apps/web/components/modals/confirm-modal.tsx  |   2 +-
 apps/web/components/modals/feedback-modal.tsx | 196 +++++++++---------
 apps/web/components/modals/input-modal.tsx    |  66 +++---
 apps/web/components/responsive-model.tsx      |  57 +++--
 apps/web/components/ui/date-picker.tsx        |   2 +-
 packages/backend/convex/_generated/api.d.ts   |   1 -
 packages/backend/convex/_generated/api.js     |   1 -
 .../backend/convex/_generated/dataModel.d.ts  |   1 -
 .../backend/convex/_generated/server.d.ts     |   1 -
 packages/backend/convex/_generated/server.js  |   1 -
 16 files changed, 305 insertions(+), 313 deletions(-)

diff --git a/apps/web/app/(main)/dashboard/_component/invite-button.tsx b/apps/web/app/(main)/dashboard/_component/invite-button.tsx
index 6e82829..7c99674 100644
--- a/apps/web/app/(main)/dashboard/_component/invite-button.tsx
+++ b/apps/web/app/(main)/dashboard/_component/invite-button.tsx
@@ -1,21 +1,22 @@
 import { OrganizationProfile } from "@clerk/nextjs";
 import { Plus } from "lucide-react";
 
+import ResponsiveModel from "@/components/responsive-model";
 import { Button } from "@/components/ui/button";
-import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 
 const InviteButton = () => {
   return (
-    <Dialog>
-      <DialogTrigger asChild>
+    <ResponsiveModel
+      className="p-0 border-none bg-transparent max-w-[880px]"
+      trigger={
         <Button className="hidden sm:flex">
           <Plus className="w-4 h-4 mr-2" /> Invite members
         </Button>
-      </DialogTrigger>
-
-      <DialogContent className="p-0 border-none bg-transparent max-w-[880px]">
-        <OrganizationProfile />
-      </ResponsiveModel>
+      }
+      asChild
+    >
+      <OrganizationProfile />
+    </ResponsiveModel>
   );
 };
 
diff --git a/apps/web/app/(main)/dashboard/_component/sidebar/orgs-sidebar/new-org-button.tsx b/apps/web/app/(main)/dashboard/_component/sidebar/orgs-sidebar/new-org-button.tsx
index b1e6d04..efd3261 100644
--- a/apps/web/app/(main)/dashboard/_component/sidebar/orgs-sidebar/new-org-button.tsx
+++ b/apps/web/app/(main)/dashboard/_component/sidebar/orgs-sidebar/new-org-button.tsx
@@ -23,8 +23,12 @@ const NewButton = () => {
         </div>
       </DialogTrigger>
       <DialogContent className="p-0 bg-transparent border-none max-w-[480px]">
-        <CreateOrganization skipInvitationScreen afterCreateOrganizationUrl={DASHBOARD_ROUTE} />
-      </ResponsiveModel>
+        <CreateOrganization
+          skipInvitationScreen
+          afterCreateOrganizationUrl={DASHBOARD_ROUTE}
+        />
+      </DialogContent>
+    </Dialog>
   );
 };
 
diff --git a/apps/web/app/(main)/projects/[id]/changelogs/page.tsx b/apps/web/app/(main)/projects/[id]/changelogs/page.tsx
index 523991e..fa81687 100644
--- a/apps/web/app/(main)/projects/[id]/changelogs/page.tsx
+++ b/apps/web/app/(main)/projects/[id]/changelogs/page.tsx
@@ -19,15 +19,15 @@ const ChangelogsPage = ({ params: { id } }: PagePropsWithProjectId) => {
   const { onOpen } = useChangelogModal();
 
   return (
-    <>
+    <div>
       <div className="flex justify-between gap-2 border-b p-2 items-center">
         <h3 className="text-xl font-bold md:text-2xl lg:text-3xl">
           Changelogs
         </h3>
 
         <DropdownMenu>
-          <DropdownMenuTrigger asChild className="md:hidden">
-            <Button variant="outline">
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" className="md:hidden">
               <MoreHorizontal className="h-4 w-4" />
             </Button>
           </DropdownMenuTrigger>
@@ -72,9 +72,9 @@ const ChangelogsPage = ({ params: { id } }: PagePropsWithProjectId) => {
       </div>
 
       <ScrollArea className="h-[calc(100dvh-150px)] pr-3 pt-2">
-        <ChangelogList projectId={id} />{" "}
+        <ChangelogList projectId={id} />
       </ScrollArea>
-    </>
+    </div>
   );
 };
 
diff --git a/apps/web/components/empty-states/no-org.tsx b/apps/web/components/empty-states/no-org.tsx
index ea22e4a..50a674f 100644
--- a/apps/web/components/empty-states/no-org.tsx
+++ b/apps/web/components/empty-states/no-org.tsx
@@ -2,7 +2,7 @@ import { CreateOrganization } from "@clerk/nextjs";
 import Image from "next/image";
 
 import { Button } from "@/components/ui/button";
-import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import ResponsiveModel from "../responsive-model";
 
 const NoOrg = () => {
   return (
@@ -14,17 +14,16 @@ const NoOrg = () => {
         Create an organization to get started
       </p>
       <div className="mt-6">
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button size="lg">Create organization</Button>
-          </DialogTrigger>
-          <DialogContent className="p-0 bg-transparent border-none max-w-[510px]">
-            <CreateOrganization />
-          </DialogContent>
-        </Dialog>
+        <ResponsiveModel
+          trigger={<Button size="lg">Create organization</Button>}
+          asChild
+          className="p-0 bg-transparent border-none max-w-[510px]"
+        >
+          <CreateOrganization />
+        </ResponsiveModel>
       </div>
     </div>
   );
 };
 
-export default NoOrg;
\ No newline at end of file
+export default NoOrg;
diff --git a/apps/web/components/md/link-modal.tsx b/apps/web/components/md/link-modal.tsx
index 46362a2..53a9122 100644
--- a/apps/web/components/md/link-modal.tsx
+++ b/apps/web/components/md/link-modal.tsx
@@ -1,16 +1,9 @@
 import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
+import { DialogClose } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useState, type ReactNode } from "react";
+import ResponsiveModel, { ResponsiveModelTitle } from "../responsive-model";
 
 type LinkModalProps = {
   value?: string;
@@ -28,31 +21,24 @@ const LinkModal = ({ value, children, onSave }: LinkModalProps) => {
   };
 
   return (
-    <Dialog>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Enter destination</DialogTitle>
-        </DialogHeader>
-        <div>
-          <Label htmlFor="link" className="sr-only">
-            Link
-          </Label>
-          <Input
-            id="link"
-            value={link || ""}
-            onChange={(e) => setLink(e.target.value)}
-          />
-        </div>
-        <DialogFooter className="justify-start">
-          <DialogClose asChild>
-            <Button type="button" onClick={() => onLinkSave(link)}>
-              Save
-            </Button>
-          </DialogClose>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <ResponsiveModel className="sm:max-w-md" trigger={children} asChild>
+      <ResponsiveModelTitle>Enter destination</ResponsiveModelTitle>
+      <div className="mb-3">
+        <Label htmlFor="link" className="sr-only">
+          Link
+        </Label>
+        <Input
+          id="link"
+          value={link || ""}
+          onChange={(e) => setLink(e.target.value)}
+        />
+      </div>
+      <DialogClose asChild>
+        <Button type="button" onClick={() => onLinkSave(link)}>
+          Save
+        </Button>
+      </DialogClose>
+    </ResponsiveModel>
   );
 };
 
diff --git a/apps/web/components/modals/changelog-modal.tsx b/apps/web/components/modals/changelog-modal.tsx
index b653d32..8acacd3 100644
--- a/apps/web/components/modals/changelog-modal.tsx
+++ b/apps/web/components/modals/changelog-modal.tsx
@@ -1,11 +1,5 @@
 import { Button } from "@/components/ui/button";
 import { DatePicker } from "@/components/ui/date-picker";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
 import {
   Form,
   FormControl,
@@ -17,15 +11,16 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
-import { api } from "@repo/backend/convex/_generated/api";
-import type { Id } from "@repo/backend/convex/_generated/dataModel";
 import useApiMutation from "@/lib/hooks/use-api-mutation";
 import { useChangelogModal } from "@/lib/store/use-changelog-modal";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { api } from "@repo/backend/convex/_generated/api";
+import type { Id } from "@repo/backend/convex/_generated/dataModel";
 import { useParams } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import MDXEditor from "../md/mdx-editor";
+import ResponsiveModel, { ResponsiveModelTitle } from "../responsive-model";
 
 const changelogFormSchema = z.object({
   title: z.string().min(5),
@@ -75,117 +70,110 @@ const ChangelogModal = () => {
   }
 
   return (
-    <ResponsiveModel open={isOpen} onOpenChange={(open) => !open && onClose()}>        <DialogHeader>
-          <DialogTitle>{values?._id ? "Edit" : "Create"} Changelog</DialogTitle>
-        </DialogHeader>
+    <ResponsiveModel open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <ResponsiveModelTitle>
+        {values?._id ? "Edit" : "Create"} Changelog
+      </ResponsiveModelTitle>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+          <FormField
+            control={form.control}
+            name="title"
+            render={({ field }) => (
+              <FormItem className="space-y-0">
+                <FormLabel>Title</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="Fixed XYZ bug and improved the performance by 20%"
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
 
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+          <div className="grid md:grid-cols-2 gap-2">
             <FormField
               control={form.control}
-              name="title"
+              name="date"
               render={({ field }) => (
                 <FormItem className="space-y-0">
-                  <FormLabel>Title</FormLabel>
+                  <FormLabel>Release Date</FormLabel>
                   <FormControl>
-                    <Input
-                      placeholder="Fixed XYZ bug and improved the performance by 20%"
-                      {...field}
-                    />
+                    <DatePicker value={field.value} onSelect={field.onChange} />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
               )}
             />
-
-            <div className="grid md:grid-cols-2 gap-2">
-              <FormField
-                control={form.control}
-                name="date"
-                render={({ field }) => (
-                  <FormItem className="space-y-0">
-                    <FormLabel>Release Date</FormLabel>
-                    <FormControl>
-                      <DatePicker
-                        value={field.value}
-                        onSelect={field.onChange}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="version"
-                render={({ field }) => (
-                  <FormItem className="space-y-0">
-                    <FormLabel>Version</FormLabel>
-                    <FormControl>
-                      <div className="relative">
-                        <span className="absolute left-1  flex justify-center items-center w-6 h-6 m-2 ml-1 rounded-lg text-muted-foreground bg-muted">
-                          v
-                        </span>
-                        <Input
-                          placeholder="1.0.1"
-                          className="pl-10"
-                          {...field}
-                        />
-                      </div>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-
-            <FormField
-              control={form.control}
-              name="isPublished"
-              render={({ field }) => (
-                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
-                  <div>
-                    <FormLabel className="text-base">Keep it public</FormLabel>
-                    <FormDescription>
-                      Enable this option to make the changelog public
-                    </FormDescription>
-                  </div>
-                  <FormControl>
-                    <Switch
-                      checked={field.value}
-                      onCheckedChange={field.onChange}
-                    />
-                  </FormControl>
-                </FormItem>
-              )}
-            />
-
             <FormField
               control={form.control}
-              name="changes"
+              name="version"
               render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Changes</FormLabel>
+                <FormItem className="space-y-0">
+                  <FormLabel>Version</FormLabel>
                   <FormControl>
-                    <div>
-                      <MDXEditor
-                        content={field.value}
-                        onChange={field.onChange}
-                        rows={10}
-                      />
+                    <div className="relative">
+                      <span className="absolute left-1  flex justify-center items-center w-6 h-6 m-2 ml-1 rounded-lg text-muted-foreground bg-muted">
+                        v
+                      </span>
+                      <Input placeholder="1.0.1" className="pl-10" {...field} />
                     </div>
                   </FormControl>
                   <FormMessage />
                 </FormItem>
               )}
             />
+          </div>
+
+          <FormField
+            control={form.control}
+            name="isPublished"
+            render={({ field }) => (
+              <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                <div>
+                  <FormLabel className="text-base">Keep it public</FormLabel>
+                  <FormDescription>
+                    Enable this option to make the changelog public
+                  </FormDescription>
+                </div>
+                <FormControl>
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="changes"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Changes</FormLabel>
+                <FormControl>
+                  <div>
+                    <MDXEditor
+                      content={field.value}
+                      onChange={field.onChange}
+                      rows={10}
+                    />
+                  </div>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
 
-            <Button type="submit" disabled={isCreating}>
-              Submit
-            </Button>
-          </form>
-        </Form>
-      </ResponsiveModel>
+          <Button type="submit" disabled={isCreating}>
+            Submit
+          </Button>
+        </form>
+      </Form>
+    </ResponsiveModel>
   );
 };
 
diff --git a/apps/web/components/modals/confirm-modal.tsx b/apps/web/components/modals/confirm-modal.tsx
index 7fb49e8..1957cc0 100644
--- a/apps/web/components/modals/confirm-modal.tsx
+++ b/apps/web/components/modals/confirm-modal.tsx
@@ -40,7 +40,7 @@ const ConfirmModal = ({
       <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader className="truncate">{header}</AlertDialogHeader>
-        <AlertDialogDescription>{description}</AlertDialogDescription>
+        <AlertDialogDescription className="text-center text-pretty sm:text-start">{description}</AlertDialogDescription>
         <AlertDialogFooter>
           <AlertDialogCancel>Cancel</AlertDialogCancel>
           <AlertDialogAction
diff --git a/apps/web/components/modals/feedback-modal.tsx b/apps/web/components/modals/feedback-modal.tsx
index 0866718..ecb9c85 100644
--- a/apps/web/components/modals/feedback-modal.tsx
+++ b/apps/web/components/modals/feedback-modal.tsx
@@ -1,10 +1,4 @@
 import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
 import {
   Form,
   FormControl,
@@ -22,18 +16,18 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
-import { api } from "@repo/backend/convex/_generated/api";
-import type { Id } from "@repo/backend/convex/_generated/dataModel";
 import { FEEDBACK_STATUS, FEEDBACK_TYPES } from "@/lib/constants";
 import { feedbackFormSchema } from "@/lib/form-schemas";
 import useApiMutation from "@/lib/hooks/use-api-mutation";
 import { useFeedbackModal } from "@/lib/store/use-feedback-modal";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { api } from "@repo/backend/convex/_generated/api";
+import type { Id } from "@repo/backend/convex/_generated/dataModel";
 import { useParams } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-
+import ResponsiveModel, { ResponsiveModelTitle } from "../responsive-model";
 
 const FeedbackModal = () => {
   const param = useParams();
@@ -96,20 +90,62 @@ const FeedbackModal = () => {
   }
 
   return (
-    <ResponsiveModel open={isOpen} onOpenChange={(open) => !open && onClose()}>        <DialogHeader>
-          <DialogTitle>{values?._id ? "Edit" : "Create"} Feedback</DialogTitle>
-        </DialogHeader>
+    <ResponsiveModel open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <ResponsiveModelTitle>
+        {values?._id ? "Edit" : "Create"} Feedback
+      </ResponsiveModelTitle>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+          <FormField
+            control={form.control}
+            name="senderName"
+            render={({ field }) => (
+              <FormItem className="space-y-0">
+                <FormLabel>Name</FormLabel>
+                <FormControl>
+                  <Input placeholder="John Deo" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="senderEmail"
+            render={({ field }) => (
+              <FormItem className="space-y-0">
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input placeholder="john.deo@acme.com" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
 
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+          <div className="grid md:grid-cols-2 gap-2">
             <FormField
               control={form.control}
-              name="senderName"
+              name="status"
               render={({ field }) => (
                 <FormItem className="space-y-0">
-                  <FormLabel>Name</FormLabel>
+                  <FormLabel>Status</FormLabel>
                   <FormControl>
-                    <Input placeholder="John Deo" {...field} />
+                    <Select
+                      onValueChange={field.onChange}
+                      defaultValue={field.value}
+                    >
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent className="flex">
+                        {FEEDBACK_STATUS.map((status) => (
+                          <SelectItem key={status.value} value={status.value}>
+                            {status.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -117,100 +153,58 @@ const FeedbackModal = () => {
             />
             <FormField
               control={form.control}
-              name="senderEmail"
+              name="type"
               render={({ field }) => (
                 <FormItem className="space-y-0">
-                  <FormLabel>Email</FormLabel>
+                  <FormLabel>Priority</FormLabel>
                   <FormControl>
-                    <Input placeholder="john.deo@acme.com" {...field} />
+                    <Select
+                      onValueChange={field.onChange}
+                      defaultValue={field.value}
+                    >
+                      <SelectTrigger className="capitalize">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent className="flex">
+                        {FEEDBACK_TYPES.map((label) => (
+                          <SelectItem key={label.value} value={label.value}>
+                            {label.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
                   </FormControl>
                   <FormMessage />
                 </FormItem>
               )}
             />
+          </div>
 
-            <div className="grid md:grid-cols-2 gap-2">
-              <FormField
-                control={form.control}
-                name="status"
-                render={({ field }) => (
-                  <FormItem className="space-y-0">
-                    <FormLabel>Status</FormLabel>
-                    <FormControl>
-                      <Select
-                        onValueChange={field.onChange}
-                        defaultValue={field.value}
-                      >
-                        <SelectTrigger>
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent className="flex">
-                          {FEEDBACK_STATUS.map((status) => (
-                            <SelectItem key={status.value} value={status.value}>
-                              {status.label}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="type"
-                render={({ field }) => (
-                  <FormItem className="space-y-0">
-                    <FormLabel>Priority</FormLabel>
-                    <FormControl>
-                      <Select
-                        onValueChange={field.onChange}
-                        defaultValue={field.value}
-                      >
-                        <SelectTrigger className="capitalize">
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent className="flex">
-                          {FEEDBACK_TYPES.map((label) => (
-                            <SelectItem key={label.value} value={label.value}>
-                              {label.label}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-
-            <FormField
-              control={form.control}
-              name="content"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Feedback</FormLabel>
-                  <FormControl>
-                    <Textarea
-                      rows={10}
-                      placeholder="I would like to see..."
-                      className="resize-none"
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+          <FormField
+            control={form.control}
+            name="content"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Feedback</FormLabel>
+                <FormControl>
+                  <Textarea
+                    rows={10}
+                    placeholder="I would like to see..."
+                    className="resize-none"
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
 
-            <Button type="submit" disabled={isCreating || isUpdating}>
-              Submit
-            </Button>
-          </form>
-        </Form>
-      </ResponsiveModel>
+          <Button type="submit" disabled={isCreating || isUpdating}>
+            Submit
+          </Button>
+        </form>
+      </Form>
+    </ResponsiveModel>
   );
 };
 
diff --git a/apps/web/components/modals/input-modal.tsx b/apps/web/components/modals/input-modal.tsx
index 128f563..01166e0 100644
--- a/apps/web/components/modals/input-modal.tsx
+++ b/apps/web/components/modals/input-modal.tsx
@@ -1,17 +1,13 @@
 import { ChangeEvent, ReactNode, useState } from "react";
 
 import { Button, buttonVariants } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTrigger,
-} from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { toast } from "sonner";
+import ResponsiveModel, {
+  ResponsiveModelDescription,
+  ResponsiveModelTitle,
+} from "../responsive-model";
 
 type InputModalProps = {
   children: ReactNode;
@@ -55,35 +51,33 @@ const InputModal = ({
   };
 
   return (
-    <Dialog open={isOpen}>
-      <DialogTrigger asChild onClick={() => setIsOpen(true)}>
-        {children}
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader className="truncate">{header}</DialogHeader>
-        <DialogDescription>{description}</DialogDescription>
-        <Input
-          value={formValue.title}
-          name="title"
-          onChange={handleInputChange}
-        />
+    <ResponsiveModel
+      trigger={children}
+      asChild
+      open={isOpen}
+      onTriggerClick={() => setIsOpen(true)}
+    >
+      <ResponsiveModelTitle>{header}</ResponsiveModelTitle>
+      <ResponsiveModelDescription>{description}</ResponsiveModelDescription>
+      <Input
+        value={formValue.title}
+        name="title"
+        onChange={handleInputChange}
+      />
 
-        <Textarea
-          value={formValue.description}
-          name="description"
-          onChange={handleInputChange}
-        ></Textarea>
-        <DialogFooter>
-          <Button
-            className={buttonVariants()}
-            disabled={disabled}
-            onClick={handleConfirm}
-          >
-            Confirm
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+      <Textarea
+        value={formValue.description}
+        name="description"
+        onChange={handleInputChange}
+      />
+      <Button
+        className={buttonVariants({ className: "my-3" })}
+        disabled={disabled}
+        onClick={handleConfirm}
+      >
+        Confirm
+      </Button>
+    </ResponsiveModel>
   );
 };
 
diff --git a/apps/web/components/responsive-model.tsx b/apps/web/components/responsive-model.tsx
index 5acc09b..b7495aa 100644
--- a/apps/web/components/responsive-model.tsx
+++ b/apps/web/components/responsive-model.tsx
@@ -1,15 +1,24 @@
 import React from "react";
 import { useMedia } from "react-use";
-import { Dialog, DialogContent, DialogTitle } from "./ui/dialog";
-import { Drawer, DrawerContent, DrawerTitle } from "./ui/drawer";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+} from "./ui/dialog";
+import { Drawer, DrawerContent, DrawerDescription, DrawerTitle, DrawerTrigger } from "./ui/drawer";
 import { cn } from "@/lib/utils";
 
 type ResponsiveModelProps = {
-  open: boolean;
+  open?: boolean;
   // eslint-disable-next-line no-unused-vars
-  onOpenChange: (open: boolean) => void;
+  onOpenChange?: (open: boolean) => void;
   children: React.ReactNode;
   className?: string;
+  trigger?: React.ReactNode;
+  asChild?: boolean;
+  onTriggerClick?: () => void;
 };
 
 const ResponsiveModel = ({
@@ -17,26 +26,29 @@ const ResponsiveModel = ({
   onOpenChange,
   open,
   className,
+  asChild,
+  trigger,
+  onTriggerClick,
 }: ResponsiveModelProps) => {
   const isDesktop = useMedia("(min-width: 1024px)", true);
 
-  console.log(open);
-
-  const handleOpenChange = (open: boolean) => {
-    console.log("open", open);
-
-    onOpenChange(open);
-  };
+  const handleOpenChange = (open: boolean) => onOpenChange?.(open);
 
   if (isDesktop)
     return (
       <Dialog open={open} onOpenChange={handleOpenChange}>
+        {trigger && (
+          <DialogTrigger asChild={asChild} onClick={onTriggerClick}>
+            {trigger}
+          </DialogTrigger>
+        )}
         <DialogContent className={className}>{children}</DialogContent>
       </Dialog>
     );
 
   return (
     <Drawer open={open} onOpenChange={handleOpenChange}>
+      {trigger && <DrawerTrigger asChild={asChild}>{trigger}</DrawerTrigger>}
       <DrawerContent
         className={cn(
           "overflow-y-auto hide-scrollbar max-h-[85vh] px-5 pb-5",
@@ -56,11 +68,30 @@ export const ResponsiveModelTitle = ({
 }: {
   children: React.ReactNode;
 }) => {
+  const className = "my-2 truncate";
   const isDesktop = useMedia("(min-width: 1024px)", true);
 
   if (isDesktop) {
-    return <DialogTitle>{children}</DialogTitle>;
+    return <DialogTitle className={className}>{children}</DialogTitle>;
   }
 
-  return <DrawerTitle>{children}</DrawerTitle>;
+  return <DrawerTitle className={className}>{children}</DrawerTitle>;
+};
+export const ResponsiveModelDescription = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const className = "my-2";
+  const isDesktop = useMedia("(min-width: 1024px)", true);
+
+  if (isDesktop) {
+    return (
+      <DialogDescription className={className}>{children}</DialogDescription>
+    );
+  }
+
+  return (
+    <DrawerDescription className={className}>{children}</DrawerDescription>
+  );
 };
diff --git a/apps/web/components/ui/date-picker.tsx b/apps/web/components/ui/date-picker.tsx
index 46afe23..9e1593a 100644
--- a/apps/web/components/ui/date-picker.tsx
+++ b/apps/web/components/ui/date-picker.tsx
@@ -21,7 +21,7 @@ type DatePickerProps = {
 export function DatePicker({ value, onSelect }: DatePickerProps) {
 
   return (
-    <Popover>
+    <Popover modal>
       <PopoverTrigger asChild>
         <Button
           variant={"outline"}
diff --git a/packages/backend/convex/_generated/api.d.ts b/packages/backend/convex/_generated/api.d.ts
index d5f73f2..c78416a 100644
--- a/packages/backend/convex/_generated/api.d.ts
+++ b/packages/backend/convex/_generated/api.d.ts
@@ -4,7 +4,6 @@
  *
  * THIS CODE IS AUTOMATICALLY GENERATED.
  *
- * Generated by convex@1.14.4.
  * To regenerate, run `npx convex dev`.
  * @module
  */
diff --git a/packages/backend/convex/_generated/api.js b/packages/backend/convex/_generated/api.js
index bc6e0c9..3f9c482 100644
--- a/packages/backend/convex/_generated/api.js
+++ b/packages/backend/convex/_generated/api.js
@@ -4,7 +4,6 @@
  *
  * THIS CODE IS AUTOMATICALLY GENERATED.
  *
- * Generated by convex@1.14.4.
  * To regenerate, run `npx convex dev`.
  * @module
  */
diff --git a/packages/backend/convex/_generated/dataModel.d.ts b/packages/backend/convex/_generated/dataModel.d.ts
index 22136a6..8541f31 100644
--- a/packages/backend/convex/_generated/dataModel.d.ts
+++ b/packages/backend/convex/_generated/dataModel.d.ts
@@ -4,7 +4,6 @@
  *
  * THIS CODE IS AUTOMATICALLY GENERATED.
  *
- * Generated by convex@1.14.4.
  * To regenerate, run `npx convex dev`.
  * @module
  */
diff --git a/packages/backend/convex/_generated/server.d.ts b/packages/backend/convex/_generated/server.d.ts
index 503ca39..7f337a4 100644
--- a/packages/backend/convex/_generated/server.d.ts
+++ b/packages/backend/convex/_generated/server.d.ts
@@ -4,7 +4,6 @@
  *
  * THIS CODE IS AUTOMATICALLY GENERATED.
  *
- * Generated by convex@1.14.4.
  * To regenerate, run `npx convex dev`.
  * @module
  */
diff --git a/packages/backend/convex/_generated/server.js b/packages/backend/convex/_generated/server.js
index 8b3d7f5..566d485 100644
--- a/packages/backend/convex/_generated/server.js
+++ b/packages/backend/convex/_generated/server.js
@@ -4,7 +4,6 @@
  *
  * THIS CODE IS AUTOMATICALLY GENERATED.
  *
- * Generated by convex@1.14.4.
  * To regenerate, run `npx convex dev`.
  * @module
  */