thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

[WEB-1148] chore: icons updates for consistency across platform. (#4571)

Browse Source 
* [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`.
This commit is contained in:
Prateek Shourya 2024-05-28 11:50:04 +05:30 committed by GitHub
parent c9586bfdcf
commit 1d7b3efb80
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
20 changed files with 65 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/ui/src/icons/index.ts
View File

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

35
packages/ui/src/icons/user-group-icon.tsx
View File

@ -1,35 +0,0 @@
import * as React from "react";
import { ISvgIcons } from "./type";
export const UserGroupIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
<svg
viewBox="0 0 24 24"
className={`${className} stroke-2`}
stroke="currentColor"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<path
d="M18 19C18 17.4087 17.3679 15.8826 16.2426 14.7574C15.1174 13.6321 13.5913 13 12 13C10.4087 13 8.88258 13.6321 7.75736 14.7574C6.63214 15.8826 6 17.4087 6 19"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M12 13C14.2091 13 16 11.2091 16 9C16 6.79086 14.2091 5 12 5C9.79086 5 8 6.79086 8 9C8 11.2091 9.79086 13 12 13Z"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M23 18C23 16.636 22.4732 15.3279 21.5355 14.3635C20.5979 13.399 19.3261 12.8571 18 12.8571C18.8841 12.8571 19.7319 12.4959 20.357 11.8529C20.9821 11.21 21.3333 10.3379 21.3333 9.42857C21.3333 8.51926 20.9821 7.64719 20.357 7.00421C19.7319 6.36122 18.8841 6 18 6"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M1 18C1 16.636 1.52678 15.3279 2.46447 14.3635C3.40215 13.399 4.67392 12.8571 6 12.8571C5.11595 12.8571 4.2681 12.4959 3.64298 11.8529C3.01786 11.21 2.66667 10.3379 2.66667 9.42857C2.66667 8.51926 3.01786 7.64719 3.64298 7.00421C4.2681 6.36122 5.11595 6 6 6"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);

6
web/components/command-palette/actions/issue-actions/actions-list.tsx
View File

@ -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<Props> = observer((props) => {
className="focus:outline-none"
>
<div className="flex items-center gap-2 text-custom-text-200">
<UserGroupIcon className="h-3.5 w-3.5" />
<Users className="h-3.5 w-3.5" />
Assign to...
</div>
</Command.Item>

6
web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx
View File

@ -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<Props> = observer((props) => {
})}
</AvatarGroup>
) : (
<span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
<User2 className="h-4 w-4 text-custom-text-400" />
</span>
<Users className="h-4 w-4 text-custom-text-300" />
)}
<FavoriteStar

6
web/components/cycles/list/cycle-list-item-action.tsx
View File

@ -1,6 +1,6 @@
import React, { FC, MouseEvent } from "react";
import { observer } from "mobx-react";
import { CalendarCheck2, CalendarClock, MoveRight, User2 } from "lucide-react";
import { CalendarCheck2, CalendarClock, MoveRight, Users } from "lucide-react";
// types
import { ICycle, TCycleGroups } from "@plane/types";
// ui
@ -146,9 +146,7 @@ export const CycleListItemAction: FC<Props> = observer((props) => {
})}
</AvatarGroup>
) : (
<span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
<User2 className="h-4 w-4 text-custom-text-400" />
</span>
<Users className="h-4 w-4 text-custom-text-300" />
)}
</div>
</Tooltip>

4
web/components/cycles/sidebar.tsx
View File

@ -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<Props> = observer((props) => {
<div className="flex items-center justify-start gap-1">
<div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
<UserCircle2 className="h-4 w-4" />
<SquareUser className="h-4 w-4" />
<span className="text-base">Lead</span>
</div>
<div className="flex w-3/5 items-center rounded-sm">

17
web/components/dropdowns/member/avatar.tsx
View File

@ -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<AvatarProps> = 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<AvatarProps> = observer((props) => {
}
}
return <UserGroupIcon className="h-3 w-3 flex-shrink-0" />;
return Icon ? (
<Icon className="h-3 w-3 flex-shrink-0" />
) : (
<Users className="h-3 w-3 flex-shrink-0" />
);
});

6
web/components/dropdowns/member/index.tsx
View File

@ -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<Props> = observer((props) => {
showTooltip = false,
tabIndex,
value,
icon,
} = props;
// states
const [isOpen, setIsOpen] = useState(false);
@ -115,7 +117,7 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
showTooltip={showTooltip}
variant={buttonVariant}
>
{!hideIcon && <ButtonAvatars showTooltip={showTooltip} userIds={value} />}
{!hideIcon && <ButtonAvatars showTooltip={showTooltip} userIds={value} icon={icon} />}
{BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
<span className="flex-grow truncate text-xs leading-5">
{Array.isArray(value) && value.length > 0

6
web/components/inbox/content/issue-properties.tsx
View File

@ -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<Props> = observer((props) =>
{/* Assignee */}
<div className="flex h-8 items-center gap-2">
<div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
<UserGroupIcon className="h-4 w-4 flex-shrink-0" />
<Users className="h-4 w-4 flex-shrink-0" />
<span>Assignees</span>
</div>
<MemberDropdown

6
web/components/integration/github/root.tsx
View File

@ -10,9 +10,9 @@ import useSWR, { mutate } from "swr";
// react-hook-form
// services
// components
import { ArrowLeft, Check, List, Settings, UploadCloud } from "lucide-react";
import { ArrowLeft, Check, List, Settings, UploadCloud, Users } from "lucide-react";
import { IGithubRepoCollaborator, IGithubServiceImportFormData } from "@plane/types";
import { UserGroupIcon, TOAST_TYPE, setToast } from "@plane/ui";
import { TOAST_TYPE, setToast } from "@plane/ui";
import {
GithubImportConfigure,
GithubImportData,
@ -72,7 +72,7 @@ const integrationWorkflowData = [
{
title: "Users",
key: "import-users",
icon: UserGroupIcon,
icon: Users,
},
{
title: "Confirm",

6
web/components/integration/jira/root.tsx
View File

@ -5,12 +5,12 @@ import { useRouter } from "next/router";
import { FormProvider, useForm } from "react-hook-form";
import { mutate } from "swr";
// icons
import { ArrowLeft, Check, List, Settings } from "lucide-react";
import { ArrowLeft, Check, List, Settings, Users } from "lucide-react";
import { IJiraImporterForm } from "@plane/types";
// services
// fetch keys
// components
import { Button, UserGroupIcon } from "@plane/ui";
import { Button } from "@plane/ui";
import { IMPORTER_SERVICES_LIST } from "@/constants/fetch-keys";
// assets
import { JiraImporterService } from "@/services/integrations";
@ -44,7 +44,7 @@ const integrationWorkflowData: Array<{
{
title: "Users",
key: "import-users",
icon: UserGroupIcon,
icon: Users,
},
{
title: "Confirm",

8
web/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx
View File

@ -1,11 +1,11 @@
import { FC } from "react";
import { observer } from "mobx-react";
// hooks
import { UserGroupIcon } from "@plane/ui";
// icons
import { Users } from "lucide-react";
// hooks;
import { useIssueDetail } from "@/hooks/store";
// components
import { IssueActivityBlockComponent, IssueLink } from "./";
// icons
type TIssueAssigneeActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
@ -21,7 +21,7 @@ export const IssueAssigneeActivity: FC<TIssueAssigneeActivity> = observer((props
if (!activity) return <></>;
return (
<IssueActivityBlockComponent
icon={<UserGroupIcon className="h-4 w-4 flex-shrink-0" />}
icon={<Users className="h-3 w-3 flex-shrink-0" />}
activityId={activityId}
ends={ends}
>

4
web/components/issues/issue-detail/sidebar.tsx
View File

@ -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<Props> = observer((props) => {
<div className="flex h-8 items-center gap-2">
<div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
<UserGroupIcon className="h-4 w-4 flex-shrink-0" />
<Users className="h-4 w-4 flex-shrink-0" />
<span>Assignees</span>
</div>
<MemberDropdown

5
web/components/issues/peek-overview/properties.tsx
View File

@ -10,10 +10,11 @@ import {
XCircle,
CalendarClock,
CalendarCheck2,
Users,
} from "lucide-react";
// hooks
// ui icons
import { DiceIcon, DoubleCircleIcon, UserGroupIcon, ContrastIcon, RelatedIcon } from "@plane/ui";
import { DiceIcon, DoubleCircleIcon, ContrastIcon, RelatedIcon } from "@plane/ui";
// components
import {
DateDropdown,
@ -94,7 +95,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
{/* assignee */}
<div className="flex w-full items-center gap-3 h-8">
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
<UserGroupIcon className="h-4 w-4 flex-shrink-0" />
<Users className="h-4 w-4 flex-shrink-0" />
<span>Assignees</span>
</div>
<MemberDropdown

6
web/components/modules/module-card-item.tsx
View File

@ -2,7 +2,7 @@ import React, { useRef } from "react";
import { observer } from "mobx-react-lite";
import Link from "next/link";
import { useRouter } from "next/router";
import { CalendarCheck2, CalendarClock, Info, MoveRight, User2 } from "lucide-react";
import { CalendarCheck2, CalendarClock, Info, MoveRight, SquareUser } from "lucide-react";
// ui
import { LayersIcon, Tooltip, setPromiseToast } from "@plane/ui";
// components
@ -188,9 +188,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
</span>
) : (
<Tooltip tooltipContent="No lead">
<span className="cursor-default flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
<User2 className="h-4 w-4 text-custom-text-400" />
</span>
<SquareUser className="h-4 w-4 mx-1 text-custom-text-300 " />
</Tooltip>
)}
</div>

6
web/components/modules/module-list-item-action.tsx
View File

@ -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<Props> = observer((props) => {
</span>
) : (
<Tooltip tooltipContent="No lead">
<span className="cursor-default flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
<User2 className="h-4 w-4 text-custom-text-400" />
</span>
<SquareUser className="h-4 w-4 text-custom-text-300" />
</Tooltip>
)}

9
web/components/modules/sidebar.tsx
View File

@ -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<Props> = observer((props) => {
<div className="flex flex-col gap-5 pb-6 pt-2.5">
<div className="flex items-center justify-start gap-1">
<div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
<UserCircle2 className="h-4 w-4" />
<SquareUser className="h-4 w-4" />
<span className="text-base">Lead</span>
</div>
<Controller
@ -516,6 +516,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
buttonVariant="background-with-text"
placeholder="Lead"
disabled={!isEditingAllowed || isArchived}
icon={SquareUser}
/>
</div>
)}
@ -523,7 +524,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
</div>
<div className="flex items-center justify-start gap-1">
<div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
<UserGroupIcon className="h-4 w-4" />
<Users className="h-4 w-4" />
<span className="text-base">Members</span>
</div>
<Controller

6
web/components/workspace/sidebar-dropdown.tsx
View File

@ -4,7 +4,7 @@ import Link from "next/link";
import { useRouter } from "next/router";
import { usePopper } from "react-popper";
// icons
import { Check, ChevronDown, CircleUserRound, LogOut, Mails, PlusSquare, Settings, UserCircle2 } from "lucide-react";
import { Activity, Check, ChevronDown, LogOut, Mails, PlusSquare, Settings } from "lucide-react";
// ui
import { Menu, Transition } from "@headlessui/react";
// types
@ -27,7 +27,7 @@ const userLinks = (workspaceSlug: string, userId: string) => [
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}`,
},
{

12
web/constants/spreadsheet.ts
View File

@ -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: {

4
web/pages/profile/index.tsx
View File

@ -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(() => {
<button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
{!watch("avatar") || watch("avatar") === "" ? (
<div className="h-16 w-16 rounded-md bg-custom-background-80 p-2">
<User2 className="h-full w-full text-custom-text-200" />
<CircleUserRound className="h-full w-full text-custom-text-200" />
</div>
) : (
<div className="relative h-16 w-16 overflow-hidden">