fix: ui improvement and bug fixes (#1883)

apps/app/components/core/views/board-view/single-issue.tsx

@@ -88,6 +88,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
   const [contextMenu, setContextMenu] = useState(false);
   const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 });
   const [isMenuActive, setIsMenuActive] = useState(false);
+  const [isDropdownActive, setIsDropdownActive] = useState(false);
 
   const actionSectionRef = useRef<HTMLDivElement | null>(null);
 
@@ -245,7 +246,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
           setContextMenuPosition({ x: e.pageX, y: e.pageY });
         }}
       >
-        <div className="group/card relative select-none p-3.5">
+        <div className="flex flex-col justify-between gap-1.5 group/card relative select-none px-3.5 py-3 h-[118px]">
           {!isNotAllowed && (
             <div
               ref={actionSectionRef}
@@ -295,16 +296,20 @@ export const SingleBoardIssue: React.FC<Props> = ({
             </div>
           )}
           <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
-            <a>
+            <a className="flex flex-col gap-1.5">
               {properties.key && (
-                <div className="mb-2.5 text-xs font-medium text-custom-text-200">
+                <div className="text-xs font-medium text-custom-text-200">
                   {issue.project_detail.identifier}-{issue.sequence_id}
                 </div>
               )}
               <h5 className="text-sm break-words line-clamp-2">{issue.name}</h5>
             </a>
           </Link>
-          <div className="mt-2.5 flex overflow-x-scroll items-center gap-2 text-xs">
+          <div
+            className={`flex items-center gap-2 text-xs ${
+              isDropdownActive ? "" : "overflow-x-scroll"
+            }`}
+          >
             {properties.priority && (
               <ViewPrioritySelect
                 issue={issue}
@@ -327,6 +332,8 @@ export const SingleBoardIssue: React.FC<Props> = ({
               <ViewStartDateSelect
                 issue={issue}
                 partialUpdateIssue={partialUpdateIssue}
+                handleOnOpen={() => setIsDropdownActive(true)}
+                handleOnClose={() => setIsDropdownActive(false)}
                 user={user}
                 isNotAllowed={isNotAllowed}
               />
@@ -335,6 +342,8 @@ export const SingleBoardIssue: React.FC<Props> = ({
               <ViewDueDateSelect
                 issue={issue}
                 partialUpdateIssue={partialUpdateIssue}
+                handleOnOpen={() => setIsDropdownActive(true)}
+                handleOnClose={() => setIsDropdownActive(false)}
                 user={user}
                 isNotAllowed={isNotAllowed}
               />

apps/app/components/issues/comment/add-comment.tsx

@@ -101,7 +101,7 @@ export const AddComment: React.FC<Props> = ({ issueId, user, disabled = false })
                     ? watch("comment_html")
                     : value
                 }
-                customClassName="p-3 min-h-[50px]"
+                customClassName="p-3 min-h-[50px] shadow-sm"
                 debouncedUpdatesEnabled={false}
                 onChange={(comment_json: Object, comment_html: string) => {
                   onChange(comment_html);

apps/app/components/issues/comment/comment-card.tsx

@@ -106,7 +106,7 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
                 ref={editorRef}
                 value={watch("comment_html")}
                 debouncedUpdatesEnabled={false}
-                customClassName="min-h-[50px] p-3"
+                customClassName="min-h-[50px] p-3 shadow-sm"
                 onChange={(comment_json: Object, comment_html: string) => {
                   setValue("comment_json", comment_json);
                   setValue("comment_html", comment_html);

apps/app/components/issues/description-form.tsx

@@ -141,7 +141,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
                 }
                 debouncedUpdatesEnabled={true}
                 setIsSubmitting={setIsSubmitting}
-                customClassName="min-h-[150px]"
+                customClassName="min-h-[150px] shadow-sm"
                 editorContentCustomClassNames="pb-9"
                 onChange={(description: Object, description_html: string) => {
                   setIsSubmitting("submitting");

apps/app/components/issues/select/assignee.tsx

@@ -5,9 +5,7 @@ import useSWR from "swr";
 // services
 import projectServices from "services/project.service";
 // ui
-import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
+import { AssigneesList, Avatar, CustomSearchSelect, Icon } from "components/ui";
-// icons
-import { UserGroupIcon } from "@heroicons/react/24/outline";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
@@ -44,15 +42,15 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
       value={value}
       onChange={onChange}
       options={options}
-      label={
+      customButton={
-        <div className="flex items-center gap-2 text-custom-text-200">
+        <div className="flex items-center gap-2 cursor-pointer text-xs text-custom-text-200">
           {value && value.length > 0 && Array.isArray(value) ? (
-            <div className="flex items-center justify-center gap-2">
+            <div className="-my-0.5 flex items-center justify-center gap-2">
               <AssigneesList userIds={value} length={3} showLength={true} />
             </div>
           ) : (
-            <div className="flex items-center justify-center gap-2">
+            <div className="flex items-center justify-center gap-2 px-1.5 py-1 rounded shadow-sm border border-custom-border-300">
-              <UserGroupIcon className="h-4 w-4 text-custom-text-200" />
+              <Icon iconName="person" className="!text-base !leading-4" />
               <span className="text-custom-text-200">Assignee</span>
             </div>
           )}

apps/app/components/issues/select/label.tsx

@@ -59,9 +59,9 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
     >
       {({ open }: any) => (
         <>
-          <Combobox.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-200 text-xs shadow-sm duration-200 hover:bg-custom-background-80">
+          <Combobox.Button className="flex cursor-pointer items-center text-xs">
             {value && value.length > 0 ? (
-              <span className="flex items-center justify-center gap-2 px-3 py-1 text-xs">
+              <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs">
                 <IssueLabelsList
                   labels={value.map((v) => issueLabels?.find((l) => l.id === v)?.color) ?? []}
                   length={3}
@@ -69,7 +69,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                 />
               </span>
             ) : (
-              <span className="flex items-center justify-center gap-2 px-2.5 py-1 text-xs">
+              <span className="flex items-center justify-center gap-2 px-2.5 py-1 text-xs rounded-md border border-custom-border-200 shadow-sm duration-200 hover:bg-custom-background-80">
                 <TagIcon className="h-3.5 w-3.5 text-custom-text-200" />
                 <span className=" text-custom-text-200">Label</span>
               </span>

apps/app/components/issues/sidebar.tsx

@@ -396,7 +396,8 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                                 start_date: val,
                               })
                             }
-                            className="bg-custom-background-90 w-full"
+                            className="bg-custom-background-100"
+                            wrapperClassName="w-full"
                             maxDate={maxDate ?? undefined}
                             disabled={isNotAllowed || uneditable}
                           />
@@ -424,7 +425,8 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                                 target_date: val,
                               })
                             }
-                            className="bg-custom-background-90 w-full"
+                            className="bg-custom-background-100"
+                            wrapperClassName="w-full"
                             minDate={minDate ?? undefined}
                             disabled={isNotAllowed || uneditable}
                           />

apps/app/components/issues/view-select/due-date.tsx

@@ -13,6 +13,8 @@ import useIssuesView from "hooks/use-issues-view";
 type Props = {
   issue: IIssue;
   partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  handleOnOpen?: () => void;
+  handleOnClose?: () => void;
   tooltipPosition?: "top" | "bottom";
   noBorder?: boolean;
   user: ICurrentUserResponse | undefined;
@@ -22,6 +24,8 @@ type Props = {
 export const ViewDueDateSelect: React.FC<Props> = ({
   issue,
   partialUpdateIssue,
+  handleOnOpen,
+  handleOnClose,
   tooltipPosition = "top",
   noBorder = false,
   user,
@@ -80,6 +84,8 @@ export const ViewDueDateSelect: React.FC<Props> = ({
           }`}
           minDate={minDate ?? undefined}
           noBorder={noBorder}
+          handleOnOpen={handleOnOpen}
+          handleOnClose={handleOnClose}
           disabled={isNotAllowed}
         />
       </div>

apps/app/components/issues/view-select/start-date.tsx

@@ -13,6 +13,8 @@ import useIssuesView from "hooks/use-issues-view";
 type Props = {
   issue: IIssue;
   partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  handleOnOpen?: () => void;
+  handleOnClose?: () => void;
   tooltipPosition?: "top" | "bottom";
   noBorder?: boolean;
   user: ICurrentUserResponse | undefined;
@@ -22,6 +24,8 @@ type Props = {
 export const ViewStartDateSelect: React.FC<Props> = ({
   issue,
   partialUpdateIssue,
+  handleOnOpen,
+  handleOnClose,
   tooltipPosition = "top",
   noBorder = false,
   user,
@@ -72,6 +76,8 @@ export const ViewStartDateSelect: React.FC<Props> = ({
           }`}
           maxDate={maxDate ?? undefined}
           noBorder={noBorder}
+          handleOnOpen={handleOnOpen}
+          handleOnClose={handleOnClose}
           disabled={isNotAllowed}
         />
       </div>

apps/app/components/tiptap/index.tsx

@@ -112,7 +112,7 @@ const Tiptap = (props: ITiptapRichTextEditor) => {
     }, 500);
   }, 1000);
 
-  const editorClassNames = `relative w-full max-w-screen-lg sm:rounded-lg sm:shadow-lg mt-2 p-3 relative focus:outline-none rounded-md
+  const editorClassNames = `relative w-full max-w-screen-lg mt-2 p-3 relative focus:outline-none rounded-lg
       ${noBorder ? "" : "border border-custom-border-200"} ${
     borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0"
   } ${customClassName}`;

apps/app/components/ui/datepicker.tsx

@@ -8,10 +8,13 @@ type Props = {
   renderAs?: "input" | "button";
   value: Date | string | null | undefined;
   onChange: (val: string | null) => void;
+  handleOnOpen?: () => void;
+  handleOnClose?: () => void;
   placeholder?: string;
   displayShortForm?: boolean;
   error?: boolean;
   noBorder?: boolean;
+  wrapperClassName?: string;
   className?: string;
   isClearable?: boolean;
   disabled?: boolean;
@@ -23,10 +26,13 @@ export const CustomDatePicker: React.FC<Props> = ({
   renderAs = "button",
   value,
   onChange,
+  handleOnOpen,
+  handleOnClose,
   placeholder = "Select date",
   displayShortForm = false,
   error = false,
   noBorder = false,
+  wrapperClassName = "",
   className = "",
   isClearable = true,
   disabled = false,
@@ -40,6 +46,9 @@ export const CustomDatePicker: React.FC<Props> = ({
       if (!val) onChange(null);
       else onChange(renderDateFormat(val));
     }}
+    onCalendarOpen={handleOnOpen}
+    onCalendarClose={handleOnClose}
+    wrapperClassName={wrapperClassName}
     className={`${
       renderAs === "input"
         ? "block px-2 py-2 text-sm focus:outline-none"