Updated icons to mutate (#5670)

makeplane · Sep 23, 2024 · 76a3444 · 76a3444
1 parent 4d200ff
commit 76a3444
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/web/core/components/modules/dropdowns/order-by.tsx b/web/core/components/modules/dropdowns/order-by.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ArrowDownWideNarrow, Check, ChevronDown } from "lucide-react";
+import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check, ChevronDown } from "lucide-react";
 import { TModuleOrderByOptions } from "@plane/types";
 // ui
 import { CustomMenu, getButtonStyling } from "@plane/ui";
@@ -27,9 +27,9 @@ export const ModuleOrderByDropdown: React.FC<Props> = (props) => {
     <CustomMenu
       customButton={
         <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}
-          <ChevronDown className="h-3 w-3" strokeWidth={2} />
+          <ChevronDown className="size-3" strokeWidth={2} />
         </div>
       }
       placement="bottom-end"

diff --git a/web/core/components/pages/list/order-by.tsx b/web/core/components/pages/list/order-by.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ArrowDownWideNarrow, Check, ChevronDown } from "lucide-react";
+import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check, ChevronDown } from "lucide-react";
 // types
 import { TPageFiltersSortBy, TPageFiltersSortKey } from "@plane/types";
 // ui
@@ -26,7 +26,7 @@ export const PageOrderByDropdown: React.FC<Props> = (props) => {
     <CustomMenu
       customButton={
         <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}
           <ChevronDown className="h-3 w-3" strokeWidth={2} />
         </div>

diff --git a/web/core/components/views/filters/order-by.tsx b/web/core/components/views/filters/order-by.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ArrowDownWideNarrow, Check, ChevronDown } from "lucide-react";
+import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check, ChevronDown } from "lucide-react";
 // types
 import { TViewFiltersSortBy, TViewFiltersSortKey } from "@plane/types";
 // ui
@@ -31,12 +31,14 @@ export const ViewOrderByDropdown: React.FC<Props> = (props) => {
     : `${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 icon = (
+    <>{!isDescending ? <ArrowUpWideNarrow className="size-3 " /> : <ArrowDownWideNarrow className="size-3 " />}</>
+  );
   return (
     <CustomMenu
       customButton={
         <span className={buttonClassName}>
-          {!isMobile && <ArrowDownWideNarrow className="h-3 w-3" />}
+          {!isMobile && icon}
           <span className="flex-shrink-0"> {orderByDetails?.label}</span>
           <ChevronDown className={chevronClassName} strokeWidth={2} />
         </span>