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,8 +34,8 @@ 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 ${
                   snapshot.isDragging
                     ? "shadow-custom-shadow-rg bg-custom-background-90"
@@ -61,12 +61,11 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
                   }}
                 >
                   <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
-                      <span className="text-xs flex-grow truncate">{issue.name}</span>
+                    <div className="text-xs truncate">{issue.name}</div>
                   </Tooltip>
                 </IssuePeekOverview>
                 <div className="hidden group-hover/calendar-block:block">{quickActions(issue)}</div>
-                </a>
-              </Link>
+              </div>
             </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">
+          {projectStore.searchedProjects.length == 0 ? (
+            <div className="w-full text-center text-custom-text-400 mt-10">No matching projects</div>
+          ) : (
             <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
               {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"
-          } ${buttonClassName}`}
+          } ${
+            !disabled
+              ? `${
+                  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;