From 1d7b3efb805f746b225533664c25508a13559da2 Mon Sep 17 00:00:00 2001 From: Prateek Shourya Date: Tue, 28 May 2024 11:50:04 +0530 Subject: [PATCH] [WEB-1148] chore: icons updates for consistency across platform. (#4571) * [WEB-1148] chore: icons updates for consistency across platform. * chore: update logic for rendering custom lead icon. * chore: update Icon prop name. * chore: update `Icon` prop to `icon`. --- packages/ui/src/icons/index.ts | 1 - packages/ui/src/icons/user-group-icon.tsx | 35 ------------------- .../actions/issue-actions/actions-list.tsx | 6 ++-- .../upcoming-cycles-list-item.tsx | 6 ++-- .../cycles/list/cycle-list-item-action.tsx | 6 ++-- web/components/cycles/sidebar.tsx | 4 +-- web/components/dropdowns/member/avatar.tsx | 17 ++++++--- web/components/dropdowns/member/index.tsx | 6 ++-- .../inbox/content/issue-properties.tsx | 6 ++-- web/components/integration/github/root.tsx | 6 ++-- web/components/integration/jira/root.tsx | 6 ++-- .../activity/actions/assignee.tsx | 8 ++--- .../issues/issue-detail/sidebar.tsx | 4 +-- .../issues/peek-overview/properties.tsx | 5 +-- web/components/modules/module-card-item.tsx | 6 ++-- .../modules/module-list-item-action.tsx | 6 ++-- web/components/modules/sidebar.tsx | 9 ++--- web/components/workspace/sidebar-dropdown.tsx | 6 ++-- web/constants/spreadsheet.ts | 12 ++++--- web/pages/profile/index.tsx | 4 +-- 20 files changed, 65 insertions(+), 94 deletions(-) delete mode 100644 packages/ui/src/icons/user-group-icon.tsx diff --git a/packages/ui/src/icons/index.ts b/packages/ui/src/icons/index.ts index dbed6ba89..5028848d8 100644 --- a/packages/ui/src/icons/index.ts +++ b/packages/ui/src/icons/index.ts @@ -19,4 +19,3 @@ export * from "./priority-icon"; export * from "./related-icon"; export * from "./side-panel-icon"; export * from "./transfer-icon"; -export * from "./user-group-icon"; diff --git a/packages/ui/src/icons/user-group-icon.tsx b/packages/ui/src/icons/user-group-icon.tsx deleted file mode 100644 index 7cad96d23..000000000 --- a/packages/ui/src/icons/user-group-icon.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import * as React from "react"; - -import { ISvgIcons } from "./type"; - -export const UserGroupIcon: React.FC = ({ className = "text-current", ...rest }) => ( - - - - - - -); diff --git a/web/components/command-palette/actions/issue-actions/actions-list.tsx b/web/components/command-palette/actions/issue-actions/actions-list.tsx index 6e8351804..040eb2e3c 100644 --- a/web/components/command-palette/actions/issue-actions/actions-list.tsx +++ b/web/components/command-palette/actions/issue-actions/actions-list.tsx @@ -1,10 +1,10 @@ import { Command } from "cmdk"; import { observer } from "mobx-react"; import { useRouter } from "next/router"; -import { LinkIcon, Signal, Trash2, UserMinus2, UserPlus2 } from "lucide-react"; +import { LinkIcon, Signal, Trash2, UserMinus2, UserPlus2, Users } from "lucide-react"; import { TIssue } from "@plane/types"; // hooks -import { DoubleCircleIcon, UserGroupIcon, TOAST_TYPE, setToast } from "@plane/ui"; +import { DoubleCircleIcon, TOAST_TYPE, setToast } from "@plane/ui"; // constants import { EIssuesStoreType } from "@/constants/issue"; // helpers @@ -115,7 +115,7 @@ export const CommandPaletteIssueActions: React.FC = observer((props) => { className="focus:outline-none" >
- + Assign to...
diff --git a/web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx b/web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx index 9b63b0f6f..a66af73c3 100644 --- a/web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx +++ b/web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx @@ -2,7 +2,7 @@ import { useRef } from "react"; import { observer } from "mobx-react"; import Link from "next/link"; import { useRouter } from "next/router"; -import { User2 } from "lucide-react"; +import { Users } from "lucide-react"; // ui import { Avatar, AvatarGroup, setPromiseToast } from "@plane/ui"; // components @@ -112,9 +112,7 @@ export const UpcomingCycleListItem: React.FC = observer((props) => { })} ) : ( - - - + )} = observer((props) => { })} ) : ( - - - + )} diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx index b2562aa77..595fe9b7a 100644 --- a/web/components/cycles/sidebar.tsx +++ b/web/components/cycles/sidebar.tsx @@ -10,10 +10,10 @@ import { ChevronDown, LinkIcon, Trash2, - UserCircle2, AlertCircle, ChevronRight, CalendarClock, + SquareUser, } from "lucide-react"; import { Disclosure, Transition } from "@headlessui/react"; // types @@ -432,7 +432,7 @@ export const CycleDetailsSidebar: React.FC = observer((props) => {
- + Lead
diff --git a/web/components/dropdowns/member/avatar.tsx b/web/components/dropdowns/member/avatar.tsx index 15e1fbd8c..868c28665 100644 --- a/web/components/dropdowns/member/avatar.tsx +++ b/web/components/dropdowns/member/avatar.tsx @@ -1,16 +1,19 @@ import { observer } from "mobx-react"; -// hooks -import { Avatar, AvatarGroup, UserGroupIcon } from "@plane/ui"; -import { useMember } from "@/hooks/store"; +// icons +import { LucideIcon, Users } from "lucide-react"; // ui +import { Avatar, AvatarGroup } from "@plane/ui"; +// hooks +import { useMember } from "@/hooks/store"; type AvatarProps = { showTooltip: boolean; userIds: string | string[] | null; + icon?: LucideIcon; }; export const ButtonAvatars: React.FC = observer((props) => { - const { showTooltip, userIds } = props; + const { showTooltip, userIds, icon: Icon } = props; // store hooks const { getUserDetails } = useMember(); @@ -33,5 +36,9 @@ export const ButtonAvatars: React.FC = observer((props) => { } } - return ; + return Icon ? ( + + ) : ( + + ); }); diff --git a/web/components/dropdowns/member/index.tsx b/web/components/dropdowns/member/index.tsx index d14cf316f..7af6f4fe1 100644 --- a/web/components/dropdowns/member/index.tsx +++ b/web/components/dropdowns/member/index.tsx @@ -1,6 +1,6 @@ import { Fragment, useRef, useState } from "react"; import { observer } from "mobx-react-lite"; -import { ChevronDown } from "lucide-react"; +import { ChevronDown, LucideIcon } from "lucide-react"; // headless ui import { Combobox } from "@headlessui/react"; // helpers @@ -19,6 +19,7 @@ import { MemberDropdownProps } from "./types"; type Props = { projectId?: string; + icon?: LucideIcon; onClose?: () => void; } & MemberDropdownProps; @@ -43,6 +44,7 @@ export const MemberDropdown: React.FC = observer((props) => { showTooltip = false, tabIndex, value, + icon, } = props; // states const [isOpen, setIsOpen] = useState(false); @@ -115,7 +117,7 @@ export const MemberDropdown: React.FC = observer((props) => { showTooltip={showTooltip} variant={buttonVariant} > - {!hideIcon && } + {!hideIcon && } {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && ( {Array.isArray(value) && value.length > 0 diff --git a/web/components/inbox/content/issue-properties.tsx b/web/components/inbox/content/issue-properties.tsx index 9074f67ca..92205e626 100644 --- a/web/components/inbox/content/issue-properties.tsx +++ b/web/components/inbox/content/issue-properties.tsx @@ -1,9 +1,9 @@ import React from "react"; import { observer } from "mobx-react"; import { useRouter } from "next/router"; -import { CalendarCheck2, CopyPlus, Signal, Tag } from "lucide-react"; +import { CalendarCheck2, CopyPlus, Signal, Tag, Users } from "lucide-react"; import { TInboxDuplicateIssueDetails, TIssue } from "@plane/types"; -import { ControlLink, DoubleCircleIcon, Tooltip, UserGroupIcon } from "@plane/ui"; +import { ControlLink, DoubleCircleIcon, Tooltip } from "@plane/ui"; // components import { DateDropdown, PriorityDropdown, MemberDropdown, StateDropdown } from "@/components/dropdowns"; import { IssueLabel, TIssueOperations } from "@/components/issues"; @@ -64,7 +64,7 @@ export const InboxIssueContentProperties: React.FC = observer((props) => {/* Assignee */}
- + Assignees
= observer((props if (!activity) return <>; return ( } + icon={} activityId={activityId} ends={ends} > diff --git a/web/components/issues/issue-detail/sidebar.tsx b/web/components/issues/issue-detail/sidebar.tsx index a9a23ebdc..568dc4ced 100644 --- a/web/components/issues/issue-detail/sidebar.tsx +++ b/web/components/issues/issue-detail/sidebar.tsx @@ -12,6 +12,7 @@ import { Tag, Trash2, Triangle, + Users, XCircle, } from "lucide-react"; // hooks @@ -24,7 +25,6 @@ import { RelatedIcon, TOAST_TYPE, Tooltip, - UserGroupIcon, setToast, } from "@plane/ui"; import { @@ -219,7 +219,7 @@ export const IssueDetailsSidebar: React.FC = observer((props) => {
- + Assignees
= observer((pro {/* assignee */}
- + Assignees
= observer((props) => { ) : ( - - - + )}
diff --git a/web/components/modules/module-list-item-action.tsx b/web/components/modules/module-list-item-action.tsx index fa7d71577..2a5a3cdd0 100644 --- a/web/components/modules/module-list-item-action.tsx +++ b/web/components/modules/module-list-item-action.tsx @@ -2,7 +2,7 @@ import React, { FC } from "react"; import { observer } from "mobx-react"; import { useRouter } from "next/router"; // icons -import { CalendarCheck2, CalendarClock, MoveRight, User2 } from "lucide-react"; +import { CalendarCheck2, CalendarClock, MoveRight, SquareUser } from "lucide-react"; // types import { IModule } from "@plane/types"; // ui @@ -140,9 +140,7 @@ export const ModuleListItemAction: FC = observer((props) => { ) : ( - - - + )} diff --git a/web/components/modules/sidebar.tsx b/web/components/modules/sidebar.tsx index 15163b188..3482afb1b 100644 --- a/web/components/modules/sidebar.tsx +++ b/web/components/modules/sidebar.tsx @@ -12,8 +12,9 @@ import { Info, LinkIcon, Plus, + SquareUser, Trash2, - UserCircle2, + Users, } from "lucide-react"; import { Disclosure, Transition } from "@headlessui/react"; import { IIssueFilterOptions, ILinkDetails, IModule, ModuleLink } from "@plane/types"; @@ -24,7 +25,6 @@ import { LayersIcon, CustomSelect, ModuleStatusIcon, - UserGroupIcon, TOAST_TYPE, setToast, ArchiveIcon, @@ -498,7 +498,7 @@ export const ModuleDetailsSidebar: React.FC = observer((props) => {
- + Lead
= observer((props) => { buttonVariant="background-with-text" placeholder="Lead" disabled={!isEditingAllowed || isArchived} + icon={SquareUser} />
)} @@ -523,7 +524,7 @@ export const ModuleDetailsSidebar: React.FC = observer((props) => {
- + Members
[ key: "my_activity", name: "My activity", href: `/${workspaceSlug}/profile/${userId}`, - icon: CircleUserRound, + icon: Activity, }, { key: "settings", @@ -39,7 +39,7 @@ const userLinks = (workspaceSlug: string, userId: string) => [ const profileLinks = (workspaceSlug: string, userId: string) => [ { name: "My activity", - icon: UserCircle2, + icon: Activity, link: `/${workspaceSlug}/profile/${userId}`, }, { diff --git a/web/constants/spreadsheet.ts b/web/constants/spreadsheet.ts index bad135994..d70a603a2 100644 --- a/web/constants/spreadsheet.ts +++ b/web/constants/spreadsheet.ts @@ -1,7 +1,12 @@ import { FC } from "react"; +// icons +import { CalendarDays, Link2, Signal, Tag, Triangle, Paperclip, CalendarCheck2, CalendarClock, Users } from "lucide-react"; +// types +import { IIssueDisplayProperties, TIssue, TIssueOrderByOptions } from "@plane/types"; +// ui +import { LayersIcon, DoubleCircleIcon, DiceIcon, ContrastIcon } from "@plane/ui"; import { ISvgIcons } from "@plane/ui/src/icons/type"; -import { CalendarDays, Link2, Signal, Tag, Triangle, Paperclip, CalendarCheck2, CalendarClock } from "lucide-react"; -import { LayersIcon, DoubleCircleIcon, UserGroupIcon, DiceIcon, ContrastIcon } from "@plane/ui"; +// components import { SpreadsheetAssigneeColumn, SpreadsheetAttachmentColumn, @@ -18,7 +23,6 @@ import { SpreadsheetSubIssueColumn, SpreadsheetUpdatedOnColumn, } from "@/components/issues/issue-layouts/spreadsheet"; -import { IIssueDisplayProperties, TIssue, TIssueOrderByOptions } from "@plane/types"; export const SPREADSHEET_PROPERTY_DETAILS: { [key: string]: { @@ -42,7 +46,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: { ascendingOrderTitle: "A", descendingOrderKey: "-assignees__first_name", descendingOrderTitle: "Z", - icon: UserGroupIcon, + icon: Users, Column: SpreadsheetAssigneeColumn, }, created_on: { diff --git a/web/pages/profile/index.tsx b/web/pages/profile/index.tsx index c49de68de..a7415cf3e 100644 --- a/web/pages/profile/index.tsx +++ b/web/pages/profile/index.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState, ReactElement } from "react"; import { observer } from "mobx-react"; import { Controller, useForm } from "react-hook-form"; -import { ChevronDown, User2 } from "lucide-react"; +import { ChevronDown, CircleUserRound } from "lucide-react"; import { Disclosure, Transition } from "@headlessui/react"; // services // hooks @@ -172,7 +172,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {