From 7cb17314346572687cabe96126a588399aaaf5b7 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 18 Sep 2024 17:02:15 +0530
Subject: [PATCH 1/3] chore: intake order by options updated

---
 web/core/constants/inbox.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/core/constants/inbox.tsx b/web/core/constants/inbox.tsx
index 4a88b56cf7f..fb0f4ec636e 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",

From c5334b03b3acedf2fb9cd0973deeedfbfb54624e Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 18 Sep 2024 17:03:50 +0530
Subject: [PATCH 2/3] fix: intake filters icon and spacing

---
 .../components/inbox/inbox-filter/root.tsx    | 52 +++++++++----------
 .../inbox/inbox-filter/sorting/order-by.tsx   | 27 +++++-----
 2 files changed, 40 insertions(+), 39 deletions(-)

diff --git a/web/core/components/inbox/inbox-filter/root.tsx b/web/core/components/inbox/inbox-filter/root.tsx
index 7aefedd3162..9ad327e0e59 100644
--- a/web/core/components/inbox/inbox-filter/root.tsx
+++ b/web/core/components/inbox/inbox-filter/root.tsx
@@ -5,34 +5,34 @@ 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="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>
+const smallButton = <ListFilter className="size-3 " />;
 
-    <ChevronDown className="h-3 w-3" strokeWidth={2} />
+const largeButton = (
+  <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 = () => (
-  <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>
-    </div>
-    <div>
-      <InboxIssueOrderByDropdown />
+export const FiltersRoot: FC = () => {
+  const windowSize = useSize();
+
+  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>
-);
+  );
+};
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 07fe1b02252..2bcbd431b94 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>

From ac6a07b95b7094140143a831eb04ec48df325e9a Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 18 Sep 2024 17:51:55 +0530
Subject: [PATCH 3/3] chore: code refactor

---
 web/core/components/inbox/inbox-filter/root.tsx             | 6 +-----
 web/core/components/inbox/inbox-filter/sorting/order-by.tsx | 2 +-
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/web/core/components/inbox/inbox-filter/root.tsx b/web/core/components/inbox/inbox-filter/root.tsx
index 9ad327e0e59..04761033106 100644
--- a/web/core/components/inbox/inbox-filter/root.tsx
+++ b/web/core/components/inbox/inbox-filter/root.tsx
@@ -22,11 +22,7 @@ export const FiltersRoot: FC = () => {
   return (
     <div className="relative flex items-center gap-2">
       <div>
-        <FiltersDropdown
-          menuButton={<>{windowSize[0] > 1280 ? largeButton : smallButton}</>}
-          title=""
-          placement="bottom-end"
-        >
+        <FiltersDropdown menuButton={windowSize[0] > 1280 ? largeButton : smallButton} title="" placement="bottom-end">
           <InboxIssueFilterSelection />
         </FiltersDropdown>
       </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 2bcbd431b94..f1282c3c1ad 100644
--- a/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
+++ b/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
@@ -38,7 +38,7 @@ export const InboxIssueOrderByDropdown: FC = observer(() => {
   );
   return (
     <CustomMenu
-      customButton={<>{windowSize[0] > 1280 ? largeButton : smallButton}</>}
+      customButton={windowSize[0] > 1280 ? largeButton : smallButton}
       placement="bottom-end"
       maxHeight="lg"
       closeOnSelect