Updated icons to mutate (#5670)

This commit is contained in:
Mihir 2024-09-23 16:26:47 +05:30 committed by GitHub
parent 4d200ff0a3
commit 76a34440c3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 10 additions and 8 deletions

View file

@ -1,6 +1,6 @@
"use client"; "use client";
import { ArrowDownWideNarrow, Check, ChevronDown } from "lucide-react"; import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check, ChevronDown } from "lucide-react";
import { TModuleOrderByOptions } from "@plane/types"; import { TModuleOrderByOptions } from "@plane/types";
// ui // ui
import { CustomMenu, getButtonStyling } from "@plane/ui"; import { CustomMenu, getButtonStyling } from "@plane/ui";
@ -27,9 +27,9 @@ export const ModuleOrderByDropdown: React.FC<Props> = (props) => {
<CustomMenu <CustomMenu
customButton={ customButton={
<div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}> <div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}>
<ArrowDownWideNarrow className="h-3 w-3" /> {!isDescending ? <ArrowUpWideNarrow className="size-3 " /> : <ArrowDownWideNarrow className="size-3 " />}
{orderByDetails?.label} {orderByDetails?.label}
<ChevronDown className="h-3 w-3" strokeWidth={2} /> <ChevronDown className="size-3" strokeWidth={2} />
</div> </div>
} }
placement="bottom-end" placement="bottom-end"

View file

@ -1,6 +1,6 @@
"use client"; "use client";
import { ArrowDownWideNarrow, Check, ChevronDown } from "lucide-react"; import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check, ChevronDown } from "lucide-react";
// types // types
import { TPageFiltersSortBy, TPageFiltersSortKey } from "@plane/types"; import { TPageFiltersSortBy, TPageFiltersSortKey } from "@plane/types";
// ui // ui
@ -26,7 +26,7 @@ export const PageOrderByDropdown: React.FC<Props> = (props) => {
<CustomMenu <CustomMenu
customButton={ customButton={
<div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}> <div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}>
<ArrowDownWideNarrow className="h-3 w-3" /> {!isDescending ? <ArrowUpWideNarrow className="size-3 " /> : <ArrowDownWideNarrow className="size-3 " />}
{orderByDetails?.label} {orderByDetails?.label}
<ChevronDown className="h-3 w-3" strokeWidth={2} /> <ChevronDown className="h-3 w-3" strokeWidth={2} />
</div> </div>

View file

@ -1,6 +1,6 @@
"use client"; "use client";
import { ArrowDownWideNarrow, Check, ChevronDown } from "lucide-react"; import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check, ChevronDown } from "lucide-react";
// types // types
import { TViewFiltersSortBy, TViewFiltersSortKey } from "@plane/types"; import { TViewFiltersSortBy, TViewFiltersSortKey } from "@plane/types";
// ui // ui
@ -31,12 +31,14 @@ export const ViewOrderByDropdown: React.FC<Props> = (props) => {
: `${getButtonStyling("neutral-primary", "sm")} px-2 text-custom-text-300`; : `${getButtonStyling("neutral-primary", "sm")} px-2 text-custom-text-300`;
const chevronClassName = isMobile ? "h-4 w-4 text-custom-text-200" : "h-3 w-3"; const chevronClassName = isMobile ? "h-4 w-4 text-custom-text-200" : "h-3 w-3";
const icon = (
<>{!isDescending ? <ArrowUpWideNarrow className="size-3 " /> : <ArrowDownWideNarrow className="size-3 " />}</>
);
return ( return (
<CustomMenu <CustomMenu
customButton={ customButton={
<span className={buttonClassName}> <span className={buttonClassName}>
{!isMobile && <ArrowDownWideNarrow className="h-3 w-3" />} {!isMobile && icon}
<span className="flex-shrink-0"> {orderByDetails?.label}</span> <span className="flex-shrink-0"> {orderByDetails?.label}</span>
<ChevronDown className={chevronClassName} strokeWidth={2} /> <ChevronDown className={chevronClassName} strokeWidth={2} />
</span> </span>