style: project select dropdown & modals ui improvement (#2491)

* style: project select dropdown ui improvement

* style: create/update cycle modal ui improvement

* style: create/update module modal ui improvement

* fix: build error

* style: input and textarea border improvement

* cycle and module modal ui improvement

* style: cycle and module modal ui improvement

packages/ui/src/form-fields/input.tsx

@@ -28,7 +28,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
       name={name}
       className={`block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${
         mode === "primary"
-          ? "rounded-md border border-custom-border-200"
+          ? "rounded-md border-[0.5px] border-custom-border-200"
           : mode === "transparent"
           ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary"
           : mode === "true-transparent"

packages/ui/src/form-fields/textarea.tsx

@@ -53,7 +53,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
         cols={cols}
         className={`no-scrollbar w-full bg-transparent placeholder-custom-text-400 px-3 py-2 outline-none ${
           mode === "primary"
-            ? "rounded-md border border-custom-border-200"
+            ? "rounded-md border-[0.5px] border-custom-border-200"
             : mode === "transparent"
             ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme"
             : ""

web/components/cycles/cycle-create-edit-modal.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from "react";
+import { Fragment, useEffect, useState } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
 // components
@@ -20,8 +20,10 @@ interface ICycleCreateEdit {
 
 export const CycleCreateEditModal: React.FC<ICycleCreateEdit> = observer((props) => {
   const { modal, modalClose, cycle = null, onSubmit, workspaceSlug, projectId } = props;
+  const [activeProject, setActiveProject] = useState<string | null>(null);
 
-  const { cycle: cycleStore } = useMobxStore();
+  const { project: projectStore, cycle: cycleStore } = useMobxStore();
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
 
   const { setToastAlert } = useToast();
 
@@ -96,6 +98,27 @@ export const CycleCreateEditModal: React.FC<ICycleCreateEdit> = observer((props)
       });
   };
 
+  useEffect(() => {
+    // if modal is closed, reset active project to null
+    // and return to avoid activeProject being set to some other project
+    if (!modal) {
+      setActiveProject(null);
+      return;
+    }
+
+    // if data is present, set active project to the project of the
+    // issue. This has more priority than the project in the url.
+    if (cycle && cycle.project) {
+      setActiveProject(cycle.project);
+      return;
+    }
+
+    // if data is not present, set active project to the project
+    // in the url. This has the least priority.
+    if (projects && projects.length > 0 && !activeProject)
+      setActiveProject(projects?.find((p) => p.id === projectId)?.id ?? projects?.[0].id ?? null);
+  }, [activeProject, cycle, projectId, projects, modal]);
+
   return (
     <Transition.Root show={modal} as={Fragment}>
       <Dialog as="div" className="relative z-20" onClose={modalClose}>
@@ -123,7 +146,13 @@ export const CycleCreateEditModal: React.FC<ICycleCreateEdit> = observer((props)
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
               <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl p-5">
-                <CycleForm handleFormSubmit={formSubmit} handleClose={modalClose} data={cycle} />
+                <CycleForm
+                  handleFormSubmit={formSubmit}
+                  handleClose={modalClose}
+                  projectId={activeProject ?? ""}
+                  setActiveProject={setActiveProject}
+                  data={cycle}
+                />
               </Dialog.Panel>
             </Transition.Child>
           </div>

web/components/cycles/form.tsx

@@ -2,17 +2,20 @@ import { Controller, useForm } from "react-hook-form";
 // ui
 import { Button, Input, TextArea } from "@plane/ui";
 import { DateSelect } from "components/ui";
+import { IssueProjectSelect } from "components/issues/select";
 // types
 import { ICycle } from "types";
 
 type Props = {
   handleFormSubmit: (values: Partial<ICycle>) => Promise<void>;
   handleClose: () => void;
+  projectId: string;
+  setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
   data?: ICycle | null;
 };
 
 export const CycleForm: React.FC<Props> = (props) => {
-  const { handleFormSubmit, handleClose, data } = props;
+  const { handleFormSubmit, handleClose, projectId, setActiveProject, data } = props;
   // form data
   const {
     formState: { errors, isSubmitting },
@@ -21,6 +24,7 @@ export const CycleForm: React.FC<Props> = (props) => {
     watch,
   } = useForm<ICycle>({
     defaultValues: {
+      project: projectId,
       name: data?.name || "",
       description: data?.description || "",
       start_date: data?.start_date || null,
@@ -40,8 +44,24 @@ export const CycleForm: React.FC<Props> = (props) => {
   return (
     <form onSubmit={handleSubmit(handleFormSubmit)}>
       <div className="space-y-5">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">{status ? "Update" : "Create"} Cycle</h3>
+        <div className="flex items-center gap-x-3">
+          <Controller
+            control={control}
+            name="project"
+            render={({ field: { value, onChange } }) => (
+              <IssueProjectSelect
+                value={value}
+                onChange={(val: string) => {
+                  onChange(val);
+                  setActiveProject(val);
+                }}
+              />
+            )}
+          />
+          <h3 className="text-xl font-medium leading-6 text-custom-text-200">{status ? "Update" : "New"} Cycle</h3>
+        </div>
         <div className="space-y-3">
+          <div className="mt-2 space-y-3">
             <div>
               <Controller
                 name="name"
@@ -58,9 +78,10 @@ export const CycleForm: React.FC<Props> = (props) => {
                     id="cycle_name"
                     name="name"
                     type="text"
-                  placeholder="Cycle Name"
+                    placeholder="Cycle Title"
-                  className="resize-none text-xl w-full p-2"
+                    className="resize-none w-full placeholder:text-sm placeholder:font-medium focus:border-blue-400"
                     value={value}
+                    inputSize="md"
                     onChange={onChange}
                     hasError={Boolean(errors?.name)}
                   />
@@ -75,8 +96,8 @@ export const CycleForm: React.FC<Props> = (props) => {
                   <TextArea
                     id="cycle_description"
                     name="description"
-                  placeholder="Description"
+                    placeholder="Description..."
-                  className="h-32 resize-none text-sm"
+                    className="h-24 w-full resize-none text-sm"
                     hasError={Boolean(errors?.description)}
                     value={value}
                     onChange={onChange}
@@ -113,7 +134,8 @@ export const CycleForm: React.FC<Props> = (props) => {
             </div>
           </div>
         </div>
-      <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-custom-border-200 px-5 pt-5">
+      </div>
+      <div className="flex items-center justify-end gap-2 pt-5 mt-5 border-t-[0.5px] border-custom-border-200 ">
         <Button variant="neutral-primary" onClick={handleClose}>
           Cancel
         </Button>

web/components/cycles/modal.tsx

@@ -1,10 +1,11 @@
-import { Fragment } from "react";
+import React, { useEffect, useState } from "react";
 import { mutate } from "swr";
 import { Dialog, Transition } from "@headlessui/react";
 // services
 import { CycleService } from "services/cycle.service";
 // hooks
 import useToast from "hooks/use-toast";
+import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { CycleForm } from "components/cycles";
 // helper
@@ -35,6 +36,10 @@ const cycleService = new CycleService();
 
 export const CreateUpdateCycleModal: React.FC<CycleModalProps> = (props) => {
   const { isOpen, handleClose, data, workspaceSlug, projectId } = props;
+  const [activeProject, setActiveProject] = useState<string | null>(null);
+
+  const { project: projectStore } = useMobxStore();
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
 
   const { setToastAlert } = useToast();
 
@@ -181,11 +186,32 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = (props) => {
       });
   };
 
+  useEffect(() => {
+    // if modal is closed, reset active project to null
+    // and return to avoid activeProject being set to some other project
+    if (!isOpen) {
+      setActiveProject(null);
+      return;
+    }
+
+    // if data is present, set active project to the project of the
+    // issue. This has more priority than the project in the url.
+    if (data && data.project) {
+      setActiveProject(data.project);
+      return;
+    }
+
+    // if data is not present, set active project to the project
+    // in the url. This has the least priority.
+    if (projects && projects.length > 0 && !activeProject)
+      setActiveProject(projects?.find((p) => p.id === projectId)?.id ?? projects?.[0].id ?? null);
+  }, [activeProject, data, projectId, projects, isOpen]);
+
   return (
-    <Transition.Root show={isOpen} as={Fragment}>
+    <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
-          as={Fragment}
+          as={React.Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0"
           enterTo="opacity-100"
@@ -195,10 +221,11 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = (props) => {
         >
           <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
-        <div className="fixed inset-0 z-20 overflow-y-auto">
+
-          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+        <div className="fixed inset-0 z-10 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}
+              as={React.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"
@@ -206,8 +233,14 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = (props) => {
               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="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
-                <CycleForm handleFormSubmit={handleFormSubmit} handleClose={handleClose} data={data} />
+                <CycleForm
+                  handleFormSubmit={handleFormSubmit}
+                  handleClose={handleClose}
+                  projectId={activeProject ?? ""}
+                  setActiveProject={setActiveProject}
+                  data={data}
+                />
               </Dialog.Panel>
             </Transition.Child>
           </div>

web/components/issues/select/project.tsx

@@ -1,13 +1,16 @@
+import React, { useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
+// popper js
+import { usePopper } from "react-popper";
 // ui
-import { CustomSelect } from "@plane/ui";
+import { Combobox } from "@headlessui/react";
 // helpers
 import { renderEmoji } from "helpers/emoji.helper";
 // icons
-import { Clipboard } from "lucide-react";
+import { Check, Clipboard, Search } from "lucide-react";
 
 export interface IssueProjectSelectProps {
   value: string;
@@ -16,23 +19,43 @@ export interface IssueProjectSelectProps {
 
 export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = observer((props) => {
   const { value, onChange } = props;
+  const [query, setQuery] = useState("");
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom-start",
+  });
+
   const { project: projectStore } = useMobxStore();
 
   const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
 
   const selectedProject = projects?.find((i) => i.id === value);
 
-  return (
+  const options = projects?.map((project) => ({
-    <CustomSelect
+    value: project.id,
-      value={value}
+    query: project.name,
-      label={
+    content: (
-        selectedProject ? (
+      <div className="flex items-center gap-1.5 truncate">
+        <span className="grid place-items-center flex-shrink-0">
+          {project.emoji ? renderEmoji(project.emoji) : project.icon_prop ? renderEmoji(project.icon_prop) : null}
+        </span>
+        <span className="truncate flex-grow">{project.name}</span>
+      </div>
+    ),
+  }));
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
+  const label = selectedProject ? (
     <div className="flex items-center gap-1.5">
-            <span className="grid place-items-center">
+      <span className="flex items-center h-3 w-3">
         {selectedProject.emoji
           ? renderEmoji(selectedProject.emoji)
           : selectedProject.icon_prop
@@ -44,35 +67,77 @@ export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = observer((p
   ) : (
     <>
       <Clipboard className="h-3 w-3" />
-            <div>Select Project</div>
+      <span>Select Project</span>
     </>
-        )
+  );
-      }
+  return (
+    <Combobox
+      as="div"
+      className={`flex-shrink-0 text-left`}
+      value={value}
       onChange={(val: string) => onChange(val)}
-      noChevron
+      disabled={false}
     >
-      {projects ? (
+      <Combobox.Button as={React.Fragment}>
-        projects.length > 0 ? (
+        <button
-          projects.map((project) => (
+          ref={setReferenceElement}
-            <CustomSelect.Option key={project.id} value={project.id}>
+          type="button"
-              <div className="flex items-center gap-1.5">
+          className={`flex items-center justify-between gap-1 w-full text-xs px-2 py-1 rounded-md shadow-sm  text-custom-text-200 border border-custom-border-300 duration-300 focus:outline-none ${
-                <span className="grid place-items-center">
+            false ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
-                  {project.emoji
+          }`}
-                    ? renderEmoji(project.emoji)
+        >
-                    : project.icon_prop
+          {label}
-                    ? renderEmoji(project.icon_prop)
+        </button>
-                    : null}
+      </Combobox.Button>
-                </span>
+      <Combobox.Options>
-                <>{project.name}</>
+        <div
+          className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1`}
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
+            <Search className="h-3.5 w-3.5 text-custom-text-300" />
+            <Combobox.Input
+              className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search"
+              displayValue={(assigned: any) => assigned?.name}
+            />
           </div>
-            </CustomSelect.Option>
+          <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
+            {filteredOptions ? (
+              filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <Combobox.Option
+                    key={option.value}
+                    value={option.value}
+                    className={({ active, selected }) =>
+                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                        active && !selected ? "bg-custom-background-80" : ""
+                      } w-full truncate ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        {option.content}
+                        {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                      </>
+                    )}
+                  </Combobox.Option>
                 ))
               ) : (
-          <p className="text-gray-400">No projects found!</p>
+                <span className="flex items-center gap-2 p-1">
+                  <p className="text-left text-custom-text-200 ">No matching results</p>
+                </span>
               )
             ) : (
-        <div className="px-2 text-sm text-custom-text-200">Loading...</div>
+              <p className="text-center text-custom-text-200">Loading...</p>
             )}
-    </CustomSelect>
+          </div>
+        </div>
+      </Combobox.Options>
+    </Combobox>
   );
 });

web/components/modules/form.tsx

@@ -7,11 +7,14 @@ import { DateSelect } from "components/ui";
 import { Button, Input, TextArea } from "@plane/ui";
 // types
 import { IModule } from "types";
+import { IssueProjectSelect } from "components/issues/select";
 
 type Props = {
   handleFormSubmit: (values: Partial<IModule>) => Promise<void>;
   handleClose: () => void;
   status: boolean;
+  projectId: string;
+  setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
   data?: IModule;
 };
 
@@ -23,7 +26,14 @@ const defaultValues: Partial<IModule> = {
   members_list: [],
 };
 
-export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status, data }) => {
+export const ModuleForm: React.FC<Props> = ({
+  handleFormSubmit,
+  handleClose,
+  status,
+  projectId,
+  setActiveProject,
+  data,
+}) => {
   const {
     formState: { errors, isSubmitting },
     handleSubmit,
@@ -31,7 +41,14 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
     control,
     reset,
   } = useForm<IModule>({
-    defaultValues,
+    defaultValues: {
+      project: projectId,
+      name: data?.name || "",
+      description: data?.description || "",
+      status: data?.status || "backlog",
+      lead: data?.lead || null,
+      members_list: data?.members_list || [],
+    },
   });
 
   const handleCreateUpdateModule = async (formData: Partial<IModule>) => {
@@ -61,7 +78,23 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
   return (
     <form onSubmit={handleSubmit(handleCreateUpdateModule)}>
       <div className="space-y-5">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">{status ? "Update" : "Create"} Module</h3>
+        <div className="flex items-center gap-x-3">
+          <Controller
+            control={control}
+            name="project"
+            render={({ field: { value, onChange } }) => (
+              <IssueProjectSelect
+                value={value}
+                onChange={(val: string) => {
+                  onChange(val);
+                  setActiveProject(val);
+                }}
+              />
+            )}
+          />
+          <h3 className="text-xl font-medium leading-6 text-custom-text-200">{status ? "Update" : "New"} Module</h3>
+        </div>
+
         <div className="space-y-3">
           <div>
             <Controller
@@ -83,8 +116,8 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
                   onChange={onChange}
                   ref={ref}
                   hasError={Boolean(errors.name)}
-                  placeholder="Title"
+                  placeholder="Module Title"
-                  className="resize-none text-xl w-full"
+                  className="resize-none w-full placeholder:text-sm placeholder:font-medium focus:border-blue-400"
                 />
               )}
             />
@@ -98,9 +131,9 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
                   id="description"
                   name="description"
                   value={value}
-                  placeholder="Description"
                   onChange={onChange}
-                  className="h-32 resize-none text-sm"
+                  placeholder="Description..."
+                  className="h-24 w-full resize-none text-sm"
                   hasError={Boolean(errors?.description)}
                 />
               )}
@@ -149,7 +182,7 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
           </div>
         </div>
       </div>
-      <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-custom-border-200 px-5 pt-5">
+      <div className="flex items-center justify-end gap-2 pt-5 mt-5 border-t-[0.5px] border-custom-border-200">
         <Button variant="neutral-primary" onClick={handleClose}>
           Cancel
         </Button>

web/components/modules/modal.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from "react";
+import React, { useEffect, useState } from "react";
 import { mutate } from "swr";
 import { useForm } from "react-hook-form";
 import { Dialog, Transition } from "@headlessui/react";
@@ -12,6 +12,7 @@ import useToast from "hooks/use-toast";
 import type { IUser, IModule } from "types";
 // fetch-keys
 import { MODULE_LIST } from "constants/fetch-keys";
+import { useMobxStore } from "lib/mobx/store-provider";
 
 type Props = {
   isOpen: boolean;
@@ -34,6 +35,12 @@ const moduleService = new ModuleService();
 export const CreateUpdateModuleModal: React.FC<Props> = (props) => {
   const { isOpen, onClose, data, workspaceSlug, projectId } = props;
 
+  const [activeProject, setActiveProject] = useState<string | null>(null);
+
+  const { project: projectStore } = useMobxStore();
+
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
+
   const { setToastAlert } = useToast();
 
   const handleClose = () => {
@@ -110,11 +117,32 @@ export const CreateUpdateModuleModal: React.FC<Props> = (props) => {
     else await updateModule(payload);
   };
 
+  useEffect(() => {
+    // if modal is closed, reset active project to null
+    // and return to avoid activeProject being set to some other project
+    if (!isOpen) {
+      setActiveProject(null);
+      return;
+    }
+
+    // if data is present, set active project to the project of the
+    // issue. This has more priority than the project in the url.
+    if (data && data.project) {
+      setActiveProject(data.project);
+      return;
+    }
+
+    // if data is not present, set active project to the project
+    // in the url. This has the least priority.
+    if (projects && projects.length > 0 && !activeProject)
+      setActiveProject(projects?.find((p) => p.id === projectId)?.id ?? projects?.[0].id ?? null);
+  }, [activeProject, data, projectId, projects, isOpen]);
+
   return (
-    <Transition.Root show={isOpen} as={Fragment}>
+    <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
-          as={Fragment}
+          as={React.Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0"
           enterTo="opacity-100"
@@ -125,10 +153,10 @@ export const CreateUpdateModuleModal: React.FC<Props> = (props) => {
           <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
-        <div className="fixed inset-0 z-20 overflow-y-auto">
+        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+          <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
             <Transition.Child
-              as={Fragment}
+              as={React.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"
@@ -136,11 +164,13 @@ export const CreateUpdateModuleModal: React.FC<Props> = (props) => {
               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="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                 <ModuleForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
                   status={data ? true : false}
+                  projectId={activeProject ?? ""}
+                  setActiveProject={setActiveProject}
                   data={data}
                 />
               </Dialog.Panel>