[WEB-2462] [WEB-2461] fix: project intake filters (#5645)

* chore: intake order by options updated

* fix: intake filters icon and spacing

* chore: code refactor

web/core/components/inbox/inbox-filter/root.tsx

@@ -5,29 +5,24 @@ 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")}>
+  <div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}>
-    <ListFilter className="h-3 " />
+    <ListFilter className="size-3 " />
-    <span className="hidden xl:flex">Filters</span>
+    <span>Filters</span>
-
+    <ChevronDown className="size-3" strokeWidth={2} />
-    <ChevronDown className="h-3 w-3" strokeWidth={2} />
   </div>
 );
-export const FiltersRoot: FC = () => (
+export const FiltersRoot: FC = () => {
+  const windowSize = useSize();
+
+  return (
     <div className="relative flex items-center gap-2">
       <div>
-      <FiltersDropdown
+        <FiltersDropdown menuButton={windowSize[0] > 1280 ? largeButton : smallButton} title="" placement="bottom-end">
-        menuButton={
-          <>
-            <div className="hidden xl:flex">{largeButton}</div>
-            <div className="flex xl:hidden">{smallButton}</div>
-          </>
-        }
-        title=""
-        placement="bottom-end"
-      >
           <InboxIssueFilterSelection />
         </FiltersDropdown>
       </div>
@@ -36,3 +31,4 @@ export const FiltersRoot: FC = () => (
       </div>
     </div>
   );
+};

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" ? (
-  const largeButton = (
+      <ArrowUpWideNarrow className="size-3 " />
-    <div className={cn(getButtonStyling("neutral-primary", "sm"), "text-custom-text-300")}>
-      {inboxSorting?.sort_by === "asc" ? (
-        <ArrowUpWideNarrow className="h-3 " />
     ) : (
-        <ArrowDownWideNarrow className="h-3 " />
+      <ArrowDownWideNarrow className="size-3 " />
+    );
+  const largeButton = (
+    <div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}>
+      {inboxSorting?.sort_by === "asc" ? (
+        <ArrowUpWideNarrow className="size-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={
+      customButton={windowSize[0] > 1280 ? largeButton : smallButton}
-        <>
-          <div className="hidden xl:flex">{largeButton}</div>
-          <div className="flex xl:hidden">{smallButton}</div>
-        </>
-      }
       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>

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",