From 52560f729d68abe7978d4d47676f0124b10ad425 Mon Sep 17 00:00:00 2001
From: dakshesh14 <dakshesh.jain14@gmail.com>
Date: Wed, 27 Sep 2023 12:59:08 +0530
Subject: [PATCH 1/4] style: calender quick-add same width as single date

---
 .../inline-create-issue-form.tsx              |  6 ++---
 .../core/views/calendar-view/single-date.tsx  | 25 +++++++------------
 2 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/web/components/core/views/calendar-view/inline-create-issue-form.tsx b/web/components/core/views/calendar-view/inline-create-issue-form.tsx
index 832a6add93b..56cb8d4a465 100644
--- a/web/components/core/views/calendar-view/inline-create-issue-form.tsx
+++ b/web/components/core/views/calendar-view/inline-create-issue-form.tsx
@@ -67,7 +67,7 @@ const InlineInput = () => {
         {...register("name", {
           required: "Issue title is required.",
         })}
-        className="w-full px-2 py-1.5 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
+        className="w-full pr-2 py-1.5 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
       />
     </>
   );
@@ -84,9 +84,9 @@ export const CalendarInlineCreateIssueForm: React.FC<Props> = (props) => {
     <>
       <div
         ref={ref}
-        className={`absolute w-60 top-5 transition-all z-20 ${
+        className={`absolute top-10 transition-all z-20 w-full max-w-[calc(100%-1.25rem)] ${
           isOpen ? "opacity-100 scale-100" : "opacity-0 pointer-events-none scale-95"
-        } right-0`}
+        } right-2.5`}
       >
         <InlineCreateIssueFormWrapper
           {...props}
diff --git a/web/components/core/views/calendar-view/single-date.tsx b/web/components/core/views/calendar-view/single-date.tsx
index 3e38155f1b0..00930fa638d 100644
--- a/web/components/core/views/calendar-view/single-date.tsx
+++ b/web/components/core/views/calendar-view/single-date.tsx
@@ -83,23 +83,16 @@ export const SingleCalendarDate: React.FC<Props> = (props) => {
               </Draggable>
             ))}
 
-          <div
-            className="fixed top-0 left-0 z-50"
-            style={{
-              transform: `translate(${formPosition.x}px, ${formPosition.y}px)`,
+          <CalendarInlineCreateIssueForm
+            isOpen={isCreateIssueFormOpen}
+            dependencies={[showWeekEnds]}
+            handleClose={() => setIsCreateIssueFormOpen(false)}
+            prePopulatedData={{
+              target_date: date.date,
+              ...(cycleId && { cycle: cycleId.toString() }),
+              ...(moduleId && { module: moduleId.toString() }),
             }}
-          >
-            <CalendarInlineCreateIssueForm
-              isOpen={isCreateIssueFormOpen}
-              dependencies={[showWeekEnds]}
-              handleClose={() => setIsCreateIssueFormOpen(false)}
-              prePopulatedData={{
-                target_date: date.date,
-                ...(cycleId && { cycle: cycleId.toString() }),
-                ...(moduleId && { module: moduleId.toString() }),
-              }}
-            />
-          </div>
+          />
 
           {totalIssues > 4 && (
             <button

From 2aeb77085626cc8035ea67e1fd4eb12ab86df193 Mon Sep 17 00:00:00 2001
From: dakshesh14 <dakshesh.jain14@gmail.com>
Date: Wed, 27 Sep 2023 13:04:29 +0530
Subject: [PATCH 2/4] style: margin bottom in quick-add in spreadsheet view

---
 .../spreadsheet-view/spreadsheet-view.tsx      | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
index 66dc97f2c8a..086a67fa40d 100644
--- a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
+++ b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
@@ -288,14 +288,16 @@ export const SpreadsheetView: React.FC<Props> = ({
           </div>
 
           <div>
-            <ListInlineCreateIssueForm
-              isOpen={isInlineCreateIssueFormOpen}
-              handleClose={() => setIsInlineCreateIssueFormOpen(false)}
-              prePopulatedData={{
-                ...(cycleId && { cycle: cycleId.toString() }),
-                ...(moduleId && { module: moduleId.toString() }),
-              }}
-            />
+            <div className="mb-3 z-50 sticky bottom-0 left-0">
+              <ListInlineCreateIssueForm
+                isOpen={isInlineCreateIssueFormOpen}
+                handleClose={() => setIsInlineCreateIssueFormOpen(false)}
+                prePopulatedData={{
+                  ...(cycleId && { cycle: cycleId.toString() }),
+                  ...(moduleId && { module: moduleId.toString() }),
+                }}
+              />
+            </div>
 
             {type === "issue"
               ? !disableUserActions &&

From 3ccf1cfbb252d3111287dfdc140d5e364bd9f101 Mon Sep 17 00:00:00 2001
From: dakshesh14 <dakshesh.jain14@gmail.com>
Date: Wed, 27 Sep 2023 14:31:44 +0530
Subject: [PATCH 3/4] fix: quick add opening in list-layout

---
 web/components/core/views/board-view/single-board.tsx  | 10 +++++++---
 .../core/views/inline-issue-create-wrapper.tsx         |  2 +-
 web/components/core/views/list-view/single-list.tsx    |  6 +++++-
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/web/components/core/views/board-view/single-board.tsx b/web/components/core/views/board-view/single-board.tsx
index 8f851527dbc..bdbfc27c29d 100644
--- a/web/components/core/views/board-view/single-board.tsx
+++ b/web/components/core/views/board-view/single-board.tsx
@@ -75,9 +75,7 @@ export const SingleBoard: React.FC<Props> = (props) => {
 
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disableUserActions;
 
-  const onCreateClick = () => {
-    setIsInlineCreateIssueFormOpen(true);
-
+  const scrollToBottom = () => {
     const boardListElement = document.getElementById(`board-list-${groupTitle}`);
 
     // timeout is needed because the animation
@@ -93,6 +91,11 @@ export const SingleBoard: React.FC<Props> = (props) => {
     }, 10);
   };
 
+  const onCreateClick = () => {
+    setIsInlineCreateIssueFormOpen(true);
+    scrollToBottom();
+  };
+
   return (
     <div className={`flex-shrink-0 ${!isCollapsed ? "" : "flex h-full flex-col w-96"}`}>
       <BoardHeader
@@ -201,6 +204,7 @@ export const SingleBoard: React.FC<Props> = (props) => {
                 <BoardInlineCreateIssueForm
                   isOpen={isInlineCreateIssueFormOpen}
                   handleClose={() => setIsInlineCreateIssueFormOpen(false)}
+                  onSuccess={() => scrollToBottom()}
                   prePopulatedData={{
                     ...(cycleId && { cycle: cycleId.toString() }),
                     ...(moduleId && { module: moduleId.toString() }),
diff --git a/web/components/core/views/inline-issue-create-wrapper.tsx b/web/components/core/views/inline-issue-create-wrapper.tsx
index ace407ae11b..ec5d8e79e01 100644
--- a/web/components/core/views/inline-issue-create-wrapper.tsx
+++ b/web/components/core/views/inline-issue-create-wrapper.tsx
@@ -197,7 +197,7 @@ export const InlineCreateIssueFormWrapper: React.FC<Props> = (props) => {
         )
     )
       .then(async (res) => {
-        mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params));
+        await mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params));
         if (formData.cycle && formData.cycle !== "")
           await addIssueToCycle(
             workspaceSlug.toString(),
diff --git a/web/components/core/views/list-view/single-list.tsx b/web/components/core/views/list-view/single-list.tsx
index 0c77c522295..03401839cbf 100644
--- a/web/components/core/views/list-view/single-list.tsx
+++ b/web/components/core/views/list-view/single-list.tsx
@@ -240,7 +240,11 @@ export const SingleList: React.FC<Props> = (props) => {
                 <button
                   type="button"
                   className="p-1  text-custom-text-200 hover:bg-custom-background-80"
-                  onClick={() => setIsCreateIssueFormOpen(true)}
+                  onClick={() => {
+                    if (isDraftIssuesPage || isMyIssuesPage || isProfileIssuesPage) {
+                      addIssueToGroup();
+                    } else setIsCreateIssueFormOpen(true);
+                  }}
                 >
                   <PlusIcon className="h-4 w-4" />
                 </button>

From 58fe5ac495f2387f50404325e64685121824410a Mon Sep 17 00:00:00 2001
From: dakshesh14 <dakshesh.jain14@gmail.com>
Date: Wed, 27 Sep 2023 14:44:20 +0530
Subject: [PATCH 4/4] style: reduced margin left

---
 .../core/views/calendar-view/inline-create-issue-form.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/components/core/views/calendar-view/inline-create-issue-form.tsx b/web/components/core/views/calendar-view/inline-create-issue-form.tsx
index 56cb8d4a465..8f070543be6 100644
--- a/web/components/core/views/calendar-view/inline-create-issue-form.tsx
+++ b/web/components/core/views/calendar-view/inline-create-issue-form.tsx
@@ -90,7 +90,7 @@ export const CalendarInlineCreateIssueForm: React.FC<Props> = (props) => {
       >
         <InlineCreateIssueFormWrapper
           {...props}
-          className="flex w-full p-1 px-1.5 rounded z-50 items-center gap-x-3 bg-custom-background-100 shadow-custom-shadow-sm transition-opacity"
+          className="flex w-full p-1 px-1.5 rounded z-50 items-center gap-x-2 bg-custom-background-100 shadow-custom-shadow-sm transition-opacity"
         >
           <InlineInput />
         </InlineCreateIssueFormWrapper>