Updated icons to mutate (#5670)
This commit is contained in:
parent
4d200ff0a3
commit
76a34440c3
3 changed files with 10 additions and 8 deletions
|
|
@ -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"
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue