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
2024-06-14 14:31:34 +00:00 · 2023-03-09 22:50:34 +05:30 · 2023-03-09 22:50:34 +05:30 · 704b7d02ef
commit 704b7d02ef
parent 4e9149a27c
7 changed files with 142 additions and 132 deletions
--- a/apps/app/components/core/board-view/all-boards.tsx
+++ b/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 =
--- a/apps/app/components/cycles/sidebar.tsx
+++ b/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}>
--- a/apps/app/components/cycles/single-cycle-card.tsx
+++ b/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={handleCopyText}>Copy cycle link</CustomMenu.MenuItem>
+                <CustomMenu.MenuItem onClick={handleDeleteCycle}>
+                  <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
-                      className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
-                      aria-hidden="true"
-                    />
+                    <span className="p-1">
+                      <ChevronDownIcon
+                        className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
+                        aria-hidden="true"
+                      />
+                    </span>
                  </Disclosure.Button>
                </div>
                <Transition show={open}>
--- a/apps/app/components/issues/my-issues-list-item.tsx
+++ b/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> = ({
-  issue,
-  properties,
-  projectId,
-  handleDeleteIssue,
-}) => {
+export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId }) => {
  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="flex items-center gap-2">
-        <span
-          className={`block h-1.5 w-1.5 flex-shrink-0 rounded-full`}
-          style={{
-            backgroundColor: issue.state_detail.color,
-          }}
-        />
+    <div className="border-b border-gray-300 last:border-b-0">
+      <div key={issue.id} className="flex items-center justify-between gap-2 px-4 py-4">
        <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">
-                {issue.name}
-              </span>
+              <span className="text-base text-gray-800">{truncateText(issue.name, 50)}</span>
            </Tooltip>
          </a>
        </Link>
-      </div>
-      <div className="flex flex-shrink-0 flex-wrap items-center gap-x-1 gap-y-2 text-xs">
-        {properties.priority && (
-          <ViewPrioritySelect
-            issue={issue}
-            partialUpdateIssue={partialUpdateIssue}
-            isNotAllowed={isNotAllowed}
-          />
-        )}
-        {properties.state && (
-          <ViewStateSelect
-            issue={issue}
-            partialUpdateIssue={partialUpdateIssue}
-            isNotAllowed={isNotAllowed}
-          />
-        )}
-        {properties.due_date && (
-          <ViewDueDateSelect
-            issue={issue}
-            partialUpdateIssue={partialUpdateIssue}
-            isNotAllowed={isNotAllowed}
-          />
-        )}
-        {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">
-            {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 className="flex flex-wrap items-center gap-3 text-xs">
+          {properties.priority && (
+            <ViewPrioritySelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              isNotAllowed={isNotAllowed}
+            />
+          )}
+          {properties.state && (
+            <ViewStateSelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              isNotAllowed={isNotAllowed}
+            />
+          )}
+          {properties.due_date && (
+            <ViewDueDateSelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              isNotAllowed={isNotAllowed}
+            />
+          )}
+          {properties.sub_issue_count && (
+            <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"}
            </div>
-          </Tooltip>
-        )}
-        <CustomMenu width="auto" ellipsis>
-          <CustomMenu.MenuItem onClick={handleDeleteIssue}>Delete issue</CustomMenu.MenuItem>
-          <CustomMenu.MenuItem onClick={handleCopyText}>Copy issue link</CustomMenu.MenuItem>
-        </CustomMenu>
+          )}
+          {properties.labels && issue.label_details.length > 0 ? (
+            <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>
+          )}
+          <CustomMenu width="auto" ellipsis>
+            <CustomMenu.MenuItem onClick={handleCopyText}>Copy issue link</CustomMenu.MenuItem>
+          </CustomMenu>
+        </div>
      </div>
    </div>
  );
--- a/apps/app/components/modules/sidebar.tsx
+++ b/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}>
--- a/apps/app/components/modules/single-module-card.tsx
+++ b/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>
--- a/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
+++ b/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-t-lg bg-gray-100 px-4 py-3">
+                      <div className="rounded-[10px] border border-gray-300 bg-white">
+                        <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) => (
-                                <MyIssuesListItem
-                                  key={issue.id}
-                                  issue={issue}
-                                  properties={properties}
-                                  projectId={issue.project}
-                                  handleDeleteIssue={() => handleDeleteIssue(issue)}
-                                />
-                              ))}
-                            </div>
+                            {myIssues.map((issue: IIssue) => (
+                              <MyIssuesListItem
+                                key={issue.id}
+                                issue={issue}
+                                properties={properties}
+                                projectId={issue.project}
+                              />
+                            ))}
                          </Disclosure.Panel>
                        </Transition>
                      </div>