fix: bug fixes and ui improvements (#2703)

* fix: gantt chart duration in decimal

* fix: Loading text instead Spinner in peek view

* fix: cycle more popover typo & icon overlapping

* fix: list layout properties alignment

* fix: project search empty state

* fix: calendar layout issue text overflow & redirection inconsistency

* style: urgent priority hover background color

* fix: Cycle issues kanban layout empty state missing

* style: custom snooze modal placeholder text color

* refactor: replaced unwanted anchor tag with div

* chore: removed empty state for cycle kanban layout

web/components/cycles/cycles-list-item.tsx

@@ -231,7 +231,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
               </button>
             )}
 
-            <CustomMenu width="auto" ellipsis className="z-10">
+            <CustomMenu width="auto" ellipsis >
               {!isCompleted && (
                 <>
                   <CustomMenu.MenuItem onClick={handleEditCycle}>
@@ -243,7 +243,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
                   <CustomMenu.MenuItem onClick={handleDeleteCycle}>
                     <span className="flex items-center justify-start gap-2">
                       <Trash2 className="h-3 w-3" />
-                      <span>Delete module</span>
+                      <span>Delete cycle</span>
                     </span>
                   </CustomMenu.MenuItem>
                 </>

web/components/issues/issue-layouts/calendar/issue-blocks.tsx

@@ -34,39 +34,38 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
               {issue?.tempId !== undefined && (
                 <div className="absolute top-0 left-0 w-full h-full animate-pulse bg-custom-background-100/20 z-[99999]" />
               )}
-              <Link href={`/${workspaceSlug?.toString()}/projects/${issue.project}/issues/${issue.id}`}>
+
-                <a
+              <div
-                  className={`group/calendar-block h-8 w-full shadow-custom-shadow-2xs rounded py-1.5 px-1 flex items-center gap-1.5 border-[0.5px] border-custom-border-100 ${
+                className={`group/calendar-block h-8 w-full shadow-custom-shadow-2xs rounded py-1.5 px-1 flex items-center gap-1.5 border-[0.5px] border-custom-border-100 ${
-                    snapshot.isDragging
+                  snapshot.isDragging
-                      ? "shadow-custom-shadow-rg bg-custom-background-90"
+                    ? "shadow-custom-shadow-rg bg-custom-background-90"
-                      : "bg-custom-background-100 hover:bg-custom-background-90"
+                    : "bg-custom-background-100 hover:bg-custom-background-90"
-                  }`}
+                }`}
+              >
+                <span
+                  className="h-full w-0.5 rounded flex-shrink-0"
+                  style={{
+                    backgroundColor: issue.state_detail.color,
+                  }}
+                />
+                <div className="text-xs text-custom-text-300 flex-shrink-0">
+                  {issue.project_detail.identifier}-{issue.sequence_id}
+                </div>
+                <IssuePeekOverview
+                  workspaceSlug={issue?.workspace_detail?.slug}
+                  projectId={issue?.project_detail?.id}
+                  issueId={issue?.id}
+                  // TODO: add the logic here
+                  handleIssue={(issueToUpdate) => {
+                    handleIssues(issue.target_date ?? "", { ...issue, ...issueToUpdate }, "update");
+                  }}
                 >
-                  <span
+                  <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
-                    className="h-full w-0.5 rounded flex-shrink-0"
+                    <div className="text-xs truncate">{issue.name}</div>
-                    style={{
+                  </Tooltip>
-                      backgroundColor: issue.state_detail.color,
+                </IssuePeekOverview>
-                    }}
+                <div className="hidden group-hover/calendar-block:block">{quickActions(issue)}</div>
-                  />
+              </div>
-                  <div className="text-xs text-custom-text-300 flex-shrink-0">
-                    {issue.project_detail.identifier}-{issue.sequence_id}
-                  </div>
-                  <IssuePeekOverview
-                    workspaceSlug={issue?.workspace_detail?.slug}
-                    projectId={issue?.project_detail?.id}
-                    issueId={issue?.id}
-                    // TODO: add the logic here
-                    handleIssue={(issueToUpdate) => {
-                      handleIssues(issue.target_date ?? "", { ...issue, ...issueToUpdate }, "update");
-                    }}
-                  >
-                    <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
-                      <span className="text-xs flex-grow truncate">{issue.name}</span>
-                    </Tooltip>
-                  </IssuePeekOverview>
-                  <div className="hidden group-hover/calendar-block:block">{quickActions(issue)}</div>
-                </a>
-              </Link>
             </div>
           )}
         </Draggable>

web/components/issues/issue-layouts/list/properties.tsx

@@ -54,7 +54,7 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
   };
 
   return (
-    <div className="relative flex gap-2 overflow-x-auto whitespace-nowrap">
+    <div className="relative flex items-center gap-2 overflow-x-auto whitespace-nowrap">
       {/* basic properties */}
       {/* state */}
       {displayProperties && displayProperties?.state && (

web/components/issues/issue-peek-overview/view.tsx

@@ -7,7 +7,7 @@ import { MoveRight, MoveDiagonal, Bell, Link2, Trash2 } from "lucide-react";
 import { PeekOverviewIssueDetails } from "./issue-detail";
 import { PeekOverviewProperties } from "./properties";
 import { IssueComment } from "./activity";
-import { Button, CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon } from "@plane/ui";
+import { Button, CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon, Spinner } from "@plane/ui";
 import { DeleteIssueModal } from "../delete-issue-modal";
 import { DeleteArchivedIssueModal } from "../delete-archived-issue-modal";
 // types
@@ -154,7 +154,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
           onSubmit={handleDeleteIssue}
         />
       )}
-      <div className="w-full !text-base">
+      <div className="w-full truncate !text-base">
         {children && (
           <div onClick={updateRoutePeekId} className="w-full cursor-pointer">
             {children}
@@ -251,7 +251,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                 <div className="absolute top-0 left-0 h-full w-full z-[999] flex items-center justify-center bg-custom-background-100 opacity-60" />
               )}
               {isLoading && !issue ? (
-                <div className="text-center py-10">Loading...</div>
+                <div className="h-full w-full flex items-center justify-center"><Spinner/></div>
               ) : (
                 issue && (
                   <>

web/components/notifications/select-snooze-till-modal.tsx

@@ -171,7 +171,7 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
                               setValue("time", null);
                               onChange(val);
                             }}
-                            className="px-3 py-2 w-full rounded-md border border-custom-border-300 bg-custom-background-100 text-custom-text-100 focus:outline-none !text-sm"
+                            className="px-3 py-2 w-full rounded-md border border-custom-border-300 bg-custom-background-100 text-custom-text-100 placeholder:!text-custom-text-400 focus:outline-none !text-sm"
                             wrapperClassName="w-full"
                             noBorder
                             minDate={new Date()}

web/components/project/card-list.tsx

@@ -38,12 +38,16 @@ export const ProjectCardList: FC<IProjectCardList> = observer((props) => {
   return (
     <>
       {projects.length > 0 ? (
-        <div className="h-full p-8 overflow-y-auto">
+        <div className="h-full w-full p-8 overflow-y-auto">
-          <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
+          {projectStore.searchedProjects.length == 0 ? (
-            {projectStore.searchedProjects.map((project) => (
+            <div className="w-full text-center text-custom-text-400 mt-10">No matching projects</div>
-              <ProjectCard key={project.id} project={project} />
+          ) : (
-            ))}
+            <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
-          </div>
+              {projectStore.searchedProjects.map((project) => (
+                <ProjectCard key={project.id} project={project} />
+              ))}
+            </div>
+          )}
         </div>
       ) : (
         <EmptyState

web/components/project/priority-select.tsx

@@ -107,9 +107,13 @@ export const PrioritySelect: React.FC<Props> = ({
                 ? "border-red-500/20 bg-red-500"
                 : "border-custom-border-300"
               : "border-custom-border-300"
-          } ${!disabled ? "hover:bg-custom-background-80" : ""} ${
+          } ${
-            disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer"
+            !disabled
-          } ${buttonClassName}`}
+              ? `${
+                  value === "urgent" && highlightUrgentPriority ? "hover:bg-red-400" : "hover:bg-custom-background-80"
+                }`
+              : ""
+          } ${disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer"} ${buttonClassName}`}
         >
           {label}
           {!hideDropdownArrow && !disabled && <ChevronDown className="h-2.5 w-2.5" aria-hidden="true" />}

web/helpers/date-time.helper.ts

@@ -373,7 +373,7 @@ export const findTotalDaysInRange = (startDate: Date | string, endDate: Date | s
 
   // find number of days between startDate and endDate
   const diffInTime = endDate.getTime() - startDate.getTime();
-  const diffInDays = diffInTime / (1000 * 3600 * 24);
+  const diffInDays = Math.floor(diffInTime / (1000 * 3600 * 24));
 
   // if inclusive is true, add 1 to diffInDays
   if (inclusive) return diffInDays + 1;