From e478c68734ccc15569bd129469752c1d5944334f Mon Sep 17 00:00:00 2001
From: RobertoSimonini1 <roberto.simonini@endor.studio>
Date: Fri, 7 Jun 2024 11:23:33 +0200
Subject: [PATCH] Switched current Sort Button with same used for filters and
 options ones (#5764)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I changed the Sort button used in the Header using
StyledHeaderDropdownButton component (the same used for Filter and
Options') instead of LightButton.
This PR aims to fix the issue: #5743

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
---
 .gitignore                                        |  1 +
 .../components/ObjectSortDropdownButton.tsx       | 15 +++++++++------
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/.gitignore b/.gitignore
index 8cd3356e8..376216c45 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
 .DS_Store
 /.idea
 **/**/node_modules/
+.cache
 
 # yarn is the recommended package manager across the project
 **/**/.package-lock.json
diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
index 0dd3ba296..35869601c 100644
--- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
@@ -5,10 +5,11 @@ import { IconChevronDown, useIcons } from 'twenty-ui';
 import { OBJECT_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/constants/ObjectSortDropdownId';
 import { useObjectSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useObjectSortDropdown';
 import { ObjectSortDropdownScope } from '@/object-record/object-sort-dropdown/scopes/ObjectSortDropdownScope';
-import { LightButton } from '@/ui/input/button/components/LightButton';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
@@ -54,7 +55,6 @@ export const ObjectSortDropdownButton = ({
     setSelectedSortDirection,
     toggleSortDropdown,
     resetState,
-    isSortSelected,
     availableSortDefinitions,
     handleAddSort,
     objectSortDropdownSearchInputState,
@@ -62,6 +62,8 @@ export const ObjectSortDropdownButton = ({
     resetSearchInput,
   } = useObjectSortDropdown();
 
+  const { isDropdownOpen } = useDropdown(OBJECT_SORT_DROPDOWN_ID);
+
   const handleButtonClick = () => {
     toggleSortDropdown();
   };
@@ -84,11 +86,12 @@ export const ObjectSortDropdownButton = ({
         dropdownHotkeyScope={hotkeyScope}
         dropdownOffset={{ y: 8 }}
         clickableComponent={
-          <LightButton
-            title="Sort"
-            active={isSortSelected}
+          <StyledHeaderDropdownButton
+            isUnfolded={isDropdownOpen}
             onClick={handleButtonClick}
-          />
+          >
+            Sort
+          </StyledHeaderDropdownButton>
         }
         dropdownComponents={
           <>