From 0ff3aef9897b828aae3a186d236efa783dce1979 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Mon, 12 Aug 2024 17:15:51 +0530
Subject: [PATCH] fix: project modal shortcut

---
 .../command-palette/command-palette.tsx       | 16 +++--
 .../project/create-project-form.tsx           |  2 +-
 .../project/create-project-modal.tsx          | 61 +++++--------------
 3 files changed, 27 insertions(+), 52 deletions(-)

diff --git a/web/core/components/command-palette/command-palette.tsx b/web/core/components/command-palette/command-palette.tsx
index 099d53f909b..7427fabee83 100644
--- a/web/core/components/command-palette/command-palette.tsx
+++ b/web/core/components/command-palette/command-palette.tsx
@@ -212,7 +212,6 @@ export const CommandPalette: FC = observer(() => {
       toggleCreatePageModal,
       toggleCreateProjectModal,
       toggleCreateViewModal,
-      toggleShortcutModal,
     ]
   );
 
@@ -261,15 +260,18 @@ export const CommandPalette: FC = observer(() => {
         if (
           Object.keys(shortcutsList.global).includes(keyPressed) &&
           ((!projectId && performAnyProjectCreateActions()) || performProjectCreateActions())
-        )
+        ) {
           shortcutsList.global[keyPressed].action();
+        }
         // workspace authorized actions
         else if (
           Object.keys(shortcutsList.workspace).includes(keyPressed) &&
           workspaceSlug &&
           performWorkspaceCreateActions()
-        )
+        ) {
+          e.preventDefault();
           shortcutsList.workspace[keyPressed].action();
+        }
         // project authorized actions
         else if (
           Object.keys(shortcutsList.project).includes(keyPressed) &&
@@ -283,16 +285,18 @@ export const CommandPalette: FC = observer(() => {
       }
     },
     [
+      copyIssueUrlToClipboard,
+      isAnyModalOpen,
+      platform,
       performAnyProjectCreateActions,
-      performProjectCreateActions,
       performProjectBulkDeleteActions,
+      performProjectCreateActions,
       performWorkspaceCreateActions,
-      copyIssueUrlToClipboard,
-      isAnyModalOpen,
       projectId,
       setTrackElement,
       shortcutsList,
       toggleCommandPaletteModal,
+      toggleShortcutModal,
       toggleSidebar,
       workspaceSlug,
     ]
diff --git a/web/core/components/project/create-project-form.tsx b/web/core/components/project/create-project-form.tsx
index 53de7297964..9c929c7f122 100644
--- a/web/core/components/project/create-project-form.tsx
+++ b/web/core/components/project/create-project-form.tsx
@@ -391,7 +391,7 @@ export const CreateProjectForm: FC<Props> = observer((props) => {
           </div>
         </div>
 
-        <div className="flex justify-end gap-2 pt-4 border-t border-custom-border-100">
+        <div className="flex justify-end gap-2 py-4 border-t border-custom-border-100">
           <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={6}>
             Cancel
           </Button>
diff --git a/web/core/components/project/create-project-modal.tsx b/web/core/components/project/create-project-modal.tsx
index 5e8cf1895e7..780aa3d56bb 100644
--- a/web/core/components/project/create-project-modal.tsx
+++ b/web/core/components/project/create-project-modal.tsx
@@ -1,5 +1,6 @@
-import { useEffect, Fragment, FC, useState } from "react";
-import { Dialog, Transition } from "@headlessui/react";
+import { useEffect, FC, useState } from "react";
+// ui
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // components
 import { CreateProjectForm } from "./create-project-form";
 import { ProjectFeatureUpdate } from "./project-feature-update";
@@ -36,48 +37,18 @@ export const CreateProjectModal: FC<Props> = (props) => {
   };
 
   return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={onClose}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="w-full transform rounded-lg bg-custom-background-100 p-3 text-left shadow-custom-shadow-md transition-all sm:w-3/5 lg:w-1/2 xl:w-2/5">
-                {currentStep === EProjectCreationSteps.CREATE_PROJECT && (
-                  <CreateProjectForm
-                    setToFavorite={setToFavorite}
-                    workspaceSlug={workspaceSlug}
-                    onClose={onClose}
-                    handleNextStep={handleNextStep}
-                  />
-                )}
-                {currentStep === EProjectCreationSteps.FEATURE_SELECTION && (
-                  <ProjectFeatureUpdate projectId={createdProjectId} workspaceSlug={workspaceSlug} onClose={onClose} />
-                )}
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <ModalCore isOpen={isOpen} handleClose={onClose} position={EModalPosition.TOP} width={EModalWidth.XXL}>
+      {currentStep === EProjectCreationSteps.CREATE_PROJECT && (
+        <CreateProjectForm
+          setToFavorite={setToFavorite}
+          workspaceSlug={workspaceSlug}
+          onClose={onClose}
+          handleNextStep={handleNextStep}
+        />
+      )}
+      {currentStep === EProjectCreationSteps.FEATURE_SELECTION && (
+        <ProjectFeatureUpdate projectId={createdProjectId} workspaceSlug={workspaceSlug} onClose={onClose} />
+      )}
+    </ModalCore>
   );
 };