Fix header dropdown button style (#9599)

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersButton.tsx

@@ -6,7 +6,9 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 export const MultipleFiltersButton = () => {
   const { resetFilterDropdown } = useResetFilterDropdown();
 
-  const { toggleDropdown } = useDropdown(OBJECT_FILTER_DROPDOWN_ID);
+  const { toggleDropdown, isDropdownOpen } = useDropdown(
+    OBJECT_FILTER_DROPDOWN_ID,
+  );
 
   const handleClick = () => {
     toggleDropdown();
@@ -14,7 +16,10 @@ export const MultipleFiltersButton = () => {
   };
 
   return (
-    <StyledHeaderDropdownButton onClick={handleClick}>
+    <StyledHeaderDropdownButton
+      onClick={handleClick}
+      isUnfolded={isDropdownOpen}
+    >
       Filter
     </StyledHeaderDropdownButton>
   );

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdown.tsx

@@ -9,6 +9,7 @@ import { ObjectOptionsContentId } from '@/object-record/object-options-dropdown/
 import { TableOptionsHotkeyScope } from '@/object-record/record-table/types/TableOptionsHotkeyScope';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { ViewType } from '@/views/types/ViewType';
 
 type ObjectOptionsDropdownProps = {
@@ -25,6 +26,8 @@ export const ObjectOptionsDropdown = ({
   const { currentContentId, handleContentChange, handleResetContent } =
     useCurrentContentId<ObjectOptionsContentId>();
 
+  const { isDropdownOpen } = useDropdown(OBJECT_OPTIONS_DROPDOWN_ID);
+
   return (
     <Dropdown
       dropdownId={OBJECT_OPTIONS_DROPDOWN_ID}
@@ -32,7 +35,9 @@ export const ObjectOptionsDropdown = ({
       dropdownMenuWidth={DROPDOWN_WIDTH}
       dropdownOffset={{ y: DROPDOWN_OFFSET_Y }}
       clickableComponent={
-        <StyledHeaderDropdownButton>Options</StyledHeaderDropdownButton>
+        <StyledHeaderDropdownButton isUnfolded={isDropdownOpen}>
+          Options
+        </StyledHeaderDropdownButton>
       }
       onClose={handleResetContent}
       dropdownComponents={

packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx

@@ -19,6 +19,7 @@ import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenu
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@@ -169,13 +170,18 @@ export const ObjectSortDropdownButton = ({
     setIsSortDirectionMenuUnfolded(false);
   };
 
+  const { isDropdownOpen } = useDropdown(OBJECT_SORT_DROPDOWN_ID);
+
   return (
     <Dropdown
       dropdownId={OBJECT_SORT_DROPDOWN_ID}
       dropdownHotkeyScope={hotkeyScope}
       dropdownOffset={{ y: 8 }}
       clickableComponent={
-        <StyledHeaderDropdownButton onClick={handleButtonClick}>
+        <StyledHeaderDropdownButton
+          onClick={handleButtonClick}
+          isUnfolded={isDropdownOpen}
+        >
           Sort
         </StyledHeaderDropdownButton>
       }

packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx

@@ -10,7 +10,7 @@ import { useContext, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { IconChevronDown } from 'twenty-ui';
 
-const StyledCell = styled.div`
+const StyledCell = styled.div<{ isUnfolded: boolean }>`
   align-items: center;
   display: flex;
   flex-direction: row;
@@ -23,6 +23,16 @@ const StyledCell = styled.div`
   min-width: ${({ theme }) => theme.spacing(7)};
   flex-grow: 1;
   width: 100%;
+
+  background: ${({ theme, isUnfolded }) =>
+    isUnfolded ? theme.background.transparent.light : theme.background.primary};
+
+  &:hover {
+    background: ${({ theme, isUnfolded }) =>
+      isUnfolded
+        ? theme.background.transparent.medium
+        : theme.background.transparent.light};
+  }
 `;
 
 const StyledIcon = styled(IconChevronDown)`
@@ -66,7 +76,7 @@ export const RecordTableColumnAggregateFooterValueCell = ({
       }}
       onMouseLeave={() => setIsHovered(false)}
     >
-      <StyledCell>
+      <StyledCell isUnfolded={isDropdownOpen}>
         {isHovered ||
         isDropdownOpen ||
         hasAggregateOperationForViewField ||

packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx

@@ -30,26 +30,6 @@ const StyledDropdownFallbackAnchor = styled.div`
   top: 0;
 `;
 
-type StyledHeaderDivProps = {
-  isUnfolded?: boolean;
-  isActive?: boolean;
-};
-
-const StyledHeaderDiv = styled.div<StyledHeaderDivProps>`
-  & button,
-  & > * {
-    background: ${({ theme, isUnfolded }) =>
-      isUnfolded ? theme.background.transparent.light : 'none'};
-
-    &:hover {
-      background: ${({ theme, isUnfolded }) =>
-        isUnfolded
-          ? theme.background.transparent.medium
-          : theme.background.transparent.light};
-    }
-  }
-`;
-
 type DropdownProps = {
   className?: string;
   clickableComponent?: ReactNode;
@@ -151,17 +131,16 @@ export const Dropdown = ({
       <DropdownScope dropdownScopeId={getScopeIdFromComponentId(dropdownId)}>
         <>
           {isDefined(clickableComponent) ? (
-            <StyledHeaderDiv
+            <div
               ref={refs.setReference}
               onClick={handleClickableComponentClick}
               aria-controls={`${dropdownId}-options`}
               aria-expanded={isDropdownOpen}
               aria-haspopup={true}
               role="button"
-              isUnfolded={isDropdownOpen}
             >
               {clickableComponent}
-            </StyledHeaderDiv>
+            </div>
           ) : (
             <StyledDropdownFallbackAnchor ref={refs.setReference} />
           )}

packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledHeaderDropdownButton.tsx

@@ -20,4 +20,14 @@ export const StyledHeaderDropdownButton = styled.button<StyledDropdownButtonProp
 
   padding-right: ${({ theme }) => theme.spacing(2)};
   user-select: none;
+
+  background: ${({ theme, isUnfolded }) =>
+    isUnfolded ? theme.background.transparent.light : theme.background.primary};
+
+  &:hover {
+    background: ${({ theme, isUnfolded }) =>
+      isUnfolded
+        ? theme.background.transparent.medium
+        : theme.background.transparent.light};
+  }
 `;