From e00ae0b48a0b065acf0ea034df68552f62daf8dd Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Date: Wed, 27 Sep 2023 15:02:35 +0530
Subject: [PATCH] style: calender quick-add same width as single date (#2280)

* style: calender quick-add same width as single date

* style: margin bottom in quick-add in spreadsheet view

* fix: quick add opening in list-layout

* style: reduced margin left
---
 .../core/views/board-view/single-board.tsx    | 10 ++++---
 .../inline-create-issue-form.tsx              |  8 +++---
 .../core/views/calendar-view/single-date.tsx  | 26 +++++++------------
 .../views/inline-issue-create-wrapper.tsx     |  2 +-
 .../core/views/list-view/single-list.tsx      |  6 ++++-
 .../spreadsheet-view/spreadsheet-view.tsx     | 18 +++++++------
 6 files changed, 37 insertions(+), 33 deletions(-)

diff --git a/web/components/core/views/board-view/single-board.tsx b/web/components/core/views/board-view/single-board.tsx
index 8f851527d..bdbfc27c2 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/calendar-view/inline-create-issue-form.tsx b/web/components/core/views/calendar-view/inline-create-issue-form.tsx
index 832a6add9..8f070543b 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,13 +84,13 @@ 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}
-          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>
diff --git a/web/components/core/views/calendar-view/single-date.tsx b/web/components/core/views/calendar-view/single-date.tsx
index bee67b5cd..a67ca762b 100644
--- a/web/components/core/views/calendar-view/single-date.tsx
+++ b/web/components/core/views/calendar-view/single-date.tsx
@@ -80,23 +80,17 @@ 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
diff --git a/web/components/core/views/inline-issue-create-wrapper.tsx b/web/components/core/views/inline-issue-create-wrapper.tsx
index ace407ae1..ec5d8e79e 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 0c77c5222..03401839c 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>
diff --git a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
index 66dc97f2c..086a67fa4 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 &&