Merge branch 'develop' of github.com:makeplane/plane into chore/breadcrumb_component_revamp

2023-11-03 17:26:15 +05:30 · 2023-11-03 17:26:15 +05:30 · c8f5014c21
commit c8f5014c21
parent b0fd935141 f639e467f8
41 changed files with 285 additions and 336 deletions
--- a/packages/ui/src/breadcrumbs/index.tsx
+++ b/packages/ui/src/breadcrumbs/index.tsx
--- a/packages/ui/src/dropdowns/index.tsx
+++ b/packages/ui/src/dropdowns/index.tsx
--- a/packages/ui/src/form-fields/index.tsx
+++ b/packages/ui/src/form-fields/index.tsx
--- a/packages/ui/src/icons/index.tsx
+++ b/packages/ui/src/icons/index.tsx
--- a/packages/ui/src/icons/state/index.tsx
+++ b/packages/ui/src/icons/state/index.tsx
--- a/packages/ui/src/progress/index.tsx
+++ b/packages/ui/src/progress/index.tsx
--- a/packages/ui/src/tooltip/index.tsx
+++ b/packages/ui/src/tooltip/index.tsx
--- a/web/components/automation/auto-archive-automation.tsx
+++ b/web/components/automation/auto-archive-automation.tsx
@ -38,7 +38,7 @@ export const AutoArchiveAutomation: React.FC<Props> = ({ projectDetails, handleC
            <div className="">
              <h4 className="text-sm font-medium">Auto-archive closed issues</h4>
              <p className="text-sm text-custom-text-200 tracking-tight">
-                Plane will auto archive issues that have been completed or canceled.
+                Plane will auto archive issues that have been completed or cancelled.
              </p>
            </div>
          </div>
--- a/web/components/automation/auto-close-automation.tsx
+++ b/web/components/automation/auto-close-automation.tsx
@ -82,7 +82,7 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
            <div className="">
              <h4 className="text-sm font-medium">Auto-close issues</h4>
              <p className="text-sm text-custom-text-200 tracking-tight">
-                Plane will automatically close issue that haven’t been completed or canceled.
+                Plane will automatically close issue that haven’t been completed or cancelled.
              </p>
            </div>
          </div>
--- a/web/components/cycles/cycles-view.tsx
+++ b/web/components/cycles/cycles-view.tsx
@ -6,7 +6,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { CyclesBoard, CyclesList, CyclesListGanttChartView } from "components/cycles";
 // ui components
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 // types
 import { TCycleLayout } from "types";

--- a/web/components/cycles/delete-modal.tsx
+++ b/web/components/cycles/delete-modal.tsx
@ -3,7 +3,7 @@ import { Dialog, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
 import { AlertTriangle } from "lucide-react";
 // components
-import { DangerButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // hooks
 import useToast from "hooks/use-toast";
 // types
@ -101,10 +101,13 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
                        </p>
                      </span>
                      <div className="flex justify-end gap-2">
-                        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                        <DangerButton onClick={formSubmit} loading={loader}>
+                        <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                          Cancel
+                        </Button>
+
+                        <Button variant="danger" size="sm" onClick={formSubmit}>
                          {loader ? "Deleting..." : "Delete Cycle"}
-                        </DangerButton>
+                        </Button>
                      </div>
                    </div>
                  </Dialog.Panel>
--- a/web/components/estimates/estimate-select.tsx
+++ b/web/components/estimates/estimate-select.tsx
@ -3,7 +3,7 @@ import { usePopper } from "react-popper";
 import { Combobox } from "@headlessui/react";
 import { Check, ChevronDown, Search, Triangle } from "lucide-react";
 // types
-import { Tooltip } from "components/ui";
+import { Tooltip } from "@plane/ui";
 import { Placement } from "@popperjs/core";
 // constants
 import { IEstimatePoint } from "types";
--- a/web/components/headers/project-views.tsx
+++ b/web/components/headers/project-views.tsx
@ -7,9 +7,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { CreateUpdateProjectViewModal } from "components/views";
 // components
-import { Breadcrumbs, PhotoFilterIcon } from "@plane/ui";
-// ui
-import { PrimaryButton } from "components/ui";
+import { Breadcrumbs, PhotoFilterIcon, Button } from "@plane/ui";
 // helpers
 import { renderEmoji } from "helpers/emoji.helper";

@ -69,10 +67,14 @@ export const ProjectViewsHeader: React.FC = observer(() => {
        </div>
        <div className="flex items-center gap-2 flex-shrink-0">
          <div>
-            <PrimaryButton type="button" className="flex items-center gap-2" onClick={() => setCreateViewModal(true)}>
-              <Plus size={14} strokeWidth={2} />
+            <Button
+              variant="primary"
+              size="sm"
+              prependIcon={<Plus className="h-3.5 w-3.5 stroke-2" />}
+              onClick={() => setCreateViewModal(true)}
+            >
              Create View
-            </PrimaryButton>
+            </Button>
          </div>
        </div>
      </div>
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
@ -7,7 +7,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { AppliedFiltersList } from "components/issues";
 // ui
-import { PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // helpers
 import { areFiltersDifferent } from "helpers/filter.helper";
 // types
@ -102,9 +102,9 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
        states={projectStore.states?.[projectId?.toString() ?? ""]}
      />
      {storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data ?? {}) && (
-        <PrimaryButton className="whitespace-nowrap" onClick={handleUpdateView}>
+        <Button variant="primary" size="sm" onClick={handleUpdateView}>
          Update view
-        </PrimaryButton>
+        </Button>
      )}
    </div>
  );
--- a/web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx
@ -5,7 +5,6 @@ import { MoreHorizontal, Pencil, Trash2, ChevronRight, Link } from "lucide-react
 // hooks
 import useToast from "hooks/use-toast";
 // components
-import { IssuePeekOverview } from "components/issues/issue-peek-overview";
 import { Tooltip } from "@plane/ui";
 // helpers
 import { copyUrlToClipboard } from "helpers/string.helper";
@ -16,10 +15,16 @@ type Props = {
  issue: IIssue;
  expanded: boolean;
  handleToggleExpand: (issueId: string) => void;
-  handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
  properties: IIssueDisplayProperties;
  handleEditIssue: (issue: IIssue) => void;
  handleDeleteIssue: (issue: IIssue) => void;
+  setIssuePeekOverView: React.Dispatch<
+    React.SetStateAction<{
+      workspaceSlug: string;
+      projectId: string;
+      issueId: string;
+    } | null>
+  >;
  disableUserActions: boolean;
  nestingLevel: number;
 };
@ -28,7 +33,7 @@ export const IssueColumn: React.FC<Props> = ({
  issue,
  expanded,
  handleToggleExpand,
-  handleUpdateIssue,
+  setIssuePeekOverView,
  properties,
  handleEditIssue,
  handleDeleteIssue,
@ -53,105 +58,116 @@ export const IssueColumn: React.FC<Props> = ({
    });
  };

+  const handleIssuePeekOverview = (issue: IIssue) => {
+    const { query } = router;
+    setIssuePeekOverView({
+      workspaceSlug: issue?.workspace_detail?.slug,
+      projectId: issue?.project_detail?.id,
+      issueId: issue?.id,
+    });
+    router.push({
+      pathname: router.pathname,
+      query: { ...query, peekIssueId: issue?.id },
+    });
+  };
+
  const paddingLeft = `${nestingLevel * 54}px`;

  return (
-    <div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-custom-border-100">
-      {properties.key && (
-        <div
-          className="flex gap-1.5 px-4 pr-0 py-2.5 items-center min-w-[96px]"
-          style={issue.parent && nestingLevel !== 0 ? { paddingLeft } : {}}
-        >
-          <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100">
-            <span className="flex items-center justify-center font-medium opacity-100 group-hover:opacity-0 ">
-              {issue.project_detail?.identifier}-{issue.sequence_id}
-            </span>
+    <>
+      <div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-custom-border-100">
+        {properties.key && (
+          <div
+            className="flex gap-1.5 px-4 pr-0 py-2.5 items-center min-w-[96px]"
+            style={issue.parent && nestingLevel !== 0 ? { paddingLeft } : {}}
+          >
+            <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100">
+              <span className="flex items-center justify-center font-medium opacity-100 group-hover:opacity-0 ">
+                {issue.project_detail?.identifier}-{issue.sequence_id}
+              </span>

-            {!disableUserActions && (
-              <div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
-                <Popover2
-                  isOpen={isOpen}
-                  canEscapeKeyClose
-                  onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
-                  content={
-                    <div className="flex flex-col whitespace-nowrap rounded-md border border-custom-border-100 p-1 text-xs shadow-lg focus:outline-none min-w-full bg-custom-background-100 space-y-0.5">
-                      <button
-                        type="button"
-                        className="hover:text-custom-text-200 w-full select-none gap-2 rounded p-1 text-left text-custom-text-200 hover:bg-custom-background-80"
-                        onClick={() => {
-                          handleCopyText();
-                          setIsOpen(false);
-                        }}
-                      >
-                        <div className="flex items-center gap-2">
-                          <Link className="h-3 w-3" />
-                          <span>Copy link</span>
-                        </div>
-                      </button>
+              {!disableUserActions && (
+                <div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
+                  <Popover2
+                    isOpen={isOpen}
+                    canEscapeKeyClose
+                    onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
+                    content={
+                      <div className="flex flex-col whitespace-nowrap rounded-md border border-custom-border-100 p-1 text-xs shadow-lg focus:outline-none min-w-full bg-custom-background-100 space-y-0.5">
+                        <button
+                          type="button"
+                          className="hover:text-custom-text-200 w-full select-none gap-2 rounded p-1 text-left text-custom-text-200 hover:bg-custom-background-80"
+                          onClick={() => {
+                            handleCopyText();
+                            setIsOpen(false);
+                          }}
+                        >
+                          <div className="flex items-center gap-2">
+                            <Link className="h-3 w-3" />
+                            <span>Copy link</span>
+                          </div>
+                        </button>

-                      <button
-                        type="button"
-                        className="hover:text-custom-text-200 w-full select-none gap-2 rounded p-1 text-left text-custom-text-200 hover:bg-custom-background-80"
-                        onClick={() => {
-                          handleEditIssue(issue);
-                          setIsOpen(false);
-                        }}
-                      >
-                        <div className="flex items-center gap-2">
-                          <Pencil className="h-3 w-3" />
-                          <span>Edit issue</span>
-                        </div>
-                      </button>
+                        <button
+                          type="button"
+                          className="hover:text-custom-text-200 w-full select-none gap-2 rounded p-1 text-left text-custom-text-200 hover:bg-custom-background-80"
+                          onClick={() => {
+                            handleEditIssue(issue);
+                            setIsOpen(false);
+                          }}
+                        >
+                          <div className="flex items-center gap-2">
+                            <Pencil className="h-3 w-3" />
+                            <span>Edit issue</span>
+                          </div>
+                        </button>

-                      <button
-                        type="button"
-                        className="w-full select-none gap-2 rounded p-1 text-left text-red-500 hover:bg-custom-background-80"
-                        onClick={() => {
-                          handleDeleteIssue(issue);
-                          setIsOpen(false);
-                        }}
-                      >
-                        <div className="flex items-center gap-2">
-                          <Trash2 className="h-3 w-3" />
-                          <span>Delete issue</span>
-                        </div>
-                      </button>
-                    </div>
-                  }
-                  placement="bottom-start"
+                        <button
+                          type="button"
+                          className="w-full select-none gap-2 rounded p-1 text-left text-red-500 hover:bg-custom-background-80"
+                          onClick={() => {
+                            handleDeleteIssue(issue);
+                            setIsOpen(false);
+                          }}
+                        >
+                          <div className="flex items-center gap-2">
+                            <Trash2 className="h-3 w-3" />
+                            <span>Delete issue</span>
+                          </div>
+                        </button>
+                      </div>
+                    }
+                    placement="bottom-start"
+                  >
+                    <MoreHorizontal className="h-5 w-5 text-custom-text-200" />
+                  </Popover2>
+                </div>
+              )}
+            </div>
+
+            {issue.sub_issues_count > 0 && (
+              <div className="h-6 w-6 flex justify-center items-center">
+                <button
+                  className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
+                  onClick={() => handleToggleExpand(issue.id)}
                >
-                  <MoreHorizontal className="h-5 w-5 text-custom-text-200" />
-                </Popover2>
+                  <ChevronRight className={`h-3.5 w-3.5 ${expanded ? "rotate-90" : ""}`} />
+                </button>
              </div>
            )}
          </div>
-
-          {issue.sub_issues_count > 0 && (
-            <div className="h-6 w-6 flex justify-center items-center">
-              <button
-                className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
-                onClick={() => handleToggleExpand(issue.id)}
-              >
-                <ChevronRight className={`h-3.5 w-3.5 ${expanded ? "rotate-90" : ""}`} />
-              </button>
-            </div>
-          )}
-        </div>
-      )}
-      <IssuePeekOverview
-        workspaceSlug={issue?.workspace_detail?.slug}
-        projectId={issue?.project_detail?.id}
-        issueId={issue?.id}
-        handleIssue={(issueToUpdate) => handleUpdateIssue(issueToUpdate as IIssue, issueToUpdate)}
-      >
-        <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
-          <span className="flex items-center px-4 py-2.5 h-full  truncate flex-grow">
-            <div className="truncate text-custom-text-100 text-left cursor-pointer w-full text-[0.825rem]">
+        )}
+        <div className="w-full overflow-hidden">
+          <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
+            <div
+              className="px-4 py-2.5 h-full w-full truncate text-custom-text-100 text-left cursor-pointer text-[0.825rem]"
+              onClick={() => handleIssuePeekOverview(issue)}
+            >
              {issue.name}
            </div>
-          </span>
-        </Tooltip>
-      </IssuePeekOverview>
-    </div>
+          </Tooltip>
+        </div>
+      </div>
+    </>
  );
 };
--- a/web/components/issues/issue-layouts/spreadsheet/columns/issue/spreadsheet-issue-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/issue/spreadsheet-issue-column.tsx
@ -11,9 +11,15 @@ type Props = {
  issue: IIssue;
  expandedIssues: string[];
  setExpandedIssues: React.Dispatch<React.SetStateAction<string[]>>;
-  handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
  properties: IIssueDisplayProperties;
  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
+  setIssuePeekOverView: React.Dispatch<
+    React.SetStateAction<{
+      workspaceSlug: string;
+      projectId: string;
+      issueId: string;
+    } | null>
+  >;
  disableUserActions: boolean;
  nestingLevel?: number;
 };
@ -22,7 +28,7 @@ export const SpreadsheetIssuesColumn: React.FC<Props> = ({
  issue,
  expandedIssues,
  setExpandedIssues,
-  handleUpdateIssue,
+  setIssuePeekOverView,
  properties,
  handleIssueAction,
  disableUserActions,
@ -51,9 +57,9 @@ export const SpreadsheetIssuesColumn: React.FC<Props> = ({
        expanded={isExpanded}
        handleToggleExpand={handleToggleExpand}
        properties={properties}
-        handleUpdateIssue={handleUpdateIssue}
        handleEditIssue={() => handleIssueAction(issue, "edit")}
        handleDeleteIssue={() => handleIssueAction(issue, "delete")}
+        setIssuePeekOverView={setIssuePeekOverView}
        disableUserActions={disableUserActions}
        nestingLevel={nestingLevel}
      />
@ -67,10 +73,10 @@ export const SpreadsheetIssuesColumn: React.FC<Props> = ({
            key={subIssue.id}
            issue={subIssue}
            expandedIssues={expandedIssues}
-            handleUpdateIssue={handleUpdateIssue}
            setExpandedIssues={setExpandedIssues}
            properties={properties}
            handleIssueAction={handleIssueAction}
+            setIssuePeekOverView={setIssuePeekOverView}
            disableUserActions={disableUserActions}
            nestingLevel={nestingLevel + 1}
          />
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@ -1,10 +1,10 @@
 import React, { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { PlusIcon } from "lucide-react";
 // components
 import { SpreadsheetColumnsList, SpreadsheetIssuesColumn, SpreadsheetInlineCreateIssueForm } from "components/issues";
-import { CustomMenu, Spinner } from "@plane/ui";
+import { IssuePeekOverview } from "components/issues/issue-peek-overview";
+import { Spinner } from "@plane/ui";
 // types
 import {
  IIssue,
@ -47,6 +47,11 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
  } = props;

  const [expandedIssues, setExpandedIssues] = useState<string[]>([]);
+  const [issuePeekOverview, setIssuePeekOverView] = useState<{
+    workspaceSlug: string;
+    projectId: string;
+    issueId: string;
+  } | null>(null);

  const [isInlineCreateIssueFormOpen, setIsInlineCreateIssueFormOpen] = useState(false);

@ -104,11 +109,11 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
                      key={`${issue.id}_${index}`}
                      issue={issue}
                      expandedIssues={expandedIssues}
-                      handleUpdateIssue={handleUpdateIssue}
                      setExpandedIssues={setExpandedIssues}
                      properties={displayProperties}
                      handleIssueAction={handleIssueAction}
                      disableUserActions={disableUserActions}
+                      setIssuePeekOverView={setIssuePeekOverView}
                    />
                  ))}
                </div>
@ -174,6 +179,14 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
            ))} */}
        </div>
      </div>
+      {issuePeekOverview && (
+        <IssuePeekOverview
+          workspaceSlug={issuePeekOverview?.workspaceSlug}
+          projectId={issuePeekOverview?.projectId}
+          issueId={issuePeekOverview?.issueId}
+          handleIssue={(issueToUpdate: any) => handleUpdateIssue(issueToUpdate as IIssue, issueToUpdate)}
+        />
+      )}
    </div>
  );
 });
--- a/web/components/issues/issue-peek-overview/root.tsx
+++ b/web/components/issues/issue-peek-overview/root.tsx
@ -13,7 +13,7 @@ interface IIssuePeekOverview {
  projectId: string;
  issueId: string;
  handleIssue: (issue: Partial<IIssue>) => void;
-  children: ReactNode;
+  children?: ReactNode;
 }

 export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
--- a/web/components/issues/issue-peek-overview/view.tsx
+++ b/web/components/issues/issue-peek-overview/view.tsx
@ -1,6 +1,6 @@
 import { FC, ReactNode, useState } from "react";
 import { useRouter } from "next/router";
-import { PanelRightOpen, Square, SquareCode, MoveRight, MoveDiagonal, Bell, Link2, Trash2 } from "lucide-react";
+import { MoveRight, MoveDiagonal, Bell, Link2, Trash2 } from "lucide-react";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
 // components
@ -165,9 +165,11 @@ export const IssueView: FC<IIssueView> = observer((props) => {
        />
      )}
      <div className="w-full !text-base">
-        <div onClick={updateRoutePeekId} className="w-full cursor-pointer">
-          {children}
-        </div>
+        {children && (
+          <div onClick={updateRoutePeekId} className="w-full cursor-pointer">
+            {children}
+          </div>
+        )}

        {issueId === peekIssueId && (
          <div
--- a/web/components/labels/label-select.tsx
+++ b/web/components/labels/label-select.tsx
@ -4,7 +4,7 @@ import { Placement } from "@popperjs/core";
 import { Combobox } from "@headlessui/react";
 import { Check, ChevronDown, Search } from "lucide-react";
 // ui
-import { Tooltip } from "components/ui";
+import { Tooltip } from "@plane/ui";
 // types
 import { IIssueLabels } from "types";

--- a/web/components/labels/project-setting-label-group.tsx
+++ b/web/components/labels/project-setting-label-group.tsx
@ -6,7 +6,7 @@ import { Disclosure, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 // icons
 import { ChevronDown, Component, Pencil, Plus, Trash2, X } from "lucide-react";
 // types
--- a/web/components/labels/project-setting-label-list-item.tsx
+++ b/web/components/labels/project-setting-label-list-item.tsx
@ -3,7 +3,7 @@ import React, { useRef, useState } from "react";
 //hook
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 // types
 import { IIssueLabels } from "types";
 //icons
--- a/web/components/project/member-list-item.tsx
+++ b/web/components/project/member-list-item.tsx
@ -11,9 +11,9 @@ import useToast from "hooks/use-toast";
 // components
 import { ConfirmProjectMemberRemove } from "components/project";
 // ui
-import { CustomMenu, CustomSelect } from "@plane/ui";
+import { CustomSelect, Tooltip } from "@plane/ui";
 // icons
-import { ChevronDown, X } from "lucide-react";
+import { ChevronDown, XCircle } from "lucide-react";
 // constants
 import { ROLE } from "constants/workspace";
 import { TUserProjectRole } from "types";
@ -46,9 +46,8 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
  );
  // derived values
  const user = userStore.currentUser;
-  const { currentProjectRole } = userStore;
+  const { currentProjectMemberInfo, currentProjectRole } = userStore;
  const isAdmin = currentProjectRole === 20;
-  const isOwner = currentProjectRole === 20;
  const projectMembers = projectStore.members?.[projectId?.toString()!];
  const currentUser = projectMembers?.find((item) => item.member.id === user?.id);

@ -69,7 +68,7 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
            await projectStore.removeMemberFromProject(
              workspaceSlug.toString(),
              projectId.toString(),
-              selectedRemoveMember
+              selectedRemoveMember.id
            );
          }
          // if the user is an invite
@ -77,7 +76,7 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
            await projectInvitationService.deleteProjectInvitation(
              workspaceSlug.toString(),
              projectId.toString(),
-              selectedInviteRemoveMember
+              selectedInviteRemoveMember.id
            );
            mutate(`PROJECT_INVITATIONS_${projectId.toString()}`);
          }
@ -89,59 +88,62 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
          });
        }}
      />
-
-      <div key={member.id} className="flex items-center justify-between px-3.5 py-[18px]">
-        <div className="flex items-center gap-x-6 gap-y-2">
+      <div className="group flex items-center justify-between px-3 py-4 hover:bg-custom-background-90">
+        <div className="flex items-center gap-x-4 gap-y-2">
          {member.avatar && member.avatar !== "" ? (
-            <div className="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize text-white">
-              <img
-                src={member.avatar}
-                alt={member.display_name}
-                className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
-              />
-            </div>
-          ) : member.display_name || member.email ? (
-            <div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 p-4 capitalize text-white">
-              {(member.display_name || member.email)?.charAt(0)}
-            </div>
+            <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
+              <a className="relative flex h-10 w-10 items-center justify-center rounded p-4 capitalize text-white">
+                <img
+                  src={member.avatar}
+                  alt={member.display_name || member.email}
+                  className="absolute top-0 left-0 h-full w-full object-cover rounded"
+                />
+              </a>
+            </Link>
          ) : (
-            <div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 p-4 capitalize text-white">
-              ?
-            </div>
+            <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
+              <a className="relative flex h-10 w-10 items-center justify-center rounded p-4 capitalize bg-gray-700 text-white">
+                {(member.display_name ?? member.email ?? "?")[0]}
+              </a>
+            </Link>
          )}
+
          <div>
            {member.member ? (
              <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
-                <a className="text-sm">
-                  <span>
-                    {member.first_name} {member.last_name}
-                  </span>
-                  <span className="text-custom-text-300 text-sm ml-2">({member.display_name})</span>
+                <a className="text-sm font-medium">
+                  {member.first_name} {member.last_name}
                </a>
              </Link>
            ) : (
-              <h4 className="text-sm">{member.display_name || member.email}</h4>
+              <h4 className="text-sm cursor-default">{member.display_name || member.email}</h4>
            )}
-            {isOwner && <p className="mt-0.5 text-xs text-custom-sidebar-text-300">{member.email}</p>}
+            <p className="mt-0.5 text-xs text-custom-sidebar-text-300">{member.email ?? member.display_name}</p>
          </div>
        </div>
-        <div className="flex items-center gap-3 text-xs">
-          {!member.member && (
-            <div className="mr-2 flex items-center justify-center rounded-full bg-yellow-500/20 px-2 py-1 text-center text-xs text-yellow-500">
-              Pending
+
+        <div className="flex items-center gap-2 text-xs">
+          {!member?.status && (
+            <div className="flex items-center justify-center rounded bg-yellow-500/20 px-2.5 py-1 text-center text-xs text-yellow-500 font-medium">
+              <p>Pending</p>
            </div>
          )}
+
          <CustomSelect
            customButton={
-              <div className="flex item-center gap-1">
+              <div className="flex item-center gap-1 px-2 py-0.5 rounded">
                <span
-                  className={`flex items-center text-sm font-medium ${
-                    member.memberId !== user?.id ? "" : "text-custom-sidebar-text-400"
+                  className={`flex items-center text-xs font-medium rounded ${
+                    member.memberId !== currentProjectMemberInfo?.id ? "" : "text-custom-sidebar-text-400"
                  }`}
                >
                  {ROLE[member.role as keyof typeof ROLE]}
                </span>
-                {member.memberId !== user?.id && <ChevronDown className="h-4 w-4" />}
+                {member.memberId !== currentProjectMemberInfo?.id && (
+                  <span className="grid place-items-center">
+                    <ChevronDown className="h-3 w-3" />
+                  </span>
+                )}
              </div>
            }
            value={member.role}
@ -168,31 +170,34 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
              !member.member ||
              (currentUser && currentUser.role !== 20 && currentUser.role < member.role)
            }
+            placement="bottom-end"
          >
            {Object.keys(ROLE).map((key) => {
-              if (currentUser && currentUser.role !== 20 && currentUser.role < parseInt(key)) return null;
+              if (currentProjectRole && currentProjectRole !== 20 && currentProjectRole < parseInt(key)) return null;

              return (
-                <CustomSelect.Option key={key} value={key}>
+                <CustomSelect.Option key={key} value={parseInt(key, 10)}>
                  <>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
                </CustomSelect.Option>
              );
            })}
          </CustomSelect>
-          <CustomMenu ellipsis disabled={!isAdmin}>
-            <CustomMenu.MenuItem
-              onClick={() => {
-                if (member.member) setSelectedRemoveMember(member.id);
-                else setSelectedInviteRemoveMember(member.id);
-              }}
+          {isAdmin && (
+            <Tooltip
+              tooltipContent={member.memberId === currentProjectMemberInfo?.member ? "Leave project" : "Remove member"}
            >
-              <span className="flex items-center justify-start gap-2">
-                <X className="h-4 w-4" />
-
-                <span> {member.memberId !== user?.id ? "Remove member" : "Leave project"}</span>
-              </span>
-            </CustomMenu.MenuItem>
-          </CustomMenu>
+              <button
+                type="button"
+                onClick={() => {
+                  if (member.member) setSelectedRemoveMember(member);
+                  else setSelectedInviteRemoveMember(member);
+                }}
+                className="opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto"
+              >
+                <XCircle className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={2} />
+              </button>
+            </Tooltip>
+          )}
        </div>
      </div>
    </>
--- a/web/components/project/members-select.tsx
+++ b/web/components/project/members-select.tsx
@ -3,10 +3,8 @@ import { usePopper } from "react-popper";
 import { Placement } from "@popperjs/core";
 import { Combobox } from "@headlessui/react";
 import { Check, ChevronDown, Search, User2 } from "lucide-react";
-// components
-import { Tooltip } from "components/ui";
 // ui
-import { Avatar, AvatarGroup } from "@plane/ui";
+import { Avatar, AvatarGroup, Tooltip } from "@plane/ui";
 // types
 import { IUserLite } from "types";

--- a/web/components/project/priority-select.tsx
+++ b/web/components/project/priority-select.tsx
@ -3,9 +3,7 @@ import { usePopper } from "react-popper";
 import { Placement } from "@popperjs/core";
 import { Combobox } from "@headlessui/react";
 import { Check, ChevronDown, Search } from "lucide-react";
-import { PriorityIcon } from "@plane/ui";
-// components
-import { Tooltip } from "components/ui";
+import { PriorityIcon, Tooltip } from "@plane/ui";
 // helpers
 import { capitalizeFirstLetter } from "helpers/string.helper";
 // types
--- a/web/components/states/create-state-modal.tsx
+++ b/web/components/states/create-state-modal.tsx
@ -10,8 +10,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect } from "components/ui";
-import { Button, Input, TextArea } from "@plane/ui";
+import { Button, CustomSelect, Input, TextArea } from "@plane/ui";
 // icons
 import { ChevronDown } from "lucide-react";
 // types
--- a/web/components/states/create-update-state-inline.tsx
+++ b/web/components/states/create-update-state-inline.tsx
@ -11,8 +11,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect } from "components/ui";
-import { Button, Input, Tooltip } from "@plane/ui";
+import { Button, CustomSelect, Input, Tooltip } from "@plane/ui";
 // types
 import type { IState } from "types";
 // fetch-keys
--- a/web/components/states/state-select.tsx
+++ b/web/components/states/state-select.tsx
@ -4,8 +4,7 @@ import { Placement } from "@popperjs/core";
 import { Combobox } from "@headlessui/react";
 import { Check, ChevronDown, Search } from "lucide-react";
 // ui
-import { StateGroupIcon } from "@plane/ui";
-import { Tooltip } from "components/ui";
+import { StateGroupIcon, Tooltip } from "@plane/ui";
 // types
 import { IState } from "types";

--- a/web/components/ui/buttons/danger-button.tsx
+++ b/web/components/ui/buttons/danger-button.tsx
@ -1,36 +0,0 @@
-// types
-import { ButtonProps } from "./type";
-
-export const DangerButton: React.FC<ButtonProps> = ({
-  children,
-  className = "",
-  onClick,
-  type = "button",
-  disabled = false,
-  loading = false,
-  size = "sm",
-  outline = false,
-}) => (
-  <button
-    type={type}
-    className={`${className} border border-red-500 font-medium duration-300 ${
-      size === "sm"
-        ? "rounded px-3 py-2 text-xs"
-        : size === "md"
-        ? "rounded-md px-3.5 py-2 text-sm"
-        : "rounded-lg px-4 py-2 text-base"
-    } ${
-      disabled
-        ? "cursor-not-allowed bg-opacity-70 border-opacity-70 hover:bg-opacity-70 hover:border-opacity-70"
-        : ""
-    } ${
-      outline
-        ? "bg-transparent text-red-500 hover:bg-red-500 hover:text-white"
-        : "text-white bg-red-500 hover:border-opacity-90 hover:bg-opacity-90"
-    } ${loading ? "cursor-wait" : ""}`}
-    onClick={onClick}
-    disabled={disabled || loading}
-  >
-    {children}
-  </button>
-);
--- a/web/components/ui/buttons/index.ts
+++ b/web/components/ui/buttons/index.ts
@ -1,3 +0,0 @@
-export * from "./danger-button";
-export * from "./primary-button";
-export * from "./secondary-button";
--- a/web/components/ui/buttons/primary-button.tsx
+++ b/web/components/ui/buttons/primary-button.tsx
@ -1,32 +0,0 @@
-// types
-import { ButtonProps } from "./type";
-
-export const PrimaryButton: React.FC<ButtonProps> = ({
-  children,
-  className = "",
-  onClick,
-  type = "button",
-  disabled = false,
-  loading = false,
-  size = "sm",
-  outline = false,
-}) => (
-  <button
-    type={type}
-    className={`${className} border border-custom-primary font-medium duration-300 ${
-      size === "sm"
-        ? "rounded px-3 py-2 text-xs"
-        : size === "md"
-        ? "rounded-md px-3.5 py-2 text-sm"
-        : "rounded-lg px-4 py-2 text-base"
-    } ${disabled ? "cursor-not-allowed opacity-70 hover:opacity-70" : ""} ${
-      outline
-        ? "bg-transparent text-custom-primary hover:bg-custom-primary hover:text-white"
-        : "text-white bg-custom-primary hover:border-opacity-90 hover:bg-opacity-90"
-    }  ${loading ? "cursor-wait" : ""}`}
-    onClick={onClick}
-    disabled={disabled || loading}
-  >
-    {children}
-  </button>
-);
--- a/web/components/ui/buttons/secondary-button.tsx
+++ b/web/components/ui/buttons/secondary-button.tsx
@ -1,32 +0,0 @@
-// types
-import { ButtonProps } from "./type";
-
-export const SecondaryButton: React.FC<ButtonProps> = ({
-  children,
-  className = "",
-  onClick,
-  type = "button",
-  disabled = false,
-  loading = false,
-  size = "sm",
-  outline = false,
-}) => (
-  <button
-    type={type}
-    className={`${className} border border-custom-border-200 font-medium duration-300 ${
-      size === "sm"
-        ? "rounded px-3 py-2 text-xs"
-        : size === "md"
-        ? "rounded-md px-3.5 py-2 text-sm"
-        : "rounded-lg px-4 py-2 text-base"
-    } ${disabled ? "cursor-not-allowed border-custom-border-200 bg-custom-background-90" : ""} ${
-      outline
-        ? "bg-transparent hover:bg-custom-background-80"
-        : "bg-custom-background-100 hover:border-opacity-70 hover:bg-opacity-70"
-    } ${loading ? "cursor-wait" : ""}`}
-    onClick={onClick}
-    disabled={disabled || loading}
-  >
-    {children}
-  </button>
-);
--- a/web/components/ui/buttons/type.d.ts
+++ b/web/components/ui/buttons/type.d.ts
@ -1,10 +0,0 @@
-export type ButtonProps = {
-  children: React.ReactNode;
-  className?: string;
-  onClick?: (e: any) => void;
-  type?: "button" | "submit" | "reset";
-  disabled?: boolean;
-  loading?: boolean;
-  size?: "sm" | "md" | "lg";
-  outline?: boolean;
-};
--- a/web/components/ui/index.ts
+++ b/web/components/ui/index.ts
@ -1,4 +1,3 @@
-export * from "./buttons";
 export * from "./dropdowns";
 export * from "./graphs";
 export * from "./input";
--- a/web/components/ui/multi-level-dropdown.tsx
+++ b/web/components/ui/multi-level-dropdown.tsx
@ -3,7 +3,7 @@ import { Fragment, useState } from "react";
 // headless ui
 import { Menu, Transition } from "@headlessui/react";
 // ui
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 // icons
 import { Check, ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";

--- a/web/components/ui/product-updates-modal.tsx
+++ b/web/components/ui/product-updates-modal.tsx
@ -7,7 +7,8 @@ import { Dialog, Transition } from "@headlessui/react";
 // services
 import { WorkspaceService } from "services/workspace.service";
 // components
-import { Loader, MarkdownRenderer } from "components/ui";
+import { MarkdownRenderer } from "components/ui";
+import { Loader } from "@plane/ui";
 // icons
 import { X } from "lucide-react";
 // helpers
--- a/web/components/views/delete-view-modal.tsx
+++ b/web/components/views/delete-view-modal.tsx
@ -8,7 +8,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { DangerButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { AlertTriangle } from "lucide-react";
 // types
@ -112,10 +112,12 @@ export const DeleteProjectViewModal: React.FC<Props> = observer((props) => {
                  </div>
                </div>
                <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                  <DangerButton onClick={handleDeleteView} loading={isDeleteLoading}>
+                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" size="sm" onClick={handleDeleteView}>
                    {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </DangerButton>
+                  </Button>
                </div>
              </Dialog.Panel>
            </Transition.Child>
--- a/web/components/views/form.tsx
+++ b/web/components/views/form.tsx
@ -7,7 +7,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "components/issues";
 // ui
-import { Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+import { Button, Input, TextArea } from "@plane/ui";
 // types
 import { IProjectView } from "types";
 // constants
@ -32,7 +32,6 @@ export const ProjectViewForm: React.FC<Props> = observer(({ handleFormSubmit, ha
    control,
    formState: { errors, isSubmitting },
    handleSubmit,
-    register,
    reset,
    setValue,
    watch,
@ -70,32 +69,45 @@ export const ProjectViewForm: React.FC<Props> = observer(({ handleFormSubmit, ha
        <h3 className="text-lg font-medium leading-6 text-custom-text-100">{data ? "Update" : "Create"} View</h3>
        <div className="space-y-3">
          <div>
-            <Input
-              id="name"
+            <Controller
+              control={control}
              name="name"
-              type="name"
-              placeholder="Title"
-              autoComplete="off"
-              className="resize-none text-xl"
-              error={errors.name}
-              register={register}
-              validations={{
+              rules={{
                required: "Title is required",
                maxLength: {
                  value: 255,
                  message: "Title should be less than 255 characters",
                },
              }}
+              render={({ field: { value, onChange } }) => (
+                <Input
+                  id="name"
+                  type="name"
+                  name="name"
+                  value={value}
+                  onChange={onChange}
+                  hasError={Boolean(errors.name)}
+                  placeholder="Title"
+                  className="resize-none text-xl"
+                />
+              )}
            />
          </div>
          <div>
-            <TextArea
-              id="description"
+            <Controller
              name="description"
-              placeholder="Description"
-              className="h-32 resize-none text-sm"
-              error={errors.description}
-              register={register}
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <TextArea
+                  id="description"
+                  name="description"
+                  placeholder="Description"
+                  className="resize-none text-sm"
+                  hasError={Boolean(errors?.description)}
+                  value={value}
+                  onChange={onChange}
+                />
+              )}
            />
          </div>
          <div>
@ -147,8 +159,10 @@ export const ProjectViewForm: React.FC<Props> = observer(({ handleFormSubmit, ha
        </div>
      </div>
      <div className="mt-5 flex justify-end gap-2">
-        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-        <PrimaryButton type="submit" loading={isSubmitting}>
+        <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button variant="primary" size="sm" type="submit">
          {data
            ? isSubmitting
              ? "Updating View..."
@ -156,7 +170,7 @@ export const ProjectViewForm: React.FC<Props> = observer(({ handleFormSubmit, ha
            : isSubmitting
            ? "Creating View..."
            : "Create View"}
-        </PrimaryButton>
+        </Button>
      </div>
    </form>
  );
--- a/web/components/views/views-list.tsx
+++ b/web/components/views/views-list.tsx
@ -8,7 +8,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import { ProjectViewListItem } from "components/views";
 import { EmptyState } from "components/common";
 // ui
-import { Input, Loader } from "components/ui";
+import { Input, Loader } from "@plane/ui";
 // assets
 import emptyView from "public/empty-state/view.svg";
 // icons
@ -48,7 +48,7 @@ export const ProjectViewsList = observer(() => {
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Search"
-                mode="trueTransparent"
+                mode="true-transparent"
              />
            </div>
          </div>
--- a/web/components/views/workspace-dashboard.tsx
+++ b/web/components/views/workspace-dashboard.tsx
@ -9,7 +9,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import { TourRoot } from "components/onboarding";
 import { UserGreetingsView } from "components/user";
 import { CompletedIssuesGraph, IssuesList, IssuesPieChart, IssuesStats } from "components/workspace";
-import { PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // images
 import emptyDashboard from "public/empty-state/dashboard.svg";

@ -67,7 +67,9 @@ export const WorkspaceDashboardView = observer(() => {
              <div className="p-5 md:p-8 pr-0">
                <h5 className="text-xl font-semibold">Create a project</h5>
                <p className="mt-2 mb-5">Manage your projects by creating issues, cycles, modules, views and pages.</p>
-                <PrimaryButton
+                <Button
+                  variant="primary"
+                  size="sm"
                  onClick={() => {
                    const e = new KeyboardEvent("keydown", {
                      key: "p",
@ -76,7 +78,7 @@ export const WorkspaceDashboardView = observer(() => {
                  }}
                >
                  Create Project
-                </PrimaryButton>
+                </Button>
              </div>
              <div className="hidden md:block self-end overflow-hidden pt-8">
                <Image src={emptyDashboard} alt="Empty Dashboard" />
--- a/web/layouts/auth-layout/workspace-wrapper.tsx
+++ b/web/layouts/auth-layout/workspace-wrapper.tsx
@ -4,7 +4,7 @@ import Link from "next/link";
 import useSWR from "swr";
 import { observer } from "mobx-react-lite";
 // icons
-import { Spinner, PrimaryButton, SecondaryButton } from "components/ui";
+import { Button, Spinner } from "@plane/ui";
 // hooks
 import { useMobxStore } from "lib/mobx/store-provider";

@ -67,12 +67,16 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
            <div className="flex items-center justify-center gap-2">
              <Link href="/invitations">
                <a>
-                  <SecondaryButton>Check pending invites</SecondaryButton>
+                  <Button variant="neutral-primary" size="sm">
+                    Check pending invites
+                  </Button>
                </a>
              </Link>
              <Link href="/create-workspace">
                <a>
-                  <PrimaryButton>Create new workspace</PrimaryButton>
+                  <Button variant="primary" size="sm">
+                    Create new workspace
+                  </Button>
                </a>
              </Link>
            </div>