[WEB-5191 | WEB-5197] chore: actions and arrows icon revamp (#7984)

This commit is contained in:
Anmol Singh Bhatia 2025-10-29 20:13:08 +05:30 committed by GitHub
parent 350107d6c1
commit 0e8128594b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
199 changed files with 700 additions and 539 deletions

View file

@ -4,10 +4,10 @@
import type { FC } from "react";
import { observer } from "mobx-react";
import { useParams, useRouter } from "next/navigation";
import { ChevronDown, PanelRight } from "lucide-react";
import { PanelRight } from "lucide-react";
import { PROFILE_VIEWER_TAB, PROFILE_ADMINS_TAB, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { YourWorkIcon } from "@plane/propel/icons";
import { YourWorkIcon, ChevronDownIcon } from "@plane/propel/icons";
import type { IUserProfileProjectSegregation } from "@plane/types";
import { Breadcrumbs, Header, CustomMenu } from "@plane/ui";
import { cn } from "@plane/utils";
@ -75,7 +75,7 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
customButton={
<div className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1.5">
<span className="flex flex-grow justify-center text-sm text-custom-text-200">{type}</span>
<ChevronDown className="h-4 w-4 text-custom-text-400" />
<ChevronDownIcon className="h-4 w-4 text-custom-text-400" />
</div>
}
customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"

View file

@ -3,12 +3,12 @@
import { useCallback } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// icons
import { ChevronDown } from "lucide-react";
// plane constants
import { EIssueFilterType, ISSUE_LAYOUTS, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
// plane i18n
import { useTranslation } from "@plane/i18n";
// icons
import { ChevronDownIcon } from "@plane/propel/icons";
// types
import type {
IIssueDisplayFilterOptions,
@ -88,7 +88,7 @@ export const ProfileIssuesMobileHeader = observer(() => {
customButton={
<div className="flex flex-center text-sm text-custom-text-200">
{t("common.layout")}
<ChevronDown className="ml-2 h-4 w-4 text-custom-text-200 my-auto" strokeWidth={2} />
<ChevronDownIcon className="ml-2 h-4 w-4 text-custom-text-200 my-auto" strokeWidth={2} />
</div>
}
customButtonClassName="flex flex-center text-custom-text-200 text-sm"
@ -117,7 +117,7 @@ export const ProfileIssuesMobileHeader = observer(() => {
menuButton={
<div className="flex flex-center text-sm text-custom-text-200">
{t("common.display")}
<ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" strokeWidth={2} />
<ChevronDownIcon className="ml-2 h-4 w-4 text-custom-text-200" strokeWidth={2} />
</div>
}
>

View file

@ -3,12 +3,10 @@
import { useCallback, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// icons
import { ChevronDown } from "lucide-react";
// plane imports
import { EIssueFilterType, ISSUE_LAYOUTS, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { CalendarLayoutIcon, BoardLayoutIcon, ListLayoutIcon } from "@plane/propel/icons";
import { CalendarLayoutIcon, BoardLayoutIcon, ListLayoutIcon, ChevronDownIcon } from "@plane/propel/icons";
import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, EIssueLayoutTypes } from "@plane/types";
import { EIssuesStoreType } from "@plane/types";
import { CustomMenu } from "@plane/ui";
@ -125,7 +123,7 @@ export const CycleIssuesMobileHeader = observer(() => {
menuButton={
<span className="flex items-center text-custom-text-200 text-sm">
{t("common.display")}
<ChevronDown className="text-custom-text-200 h-4 w-4 ml-2" />
<ChevronDownIcon className="text-custom-text-200 h-4 w-4 ml-2" />
</span>
}
>

View file

@ -3,10 +3,10 @@
import { useCallback, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { ChevronDown } from "lucide-react";
// plane imports
import { EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { ChevronDownIcon } from "@plane/propel/icons";
import type { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
import { EIssuesStoreType, EIssueLayoutTypes } from "@plane/types";
// components
@ -79,7 +79,7 @@ export const ProjectIssuesMobileHeader = observer(() => {
menuButton={
<span className="flex items-center text-sm text-custom-text-200">
{t("common.display")}
<ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" />
<ChevronDownIcon className="ml-2 h-4 w-4 text-custom-text-200" />
</span>
}
>

View file

@ -3,12 +3,10 @@
import { useCallback, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
// icons
import { ChevronDown } from "lucide-react";
// plane imports
import { EIssueFilterType, ISSUE_LAYOUTS, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { CalendarLayoutIcon, BoardLayoutIcon, ListLayoutIcon } from "@plane/propel/icons";
import { CalendarLayoutIcon, BoardLayoutIcon, ListLayoutIcon, ChevronDownIcon } from "@plane/propel/icons";
import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, EIssueLayoutTypes } from "@plane/types";
import { EIssuesStoreType } from "@plane/types";
import { CustomMenu } from "@plane/ui";
@ -109,7 +107,7 @@ export const ModuleIssuesMobileHeader = observer(() => {
menuButton={
<span className="flex items-center text-sm text-custom-text-200">
Display
<ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" />
<ChevronDownIcon className="ml-2 h-4 w-4 text-custom-text-200" />
</span>
}
>

View file

@ -1,9 +1,9 @@
"use client";
import { observer } from "mobx-react";
import { ChevronDown } from "lucide-react";
import { MODULE_VIEW_LAYOUTS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { ChevronDownIcon } from "@plane/propel/icons";
import { CustomMenu, Row } from "@plane/ui";
import { ModuleLayoutIcon } from "@/components/modules";
import { useModuleFilter } from "@/hooks/store/use-module-filter";
@ -22,7 +22,7 @@ export const ModulesListMobileHeader = observer(() => {
// placement="bottom-start"
customButton={
<Row className="flex flex-grow justify-center text-custom-text-200 text-sm gap-2">
<span>Layout</span> <ChevronDown className="h-4 w-4 text-custom-text-200 my-auto" strokeWidth={1} />
<span>Layout</span> <ChevronDownIcon className="h-4 w-4 text-custom-text-200 my-auto" strokeWidth={1} />
</Row>
}
customButtonClassName="flex flex-grow justify-center items-center text-custom-text-200 text-sm"

View file

@ -2,7 +2,8 @@
import { observer } from "mobx-react";
// icons
import { ChevronDown, ListFilter } from "lucide-react";
import { ListFilter } from "lucide-react";
import { ChevronDownIcon } from "@plane/propel/icons";
// components
import { Row } from "@plane/ui";
import { FiltersDropdown } from "@/components/issues/issue-layouts/filters";
@ -42,7 +43,7 @@ export const ViewMobileHeader = observer(() => {
menuButton={
<Row className="flex items-center text-sm text-custom-text-200">
Filters
<ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" strokeWidth={2} />
<ChevronDownIcon className="ml-2 h-4 w-4 text-custom-text-200" strokeWidth={2} />
</Row>
}
>

View file

@ -5,22 +5,12 @@ import { observer } from "mobx-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
// icons
import {
ChevronLeft,
LogOut,
MoveLeft,
Activity,
Bell,
CircleUser,
KeyRound,
Settings2,
CirclePlus,
Mails,
} from "lucide-react";
import { LogOut, MoveLeft, Activity, Bell, CircleUser, KeyRound, Settings2, CirclePlus, Mails } from "lucide-react";
// plane imports
import { PROFILE_ACTION_LINKS } from "@plane/constants";
import { useOutsideClickDetector } from "@plane/hooks";
import { useTranslation } from "@plane/i18n";
import { ChevronLeftIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { Tooltip } from "@plane/propel/tooltip";
import { cn, getFileURL } from "@plane/utils";
@ -141,7 +131,7 @@ export const ProfileLayoutSidebar = observer(() => {
}`}
>
<span className="grid h-5 w-5 flex-shrink-0 place-items-center">
<ChevronLeft className="h-5 w-5" strokeWidth={1} />
<ChevronLeftIcon className="h-5 w-5" strokeWidth={1} />
</span>
{!sidebarCollapsed && (
<h4 className="truncate text-lg font-semibold text-custom-text-200">{t("profile_settings")}</h4>

View file

@ -4,7 +4,8 @@ import React from "react";
import { observer } from "mobx-react";
import { useSearchParams } from "next/navigation";
import useSWR from "swr";
import { Boxes, Check, Share2, Star, User2, X } from "lucide-react";
import { Boxes, Check, Share2, Star, User2 } from "lucide-react";
import { CloseIcon } from "@plane/propel/icons";
// components
import { LogoSpinner } from "@/components/common/logo-spinner";
import { EmptySpace, EmptySpaceItem } from "@/components/ui/empty-space";
@ -85,7 +86,7 @@ const WorkspaceInvitationPage = observer(() => {
description="Your workspace is where you'll create projects, collaborate on your work items, and organize different streams of work in your Plane account."
>
<EmptySpaceItem Icon={Check} title="Accept" action={handleAccept} />
<EmptySpaceItem Icon={X} title="Ignore" action={handleReject} />
<EmptySpaceItem Icon={CloseIcon} title="Ignore" action={handleReject} />
</EmptySpace>
)
) : error || invitationDetail?.responded_at ? (