[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

@ -1,7 +1,8 @@
"use client";
import type { FC } from "react";
import { Info, X } from "lucide-react";
import { Info } from "lucide-react";
import { CloseIcon } from "@plane/propel/icons";
// helpers
import type { TAuthErrorInfo } from "@/helpers/authentication.helper";
@ -24,7 +25,7 @@ export const AuthBanner: FC<TAuthBanner> = (props) => {
className="relative ml-auto w-6 h-6 rounded-sm flex justify-center items-center transition-all cursor-pointer hover:bg-custom-primary-100/20 text-custom-primary-100/80"
onClick={() => handleBannerData && handleBannerData(undefined)}
>
<X className="w-4 h-4 flex-shrink-0" />
<CloseIcon className="w-4 h-4 flex-shrink-0" />
</div>
</div>
);

View file

@ -1,9 +1,9 @@
"use client";
import { observer } from "mobx-react";
import { X } from "lucide-react";
// types
import { useTranslation } from "@plane/i18n";
import { CloseIcon } from "@plane/propel/icons";
// types
import type { TFilters } from "@/types/issue";
// components
import { AppliedPriorityFilters } from "./priority";
@ -55,7 +55,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemoveFilter(filterKey, null)}
>
<X size={12} strokeWidth={2} />
<CloseIcon height={12} width={12} strokeWidth={2} />
</button>
</div>
</div>
@ -67,7 +67,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
>
{t("common.clear_all")}
<X size={12} strokeWidth={2} />
<CloseIcon height={12} width={12} strokeWidth={2} />
</button>
</div>
);

View file

@ -1,6 +1,6 @@
"use client";
import { X } from "lucide-react";
import { CloseIcon } from "@plane/propel/icons";
// types
import type { IIssueLabel } from "@/types/issue";
@ -34,7 +34,7 @@ export const AppliedLabelsFilters: React.FC<Props> = (props) => {
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(labelId)}
>
<X size={10} strokeWidth={2} />
<CloseIcon height={10} width={10} strokeWidth={2} />
</button>
</div>
);

View file

@ -1,7 +1,6 @@
"use client";
import { X } from "lucide-react";
import { PriorityIcon } from "@plane/propel/icons";
import { CloseIcon, PriorityIcon } from "@plane/propel/icons";
import type { TIssuePriorities } from "@plane/propel/icons";
type Props = {
@ -25,7 +24,7 @@ export const AppliedPriorityFilters: React.FC<Props> = (props) => {
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(priority)}
>
<X size={10} strokeWidth={2} />
<CloseIcon height={10} width={10} strokeWidth={2} />
</button>
</div>
))}

View file

@ -1,10 +1,9 @@
"use client";
import { observer } from "mobx-react";
import { X } from "lucide-react";
// plane imports
import { EIconSize } from "@plane/constants";
import { StateGroupIcon } from "@plane/propel/icons";
import { CloseIcon, StateGroupIcon } from "@plane/propel/icons";
// hooks
import { useStates } from "@/hooks/store/use-state";
@ -34,7 +33,7 @@ export const AppliedStateFilters: React.FC<Props> = observer((props) => {
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(stateId)}
>
<X size={10} strokeWidth={2} />
<CloseIcon height={10} width={10} strokeWidth={2} />
</button>
</div>
);

View file

@ -1,8 +1,7 @@
"use client";
import React from "react";
// lucide icons
import { ChevronDown, ChevronUp } from "lucide-react";
// icons
import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
interface IFilterHeader {
title: string;
@ -18,7 +17,7 @@ export const FilterHeader = ({ title, isPreviewEnabled, handleIsPreviewEnabled }
className="grid h-5 w-5 flex-shrink-0 place-items-center rounded hover:bg-custom-background-80"
onClick={handleIsPreviewEnabled}
>
{isPreviewEnabled ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
{isPreviewEnabled ? <ChevronUpIcon height={14} width={14} /> : <ChevronDownIcon height={14} width={14} />}
</button>
</div>
);

View file

@ -2,7 +2,8 @@
import React, { useState } from "react";
import { observer } from "mobx-react";
import { Search, X } from "lucide-react";
import { Search } from "lucide-react";
import { CloseIcon } from "@plane/propel/icons";
// types
import type { IIssueFilterOptions, TIssueFilterKeys } from "@/types/issue";
// local imports
@ -37,7 +38,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
/>
{filtersSearchQuery !== "" && (
<button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
<X className="text-custom-text-300" size={12} strokeWidth={2} />
<CloseIcon className="text-custom-text-300" height={12} width={12} strokeWidth={2} />
</button>
)}
</div>

View file

@ -1,7 +1,8 @@
import type { FC } from "react";
import React from "react";
import { observer } from "mobx-react";
import { Circle, ChevronDown, ChevronUp } from "lucide-react";
import { Circle } from "lucide-react";
import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
// mobx
interface IHeaderSubGroupByCard {
@ -20,7 +21,7 @@ export const HeaderSubGroupByCard: FC<IHeaderSubGroupByCard> = observer((props)
onClick={() => toggleExpanded()}
>
<div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80">
{isExpanded ? <ChevronUp width={14} strokeWidth={2} /> : <ChevronDown width={14} strokeWidth={2} />}
{isExpanded ? <ChevronUpIcon width={14} strokeWidth={2} /> : <ChevronDownIcon width={14} strokeWidth={2} />}
</div>
<div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm">

View file

@ -1,10 +1,11 @@
import React, { useRef, useState } from "react";
import { observer } from "mobx-react";
import { Controller, useForm } from "react-hook-form";
import { Check, MessageSquare, MoreVertical, X } from "lucide-react";
import { Check, MessageSquare, MoreVertical } from "lucide-react";
import { Menu, Transition } from "@headlessui/react";
// plane imports
import type { EditorRefApi } from "@plane/editor";
import { CloseIcon } from "@plane/propel/icons";
import type { TIssuePublicComment } from "@plane/types";
import { getFileURL } from "@plane/utils";
// components
@ -136,7 +137,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
className="group rounded border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
onClick={() => setIsEditing(false)}
>
<X className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" strokeWidth={2} />
<CloseIcon className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" strokeWidth={2} />
</button>
</div>
</form>