chore: updated buttons and tokens for work items

apps/web/core/components/common/activity/activity-block.tsx

@@ -12,27 +12,27 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
 import { User } from "./user";
 
 type TActivityBlockComponent = {
-  icon?: ReactNode;
+  icon?: FC<{ className?: string }>;
   activity: TWorkspaceBaseActivity;
   ends: "top" | "bottom" | undefined;
   children: ReactNode;
   customUserName?: string;
 };
 
 export function ActivityBlockComponent(props: TActivityBlockComponent) {
-  const { icon, activity, ends, children, customUserName } = props;
+  const { icon: Icon, activity, ends, children, customUserName } = props;
   // hooks
   const { isMobile } = usePlatformOS();
 
   if (!activity) return <></>;
   return (
     <div
-      className={`relative flex items-start gap-2 text-11 ${
+      className={`relative flex items-start gap-2 text-caption-sm-regular  ${
         ends === "top" ? `pb-3` : ends === "bottom" ? `pt-3` : `py-3`
       }`}
     >
-      <div className="flex-shrink-0 ring-6 w-7 h-7 rounded-full overflow-hidden flex justify-center items-start mt-0.5 z-[4] text-secondary">
-        {icon ? icon : <Network className="w-3.5 h-3.5" />}
+      <div className="shrink-0  w-7 h-7 rounded-lg overflow-hidden flex justify-center items-center mt-0.5 z-[4] text-secondary border border-subtle shadow-raised-100">
+        {Icon ? <Icon className="h-3.5 w-3.5 shrink-0" /> : <Network className="h-3.5 w-3.5 shrink-0" />}
       </div>
       <div className="w-full text-secondary">
         <div className="line-clamp-2">

apps/web/core/components/common/activity/helper.tsx

@@ -1,9 +1,8 @@
-import type { ReactNode } from "react";
+import type { FC, ReactNode } from "react";
 import {
   RotateCcw,
   Network,
   Link as LinkIcon,
-  Calendar,
   Inbox,
   AlignLeft,
   Paperclip,
@@ -13,7 +12,6 @@ import {
   Hash,
   Clock,
   Bell,
-  LayoutGrid,
   GitBranch,
   Timer,
   ListTodo,
@@ -24,54 +22,55 @@ import {
 import {
   ArchiveIcon,
   CycleIcon,
-  StatePropertyIcon,
+  DueDatePropertyIcon,
+  EstimatePropertyIcon,
+  GridLayoutIcon,
   IntakeIcon,
+  LabelPropertyIcon,
+  MembersPropertyIcon,
   ModuleIcon,
   PriorityPropertyIcon,
   StartDatePropertyIcon,
-  DueDatePropertyIcon,
-  LabelPropertyIcon,
-  MembersPropertyIcon,
-  EstimatePropertyIcon,
+  StatePropertyIcon,
 } from "@plane/propel/icons";
 import { store } from "@/lib/store-context";
 import type { TProjectActivity } from "@/plane-web/types";
 
 type ActivityIconMap = {
-  [key: string]: ReactNode;
+  [key: string]: FC<{ className?: string }>;
 };
 export const iconsMap: ActivityIconMap = {
-  priority: <PriorityPropertyIcon className="h-3.5 w-3.5 text-secondary" />,
-  archived_at: <ArchiveIcon className="h-3.5 w-3.5 text-secondary" />,
-  restored: <RotateCcw className="h-3.5 w-3.5 text-secondary" />,
-  link: <LinkIcon className="h-3.5 w-3.5 text-secondary" />,
-  start_date: <StartDatePropertyIcon className="h-3.5 w-3.5 text-secondary" />,
-  target_date: <DueDatePropertyIcon className="h-3.5 w-3.5 text-secondary" />,
-  label: <LabelPropertyIcon className="h-3.5 w-3.5 text-secondary" />,
-  inbox: <Inbox className="h-3.5 w-3.5 text-secondary" />,
-  description: <AlignLeft className="h-3.5 w-3.5 text-secondary" />,
-  assignee: <MembersPropertyIcon className="h-3.5 w-3.5 text-secondary" />,
-  attachment: <Paperclip className="h-3.5 w-3.5 text-secondary" />,
-  name: <Type className="h-3.5 w-3.5 text-secondary" />,
-  state: <StatePropertyIcon className="h-4 w-4 flex-shrink-0 text-secondary" />,
-  estimate: <EstimatePropertyIcon className="h-3.5 w-3.5 text-secondary" />,
-  cycle: <CycleIcon className="h-4 w-4 flex-shrink-0 text-secondary" />,
-  module: <ModuleIcon className="h-4 w-4 flex-shrink-0 text-secondary" />,
-  page: <FileText className="h-3.5 w-3.5 text-secondary" />,
-  network: <Globe className="h-3.5 w-3.5 text-secondary" />,
-  identifier: <Hash className="h-3.5 w-3.5 text-secondary" />,
-  timezone: <Clock className="h-3.5 w-3.5 text-secondary" />,
-  is_project_updates_enabled: <Bell className="h-3.5 w-3.5 text-secondary" />,
-  is_epic_enabled: <LayoutGrid className="h-3.5 w-3.5 text-secondary" />,
-  is_workflow_enabled: <GitBranch className="h-3.5 w-3.5 text-secondary" />,
-  is_time_tracking_enabled: <Timer className="h-3.5 w-3.5 text-secondary" />,
-  is_issue_type_enabled: <ListTodo className="h-3.5 w-3.5 text-secondary" />,
-  default: <Network className="h-3.5 w-3.5 text-secondary" />,
-  module_view: <ModuleIcon className="h-3.5 w-3.5 text-secondary" />,
-  cycle_view: <CycleIcon className="h-3.5 w-3.5 text-secondary" />,
-  issue_views_view: <Layers className="h-3.5 w-3.5 text-secondary" />,
-  page_view: <FileText className="h-3.5 w-3.5 text-secondary" />,
-  intake_view: <IntakeIcon className="h-3.5 w-3.5 text-secondary" />,
+  priority: PriorityPropertyIcon,
+  archived_at: ArchiveIcon,
+  restored: RotateCcw,
+  link: LinkIcon,
+  start_date: StartDatePropertyIcon,
+  target_date: DueDatePropertyIcon,
+  label: LabelPropertyIcon,
+  inbox: Inbox,
+  description: AlignLeft,
+  assignee: MembersPropertyIcon,
+  attachment: Paperclip,
+  name: Type,
+  state: StatePropertyIcon,
+  estimate: EstimatePropertyIcon,
+  cycle: CycleIcon,
+  module: ModuleIcon,
+  page: FileText,
+  network: Globe,
+  identifier: Hash,
+  timezone: Clock,
+  is_project_updates_enabled: Bell,
+  is_epic_enabled: GridLayoutIcon,
+  is_workflow_enabled: GitBranch,
+  is_time_tracking_enabled: Timer,
+  is_issue_type_enabled: ListTodo,
+  default: Network,
+  module_view: ModuleIcon,
+  cycle_view: CycleIcon,
+  issue_views_view: Layers,
+  page_view: FileText,
+  intake_view: IntakeIcon,
 };
 
 export const messages = (activity: TProjectActivity): { message: string | ReactNode; customUserName?: string } => {

apps/web/core/components/common/layout/sidebar/property-list-item.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+
+type TSidebarPropertyListItemProps = {
+  icon: React.FC<{ className?: string }>;
+  label: string;
+  children: ReactNode;
+  appendElement?: ReactNode;
+};
+
+export function SidebarPropertyListItem(props: TSidebarPropertyListItemProps) {
+  const { icon: Icon, label, children, appendElement } = props;
+
+  return (
+    <div className="flex items-center gap-2">
+      <div className="flex shrink-0 items-center gap-1 w-30 text-body-xs-regular text-tertiary h-7.5">
+        <Icon className="h-4 w-4 shrink-0" />
+        <span>{label}</span>
+        {appendElement}
+      </div>
+      <div className="grow flex items-center flex-wrap gap-2">{children}</div>
+    </div>
+  );
+}

apps/web/core/components/issues/issue-detail-widgets/root.tsx

@@ -30,7 +30,7 @@ export function IssueDetailWidgets(props: Props) {
 
   return (
     <>
-      <div className="flex flex-col gap-5">
+      <div className="flex flex-col space-y-4">
         <IssueDetailWidgetActionButtons
           workspaceSlug={workspaceSlug}
           projectId={projectId}

apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx

@@ -1,7 +1,7 @@
 import type { FC } from "react";
 import React from "react";
 // helpers
-import { cn } from "@plane/utils";
+import { Button } from "@plane/propel/button";
 
 type Props = {
   icon: React.ReactNode;
@@ -12,17 +12,9 @@ type Props = {
 export function IssueDetailWidgetButton(props: Props) {
   const { icon, title, disabled = false } = props;
   return (
-    <div
-      className={cn(
-        "h-full w-min whitespace-nowrap flex items-center gap-2 border border-subtle rounded-sm px-3 py-1.5",
-        {
-          "cursor-not-allowed text-placeholder bg-surface-2": disabled,
-          "cursor-pointer text-tertiary hover:bg-layer-1": !disabled,
-        }
-      )}
-    >
+    <Button variant={"secondary"} disabled={disabled} size="lg">
       {icon && icon}
       <span className="text-body-xs-medium">{title}</span>
-    </div>
+    </Button>
   );
 }

apps/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx

@@ -3,7 +3,7 @@ import { Check, ListFilter } from "lucide-react";
 // plane imports
 import type { TActivityFilters, TActivityFilterOption } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
+import { IconButton } from "@plane/propel/icon-button";
 import { PopoverMenu } from "@plane/ui";
 // helper
 import { cn } from "@plane/utils";
@@ -24,12 +24,12 @@ export const ActivityFilter = observer(function ActivityFilter(props: TActivityF
     <PopoverMenu
       buttonClassName="outline-none"
       button={
-        <Button variant="secondary" prependIcon={<ListFilter className="h-3 w-3" />} className="relative">
-          <span className="text-secondary">{t("common.filters")}</span>
+        <>
+          <IconButton variant="tertiary" icon={ListFilter} />
           {selectedFilters.length < filterOptions.length && (
             <span className="absolute h-2 w-2 -right-0.5 -top-0.5 bg-accent-primary rounded-full" />
           )}
-        </Button>
+        </>
       }
       panelClassName="p-2 rounded-md border border-subtle bg-surface-1"
       data={filterOptions}

apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx

@@ -30,12 +30,12 @@ export function IssueActivityBlockComponent(props: TIssueActivityBlockComponent)
   if (!activity) return <></>;
   return (
     <div
-      className={`relative flex items-center gap-3 text-11 ${
+      className={`relative flex items-center gap-3 text-caption-sm-regular ${
         ends === "top" ? `pb-2` : ends === "bottom" ? `pt-2` : `py-2`
       }`}
     >
-      <div className="absolute left-[13px] top-0 bottom-0 w-0.5 bg-layer-3" aria-hidden />
-      <div className="flex-shrink-0 w-7 h-7 rounded-full overflow-hidden flex justify-center items-center z-[4] bg-layer-3 text-secondary">
+      <div className="absolute left-[13px] top-0 bottom-0 w-px bg-layer-3" aria-hidden />
+      <div className="flex-shrink-0 w-7 h-7 rounded-lg overflow-hidden flex justify-center items-center z-[4] bg-layer-2 text-secondary border border-subtle shadow-raised-100">
         {icon ? icon : <Network className="w-3.5 h-3.5" />}
       </div>
       <div className="w-full truncate text-secondary">

apps/web/core/components/issues/issue-detail/issue-activity/root.tsx

@@ -99,7 +99,7 @@ export const IssueActivity = observer(function IssueActivity(props: TIssueActivi
   if (!project) return <></>;
 
   return (
-    <div className="space-y-4 pt-3">
+    <div className="space-y-4">
       {/* header */}
       <div className="flex items-center justify-between">
         <div className="text-16 text-primary">{t("common.activity")}</div>

apps/web/core/components/issues/issue-detail/issue-activity/sort-root.tsx

@@ -2,32 +2,15 @@ import { memo } from "react";
 import { ArrowUpWideNarrow, ArrowDownWideNarrow } from "lucide-react";
 // plane package imports
 import { E_SORT_ORDER } from "@plane/constants";
-import { cn } from "@plane/utils";
-import { Button } from "@plane/propel/button";
+import { IconButton } from "@plane/propel/icon-button";
 
 export type TActivitySortRoot = {
   sortOrder: E_SORT_ORDER;
   toggleSort: () => void;
-  className?: string;
-  iconClassName?: string;
 };
 export const ActivitySortRoot = memo(function ActivitySortRoot(props: TActivitySortRoot) {
-  return (
-    <Button
-      variant="ghost"
-      size="sm"
-      className={props.className}
-      onClick={() => {
-        props.toggleSort();
-      }}
-    >
-      {props.sortOrder === E_SORT_ORDER.ASC ? (
-        <ArrowUpWideNarrow className={cn("size-4", props.iconClassName)} />
-      ) : (
-        <ArrowDownWideNarrow className={cn("size-4", props.iconClassName)} />
-      )}
-    </Button>
-  );
+  const SortIcon = props.sortOrder === E_SORT_ORDER.ASC ? ArrowUpWideNarrow : ArrowDownWideNarrow;
+  return <IconButton variant="tertiary" icon={SortIcon} onClick={props.toggleSort} />;
 });
 
 ActivitySortRoot.displayName = "ActivitySortRoot";

apps/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx

@@ -5,6 +5,7 @@ import { LinkIcon } from "lucide-react";
 // plane imports
 import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { IconButton } from "@plane/propel/icon-button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import { EIssuesStoreType } from "@plane/types";
@@ -149,19 +150,13 @@ export const IssueDetailQuickActions = observer(function IssueDetailQuickActions
   return (
     <>
       <div className="flex items-center justify-end flex-shrink-0">
-        <div className="flex flex-wrap items-center gap-4">
+        <div className="flex flex-wrap items-center gap-2">
           {currentUser && !issue?.archived_at && (
             <IssueSubscription workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
           )}
-          <div className="flex flex-wrap items-center gap-2.5 text-tertiary">
+          <div className="flex flex-wrap items-center gap-2 text-tertiary">
             <Tooltip tooltipContent={t("common.actions.copy_link")} isMobile={isMobile}>
-              <button
-                type="button"
-                className="grid h-5 w-5 place-items-center rounded-sm hover:text-secondary focus:outline-none focus:ring-2 focus:ring-custom-primary"
-                onClick={handleCopyText}
-              >
-                <LinkIcon className="h-4 w-4" />
-              </button>
+              <IconButton variant="secondary" size="lg" onClick={handleCopyText} icon={LinkIcon} />
             </Tooltip>
             <WorkItemDetailQuickActions
               parentRef={parentRef}

apps/web/core/components/issues/issue-detail/links/link-list.tsx

@@ -29,7 +29,7 @@ export const LinkList = observer(function LinkList(props: TLinkList) {
   if (!issueLinks) return null;
 
   return (
-    <div className="flex flex-col gap-2 py-4">
+    <div className="flex flex-col gap-2 pt-4">
       {issueLinks.map((linkId) => (
         <IssueLinkItem
           key={linkId}

apps/web/core/components/issues/issue-detail/main-content.tsx

@@ -128,7 +128,7 @@ export const IssueMainContent = observer(function IssueMainContent(props: Props)
 
         <DescriptionInput
           issueSequenceId={issue.sequence_id}
-          containerClassName="-ml-3 border-none"
+          containerClassName="p-0 border-none"
           disabled={isArchived || !isEditable}
           editorRef={editorRef}
           entityId={issue.id}

apps/web/core/components/issues/issue-detail/root.tsx

@@ -301,7 +301,7 @@ export const IssueDetailRoot = observer(function IssueDetailRoot(props: TIssueDe
         />
       ) : (
         <div className="flex h-full w-full overflow-hidden">
-          <div className="max-w-2/3 h-full w-full space-y-8 overflow-y-auto px-9 py-5">
+          <div className="max-w-2/3 h-full w-full space-y-6 overflow-y-auto px-9 py-5">
             <IssueMainContent
               workspaceSlug={workspaceSlug}
               projectId={projectId}
@@ -312,7 +312,7 @@ export const IssueDetailRoot = observer(function IssueDetailRoot(props: TIssueDe
             />
           </div>
           <div
-            className="fixed right-0 z-[5] h-full w-full min-w-[300px] border-l border-subtle bg-surface-1 py-5 sm:w-1/2 md:relative md:w-1/3 lg:min-w-80 xl:min-w-96"
+            className="fixed right-0 z-[5] h-full w-full min-w-[300px] border-l border-subtle bg-surface-1 sm:w-1/2 md:relative md:w-1/3 lg:min-w-80 xl:min-w-96"
             style={issueDetailSidebarCollapsed ? { right: `-${window?.innerWidth || 0}px` } : {}}
           >
             <IssueDetailsSidebar