From c3be50c51114c613600ddc7524e10771e6c7200a Mon Sep 17 00:00:00 2001
From: Mihir <82092317+Jimmycutie@users.noreply.github.com>
Date: Fri, 20 Sep 2024 19:28:02 +0530
Subject: [PATCH] Updated icons to mutate

---
 web/core/components/modules/dropdowns/order-by.tsx | 6 +++---
 web/core/components/pages/list/order-by.tsx        | 4 ++--
 web/core/components/views/filters/order-by.tsx     | 8 +++++---
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/web/core/components/modules/dropdowns/order-by.tsx b/web/core/components/modules/dropdowns/order-by.tsx
index 727074ae6f9..a3b0af88147 100644
--- 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
index 1bca8620ba6..ee1a9b978ed 100644
--- 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
index acaa1000932..1012700dcde 100644
--- 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>