From 0d2c399555b93fa873e190eba8da9472f0e5c10e Mon Sep 17 00:00:00 2001
From: Lakhan Baheti <94619783+1akhanBaheti@users.noreply.github.com>
Date: Fri, 3 Nov 2023 19:17:50 +0530
Subject: [PATCH] style: quick add issue UI improvements in all the layouts
 (#2615)

* style: quick add issue UI improvements in all the layouts

* style: ui improvements

* style: quick add icon size

* chore: static sizes to tailwind classes

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
---
 .../calendar/inline-create-issue-form.tsx     | 23 ++++--------
 .../gantt/inline-create-issue-form.tsx        | 36 ++++++------------
 .../kanban/inline-create-issue-form.tsx       | 23 ++++--------
 .../issues/issue-layouts/list/block.tsx       |  2 +-
 .../list/inline-create-issue-form.tsx         | 37 ++++++++-----------
 .../spreadsheet/inline-create-issue-form.tsx  | 35 +++++++-----------
 6 files changed, 56 insertions(+), 100 deletions(-)

diff --git a/web/components/issues/issue-layouts/calendar/inline-create-issue-form.tsx b/web/components/issues/issue-layouts/calendar/inline-create-issue-form.tsx
index 18b76c449..deef5f1bc 100644
--- a/web/components/issues/issue-layouts/calendar/inline-create-issue-form.tsx
+++ b/web/components/issues/issue-layouts/calendar/inline-create-issue-form.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/router";
-import { Transition } from "@headlessui/react";
 import { useForm } from "react-hook-form";
 
 // store
@@ -66,7 +65,7 @@ const Inputs = (props: any) => {
 
   return (
     <>
-      <h4 className="text-sm font-medium leading-5 text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
+      <h4 className="text-xs leading-5 text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
       <input
         type="text"
         autoComplete="off"
@@ -74,7 +73,7 @@ const Inputs = (props: any) => {
         {...register("name", {
           required: "Issue title is required.",
         })}
-        className="w-full pr-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-xs font-medium leading-5 text-custom-text-200 outline-none"
       />
     </>
   );
@@ -181,15 +180,7 @@ export const CalendarInlineCreateIssueForm: React.FC<Props> = observer((props) =
 
   return (
     <>
-      <Transition
-        show={isOpen}
-        enter="transition ease-in-out duration-200 transform"
-        enterFrom="opacity-0 scale-95"
-        enterTo="opacity-100 scale-100"
-        leave="transition ease-in-out duration-200 transform"
-        leaveFrom="opacity-100 scale-100"
-        leaveTo="opacity-0 scale-95"
-      >
+      {isOpen && (
         <div
           ref={ref}
           className={`transition-all z-20 w-full ${
@@ -198,21 +189,21 @@ export const CalendarInlineCreateIssueForm: React.FC<Props> = observer((props) =
         >
           <form
             onSubmit={handleSubmit(onSubmitHandler)}
-            className="flex w-full px-1.5 border-[0.5px] border-custom-border-100 rounded z-50 items-center gap-x-2 bg-custom-background-100 shadow-custom-shadow-sm transition-opacity"
+            className="flex w-full px-2 border-[0.5px] border-custom-border-200 rounded z-50 items-center gap-x-2 bg-custom-background-100 shadow-custom-shadow-2xs transition-opacity"
           >
             <Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
           </form>
         </div>
-      </Transition>
+      )}
 
       {!isOpen && (
         <div className="hidden group-hover:block border-[0.5px] border-custom-border-200 rounded">
           <button
             type="button"
-            className="w-full flex items-center gap-x-[6px] text-custom-primary-100 px-1 py-1.5 rounded-md"
+            className="w-full flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1.5 rounded-md"
             onClick={() => setIsOpen(true)}
           >
-            <PlusIcon className="h-4 w-4" />
+            <PlusIcon className="h-3.5 w-3.5 stroke-2" />
             <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
           </button>
         </div>
diff --git a/web/components/issues/issue-layouts/gantt/inline-create-issue-form.tsx b/web/components/issues/issue-layouts/gantt/inline-create-issue-form.tsx
index bcdd1ba13..8ce451e2b 100644
--- a/web/components/issues/issue-layouts/gantt/inline-create-issue-form.tsx
+++ b/web/components/issues/issue-layouts/gantt/inline-create-issue-form.tsx
@@ -1,25 +1,21 @@
 import { useEffect, useState, useRef } from "react";
 import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
-import { Transition } from "@headlessui/react";
-import { PlusIcon } from "lucide-react";
-
-// store
 import { observer } from "mobx-react-lite";
+import { PlusIcon } from "lucide-react";
+// mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
-
-// constants
-import { createIssuePayload } from "constants/issue";
-
 // hooks
 import useToast from "hooks/use-toast";
 import useKeypress from "hooks/use-keypress";
 import useProjectDetails from "hooks/use-project-details";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
-
+// helpers
+import { renderDateFormat } from "helpers/date-time.helper";
 // types
 import { IIssue } from "types";
-import { renderDateFormat } from "helpers/date-time.helper";
+// constants
+import { createIssuePayload } from "constants/issue";
 
 type Props = {
   prePopulatedData?: Partial<IIssue>;
@@ -149,25 +145,17 @@ export const GanttInlineCreateIssueForm: React.FC<Props> = observer((props) => {
 
   return (
     <>
-      <Transition
-        show={isOpen}
-        enter="transition ease-in-out duration-200 transform"
-        enterFrom="opacity-0 scale-95"
-        enterTo="opacity-100 scale-100"
-        leave="transition ease-in-out duration-200 transform"
-        leaveFrom="opacity-100 scale-100"
-        leaveTo="opacity-0 scale-95"
-      >
+      {isOpen && (
         <form
           ref={ref}
-          className="flex py-3 px-4 border-[0.5px] border-custom-border-100 mr-2.5 items-center rounded gap-x-2 bg-custom-background-100 shadow-custom-shadow-sm"
+          className="flex py-3 px-2 border-[0.5px] border-custom-border-100 mr-2.5 items-center rounded gap-x-2 bg-custom-background-100 shadow-custom-shadow-2xs"
           onSubmit={handleSubmit(onSubmitHandler)}
         >
-          <div className="w-[14px] h-[14px] rounded-full border border-custom-border-1000 flex-shrink-0" />
-          <h4 className="text-sm text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
+          <div className="w-3 h-3 rounded-full border border-custom-border-1000 flex-shrink-0" />
+          <h4 className="text-xs text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
           <Inputs register={register} setFocus={setFocus} />
         </form>
-      </Transition>
+      )}
 
       {isOpen && (
         <p className="text-xs ml-3 mt-3 italic text-custom-text-200">
@@ -181,7 +169,7 @@ export const GanttInlineCreateIssueForm: React.FC<Props> = observer((props) => {
           className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
           onClick={() => setIsOpen(true)}
         >
-          <PlusIcon className="h-4 w-4" />
+          <PlusIcon className="h-3.5 w-3.5 stroke-2" />
           <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
         </button>
       )}
diff --git a/web/components/issues/issue-layouts/kanban/inline-create-issue-form.tsx b/web/components/issues/issue-layouts/kanban/inline-create-issue-form.tsx
index 764c8a7c6..750606ebb 100644
--- a/web/components/issues/issue-layouts/kanban/inline-create-issue-form.tsx
+++ b/web/components/issues/issue-layouts/kanban/inline-create-issue-form.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useState, useRef } from "react";
 import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
-import { Transition } from "@headlessui/react";
 import { PlusIcon } from "lucide-react";
 // store
 import { observer } from "mobx-react-lite";
@@ -39,7 +38,7 @@ const Inputs = (props: any) => {
 
   return (
     <div>
-      <h4 className="text-sm font-medium leading-5 text-custom-text-300">{projectDetails?.identifier ?? "..."}</h4>
+      <h4 className="text-xs font-medium leading-5 text-custom-text-300">{projectDetails?.identifier ?? "..."}</h4>
       <input
         autoComplete="off"
         placeholder="Issue Title"
@@ -151,26 +150,18 @@ export const BoardInlineCreateIssueForm: React.FC<Props> = observer((props) => {
 
   return (
     <div>
-      <Transition
-        show={isOpen}
-        enter="transition ease-in-out duration-200 transform"
-        enterFrom="opacity-0 scale-95"
-        enterTo="opacity-100 scale-100"
-        leave="transition ease-in-out duration-200 transform"
-        leaveFrom="opacity-100 scale-100"
-        leaveTo="opacity-0 scale-95"
-      >
+      {isOpen && (
         <form
           ref={ref}
           onSubmit={handleSubmit(onSubmitHandler)}
-          className="flex flex-col border-[0.5px] border-custom-border-100 justify-between gap-1.5 group/card relative select-none px-3.5 py-3 h-[118px] mb-3 rounded bg-custom-background-100 shadow-custom-shadow-sm"
+          className="flex flex-col border-[0.5px] border-custom-border-100 justify-between gap-1.5 group/card relative select-none px-3.5 py-3 h-[118px] mb-3 mx-1.5 rounded bg-custom-background-300 shadow-custom-shadow-sm"
         >
           <Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
         </form>
-      </Transition>
+      )}
 
       {isOpen && (
-        <p className="text-xs ml-3 italic text-custom-text-200">
+        <p className="text-xs ml-3 italic mb-2 text-custom-text-200">
           Press {"'"}Enter{"'"} to add another issue
         </p>
       )}
@@ -178,10 +169,10 @@ export const BoardInlineCreateIssueForm: React.FC<Props> = observer((props) => {
       {!isOpen && (
         <button
           type="button"
-          className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
+          className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-3 rounded-md"
           onClick={() => setIsOpen(true)}
         >
-          <PlusIcon className="h-4 w-4" />
+          <PlusIcon className="h-3.5 w-3.5 stroke-2" />
           <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
         </button>
       )}
diff --git a/web/components/issues/issue-layouts/list/block.tsx b/web/components/issues/issue-layouts/list/block.tsx
index 80ebea869..41dbe1acb 100644
--- a/web/components/issues/issue-layouts/list/block.tsx
+++ b/web/components/issues/issue-layouts/list/block.tsx
@@ -26,7 +26,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
     <>
       <div className="text-sm p-3 relative bg-custom-background-100 flex items-center gap-3">
         {display_properties && display_properties?.key && (
-          <div className="flex-shrink-0 text-xs text-custom-text-300">
+          <div className="flex-shrink-0 text-xs text-custom-text-300 font-medium">
             {issue?.project_detail?.identifier}-{issue.sequence_id}
           </div>
         )}
diff --git a/web/components/issues/issue-layouts/list/inline-create-issue-form.tsx b/web/components/issues/issue-layouts/list/inline-create-issue-form.tsx
index 761fd7f9e..effc96acb 100644
--- a/web/components/issues/issue-layouts/list/inline-create-issue-form.tsx
+++ b/web/components/issues/issue-layouts/list/inline-create-issue-form.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useState, useRef } from "react";
 import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
-import { Transition } from "@headlessui/react";
 
 // hooks
 import useToast from "hooks/use-toast";
@@ -39,7 +38,7 @@ const Inputs = (props: any) => {
 
   return (
     <>
-      <h4 className="text-sm font-medium leading-5 text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
+      <h4 className="text-xs font-medium text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
       <input
         type="text"
         autoComplete="off"
@@ -150,39 +149,33 @@ export const ListInlineCreateIssueForm: React.FC<Props> = observer((props) => {
 
   return (
     <div className="bg-custom-background-100">
-      <Transition
-        show={isOpen}
-        enter="transition ease-in-out duration-200 transform"
-        enterFrom="opacity-0 scale-95"
-        enterTo="opacity-100 scale-100"
-        leave="transition ease-in-out duration-200 transform"
-        leaveFrom="opacity-100 scale-100"
-        leaveTo="opacity-0 scale-95"
-      >
+      {isOpen && (
         <form
           ref={ref}
           onSubmit={handleSubmit(onSubmitHandler)}
-          className="flex border-[0.5px] border-t-0 border-custom-border-100 px-4 items-center gap-x-5 bg-custom-background-100 shadow-custom-shadow-sm z-10"
+          className="absolute flex items-center gap-x-3 border-[0.5px] w-full border-t-0 border-custom-border-100 px-3 bg-custom-background-100 shadow-custom-shadow-sm z-10"
         >
           <Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
         </form>
-      </Transition>
+      )}
 
       {isOpen && (
-        <p className="text-xs ml-3 mt-3 italic text-custom-text-200">
+        <p className="text-xs ml-3 my-3 mt-14 italic text-custom-text-200">
           Press {"'"}Enter{"'"} to add another issue
         </p>
       )}
 
       {!isOpen && (
-        <button
-          type="button"
-          className="flex items-center gap-x-[6px] text-custom-primary-100 px-3 py-1 rounded-md"
-          onClick={() => setIsOpen(true)}
-        >
-          <PlusIcon className="h-3 w-3" />
-          <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
-        </button>
+        <div className="w-full border-t-[0.5px] border-custom-border-200">
+          <button
+            type="button"
+            className="flex items-center gap-x-[6px] text-custom-primary-100 p-3"
+            onClick={() => setIsOpen(true)}
+          >
+            <PlusIcon className="h-3.5 w-3.5 stroke-2" />
+            <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+          </button>
+        </div>
       )}
     </div>
   );
diff --git a/web/components/issues/issue-layouts/spreadsheet/inline-create-issue-form.tsx b/web/components/issues/issue-layouts/spreadsheet/inline-create-issue-form.tsx
index 5284d64e4..269ad5538 100644
--- a/web/components/issues/issue-layouts/spreadsheet/inline-create-issue-form.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/inline-create-issue-form.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useState, useRef } from "react";
 import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
-import { Transition } from "@headlessui/react";
 
 // hooks
 import useToast from "hooks/use-toast";
@@ -39,7 +38,7 @@ const Inputs = (props: any) => {
 
   return (
     <>
-      <h4 className="text-sm font-medium leading-5 text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
+      <h4 className="text-xs w-20 leading-5 text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
       <input
         type="text"
         autoComplete="off"
@@ -47,7 +46,7 @@ const Inputs = (props: any) => {
         {...register("name", {
           required: "Issue title is required.",
         })}
-        className="w-full px-2 py-3 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
+        className="w-full py-3 rounded-md bg-transparent text-sm leading-5 text-custom-text-200 outline-none"
       />
     </>
   );
@@ -154,15 +153,7 @@ export const SpreadsheetInlineCreateIssueForm: React.FC<Props> = observer((props
 
   return (
     <div>
-      <Transition
-        show={isOpen}
-        enter="transition ease-in-out duration-200 transform"
-        enterFrom="opacity-0 scale-95"
-        enterTo="opacity-100 scale-100"
-        leave="transition ease-in-out duration-200 transform"
-        leaveFrom="opacity-100 scale-100"
-        leaveTo="opacity-0 scale-95"
-      >
+      {isOpen && (
         <div>
           <form
             ref={ref}
@@ -172,7 +163,7 @@ export const SpreadsheetInlineCreateIssueForm: React.FC<Props> = observer((props
             <Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
           </form>
         </div>
-      </Transition>
+      )}
 
       {isOpen && (
         <p className="text-xs ml-3 mt-3 italic text-custom-text-200">
@@ -181,14 +172,16 @@ export const SpreadsheetInlineCreateIssueForm: React.FC<Props> = observer((props
       )}
 
       {!isOpen && (
-        <button
-          type="button"
-          className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
-          onClick={() => setIsOpen(true)}
-        >
-          <PlusIcon className="h-4 w-4" />
-          <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
-        </button>
+        <div className="flex items-center">
+          <button
+            type="button"
+            className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 pt-3 rounded-md"
+            onClick={() => setIsOpen(true)}
+          >
+            <PlusIcon className="h-3.5 w-3.5 stroke-2" />
+            <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+          </button>
+        </div>
       )}
     </div>
   );