style : ui fixes (#412)

* fix: kanban view vertical scroll fix

* fix: delete option remove from my issue page

* fix: my issue filter key renamed with id

* fix: sidebar ellipsis alignment

* fix: cycle card favorite icon alignment

* style: icon added in card options

* fix: progress icon alignment

* style: my issue page list view

apps/app/components/core/board-view/all-boards.tsx

@@ -39,7 +39,7 @@ export const AllBoards: React.FC<Props> = ({
   return (
     <>
       {groupedByIssues ? (
-        <div className="h-[calc(100vh-157px)] w-full lg:h-[calc(100vh-115px)]">
+        <div className="h-[calc(100vh-140px)] w-full">
           <div className="horizontal-scroll-enable flex h-full gap-x-4 overflow-x-auto overflow-y-hidden">
             {Object.keys(groupedByIssues).map((singleGroup, index) => {
               const currentState =

apps/app/components/cycles/sidebar.tsx

@@ -246,7 +246,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
 
               <div className="flex flex-col gap-6 px-7 py-6">
                 <div className="flex flex-col items-start justify-start gap-2 ">
-                  <div className="flex items-center justify-start gap-2  ">
+                  <div className="flex items-start justify-start gap-2  ">
                     <h4 className="text-xl font-semibold text-gray-900">{cycle.name}</h4>
                     <CustomMenu width="lg" ellipsis>
                       <CustomMenu.MenuItem onClick={handleCopyText}>

apps/app/components/cycles/single-cycle-card.tsx

@@ -15,7 +15,13 @@ import { CustomMenu, LinearProgressIndicator, Tooltip } from "components/ui";
 import { Disclosure, Transition } from "@headlessui/react";
 // icons
 import { CalendarDaysIcon } from "@heroicons/react/20/solid";
-import { ChevronDownIcon, PencilIcon, StarIcon } from "@heroicons/react/24/outline";
+import {
+  ChevronDownIcon,
+  DocumentDuplicateIcon,
+  PencilIcon,
+  StarIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
 // helpers
 import { getDateRangeStatus, renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { groupBy } from "helpers/array.helper";
@@ -232,7 +238,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
     <div className="h-full w-full">
       <div className="flex flex-col rounded-[10px] bg-white text-xs shadow">
         <div className="flex h-full flex-col gap-4 rounded-b-[10px] px-5  py-5">
-          <div className="flex items-center justify-between gap-1">
+          <div className="flex items-start justify-between gap-1">
             <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
               <a className="w-full">
                 <Tooltip tooltipContent={cycle.name} position="top-left">
@@ -296,8 +302,18 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
               </button>
 
               <CustomMenu width="auto" verticalEllipsis>
-                <CustomMenu.MenuItem onClick={handleDeleteCycle}>Delete cycle</CustomMenu.MenuItem>
+                <CustomMenu.MenuItem onClick={handleDeleteCycle}>
-                <CustomMenu.MenuItem onClick={handleCopyText}>Copy cycle link</CustomMenu.MenuItem>
+                  <span className="flex items-center justify-start gap-2 text-gray-800">
+                    <TrashIcon className="h-4 w-4" />
+                    <span>Delete Cycle</span>
+                  </span>
+                </CustomMenu.MenuItem>
+                <CustomMenu.MenuItem onClick={handleCopyText}>
+                  <span className="flex items-center justify-start gap-2 text-gray-800">
+                    <DocumentDuplicateIcon className="h-4 w-4" />
+                    <span>Copy Cycle Link</span>
+                  </span>
+                </CustomMenu.MenuItem>
               </CustomMenu>
             </div>
           </div>
@@ -313,10 +329,12 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
                   <span> Progress </span>
                   <LinearProgressIndicator data={progressIndicatorData} />
                   <Disclosure.Button>
-                    <ChevronDownIcon
+                    <span className="p-1">
-                      className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
+                      <ChevronDownIcon
-                      aria-hidden="true"
+                        className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
-                    />
+                        aria-hidden="true"
+                      />
+                    </span>
                   </Disclosure.Button>
                 </div>
                 <Transition show={open}>

apps/app/components/issues/my-issues-list-item.tsx

@@ -20,22 +20,16 @@ import { CustomMenu, Tooltip } from "components/ui";
 import { IIssue, Properties } from "types";
 // fetch-keys
 import { USER_ISSUE } from "constants/fetch-keys";
-import { copyTextToClipboard } from "helpers/string.helper";
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 import useToast from "hooks/use-toast";
 
 type Props = {
   issue: IIssue;
   properties: Properties;
   projectId: string;
-  handleDeleteIssue: () => void;
 };
 
-export const MyIssuesListItem: React.FC<Props> = ({
+export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId }) => {
-  issue,
-  properties,
-  projectId,
-  handleDeleteIssue,
-}) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
   const { setToastAlert } = useToast();
@@ -84,14 +78,8 @@ export const MyIssuesListItem: React.FC<Props> = ({
   const isNotAllowed = false;
 
   return (
-    <div key={issue.id} className="flex items-center justify-between gap-2 px-4 py-3 text-sm">
+    <div className="border-b border-gray-300 last:border-b-0">
-      <div className="flex items-center gap-2">
+      <div key={issue.id} className="flex items-center justify-between gap-2 px-4 py-4">
-        <span
-          className={`block h-1.5 w-1.5 flex-shrink-0 rounded-full`}
-          style={{
-            backgroundColor: issue.state_detail.color,
-          }}
-        />
         <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
           <a className="group relative flex items-center gap-2">
             {properties?.key && (
@@ -99,87 +87,87 @@ export const MyIssuesListItem: React.FC<Props> = ({
                 tooltipHeading="ID"
                 tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
               >
-                <span className="flex-shrink-0 text-xs text-gray-500">
+                <span className="flex-shrink-0 text-sm text-gray-400">
                   {issue.project_detail?.identifier}-{issue.sequence_id}
                 </span>
               </Tooltip>
             )}
             <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
-              <span className="w-auto max-w-lg overflow-hidden text-ellipsis whitespace-nowrap">
+              <span className="text-base text-gray-800">{truncateText(issue.name, 50)}</span>
-                {issue.name}
-              </span>
             </Tooltip>
           </a>
         </Link>
-      </div>
+
-      <div className="flex flex-shrink-0 flex-wrap items-center gap-x-1 gap-y-2 text-xs">
+        <div className="flex flex-wrap items-center gap-3 text-xs">
-        {properties.priority && (
+          {properties.priority && (
-          <ViewPrioritySelect
+            <ViewPrioritySelect
-            issue={issue}
+              issue={issue}
-            partialUpdateIssue={partialUpdateIssue}
+              partialUpdateIssue={partialUpdateIssue}
-            isNotAllowed={isNotAllowed}
+              isNotAllowed={isNotAllowed}
-          />
+            />
-        )}
+          )}
-        {properties.state && (
+          {properties.state && (
-          <ViewStateSelect
+            <ViewStateSelect
-            issue={issue}
+              issue={issue}
-            partialUpdateIssue={partialUpdateIssue}
+              partialUpdateIssue={partialUpdateIssue}
-            isNotAllowed={isNotAllowed}
+              isNotAllowed={isNotAllowed}
-          />
+            />
-        )}
+          )}
-        {properties.due_date && (
+          {properties.due_date && (
-          <ViewDueDateSelect
+            <ViewDueDateSelect
-            issue={issue}
+              issue={issue}
-            partialUpdateIssue={partialUpdateIssue}
+              partialUpdateIssue={partialUpdateIssue}
-            isNotAllowed={isNotAllowed}
+              isNotAllowed={isNotAllowed}
-          />
+            />
-        )}
+          )}
-        {properties.sub_issue_count && (
+          {properties.sub_issue_count && (
-          <div className="flex flex-shrink-0 items-center gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm">
+            <div className="flex items-center gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm">
-            {issue?.sub_issues_count} {issue?.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
+              {issue?.sub_issues_count} {issue?.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
-          </div>
-        )}
-        {properties.labels && (
-          <div className="flex flex-wrap gap-1">
-            {issue.label_details.map((label) => (
-              <span
-                key={label.id}
-                className="group flex items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs"
-              >
-                <span
-                  className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                  style={{
-                    backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
-                  }}
-                />
-                {label.name}
-              </span>
-            ))}
-          </div>
-        )}
-        {properties.assignee && (
-          <Tooltip
-            position="top-right"
-            tooltipHeading="Assignees"
-            tooltipContent={
-              issue.assignee_details.length > 0
-                ? issue.assignee_details
-                    .map((assignee) =>
-                      assignee?.first_name !== "" ? assignee?.first_name : assignee?.email
-                    )
-                    .join(", ")
-                : "No Assignee"
-            }
-          >
-            <div className="flex items-center gap-1">
-              <AssigneesList userIds={issue.assignees ?? []} />
             </div>
-          </Tooltip>
+          )}
-        )}
+          {properties.labels && issue.label_details.length > 0 ? (
-        <CustomMenu width="auto" ellipsis>
+            <div className="flex flex-wrap gap-1">
-          <CustomMenu.MenuItem onClick={handleDeleteIssue}>Delete issue</CustomMenu.MenuItem>
+              {issue.label_details.map((label) => (
-          <CustomMenu.MenuItem onClick={handleCopyText}>Copy issue link</CustomMenu.MenuItem>
+                <span
-        </CustomMenu>
+                  key={label.id}
+                  className="group flex items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs"
+                >
+                  <span
+                    className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                    style={{
+                      backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
+                    }}
+                  />
+                  {label.name}
+                </span>
+              ))}
+            </div>
+          ) : (
+            ""
+          )}
+          {properties.assignee && (
+            <Tooltip
+              position="top-right"
+              tooltipHeading="Assignees"
+              tooltipContent={
+                issue.assignee_details.length > 0
+                  ? issue.assignee_details
+                      .map((assignee) =>
+                        assignee?.first_name !== "" ? assignee?.first_name : assignee?.email
+                      )
+                      .join(", ")
+                  : "No Assignee"
+              }
+            >
+              <div className="flex items-center gap-1">
+                <AssigneesList userIds={issue.assignees ?? []} />
+              </div>
+            </Tooltip>
+          )}
+          <CustomMenu width="auto" ellipsis>
+            <CustomMenu.MenuItem onClick={handleCopyText}>Copy issue link</CustomMenu.MenuItem>
+          </CustomMenu>
+        </div>
       </div>
     </div>
   );

apps/app/components/modules/sidebar.tsx

@@ -327,7 +327,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
 
               <div className="flex flex-col gap-6 px-7 py-6">
                 <div className="flex flex-col items-start justify-start gap-2 ">
-                  <div className="flex items-center justify-start gap-2  ">
+                  <div className="flex items-start justify-start gap-2  ">
                     <h4 className="text-xl font-semibold text-gray-900">{module.name}</h4>
                     <CustomMenu width="lg" ellipsis>
                       <CustomMenu.MenuItem onClick={handleCopyText}>

apps/app/components/modules/single-module-card.tsx

@@ -15,7 +15,10 @@ import { AssigneesList, Avatar, CustomMenu, Tooltip } from "components/ui";
 import User from "public/user.png";
 import {
   CalendarDaysIcon,
+  DocumentDuplicateIcon,
+  PencilIcon,
   StarIcon,
+  TrashIcon,
   UserCircleIcon,
   UserGroupIcon,
 } from "@heroicons/react/24/outline";
@@ -255,12 +258,23 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
                 )}
 
                 <CustomMenu width="auto" verticalEllipsis>
-                  <CustomMenu.MenuItem onClick={handleEditModule}>Edit module</CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem onClick={handleEditModule}>
+                    <span className="flex items-center justify-start gap-2 text-gray-800">
+                      <PencilIcon className="h-4 w-4" />
+                      <span>Edit Module</span>
+                    </span>
+                  </CustomMenu.MenuItem>
                   <CustomMenu.MenuItem onClick={handleDeleteModule}>
-                    Delete module
+                    <span className="flex items-center justify-start gap-2 text-gray-800">
+                      <TrashIcon className="h-4 w-4" />
+                      <span>Delete Module</span>
+                    </span>
                   </CustomMenu.MenuItem>
                   <CustomMenu.MenuItem onClick={handleCopyText}>
-                    Copy module link
+                    <span className="flex items-center justify-start gap-2 text-gray-800">
+                      <DocumentDuplicateIcon className="h-4 w-4" />
+                      <span>Copy Module Link</span>
+                    </span>
                   </CustomMenu.MenuItem>
                 </CustomMenu>
               </div>

apps/app/pages/[workspaceSlug]/me/my-issues.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { useRouter } from "next/router";
 
 // headless ui
@@ -17,16 +17,13 @@ import useIssuesProperties from "hooks/use-issue-properties";
 // types
 import { IIssue, Properties } from "types";
 // components
-import { DeleteIssueModal, MyIssuesListItem } from "components/issues";
+import { MyIssuesListItem } from "components/issues";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 // types
 import type { NextPage } from "next";
 
 const MyIssuesPage: NextPage = () => {
-  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
-  const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
-
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
@@ -38,18 +35,8 @@ const MyIssuesPage: NextPage = () => {
     undefined
   );
 
-  const handleDeleteIssue = (issue: IIssue) => {
-    setDeleteIssueModal(true);
-    setIssueToDelete(issue);
-  };
-
   return (
     <>
-      <DeleteIssueModal
-        handleClose={() => setDeleteIssueModal(false)}
-        isOpen={deleteIssueModal}
-        data={issueToDelete}
-      />
       <AppLayout
         breadcrumbs={
           <Breadcrumbs>
@@ -96,7 +83,7 @@ const MyIssuesPage: NextPage = () => {
                                   }`}
                                   onClick={() => setProperties(key as keyof Properties)}
                                 >
-                                  {replaceUnderscoreIfSnakeCase(key)}
+                                  {key === "key" ? "ID" : replaceUnderscoreIfSnakeCase(key)}
                                 </button>
                               ))}
                             </div>
@@ -129,8 +116,12 @@ const MyIssuesPage: NextPage = () => {
                 <div className="flex flex-col space-y-5">
                   <Disclosure as="div" defaultOpen>
                     {({ open }) => (
-                      <div className="rounded-lg bg-white">
+                      <div className="rounded-[10px] border border-gray-300 bg-white">
-                        <div className="rounded-t-lg bg-gray-100 px-4 py-3">
+                        <div
+                          className={`flex items-center justify-start bg-gray-100 px-5 py-3 ${
+                            open ? "rounded-t-[10px]" : "rounded-[10px]"
+                          }`}
+                        >
                           <Disclosure.Button>
                             <div className="flex items-center gap-x-2">
                               <span>
@@ -141,7 +132,9 @@ const MyIssuesPage: NextPage = () => {
                                 />
                               </span>
                               <h2 className="font-medium leading-5">My Issues</h2>
-                              <p className="text-sm text-gray-500">{myIssues.length}</p>
+                              <span className="rounded-full bg-gray-200 py-0.5 px-3 text-sm text-black">
+                                {myIssues.length}
+                              </span>
                             </div>
                           </Disclosure.Button>
                         </div>
@@ -155,17 +148,14 @@ const MyIssuesPage: NextPage = () => {
                           leaveTo="transform opacity-0"
                         >
                           <Disclosure.Panel>
-                            <div className="divide-y-2">
+                            {myIssues.map((issue: IIssue) => (
-                              {myIssues.map((issue: IIssue) => (
+                              <MyIssuesListItem
-                                <MyIssuesListItem
+                                key={issue.id}
-                                  key={issue.id}
+                                issue={issue}
-                                  issue={issue}
+                                properties={properties}
-                                  properties={properties}
+                                projectId={issue.project}
-                                  projectId={issue.project}
+                              />
-                                  handleDeleteIssue={() => handleDeleteIssue(issue)}
+                            ))}
-                                />
-                              ))}
-                            </div>
                           </Disclosure.Panel>
                         </Transition>
                       </div>