From 3a9f01b9eb9bd41dba98cc9808d8fc9643dcae67 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 18 Sep 2024 18:10:30 +0530
Subject: [PATCH] [WEB-2462] [WEB-2461] fix: project intake filters (#5645)

* chore: intake order by options updated

* fix: intake filters icon and spacing

* chore: code refactor
---
 .../components/inbox/inbox-filter/root.tsx    | 50 +++++++++----------
 .../inbox/inbox-filter/sorting/order-by.tsx   | 27 +++++-----
 web/core/constants/inbox.tsx                  |  4 +-
 3 files changed, 39 insertions(+), 42 deletions(-)

diff --git a/web/core/components/inbox/inbox-filter/root.tsx b/web/core/components/inbox/inbox-filter/root.tsx
index 7aefedd316..0476103310 100644
--- a/web/core/components/inbox/inbox-filter/root.tsx
+++ b/web/core/components/inbox/inbox-filter/root.tsx
@@ -5,34 +5,30 @@ import { cn } from "@plane/editor";
 import { getButtonStyling } from "@plane/ui";
 import { InboxIssueFilterSelection, InboxIssueOrderByDropdown } from "@/components/inbox/inbox-filter";
 import { FiltersDropdown } from "@/components/issues";
+import useSize from "@/hooks/use-window-size";
+
+const smallButton = <ListFilter className="size-3 " />;
 
-const smallButton = <ListFilter className="h-3 " />;
 const largeButton = (
-  <div className={cn(getButtonStyling("neutral-primary", "sm"), "text-custom-text-300")}>
-    <ListFilter className="h-3 " />
-    <span className="hidden xl:flex">Filters</span>
+  <div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}>
+    <ListFilter className="size-3 " />
+    <span>Filters</span>
+    <ChevronDown className="size-3" strokeWidth={2} />
+  </div>
+);
+export const FiltersRoot: FC = () => {
+  const windowSize = useSize();
 
-    <ChevronDown className="h-3 w-3" strokeWidth={2} />
-  </div>
-);
-export const FiltersRoot: FC = () => (
-  <div className="relative flex items-center gap-2">
-    <div>
-      <FiltersDropdown
-        menuButton={
-          <>
-            <div className="hidden xl:flex">{largeButton}</div>
-            <div className="flex xl:hidden">{smallButton}</div>
-          </>
-        }
-        title=""
-        placement="bottom-end"
-      >
-        <InboxIssueFilterSelection />
-      </FiltersDropdown>
+  return (
+    <div className="relative flex items-center gap-2">
+      <div>
+        <FiltersDropdown menuButton={windowSize[0] > 1280 ? largeButton : smallButton} title="" placement="bottom-end">
+          <InboxIssueFilterSelection />
+        </FiltersDropdown>
+      </div>
+      <div>
+        <InboxIssueOrderByDropdown />
+      </div>
     </div>
-    <div>
-      <InboxIssueOrderByDropdown />
-    </div>
-  </div>
-);
+  );
+};
diff --git a/web/core/components/inbox/inbox-filter/sorting/order-by.tsx b/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
index 07fe1b0225..f1282c3c1a 100644
--- a/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
+++ b/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
@@ -10,34 +10,35 @@ import { INBOX_ISSUE_ORDER_BY_OPTIONS, INBOX_ISSUE_SORT_BY_OPTIONS } from "@/con
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useProjectInbox } from "@/hooks/store";
+import useSize from "@/hooks/use-window-size";
 
 export const InboxIssueOrderByDropdown: FC = observer(() => {
   // hooks
+  const windowSize = useSize();
   const { inboxSorting, handleInboxIssueSorting } = useProjectInbox();
   const orderByDetails =
     INBOX_ISSUE_ORDER_BY_OPTIONS.find((option) => inboxSorting?.order_by?.includes(option.key)) || undefined;
   const smallButton =
-    inboxSorting?.sort_by === "asc" ? <ArrowUpWideNarrow className="h-3 " /> : <ArrowDownWideNarrow className="h-3 " />;
+    inboxSorting?.sort_by === "asc" ? (
+      <ArrowUpWideNarrow className="size-3 " />
+    ) : (
+      <ArrowDownWideNarrow className="size-3 " />
+    );
   const largeButton = (
-    <div className={cn(getButtonStyling("neutral-primary", "sm"), "text-custom-text-300")}>
+    <div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}>
       {inboxSorting?.sort_by === "asc" ? (
-        <ArrowUpWideNarrow className="h-3 " />
+        <ArrowUpWideNarrow className="size-3 " />
       ) : (
-        <ArrowDownWideNarrow className="h-3 " />
+        <ArrowDownWideNarrow className="size-3 " />
       )}
       {orderByDetails?.label || "Order By"}
 
-      <ChevronDown className="h-3 w-3" strokeWidth={2} />
+      <ChevronDown className="size-3" strokeWidth={2} />
     </div>
   );
   return (
     <CustomMenu
-      customButton={
-        <>
-          <div className="hidden xl:flex">{largeButton}</div>
-          <div className="flex xl:hidden">{smallButton}</div>
-        </>
-      }
+      customButton={windowSize[0] > 1280 ? largeButton : smallButton}
       placement="bottom-end"
       maxHeight="lg"
       closeOnSelect
@@ -49,7 +50,7 @@ export const InboxIssueOrderByDropdown: FC = observer(() => {
           onClick={() => handleInboxIssueSorting("order_by", option.key)}
         >
           {option.label}
-          {inboxSorting?.order_by?.includes(option.key) && <Check className="h-3 w-3" />}
+          {inboxSorting?.order_by?.includes(option.key) && <Check className="size-3" />}
         </CustomMenu.MenuItem>
       ))}
       <hr className="my-2 border-custom-border-200" />
@@ -60,7 +61,7 @@ export const InboxIssueOrderByDropdown: FC = observer(() => {
           onClick={() => handleInboxIssueSorting("sort_by", option.key)}
         >
           {option.label}
-          {inboxSorting?.sort_by?.includes(option.key) && <Check className="h-3 w-3" />}
+          {inboxSorting?.sort_by?.includes(option.key) && <Check className="size-3" />}
         </CustomMenu.MenuItem>
       ))}
     </CustomMenu>
diff --git a/web/core/constants/inbox.tsx b/web/core/constants/inbox.tsx
index 4a88b56cf7..fb0f4ec636 100644
--- a/web/core/constants/inbox.tsx
+++ b/web/core/constants/inbox.tsx
@@ -67,11 +67,11 @@ export const INBOX_ISSUE_SOURCE = "in-app";
 export const INBOX_ISSUE_ORDER_BY_OPTIONS: { key: TInboxIssueSortingOrderByKeys; label: string }[] = [
   {
     key: "issue__created_at",
-    label: "Date created",
+    label: "Created at",
   },
   {
     key: "issue__updated_at",
-    label: "Date updated",
+    label: "Updated at",
   },
   {
     key: "issue__sequence_id",