Switched current Sort Button with same used for filters and options o…

…nes (twentyhq#5764) 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: twentyhq#5743 --------- Co-authored-by: Félix Malfait <[email protected]>
arnavsaxena17 · Jun 7, 2024 · b605708 · b605708
1 parent 58c904c
commit b605708
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git 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/...nt/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx b/...nt/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,14 +55,15 @@ export const ObjectSortDropdownButton = ({
     setSelectedSortDirection,
     toggleSortDropdown,
     resetState,
-    isSortSelected,
     availableSortDefinitions,
     handleAddSort,
     objectSortDropdownSearchInputState,
     setObjectSortDropdownSearchInput,
     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={
           <>