refactor: replace Dialog components with ResponsiveModel for improved…

… UI consistency
vignesh-gupta · Dec 4, 2024 · 8111d86 · 8111d86
1 parent e28ee75
commit 8111d86
Show file tree

Hide file tree

Showing 16 changed files with 305 additions and 313 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
+export default NoOrg;
diff --git 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>
   );
 };