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

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>

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>

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";
 

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>
+                        <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                        <DangerButton onClick={formSubmit} loading={loader}>
+                          Cancel
+                        </Button>
+
+                        <Button variant="danger" size="sm" onClick={formSubmit}>
                           {loader ? "Deleting..." : "Delete Cycle"}
-                        </DangerButton>
+                        </Button>
                       </div>
                     </div>
                   </Dialog.Panel>

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";

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";
+import { Breadcrumbs, PhotoFilterIcon, Button } from "@plane/ui";
-// ui
-import { PrimaryButton } from "components/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)}>
+            <Button
-              <Plus size={14} strokeWidth={2} />
+              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>

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>
   );

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="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-custom-border-100">
-        <div
+        {properties.key && (
-          className="flex gap-1.5 px-4 pr-0 py-2.5 items-center min-w-[96px]"
+          <div
-          style={issue.parent && nestingLevel !== 0 ? { paddingLeft } : {}}
+            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 ">
+            <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100">
-              {issue.project_detail?.identifier}-{issue.sequence_id}
+              <span className="flex items-center justify-center font-medium opacity-100 group-hover:opacity-0 ">
-            </span>
+                {issue.project_detail?.identifier}-{issue.sequence_id}
+              </span>
 
-            {!disableUserActions && (
+              {!disableUserActions && (
-              <div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
+                <div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
-                <Popover2
+                  <Popover2
-                  isOpen={isOpen}
+                    isOpen={isOpen}
-                  canEscapeKeyClose
+                    canEscapeKeyClose
-                  onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
+                    onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
-                  content={
+                    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">
+                      <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
+                        <button
-                        type="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"
+                          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={() => {
+                          onClick={() => {
-                          handleCopyText();
+                            handleCopyText();
-                          setIsOpen(false);
+                            setIsOpen(false);
-                        }}
+                          }}
-                      >
+                        >
-                        <div className="flex items-center gap-2">
+                          <div className="flex items-center gap-2">
-                          <Link className="h-3 w-3" />
+                            <Link className="h-3 w-3" />
-                          <span>Copy link</span>
+                            <span>Copy link</span>
-                        </div>
+                          </div>
-                      </button>
+                        </button>
 
-                      <button
+                        <button
-                        type="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"
+                          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={() => {
+                          onClick={() => {
-                          handleEditIssue(issue);
+                            handleEditIssue(issue);
-                          setIsOpen(false);
+                            setIsOpen(false);
-                        }}
+                          }}
-                      >
+                        >
-                        <div className="flex items-center gap-2">
+                          <div className="flex items-center gap-2">
-                          <Pencil className="h-3 w-3" />
+                            <Pencil className="h-3 w-3" />
-                          <span>Edit issue</span>
+                            <span>Edit issue</span>
-                        </div>
+                          </div>
-                      </button>
+                        </button>
 
-                      <button
+                        <button
-                        type="button"
+                          type="button"
-                        className="w-full select-none gap-2 rounded p-1 text-left text-red-500 hover:bg-custom-background-80"
+                          className="w-full select-none gap-2 rounded p-1 text-left text-red-500 hover:bg-custom-background-80"
-                        onClick={() => {
+                          onClick={() => {
-                          handleDeleteIssue(issue);
+                            handleDeleteIssue(issue);
-                          setIsOpen(false);
+                            setIsOpen(false);
-                        }}
+                          }}
-                      >
+                        >
-                        <div className="flex items-center gap-2">
+                          <div className="flex items-center gap-2">
-                          <Trash2 className="h-3 w-3" />
+                            <Trash2 className="h-3 w-3" />
-                          <span>Delete issue</span>
+                            <span>Delete issue</span>
-                        </div>
+                          </div>
-                      </button>
+                        </button>
-                    </div>
+                      </div>
-                  }
+                    }
-                  placement="bottom-start"
+                    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" />
+                  <ChevronRight className={`h-3.5 w-3.5 ${expanded ? "rotate-90" : ""}`} />
-                </Popover2>
+                </button>
               </div>
             )}
           </div>
-
+        )}
-          {issue.sub_issues_count > 0 && (
+        <div className="w-full overflow-hidden">
-            <div className="h-6 w-6 flex justify-center items-center">
+          <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
-              <button
+            <div
-                className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
+              className="px-4 py-2.5 h-full w-full truncate text-custom-text-100 text-left cursor-pointer text-[0.825rem]"
-                onClick={() => handleToggleExpand(issue.id)}
+              onClick={() => handleIssuePeekOverview(issue)}
-              >
+            >
-                <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]">
               {issue.name}
             </div>
-          </span>
+          </Tooltip>
-        </Tooltip>
+        </div>
-      </IssuePeekOverview>
+      </div>
-    </div>
+    </>
   );
 };

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}
           />

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>
   );
 });

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) => {

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 && (
-          {children}
+          <div onClick={updateRoutePeekId} className="w-full cursor-pointer">
-        </div>
+            {children}
+          </div>
+        )}
 
         {issueId === peekIssueId && (
           <div

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";
 

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

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

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 className="group flex items-center justify-between px-3 py-4 hover:bg-custom-background-90">
-      <div key={member.id} className="flex items-center justify-between px-3.5 py-[18px]">
+        <div className="flex items-center gap-x-4 gap-y-2">
-        <div className="flex items-center gap-x-6 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">
+            <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
-              <img
+              <a className="relative flex h-10 w-10 items-center justify-center rounded p-4 capitalize text-white">
-                src={member.avatar}
+                <img
-                alt={member.display_name}
+                  src={member.avatar}
-                className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
+                  alt={member.display_name || member.email}
-              />
+                  className="absolute top-0 left-0 h-full w-full object-cover rounded"
-            </div>
+                />
-          ) : member.display_name || member.email ? (
+              </a>
-            <div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 p-4 capitalize text-white">
+            </Link>
-              {(member.display_name || member.email)?.charAt(0)}
-            </div>
           ) : (
-            <div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 p-4 capitalize text-white">
+            <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">
-            </div>
+                {(member.display_name ?? member.email ?? "?")[0]}
+              </a>
+            </Link>
           )}
+
           <div>
             {member.member ? (
               <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
-                <a className="text-sm">
+                <a className="text-sm font-medium">
-                  <span>
+                  {member.first_name} {member.last_name}
-                    {member.first_name} {member.last_name}
-                  </span>
-                  <span className="text-custom-text-300 text-sm ml-2">({member.display_name})</span>
                 </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="flex items-center gap-2 text-xs">
-            <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">
+          {!member?.status && (
-              Pending
+            <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 ${
+                  className={`flex items-center text-xs font-medium rounded ${
-                    member.memberId !== user?.id ? "" : "text-custom-sidebar-text-400"
+                    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}>
+          {isAdmin && (
-            <CustomMenu.MenuItem
+            <Tooltip
-              onClick={() => {
+              tooltipContent={member.memberId === currentProjectMemberInfo?.member ? "Leave project" : "Remove member"}
-                if (member.member) setSelectedRemoveMember(member.id);
-                else setSelectedInviteRemoveMember(member.id);
-              }}
             >
-              <span className="flex items-center justify-start gap-2">
+              <button
-                <X className="h-4 w-4" />
+                type="button"
-
+                onClick={() => {
-                <span> {member.memberId !== user?.id ? "Remove member" : "Leave project"}</span>
+                  if (member.member) setSelectedRemoveMember(member);
-              </span>
+                  else setSelectedInviteRemoveMember(member);
-            </CustomMenu.MenuItem>
+                }}
-          </CustomMenu>
+                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>
     </>

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";
 

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";
+import { PriorityIcon, Tooltip } from "@plane/ui";
-// components
-import { Tooltip } from "components/ui";
 // helpers
 import { capitalizeFirstLetter } from "helpers/string.helper";
 // types

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, CustomSelect, Input, TextArea } from "@plane/ui";
-import { Button, Input, TextArea } from "@plane/ui";
 // icons
 import { ChevronDown } from "lucide-react";
 // types

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, CustomSelect, Input, Tooltip } from "@plane/ui";
-import { Button, Input, Tooltip } from "@plane/ui";
 // types
 import type { IState } from "types";
 // fetch-keys

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 { StateGroupIcon, Tooltip } from "@plane/ui";
-import { Tooltip } from "components/ui";
 // types
 import { IState } from "types";
 

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>
-);

web/components/ui/buttons/index.ts

@@ -1,3 +0,0 @@
-export * from "./danger-button";
-export * from "./primary-button";
-export * from "./secondary-button";

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>
-);

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>
-);

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;
-};

web/components/ui/index.ts

@@ -1,4 +1,3 @@
-export * from "./buttons";
 export * from "./dropdowns";
 export * from "./graphs";
 export * from "./input";

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";
 

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

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>
+                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                  <DangerButton onClick={handleDeleteView} loading={isDeleteLoading}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" size="sm" onClick={handleDeleteView}>
                     {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </DangerButton>
+                  </Button>
                 </div>
               </Dialog.Panel>
             </Transition.Child>

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
+            <Controller
-              id="name"
+              control={control}
               name="name"
-              type="name"
+              rules={{
-              placeholder="Title"
-              autoComplete="off"
-              className="resize-none text-xl"
-              error={errors.name}
-              register={register}
-              validations={{
                 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
+            <Controller
-              id="description"
               name="description"
-              placeholder="Description"
+              control={control}
-              className="h-32 resize-none text-sm"
+              render={({ field: { value, onChange } }) => (
-              error={errors.description}
+                <TextArea
-              register={register}
+                  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>
+        <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-        <PrimaryButton type="submit" loading={isSubmitting}>
+          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>
   );

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>

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" />

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>